@kubex/zinc 1.1.160 → 1.1.162

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

@@ -2,7 +2,7 @@ import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, nothing, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
-import {property, query, state} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import {ref} from "lit/directives/ref.js";
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {Task} from "@lit/task";
@@ -91,6 +91,7 @@ interface Response {
 export enum ActionSlots {
   delete = 'delete-action',
   modify = 'modify-action',
+  actions = 'actions',
   create = 'create-action',
   filter = 'filter',
   filter_top = 'filter-top',
@@ -188,8 +189,9 @@ type AllowedInputElement =
  * @slot sort - Slot for sort component, in the header's right-hand group.
  * @slot filter - Slot for filter component, in the header's right-hand group.
  * @slot filter-top - Slot for a top-level filter component, rendered above the table's panel.
- * @slot delete-action - Slot for delete action button, shown beside the caption once rows are selected.
- * @slot modify-action - Slot for modify action button, shown beside the caption once rows are selected.
+ * @slot delete-action - Slot for delete action button, shown in the header once rows are selected.
+ * @slot modify-action - Slot for modify action button, shown in the header once rows are selected.
+ * @slot actions - `zn-button` or `zn-confirm` elements listed in a header menu, enabled once rows are selected.
  * @slot create-action - Slot for create action button, at the end of the header's right-hand group.
  * @slot inputs - Slot for additional input controls.
  * @slot empty-state - Slot for custom empty state.
@@ -261,9 +263,6 @@ export default class ZnDataTable extends ZincElement {
 
   @property({attribute: "empty-state-icon"}) emptyStateIcon: string = "data_alert";
 
-  // Hide the checkbox column
-  @property({attribute: 'hide-checkboxes', type: Boolean}) hideCheckboxes: boolean;
-
   @property() filters: [] = [];
 
   @property() method: 'GET' | 'POST' = 'POST';
@@ -288,7 +287,6 @@ export default class ZnDataTable extends ZincElement {
   @property() groups = '';
 
   @property({attribute: 'per-page-size', type: Number}) itemsPerPage: number = DEFAULT_PER_PAGE;
-  @query('#select-all-rows') selectAllButton: ZnButton;
 
   // Data Table Properties
   private _initialLoad = true;
@@ -329,6 +327,7 @@ export default class ZnDataTable extends ZincElement {
     ActionSlots.search.valueOf(),
     ActionSlots.delete.valueOf(),
     ActionSlots.modify.valueOf(),
+    ActionSlots.actions.valueOf(),
     ActionSlots.create.valueOf(),
     ActionSlots.filter.valueOf(),
     ActionSlots.sort.valueOf(),
@@ -673,8 +672,7 @@ export default class ZnDataTable extends ZincElement {
             return html`
               <div>${this.loadingTable()}</div>`;
           }
-          return html`
-            <div class="reduced-opacity">${this._lastTableContent}</div>`;
+          return this.tableContent(this._lastTableContent, true);
         },
         complete: (data) => {
           this._initialLoad = false;
@@ -683,7 +681,7 @@ export default class ZnDataTable extends ZincElement {
           emptyBody = !this._lastLoadHadRows;
           this._lastTableContent = html`
             <div>${this.renderTable(data as Response)}</div>`;
-          return this._lastTableContent;
+          return this.tableContent(this._lastTableContent, false);
         },
         error: (error) => {
           if (error instanceof Error) {
@@ -719,6 +717,7 @@ export default class ZnDataTable extends ZincElement {
 
     const hasActions = this.hasSlotController.test(ActionSlots.delete.valueOf())
       || this.hasSlotController.test(ActionSlots.modify.valueOf())
+      || this.hasSlotController.test(ActionSlots.actions.valueOf())
       || this.hasSlotController.test(ActionSlots.create.valueOf())
       || this.hasSlotController.test(ActionSlots.sort.valueOf())
       || this.hasSlotController.test(ActionSlots.search.valueOf());
@@ -902,11 +901,14 @@ export default class ZnDataTable extends ZincElement {
     const error = data?.error?.text ? data.error : undefined;
 
     if (!data?.rows || data.rows.length === 0) {
+      this._rows = [];
+      this.pruneSelectedRows();
       return html`${error ? html`
         <div class="table__error">${this.renderErrorAlert(error)}</div>` : nothing}${this.emptyState()}`;
     }
 
     this._rows = this.getRows(data);
+    this.pruneSelectedRows();
 
     if (this.groupBy) {
       // we need to group the rows by the group column
@@ -1029,16 +1031,18 @@ export default class ZnDataTable extends ZincElement {
     });
 
     const anyHidden = this.hasHiddenColumns();
-    const colCount = filteredHeaders.length + (this.rowHasActions ? 1 : 0) + (anyHidden ? 1 : 0);
+    const showCheckboxes = this.isSelectable();
+    const colCount = filteredHeaders.length + (this.rowHasActions ? 1 : 0) + (anyHidden ? 1 : 0) + (showCheckboxes ? 1 : 0);
 
     return html`
       <div class="table__scroll">
         <table class="${classMap({
           'table': true,
-          'with-hover': !this.unsortable && !this.hideCheckboxes,
+          'with-hover': !this.unsortable && this.isSelectable(),
         })}">
           <thead>
           <tr>
+            ${showCheckboxes ? this.renderSelectAllCheckbox() : nothing}
             ${anyHidden ? html`
               <th class="table__head table__head--expander"></th>` : nothing}
             ${filteredHeaders.map((header: HeaderConfig) => this.renderCellHeader(header))}
@@ -1057,10 +1061,8 @@ export default class ZnDataTable extends ZincElement {
                 <th colspan="${colCount}" scope="colgroup">${group.label}</th>
               </tr>` : nothing}
             ${group.rows.map((row: Row) => html`
-              <tr class="${classMap({
-                'table__row--selected': this.isRowSelected(row),
-                'table__row--data': true,
-              })}" data-row-id="${row.id}">
+              <tr class="table__row--data" data-row-id="${row.id}">
+                ${showCheckboxes ? this.renderRowCheckbox(row) : nothing}
                 ${anyHidden ? this.renderExpanderCell(row) : nothing}
                 ${(visibleRowCells.get(row.id) || row.cells).map((value: Cell, index: number) => this.renderCellBody(index, value, row))}
                 ${this.rowHasActions ? this.renderActions(row) : nothing}
@@ -1074,15 +1076,21 @@ export default class ZnDataTable extends ZincElement {
     `;
   }
 
+  // Pending and loaded states share this template so Lit keeps the table's DOM (and focus) across loads
+  private tableContent(content: TemplateResult, pending: boolean) {
+    return html`
+      <div class="${classMap({'reduced-opacity': pending})}">${content}</div>`;
+  }
+
   getTableHeader() {
     return html`
       <div class="table__header">
         <div class="table__header__actions">
           ${this.caption ? html`
             <h3 class="table__header__caption">${this.caption}</h3>` : nothing}
-          ${this.getActions()}
         </div>
         <div class="table__header__right">
+          ${this.getActions()}
           ${this.getHeaderControls()}
         </div>
       </div>
@@ -1302,37 +1310,7 @@ export default class ZnDataTable extends ZincElement {
   getActions() {
     const actions = [];
 
-    // Select-all only earns its place alongside the bulk actions it feeds
-    const hasBulkActions = this.hasSlotController.test(ActionSlots.delete.valueOf())
-      || this.hasSlotController.test(ActionSlots.modify.valueOf());
-
-    if (!hasBulkActions) {
-      return [];
-    }
-
-    if (!this.hideCheckboxes && this._rows.length > 0) {
-      actions.push(html`
-        <zn-button @click="${this.selectAll}"
-                   id="select-all-rows"
-                   color="transparent"
-                   icon="indeterminate_check_box"
-                   icon-size="22"
-                   icon-color="primary"
-                   tooltip="Select All"
-                   slot="trigger">
-        </zn-button>`);
-    }
-
     if (this.selectedRows.length > 0) {
-      actions.push(html`
-        <zn-button @click="${this.clearSelectedRows}"
-                   color="transparent"
-                   icon="disabled_by_default"
-                   icon-size="22"
-                   tooltip="Clear Selection"
-                   slot="trigger">
-        </zn-button>`);
-
       if (this.hasSlotController.test(ActionSlots.delete.valueOf())) {
         actions.push(html`
           <slot name="${ActionSlots.delete.valueOf()}"></slot>`);
@@ -1344,9 +1322,72 @@ export default class ZnDataTable extends ZincElement {
       }
     }
 
+    if (this.hasSlotController.test(ActionSlots.actions.valueOf())) {
+      actions.push(this.getActionsMenu());
+    }
+
     return actions;
   }
 
+  private getActionsMenu() {
+    const items = [...this.hasSlotController.getSlots(ActionSlots.actions.valueOf())];
+    const disabled = this.selectedRows.length === 0;
+
+    return html`
+      <zn-dropdown placement="bottom-end" ?disabled="${disabled}">
+        <zn-button slot="trigger"
+                   icon-button="small"
+                   icon="ellipsis@lu"
+                   icon-size="18"
+                   tooltip="Actions"
+                   aria-label="Selection actions"
+                   ?disabled="${disabled}">
+        </zn-button>
+        <zn-menu variant="shell">
+          ${items.map((item: HTMLElement) => {
+            const trigger = this.actionTrigger(item);
+            const icon = trigger?.getAttribute('icon') || item.getAttribute('icon');
+            return html`
+              <zn-menu-item color="${ifDefined(trigger?.getAttribute('color') || undefined)}"
+                            ?disabled="${trigger?.hasAttribute('disabled') ?? false}"
+                            @click="${() => this.runAction(item)}">
+                ${icon ? html`
+                  <zn-icon src="${icon}" size="20" slot="prefix"></zn-icon>` : nothing}
+                ${this.actionLabel(item, trigger)}
+              </zn-menu-item>`;
+          })}
+        </zn-menu>
+      </zn-dropdown>
+      <div class="table__actions-source">
+        <slot name="${ActionSlots.actions.valueOf()}"></slot>
+      </div>`;
+  }
+
+  private actionTrigger(item: HTMLElement): HTMLElement | null {
+    if (item instanceof ZnConfirm) {
+      return item.querySelector<HTMLElement>(':scope > [slot="trigger"]');
+    }
+    return item;
+  }
+
+  private actionLabel(item: HTMLElement, trigger: HTMLElement | null): string {
+    return trigger?.textContent?.trim()
+      || trigger?.getAttribute('content')
+      || trigger?.getAttribute('tooltip')
+      || item.getAttribute('caption')
+      || '';
+  }
+
+  private runAction(item: HTMLElement) {
+    if (item instanceof ZnConfirm) {
+      item.show();
+      return;
+    }
+    // ZnButton.click() skips the native click, so listeners and href would never fire
+    const target = item instanceof ZnButton ? item.button : item;
+    target?.click();
+  }
+
   goToPage(page: number) {
     this.page = page;
     this.selectedRows = [];
@@ -1380,12 +1421,12 @@ export default class ZnDataTable extends ZincElement {
     this._dataTask.run().then(r => r);
   }
 
-  selectAll(event: Event) {
-    const button = event.target as ZnButton;
-    if (button.disabled) return;
+  /** Selects every row on the page, or clears the selection when every row is already selected. */
+  selectAll() {
+    if (!this.isSelectable()) return;
 
     if (this.numberOfRowsSelected === this._rows.length) {
-      this.clearSelectedRows(event);
+      this.clearSelectedRows();
       return;
     }
 
@@ -1396,7 +1437,7 @@ export default class ZnDataTable extends ZincElement {
   }
 
   selectRow(e: Event) {
-    if (this.hideCheckboxes) {
+    if (!this.isSelectable()) {
       return;
     }
 
@@ -1420,13 +1461,14 @@ export default class ZnDataTable extends ZincElement {
       return;
     }
 
-    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr.table__row--data'));
-    const index = rows.indexOf(parent as HTMLTableRowElement);
-    if (index === -1) return;
-
-    const row = this._rows[index] as Row;
+    const rowId = (parent as HTMLElement).dataset.rowId;
+    const row = this._rows.find((r: Row) => r.id === rowId);
     if (!row) return;
 
+    this.toggleRowSelection(row);
+  }
+
+  private toggleRowSelection(row: Row) {
     const alreadySelected = this.selectedRows.some((r: Row) => r.id === row.id);
     if (alreadySelected) {
       this.selectedRows = this.selectedRows.filter((r: Row) => r.id !== row.id);
@@ -1439,10 +1481,7 @@ export default class ZnDataTable extends ZincElement {
     this.requestUpdate();
   }
 
-  clearSelectedRows(event: Event) {
-    const button = event.target as ZnButton;
-    if (button.disabled) return;
-
+  clearSelectedRows() {
     this.selectedRows = [];
     this.numberOfRowsSelected = 0;
     this.updateKeys();
@@ -1642,7 +1681,10 @@ export default class ZnDataTable extends ZincElement {
           'table__head--last': header.key === lastVisibleHeaderKey,
           'table__head--hidden': Object.values(this.hiddenHeaders).includes(header.key),
         })}"
-        @click="${sortable ? this.updateSort(header.key) : undefined}">
+        tabindex="${ifDefined(sortable ? '0' : undefined)}"
+        aria-sort="${ifDefined(sortable ? this.sortState(header.key) : undefined)}"
+        @click="${sortable ? this.updateSort(header.key) : undefined}"
+        @keydown="${sortable ? (e: KeyboardEvent) => this.handleSortKeyDown(e, header.key) : undefined}">
         <div>
           ${header.label}
           ${sortable ? this.getTableSortIcon(header.key) : nothing}
@@ -1651,6 +1693,17 @@ export default class ZnDataTable extends ZincElement {
     `;
   }
 
+  private sortState(key: string): 'ascending' | 'descending' | 'none' {
+    if (this.sortColumn !== key) return 'none';
+    return this.sortDirection === 'asc' ? 'ascending' : 'descending';
+  }
+
+  private handleSortKeyDown(e: KeyboardEvent, key: string) {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    this.updateSort(key)();
+  }
+
   private renderCellBody(index: number, value: Cell, row: Row) {
     const filteredHeaders = this.visibleHeaders();
     const header: HeaderConfig | undefined = filteredHeaders[index];
@@ -1658,7 +1711,7 @@ export default class ZnDataTable extends ZincElement {
 
     return html`
       <td
-        @click="${this.hideCheckboxes ? undefined : this.selectRow}"
+        @click="${this.isSelectable() ? this.selectRow : undefined}"
         class="${classMap({
           'table__cell': true,
           'table__cell--wide': headerKey === this.wideColumn,
@@ -1731,6 +1784,60 @@ export default class ZnDataTable extends ZincElement {
     return this.selectedRows.some((r: Row) => r.id === row.id);
   }
 
+  // Drop selections for rows no longer in the result set (filtered out, archived, paged away)
+  // and swap survivors for the fresh row objects so selected keys reflect current cell data.
+  private pruneSelectedRows() {
+    if (this.selectedRows.length === 0) return;
+
+    const current = new Map(this._rows.map((row: Row) => [row.id, row]));
+    const kept = this.selectedRows
+      .map((row: Row) => current.get(row.id))
+      .filter((row): row is Row => row !== undefined);
+
+    const changed = kept.length !== this.selectedRows.length;
+    this.selectedRows = kept;
+    this.numberOfRowsSelected = kept.length;
+    if (changed) this.updateKeys();
+  }
+
+  private isSelectable(): boolean {
+    return [ActionSlots.delete, ActionSlots.modify, ActionSlots.actions, ActionSlots.create]
+      .some(slot => this.hasSlotController.test(slot.valueOf()));
+  }
+
+  private renderSelectAllCheckbox() {
+    const allSelected = this.numberOfRowsSelected === this._rows.length;
+    const someSelected = this.numberOfRowsSelected > 0 && !allSelected;
+    return html`
+      <th class="table__head table__head--checkbox">
+        <div>
+          <zn-checkbox aria-label="Select all rows"
+                       .checked="${allSelected}"
+                       .indeterminate="${someSelected}"
+                       @zn-change="${() => this.selectAll()}">
+          </zn-checkbox>
+        </div>
+      </th>`;
+  }
+
+  private renderRowCheckbox(row: Row) {
+    return html`
+      <td class="table__cell table__cell--checkbox" @click="${(e: Event) => this.handleCheckboxCellClick(e, row)}">
+        <div>
+          <zn-checkbox aria-label="Select row"
+                       .checked="${this.isRowSelected(row)}"
+                       @zn-change="${() => this.toggleRowSelection(row)}">
+          </zn-checkbox>
+        </div>
+      </td>`;
+  }
+
+  // A click on the checkbox itself arrives twice (label, then input), so leave it to zn-change
+  private handleCheckboxCellClick(e: Event, row: Row) {
+    if ((e.target as Element).closest('zn-checkbox')) return;
+    this.toggleRowSelection(row);
+  }
+
   private getRows(data: Response): Row[] {
     // Copy rows to avoid mutating original data
     const sourceRows = Array.isArray(data.rows) ? data.rows.slice() : [];
@@ -1761,21 +1868,9 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private updateKeys() {
-    this.updateSelectAll();
     this.updateModifyKeys();
     this.updateDeleteKeys();
-  }
-
-  private updateSelectAll() {
-    if (!this.selectAllButton) {
-      return;
-    }
-
-    if (this.numberOfRowsSelected === this._rows.length) {
-      this.selectAllButton.icon = 'check_box';
-    } else {
-      this.selectAllButton.icon = 'indeterminate_check_box';
-    }
+    this.updateActionKeys(ActionSlots.actions.valueOf());
   }
 
   private updateModifyKeys() {

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

@@ -44,7 +44,7 @@ table {
     border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
   }
 
-  &.with-hover tbody tr.table__row--data:not(.table__row--selected):hover td {
+  &.with-hover tbody tr.table__row--data:hover td {
     background-color: rgba(var(--zn-primary), 0.05) !important;
     cursor: pointer;
   }
@@ -414,68 +414,24 @@ zn-menu::part(base) {
   background-color: rgb(var(--zn-panel, 255, 255, 255));
 }
 
-/* Table Select Styles */
-table tbody tr.table__row--selected {
-  background-color: var(--zn-color-purple-100);
-
-  &:hover {
-    background-color: var(--zn-color-purple-200) !important;
-  }
-
-  td {
-    border-top: 1px solid var(--zn-color-purple-600) !important;
-    border-bottom: 1px solid var(--zn-color-purple-600) !important;
-  }
-
-  td:first-of-type {
-    border-left: 1px solid var(--zn-color-purple-600);
-  }
-
-  td:last-of-type {
-    border-right: 1px solid var(--zn-color-purple-600);
-  }
-
-  &:last-of-type td:first-of-type {
-    border-bottom-left-radius: var(--zn-border-radius);
-  }
-
-  &:last-of-type td:last-of-type {
-    border-bottom-right-radius: var(--zn-border-radius);
-  }
-
-  & + tr.table__row--selected td {
-    border-top: 0 !important;
-
-    &:first-of-type {
-      border-top-left-radius: 0;
-    }
-
-    &:last-of-type {
-      border-top-right-radius: 0;
-    }
-  }
-
-  &:has(+ tr.table__row--selected) td {
-    border-bottom: 0 !important;
-  }
-
-  &:first-of-type td {
-    border-top: 0 !important;
-  }
-
-  &:has(+ tr.table__row--selected) {
-    td:first-of-type {
-      border-bottom-left-radius: 0;
-    }
+.table tr .table__head[tabindex]:focus-visible {
+  outline: var(--zn-focus-ring);
+  outline-offset: calc(-1 * var(--zn-focus-ring-width));
+}
 
-    td:last-of-type {
-      border-bottom-right-radius: 0;
-    }
-  }
+.table tr .table__head--checkbox,
+.table tr .table__cell--checkbox {
+  width: 1px;
+  min-width: 0;
+  padding-right: 0;
 }
 
-table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
-  border-bottom-color: var(--zn-color-purple-600) !important;
+// Visually hidden rather than display: none, which would stop a slotted zn-confirm's dialog rendering
+.table__actions-source {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
 }
 
 tbody tr.table__row--group th {

package/src/components/dropdown/dropdown.component.ts

@@ -182,7 +182,7 @@ export default class ZnDropdown extends ZincElement {
   }
 
   private async handleTriggerKeyDown(event: KeyboardEvent) {
-    if ([' ', 'Enter', 'Tab'].includes(event.key)) {
+    if ([' ', 'Enter'].includes(event.key)) {
       event.preventDefault();
       await this.handleTriggerClick();
       return;
@@ -252,9 +252,12 @@ export default class ZnDropdown extends ZincElement {
 
     if (event.key === 'Tab') {
       if (this.open) {
-        event.preventDefault();
         this.hide().then(r => r);
-        this.focusOnTrigger();
+        // Tabbing out of the menu resumes from the trigger; from the trigger, Tab moves on as usual
+        if (this.panel?.assignedElements({flatten: true}).some(el => el.matches(':focus-within'))) {
+          event.preventDefault();
+          this.focusOnTrigger();
+        }
         return;
       }
 

package/src/components/flow-builder/modules/flow-node/flow-node.test.ts

@@ -19,7 +19,7 @@ describe('<zn-flow-node>', () => {
     expect(el).to.exist;
   });
 
-  it('should render the type label and one port per output', async () => {
+  it('should render the type label and a single output stem', async () => {
     const el = await fixture<ZnFlowNode>(html`
       <zn-flow-node></zn-flow-node>`);
     el.node = node;
@@ -27,8 +27,7 @@ describe('<zn-flow-node>', () => {
     await el.updateComplete;
 
     expect(el.shadowRoot?.querySelector('.title')?.textContent).to.contain('Conditional Split');
-    expect(el.shadowRoot?.querySelectorAll('.port--out')?.length).to.equal(2);
-    expect(el.shadowRoot?.querySelector('.port-label')?.textContent).to.contain('TRUE');
+    expect(el.shadowRoot?.querySelectorAll('.port--out')?.length).to.equal(1);
   });
 
   it('should emit flow-node-grab when the card body is pressed', async () => {

package/src/components/flow-builder/modules/flow-step-group/flow-step-group.test.ts

@@ -1,20 +1,26 @@
 import '../../../../../dist/zn.min.js';
 import {expect, fixture, html} from '@open-wc/testing';
+import type ZnCollapsible from '../../../collapsible/collapsible.component';
 import type ZnFlowStepGroup from './flow-step-group.component';
 
+async function collapsibleOf(el: ZnFlowStepGroup): Promise<ZnCollapsible> {
+  const collapsible = el.shadowRoot!.querySelector<ZnCollapsible>('zn-collapsible')!;
+  await collapsible.updateComplete;
+  return collapsible;
+}
+
 describe('<zn-flow-step-group>', () => {
-  it('should render a component with its caption', async () => {
+  it('should render a collapsible with its caption', async () => {
     const el = await fixture<ZnFlowStepGroup>(html`
       <zn-flow-step-group caption="Contacts"></zn-flow-step-group>`);
-    expect(el.shadowRoot?.querySelector('.header')?.textContent).to.contain('Contacts');
+    const collapsible = await collapsibleOf(el);
+    expect(collapsible.caption).to.equal('Contacts');
+    expect(collapsible.expanded).to.equal(true);
   });
 
-  it('should toggle collapsed when the header is clicked', async () => {
+  it('should start closed when collapsed', async () => {
     const el = await fixture<ZnFlowStepGroup>(html`
-      <zn-flow-step-group caption="Contacts"></zn-flow-step-group>`);
-    const header = el.shadowRoot?.querySelector('.header') as HTMLElement;
-    header.click();
-    await el.updateComplete;
-    expect(el.collapsed).to.equal(true);
+      <zn-flow-step-group caption="Contacts" collapsed></zn-flow-step-group>`);
+    expect((await collapsibleOf(el)).expanded).to.equal(false);
   });
 });

package/src/components/form-actions/form-actions.test.ts

@@ -5,6 +5,9 @@ import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 const clickButton = (button: HTMLElement) =>
   button.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, cancelable: true }));
 
+// The test harness loads no theme stylesheet, so a layout test stamps on the spacing token a themed page provides.
+const spacingTokens = '--zn-spacing-small: 16px;';
+
 describe('<zn-form-actions>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-form-actions></zn-form-actions> `);
@@ -24,7 +27,7 @@ describe('<zn-form-actions>', () => {
 
   it('holds align="start" children left and the rest right, one gap apart on each side', async () => {
     const el = await fixture<HTMLElement>(html`
-      <zn-form-actions with-cancel style="width: 600px">
+      <zn-form-actions with-cancel style="width: 600px; ${spacingTokens}">
         <zn-button align="start" id="translate">Translate</zn-button>
         <zn-button align="start" id="slug">Slug</zn-button>
       </zn-form-actions>