@kubex/zinc 2.0.1 → 2.0.3

package/package.json

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

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

@@ -12,8 +12,8 @@ import ZnDropdown from "../dropdown";
 import ZnIcon from "../icon";
 import ZnTooltip from "../tooltip";
 import type {IconColor, IconLibrary} from "../icon";
-import type ZnMenu from "../menu";
 import type {ZincFormControl} from '../../internal/zinc-element';
+import type ZnMenu from "../menu";
 
 import sharedStyles from '../../../scss/shared/index.scss';
 import styles from './button.scss';
@@ -641,7 +641,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--icon-button-small': this.iconButton === 'small',
           'button--icon-button-round': this.iconButton === 'round',
           'button--grow': this.grow,
-          'button--standard': !this.outline && !this.text,
+          'button--standard': !this.outline && (!this.text || this.solid),
           'button--with-icon': this.icon,
           'button--icon-left': this.iconPosition === 'left',
           'button--icon-right': this.iconPosition === 'right',

package/src/components/button/button.test.ts

@@ -66,6 +66,13 @@ describe('<zn-button>', () => {
     expect(base.classList.contains('button--large')).to.be.true;
   });
 
+  it('keeps the filled style when solid overrides text', async () => {
+    const el = await fixture<ZnButton>(html`<zn-button text solid color="primary">Create</zn-button>`);
+    const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+    expect(base.classList.contains('button--standard')).to.be.true;
+    expect(base.classList.contains('button--text')).to.be.false;
+  });
+
   it('applies the ai color', async () => {
     const el = await fixture<ZnButton>(html`<zn-button color="ai">Summarise</zn-button>`);
     const base = el.shadowRoot!.querySelector('[part~="base"]')!;

package/src/components/chart/chart.component.ts

@@ -16,8 +16,8 @@ import {
   type RadarIndicator,
   type SeriesItem,
 } from './builders';
-import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import { type EChartsModule, loadECharts } from './echarts-loader';
 import { LiveTransport, LiveWindow } from './live';
 import { property, state } from 'lit/decorators.js';

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

@@ -4,10 +4,11 @@ import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, state} from 'lit/decorators.js';
 import {ref} from "lit/directives/ref.js";
-import {styleMap} from "lit/directives/style-map.js";
 import {renderSortIcon, sortKeyHandler} from "../../internal/table-sort";
 import {ReorderController} from "../../internal/reorder";
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {slideTabIndicator, squishTabIndicator} from "../../internal/tab-indicator";
+import {styleMap} from "lit/directives/style-map.js";
 import {type TableTab, TabRowController} from "../../internal/table-tabs";
 import {Task} from "@lit/task";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
@@ -24,18 +25,18 @@ import ZnDataTableSearch from "../data-table-search";
 import ZnDropdown from "../dropdown";
 import ZnEmptyState from "../empty-state";
 import ZnHoverContainer from "../hover-container";
+import ZnIcon from "../icon";
+import ZnInput from "../input";
 import ZnMenu from "../menu";
 import ZnMenuItem from "../menu-item";
+import ZnOptGroup from "../opt-group";
+import ZnOption from "../option";
 import ZnPanel from "../panel";
+import ZnSelect from "../select";
 import ZnSkeleton from "../skeleton";
 import ZnStyle from "../style";
 import type ZnDataSelect from "../data-select";
-import ZnIcon from "../icon";
-import ZnInput from "../input";
-import ZnOptGroup from "../opt-group";
-import ZnOption from "../option";
 import type ZnQueryBuilder from "../query-builder";
-import ZnSelect from "../select";
 
 // Tables load in such a way that the global sheet has to be re-applied inside the shadow root.
 import bootStyles from '../../../scss/boot.scss';
@@ -920,6 +921,34 @@ export default class ZnDataTable extends ZincElement {
   protected updated(changed: PropertyValues) {
     super.updated(changed);
     this.publishFilterSuggestions();
+    void this.syncPageIndicator();
+  }
+
+  // Slides the shared active-page pill to the current page the way navbar pill tabs do
+  private async syncPageIndicator() {
+    const indicator = this.shadowRoot?.querySelector<HTMLElement>('.table__footer__indicator');
+    const active = indicator?.parentElement?.querySelector<ZnButton>('.table__footer__page--active');
+    if (!indicator || !active) return;
+
+    // The button has no size until it has rendered
+    await active.updateComplete;
+    if (!active.isConnected || !active.classList.contains('table__footer__page--active')) return;
+
+    const origin = indicator.parentElement!.getBoundingClientRect().left;
+    const tab = active.getBoundingClientRect();
+    const target = {left: tab.left - origin, right: tab.right - origin};
+    const left = `${target.left}px`; const width = `${target.right - target.left}px`;
+    if (indicator.style.left === left && indicator.style.width === width) return;
+
+    // A freshly rendered indicator has no width yet and jumps straight into place
+    const placed = indicator.style.width !== '';
+    const drawn = indicator.getBoundingClientRect();
+    indicator.style.left = left;
+    indicator.style.width = width;
+    if (placed) {
+      squishTabIndicator(indicator);
+      slideTabIndicator(indicator, {left: drawn.left - origin, right: drawn.right - origin}, target);
+    }
   }
 
   // The filter bar can't see the data, so hand it the values already on screen to type against
@@ -1459,28 +1488,26 @@ export default class ZnDataTable extends ZincElement {
       </div>`;
   }
 
-  // A window of PAGE_WINDOW pages around the current one, plus the first and last pages;
-  // null marks a gap, except a gap of one page, which shows that page instead
+  // A window of PAGE_WINDOW pages around the current one, plus the first and last pages; null marks a gap.
+  // Always PAGE_WINDOW + 4 slots once there are that many pages, so the prev/next buttons never move.
   private getPageRange(): (number | null)[] {
-    const size = Math.min(PAGE_WINDOW, this.totalPages);
-    const start = Math.min(
-      Math.max(1, this.page - Math.floor(size / 2)),
-      this.totalPages - size + 1
-    );
-    const pages = [...new Set([1, ...Array.from({length: size}, (_, i) => start + i), this.totalPages])];
-
-    return pages.flatMap((p, i) => {
-      const gap = i > 0 ? p - pages[i - 1] : 1;
-      if (gap === 2) return [p - 1, p];
-      return gap > 2 ? [null, p] : [p];
-    });
+    const n = this.totalPages;
+    const slots = PAGE_WINDOW + 4;
+    const range = (from: number, count: number) => Array.from({length: count}, (_, i) => from + i);
+    if (n <= slots) return range(1, n);
+
+    const half = Math.floor(PAGE_WINDOW / 2);
+    if (this.page - half <= 3) return [...range(1, slots - 2), null, n];
+    if (this.page + half >= n - 2) return [1, null, ...range(n - slots + 3, slots - 2)];
+    return [1, null, ...range(this.page - half, PAGE_WINDOW), null, n];
   }
 
   getPagination() {
     if (this.hidePagination || this.totalPages <= 1) return null;
 
     return html`
-      <div class="table__footer__pages">
+      <div class="table__footer__pages" style="--page-digits: ${String(this.totalPages).length}">
+        <span class="table__footer__indicator"></span>
         <zn-button class="table__footer__page"
                    color="transparent"
                    size="small"

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

@@ -311,7 +311,9 @@ table {
       padding: 0;
     }
 
+    // Equal shares either side keep the page buttons centred however wide the range label gets
     &__left, &__rows-per-page {
+      flex: 1 1 0;
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -320,14 +322,33 @@ table {
     }
 
     &__pages {
+      // Every slot sized for the widest page number, so buttons don't resize as the window slides
+      --page-slot: max(var(--zn-button-height-small, 28px), calc(var(--page-digits, 1) * 1ch + 12px));
+
+      position: relative;
+      isolation: isolate;
       display: flex;
       align-items: center;
       gap: 2px;
       margin-inline: auto;
     }
 
+    // Placed by left and width, slid with transform only
+    &__indicator {
+      @include wc.pill-tab-indicator-motion;
+
+      position: absolute;
+      inset-block: 0;
+      left: 0;
+      z-index: -1;
+      transform-origin: left center;
+      border-radius: var(--zn-border-radius);
+      background-color: var(--zn-table-page-active-background, var(--zn-color-neutral-300));
+      pointer-events: none;
+    }
+
     &__rows-per-page {
-      margin-inline-start: auto;
+      justify-content: flex-end;
 
       zn-select[name="rowPerPage"] {
         --zn-input-background-color: rgb(var(--zn-panel));
@@ -346,13 +367,10 @@ table {
       }
     }
 
-    &__pages + &__rows-per-page {
-      margin-inline-start: 0;
-    }
-
     &__page::part(base) {
-      min-width: var(--zn-button-height-small, 28px);
+      min-width: var(--page-slot);
       padding: 0 5px;
+      font-variant-numeric: tabular-nums;
       justify-content: center;
       color: rgb(var(--zn-color-muted-text, var(--zn-text)));
       font-size: 12px;
@@ -360,14 +378,14 @@ table {
     }
 
     &__page--active::part(base) {
-      background-color: var(--zn-table-page-active-background, var(--zn-color-neutral-300));
+      background-color: transparent;
       color: var(--zn-table-page-active-color, rgb(var(--zn-text)));
     }
 
     &__gap {
       display: inline-flex;
       justify-content: center;
-      min-width: var(--zn-button-height-small, 28px);
+      min-width: var(--page-slot);
       font-weight: var(--zn-font-weight-semibold, 600);
     }
   }

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

@@ -1,9 +1,17 @@
 import '../../../dist/zn.min.js';
+import { centre, dragTo, drop, startDrag } from '../../internal/test-drag';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { centre, drop, dragTo, startDrag } from '../../internal/test-drag';
 import { render } from 'lit';
 import type ZnDataTable from './data-table.component';
 
+// WebKit reports a benign "ResizeObserver loop" error when paging re-lays out the footer's zn-select
+window.addEventListener('error', (e: ErrorEvent) => {
+  if (typeof e.message === 'string' && e.message.includes('ResizeObserver loop')) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}, true);
+
 describe('<zn-data-table>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-data-table></zn-data-table> `);
@@ -67,6 +75,51 @@ describe('<zn-data-table>', () => {
     }
   });
 
+  it('renders the same number of page slots on every page', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = (_url, init) => {
+      const {page} = JSON.parse(String(init!.body)) as {page: number};
+      return Promise.resolve(new Response(JSON.stringify({
+        rows: [{id: '1', cells: [{text: 'Row', column: 'name'}]}],
+        page,
+        perPage: 10,
+        total: 1234,
+      }), {status: 200, headers: {'Content-Type': 'application/json'}}));
+    };
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" method="POST" headers='{"name": {"key": "name", "label": "Name"}}'></zn-data-table>`);
+      const slots = () => [...el.shadowRoot!.querySelectorAll('.table__footer__page, .table__footer__gap')]
+        .slice(1, -1).map(s => s.textContent!.trim()).join(',');
+
+      const seen: Record<number, string> = {};
+      for (const page of [1, 4, 5, 60, 120, 121, 124]) {
+        (el as unknown as {goToPage: (p: number) => void}).goToPage(page);
+        await waitUntil(() => el.shadowRoot!.querySelector('[aria-current="page"]')?.textContent?.trim() === String(page));
+        seen[page] = slots();
+      }
+
+      expect(seen).to.deep.equal({
+        1: '1,2,3,4,5,…,124',
+        4: '1,2,3,4,5,…,124',
+        5: '1,…,4,5,6,…,124',
+        60: '1,…,59,60,61,…,124',
+        120: '1,…,119,120,121,…,124',
+        121: '1,…,120,121,122,123,124',
+        124: '1,…,120,121,122,123,124',
+      });
+
+      const indicator = el.shadowRoot!.querySelector<HTMLElement>('.table__footer__indicator')!;
+      const active = el.shadowRoot!.querySelector<HTMLElement>('.table__footer__page--active')!;
+      await waitUntil(() => indicator.getAnimations().length === 0);
+      expect(Math.round(indicator.getBoundingClientRect().left)).to.equal(Math.round(active.getBoundingClientRect().left));
+      expect(Math.round(indicator.getBoundingClientRect().width)).to.equal(Math.round(active.getBoundingClientRect().width));
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
   it('hides the rows-per-page selector when the dataset fits the smallest page size', async () => {
     const originalFetch = window.fetch;
     window.fetch = () => Promise.resolve(new Response(JSON.stringify({

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

@@ -1,7 +1,7 @@
 import '../../../../../dist/zn.min.js';
 import {expect, fixture, html, oneEvent} from '@open-wc/testing';
-import type DialogComponent from './dialog.component';
 import type {ZnEditorInsertEvent} from '../events/zn-editor-insert';
+import type DialogComponent from './dialog.component';
 
 describe('<zn-editor-dialog> content inserts', () => {
   const dialog = () => fixture<DialogComponent>(html`

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

@@ -3,10 +3,10 @@ import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {md5} from "../../utilities/md5";
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
+import {onHoverIntent} from '../../internal/hover-intent';
 import {property} from 'lit/decorators.js';
 import {styleMap} from "lit/directives/style-map.js";
 import ZincElement from '../../internal/zinc-element';
-import {onHoverIntent} from '../../internal/hover-intent';
 
 import styles from './expanding-action.scss';
 

package/src/components/filter-wrapper/filter-wrapper.component.ts

@@ -3,8 +3,8 @@ import {property, state} from "lit/decorators.js";
 import {trimControlValue} from '../../internal/form';
 import ZincElement from '../../internal/zinc-element';
 
-import type ZnDataSelect from "../data-select";
 import type ZnButton from "../button";
+import type ZnDataSelect from "../data-select";
 import type ZnDataTable from "../data-table";
 import type ZnInput from "../input";
 import type ZnQueryBuilder from "../query-builder";

package/src/components/inline-edit/inline-edit.component.ts

@@ -86,7 +86,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   @property({ type: Boolean }) inline: boolean
 
-  @property({ type: Boolean }) padded: boolean
+  @property({ type: Boolean, reflect: true }) padded: boolean
 
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -436,7 +436,6 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         'ai--focused': this.hasFocus,
         'ai--disabled': this.disabled,
         'ai--inline': this.inline,
-        'ai--padded': this.padded,
         'ai--masked': !!this.displayValue,
       })}" dir="ltr">
 

package/src/components/inline-edit/inline-edit.scss

@@ -1,30 +1,34 @@
 @use "../../wc";
 
 :host {
+  --ai-input-height: var(--zn-input-height-medium);
+
   display: block;
+  box-sizing: border-box;
   container-type: inline-size;
   width: 100%;
 }
 
+// On the host rather than the row, so the hover fill and edit actions stay hugging the field
+:host([padded]) {
+  padding: var(--zn-spacing-large);
+}
+
 .ai {
   --bleed: var(--zn-inline-edit-bleed, 10px);
   display: flex;
-  width: 100%;
+  box-sizing: border-box;
+  // The hover fill hangs out past the value's left edge, so the text stays aligned with the column
+  width: calc(100% + var(--bleed));
+  margin-inline-start: calc(-1 * var(--bleed));
+  padding-inline-start: var(--bleed);
   flex-direction: row;
   gap: 10px;
   border-radius: var(--zn-border-radius-medium);
   transition: background-color var(--zn-transition-fast) ease;
 
-  // The hover fill hangs out past the value's left edge, so the text stays aligned with the column
-  &:not(.ai--padded) {
-    box-sizing: border-box;
-    width: calc(100% + var(--bleed));
-    margin-inline-start: calc(-1 * var(--bleed));
-    padding-inline-start: var(--bleed);
-  }
-
   // The input's own padding takes over from the bleed, keeping its text roughly where the value was
-  &--editing:not(.ai--padded) {
+  &--editing {
     padding-inline-start: 0;
   }
 
@@ -116,10 +120,6 @@
     }
   }
 
-  &--padded {
-    padding: var(--zn-spacing-large);
-  }
-
   &--inline {
     display: flex;
     flex-direction: row;
@@ -160,7 +160,7 @@
       position: absolute;
       inset-block-start: 0;
       inset-inline-end: var(--action-inset);
-      height: var(--zn-input-height-medium);
+      height: var(--ai-input-height);
       gap: 2px;
     }
 
@@ -238,7 +238,7 @@
 
   &__reveal {
     // Matches the height of the input it stands in for, so entering edit mode doesn't resize the row
-    line-height: var(--zn-input-height-medium);
+    line-height: var(--ai-input-height);
     color: rgb(var(--zn-text));
 
     // Fill the row so hovering anywhere over the field reveals the value
@@ -312,10 +312,10 @@ zn-textarea::part(textarea) {
   resize: none;
 }
 
-:host([size="small"]) .ai__reveal {
-  line-height: var(--zn-input-height-small);
+:host([size="small"]) {
+  --ai-input-height: var(--zn-input-height-small);
 }
 
-:host([size="large"]) .ai__reveal {
-  line-height: var(--zn-input-height-large);
+:host([size="large"]) {
+  --ai-input-height: var(--zn-input-height-large);
 }

package/src/components/input/input.component.ts

@@ -192,7 +192,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** Determines whether or no the password is currently visible. Only applies to password types **/
   @property({attribute: 'password-visible', type: Boolean}) passwordVisible: boolean = false;
 
-  /** Hides the browsers built-in increment/decrement spin buttons for number inputs **/
+  /** Hides the increment/decrement buttons on number inputs **/
   @property({attribute: 'no-spin-buttons', type: Boolean}) noSpinButtons: boolean = false;
 
   /**
@@ -505,6 +505,27 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     }
   }
 
+  /** Whether the value has reached `limit`; `direction` 1 checks a maximum, -1 a minimum. */
+  private isAtLimit(limit: number | string | undefined, direction: 1 | -1): boolean {
+    const value = parseFloat(String(this.value));
+    const bound = parseFloat(String(limit));
+    return !isNaN(value) && !isNaN(bound) && (value - bound) * direction >= 0;
+  }
+
+  private handleStep(direction: 'up' | 'down') {
+    const previous: unknown = this.value;
+    if (direction === 'up') {
+      this.stepUp();
+    } else {
+      this.stepDown();
+    }
+    if (this.value === previous) return;
+    // stepUp()/stepDown() don't fire events, unlike the native spinner they replace
+    this.formControlController.updateValidity();
+    this.emit('zn-input');
+    this.emit('zn-change');
+  }
+
   private handlePasswordToggle() {
     this.passwordVisible = !this.passwordVisible;
   }
@@ -861,7 +882,6 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                  'input--focused': this.hasFocus,
                  'input--empty': !this.value,
                  'input--range': isRange,
-                 'input--no-spin-buttons': this.noSpinButtons && this.type !== 'currency',
                  'input--color': this.type === 'color',
                  'input--color-invalid': this.colorInvalid,
                })}>
@@ -973,6 +993,22 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                 </button>`
               : ''}
 
+            ${this.type === 'currency' || (this.type === 'number' && !this.noSpinButtons)
+              ? html`
+                <span part="stepper" class="input__stepper">
+                  <button class="input__stepper-button" type="button" tabindex="-1" aria-label="Decrement"
+                          ?disabled=${this.disabled || this.readonly || this.isAtLimit(this.min, -1)}
+                          @click=${() => this.handleStep('down')}>
+                    <zn-icon src="minus@lu" size="16"></zn-icon>
+                  </button>
+                  <button class="input__stepper-button" type="button" tabindex="-1" aria-label="Increment"
+                          ?disabled=${this.disabled || this.readonly || this.isAtLimit(this.max, 1)}
+                          @click=${() => this.handleStep('up')}>
+                    <zn-icon src="plus@lu" size="16"></zn-icon>
+                  </button>
+                </span>`
+              : ''}
+
             <span part="suffix" class="input__suffix">
               <slot name="suffix"></slot>
             </span>

package/src/components/input/input.scss

@@ -386,17 +386,81 @@ input[type='text'].input__control[data-color-input] {
   display: none;
 }
 
-/* Hide the built-in number spinner */
-.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
-.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
+/* The built-in spinner is replaced by .input__stepper */
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: none;
   display: none;
 }
 
-.input--no-spin-buttons input[type='number'] {
+input[type='number'] {
   -moz-appearance: textfield;
 }
 
+.input__stepper {
+  --stepper-button-size: calc(var(--zn-input-height-medium) - 10px);
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+  padding-inline: 4px 5px;
+}
+
+.input--x-small .input__stepper {
+  --stepper-button-size: calc(var(--zn-input-height-x-small) - 6px);
+  gap: 2px;
+  padding-inline: 2px 3px;
+}
+
+.input--small .input__stepper {
+  --stepper-button-size: calc(var(--zn-input-height-small) - 8px);
+}
+
+.input--large .input__stepper {
+  --stepper-button-size: calc(var(--zn-input-height-large) - 10px);
+}
+
+.input__stepper-button {
+  display: grid;
+  place-content: center;
+  flex: 0 0 auto;
+  width: var(--stepper-button-size);
+  height: var(--stepper-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--zn-border-radius-small);
+  background: none;
+  cursor: pointer;
+  transition: var(--zn-transition-fast) background-color,
+  transform 160ms var(--zn-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+
+  zn-icon {
+    --icon-color: var(--zn-input-icon-color);
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--zn-color-neutral-100);
+
+    zn-icon {
+      --icon-color: var(--zn-input-icon-color-hover);
+    }
+  }
+
+  // Deeper than zn-button's 0.97, which is imperceptible at this size
+  &:active:not(:disabled) {
+    background-color: var(--zn-color-neutral-200);
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+
+    zn-icon {
+      --icon-color: var(--zn-input-border-color);
+    }
+  }
+}
+
 /* Replace the -webkit-calendar-picker icon */
 input[type='date']::-webkit-calendar-picker-indicator {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="%236d7176" d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z"/></svg>');

package/src/components/input/input.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/zn.min.js';
-import {expect, fixture, html, waitUntil} from '@open-wc/testing';
 import {clearFormStoreValues} from '../../utilities/form';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
 import type ZnInput from './input.component';
 import type ZnSlashMenu from '../slash-menu/slash-menu.component';
 

package/src/components/nav-list/nav-list.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/zn.min.js';
 import {aTimeout, expect, fixture, html} from '@open-wc/testing';
-import {centre, drop, dragTo, startDrag} from '../../internal/test-drag';
+import {centre, dragTo, drop, startDrag} from '../../internal/test-drag';
 import type ZnNavItem from '../nav-item';
 import type ZnNavList from './nav-list.component';