@kubex/zinc 1.1.185 → 2.0.1

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

@@ -0,0 +1,313 @@
+import {clipCornerRadius, ReorderController} from '../../internal/reorder';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {FormControlController, validValidityState} from '../../internal/form';
+import {HasSlotController} from '../../internal/slot';
+import {property, state} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnInput from '../input';
+import type {ZincFormControl} from '../../internal/zinc-element';
+import type ZnNavItem from '../nav-item';
+
+import styles from './nav-list.scss';
+
+/**
+ * @summary The list side of a master–detail layout: a card of selectable groups shown beside the selected group's
+ * contents. Place it in the `left` slot of `<zn-tabs gap>`, which switches the detail panels.
+ * @documentation https://zinc.style/components/nav-list
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-input
+ *
+ * @slot - `zn-nav-item` elements.
+ * @slot actions - Actions in the card's header, beside the caption.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The header holding the caption and actions.
+ * @csspart search - The wrapper around the search input.
+ * @csspart list - The scrolling list of items.
+ * @csspart empty - The message shown when the search matches nothing.
+ *
+ * @cssproperty --zn-nav-list-width - The width of the card beside the detail.
+ * @cssproperty --zn-nav-list-max-height - Caps the card's height; the list scrolls beyond it.
+ *
+ * @event zn-change - Emitted when a sortable list's items have been moved.
+ * @event zn-reorder - Emitted when a sortable list's items have been moved.
+ */
+export default class ZnNavList extends ZincElement implements ZincFormControl {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-input': ZnInput,
+  };
+
+  protected readonly formControlController = new FormControlController(this, {
+    // The same `[{key, priority}]` JSON a zn-priority-list submits, so a handler can take either
+    value: (control: ZnNavList) => control.sortable ? JSON.stringify(control.getPriorityMap()) : undefined,
+    defaultValue: () => undefined,
+    setValue: () => undefined,
+  });
+
+  private readonly hasSlotController = new HasSlotController(this, 'actions');
+
+  private readonly reorderController: ReorderController = new ReorderController(this, {
+    formControl: this.formControlController,
+    fallbackFields: () => this.name ? [[this.name, JSON.stringify(this.getPriorityMap())]] : [],
+    // Plain arrows move between items; Alt moves the item itself
+    modifier: 'alt',
+    focus: key => this._item(key)?.focus(),
+  });
+
+  /** Shows a search input that filters the items by their label. */
+  @property({type: Boolean, reflect: true}) searchable = false;
+
+  @property({attribute: 'search-placeholder'}) searchPlaceholder = 'Search';
+
+  /** Shown when the search matches no items. */
+  @property({attribute: 'empty-label'}) emptyLabel = 'No matches';
+
+  /** A heading for the card, shown with the `actions` slot above the items. */
+  @property() caption = '';
+
+  /** Draws the items as full-width rows split by dividers, marking the selected one with a bar on its edge. */
+  @property({type: Boolean, reflect: true}) divide = false;
+
+  /** Lets the items be dragged, or moved with Alt+Arrow keys, into a new order. */
+  @property({type: Boolean, reflect: true}) sortable = false;
+
+  /** Submits the order as `[{key, priority}]` JSON, keyed by each item's `value` (or `tab`), counting from 1. */
+  @property() name = '';
+
+  /** Associates the list with a form by id. */
+  @property({reflect: true}) form = '';
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  /**
+   * When set, the form is submitted after each reorder, to this URL or, when empty, the form's own action.
+   */
+  @property({attribute: 'formaction'}) formAction: string;
+
+  @state() private _query = '';
+
+  private readonly _selectionObserver = new MutationObserver(() => this._syncTabStops());
+
+  get validity(): ValidityState {
+    return validValidityState;
+  }
+
+  get validationMessage(): string {
+    return '';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // zn-tabs marks the active item with a class, after the click that selects it
+    this._selectionObserver.observe(this, {subtree: true, attributes: true, attributeFilter: ['class']});
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._selectionObserver.disconnect();
+  }
+
+  private get _items(): ZnNavItem[] {
+    return [...this.querySelectorAll<ZnNavItem>(':scope > zn-nav-item')];
+  }
+
+  private get _visibleItems() {
+    return this._items.filter(item => !item.hidden);
+  }
+
+  private _key(item: ZnNavItem) {
+    return item.getAttribute('value') ?? item.getAttribute('tab') ?? '';
+  }
+
+  private _item(key: string) {
+    return this._items.find(item => this._key(item) === key) ?? null;
+  }
+
+  /** The order as `[{key, priority}]` JSON. */
+  get value() {
+    return JSON.stringify(this.getPriorityMap());
+  }
+
+  /** The order as `{key, priority}` pairs, counting from 1. */
+  getPriorityMap() {
+    return this._items.map((item, index) => ({key: this._key(item), priority: index + 1}));
+  }
+
+  /** @internal ReorderHost: the items' keys in order. */
+  reorderKeys() {
+    return this._items.map(item => this._key(item));
+  }
+
+  /** @internal ReorderHost: puts the items in a new order. */
+  applyReorder(keys: string[]) {
+    for (const key of keys) {
+      const item = this._item(key);
+      if (item) this.append(item);
+    }
+    // Measured now, in the final place, before the reorder slide moves the rows
+    this._syncDragCorners();
+  }
+
+  /** @internal ReorderHost: the row drawn for an item. */
+  reorderRow(key: string) {
+    return this._item(key);
+  }
+
+  /** @internal ReorderHost: whether an item is pinned where it is. */
+  reorderLocked(key: string) {
+    return this._item(key)?.hasAttribute('locked') ?? false;
+  }
+
+  /** The key of the item an event happened on, when it is one of this list's. */
+  private _eventKey(e: Event) {
+    const item = (e.target as Element).closest?.('zn-nav-item') as ZnNavItem | null;
+    return item && item.parentElement === this ? this._key(item) : null;
+  }
+
+  private _handleSlotChange() {
+    this._syncTabStops();
+    this._syncItems();
+  }
+
+  private _syncItems() {
+    const dragged = this.reorderController.draggedKey;
+    for (const item of this._items) {
+      item.toggleAttribute('divide', this.divide);
+      item.toggleAttribute('sortable', this.sortable);
+      item.toggleAttribute('dragging', this._key(item) === dragged);
+    }
+  }
+
+  protected updated(changed: PropertyValues) {
+    super.updated(changed);
+    if (changed.has('disabled')) this._syncTabStops();
+    this._syncItems();
+    this._syncDragCorners();
+  }
+
+  /** Rounds a divided list's placeholder into the card corners it moves into while dragging. */
+  private _syncDragCorners() {
+    const dragged = this.reorderController.draggedKey;
+    const item = dragged === null ? null : this._item(dragged);
+    if (!item) return;
+    const radius = this.divide ? clipCornerRadius(item, item) : null;
+    if (radius) {
+      item.style.setProperty('--zn-nav-item-drag-radius', radius);
+    } else {
+      item.style.removeProperty('--zn-nav-item-drag-radius');
+    }
+  }
+
+  /** Keeps a single tab stop in the list (none when disabled): the selected item when it is visible, otherwise the first. */
+  private _syncTabStops() {
+    const visible = this._visibleItems;
+    const stop = this.disabled ? null : visible.find(item => item.selected) ?? visible[0];
+    for (const item of this._items) {
+      item.tabIndex = item === stop ? 0 : -1;
+    }
+  }
+
+  private _handleSearch(e: Event) {
+    this._query = String((e.target as ZnInput).value ?? '').trim().toLowerCase();
+    for (const item of this._items) {
+      item.hidden = this._query !== '' && !(item.textContent ?? '').toLowerCase().includes(this._query);
+    }
+    this._syncTabStops();
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    const visible = this._visibleItems;
+    const current = visible.indexOf(e.target as ZnNavItem);
+    if (current === -1) return;
+
+    if (this.sortable && this.reorderController.handleKeyDown(e, this._key(visible[current]))) {
+      return;
+    }
+
+    let next: number;
+    switch (e.key) {
+      case 'ArrowDown':
+        next = Math.min(current + 1, visible.length - 1);
+        break;
+      case 'ArrowUp':
+        next = Math.max(current - 1, 0);
+        break;
+      case 'Home':
+        next = 0;
+        break;
+      case 'End':
+        next = visible.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+    for (const item of this._items) {
+      item.tabIndex = item === visible[next] ? 0 : -1;
+    }
+    visible[next].focus();
+  }
+
+  private _handlePointerDown(e: PointerEvent) {
+    const key = this._eventKey(e);
+    if (this.sortable && key !== null) this.reorderController.handlePointerDown(e, key);
+  }
+
+  // --- Form control ---
+
+  checkValidity() {
+    return true;
+  }
+
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  reportValidity() {
+    return true;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setCustomValidity(_message = '') {
+    // Nothing to validate
+  }
+
+  render() {
+    const noMatches = this._query !== '' && this._visibleItems.length === 0;
+
+    return html`
+      <div part="base" class="nav-list">
+        ${this.caption || this.hasSlotController.test('actions') ? html`
+          <div part="header" class="nav-list__header">
+            <span class="nav-list__caption">${this.caption}</span>
+            <slot name="actions" class="nav-list__actions"></slot>
+          </div>` : ''}
+        ${this.searchable ? html`
+          <div part="search" class="nav-list__search">
+            <zn-input
+              type="search"
+              size="small"
+              clearable
+              placeholder="${this.searchPlaceholder}"
+              @zn-input="${this._handleSearch}"
+              @zn-clear="${this._handleSearch}">
+            </zn-input>
+          </div>` : ''}
+        <div
+          part="list"
+          class="nav-list__list"
+          role="tablist"
+          aria-orientation="vertical"
+          @keydown="${this._handleKeyDown}"
+          @pointerdown="${this._handlePointerDown}">
+          <slot @slotchange="${this._handleSlotChange}"></slot>
+          ${noMatches ? html`<p part="empty" class="nav-list__empty">${this.emptyLabel}</p>` : ''}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/nav-list/nav-list.scss

@@ -0,0 +1,87 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  width: var(--zn-nav-list-width, 272px);
+  max-width: 100%;
+  max-height: var(--zn-nav-list-max-height, 100%);
+}
+
+// zn-tabs stacks its side cards at this width; the cap keeps the detail in view
+@container (max-width: 900px) {
+  :host {
+    width: 100%;
+    max-height: var(--zn-nav-list-max-height, 224px);
+  }
+}
+
+.nav-list {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  overflow: hidden;
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-panel-border-radius, var(--zn-border-radius));
+  box-shadow: var(--zn-panel-shadow, none);
+}
+
+.nav-list__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zn-spacing-small);
+  padding: var(--zn-panel-header-padding, var(--zn-spacing-small) var(--zn-spacing-medium));
+  border-bottom: 1px solid var(--zn-panel-header-divider-color, rgb(var(--zn-border-color)));
+}
+
+// Matches a zn-panel caption, so the card reads as a panel.
+.nav-list__caption {
+  font-family: var(--zn-text-h1-font-family, inherit);
+  font-weight: var(--zn-text-h1-font-weight);
+  font-size: var(--zn-text-h1-font-size);
+  letter-spacing: var(--zn-text-h1-letter-spacing, normal);
+  color: rgba(var(--zn-text-panel-title), 100%);
+  line-height: var(--zn-icon-size, 20px);
+}
+
+.nav-list__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+}
+
+.nav-list__search {
+  padding: var(--zn-spacing-small);
+  border-bottom: 1px solid var(--zn-panel-header-divider-color, rgb(var(--zn-border-color)));
+}
+
+.nav-list__list {
+  @include wc.scrollbars;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: var(--zn-spacing-2x-small);
+  overflow-y: auto;
+}
+
+:host([divide]) .nav-list__list {
+  gap: 0;
+  padding: 0;
+
+  ::slotted(zn-nav-item:not(:last-child)) {
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+  }
+
+  // Hidden so it doesn't show below the placeholder's dashed outline
+  ::slotted(zn-nav-item[dragging]) {
+    border-bottom-color: transparent;
+  }
+}
+
+.nav-list__empty {
+  margin: 0;
+  padding: var(--zn-spacing-small) 10px;
+  font-size: var(--zn-font-size-small);
+  color: var(--zn-color-neutral-500);
+}

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

@@ -0,0 +1,250 @@
+import '../../../dist/zn.min.js';
+import {aTimeout, expect, fixture, html} from '@open-wc/testing';
+import {centre, drop, dragTo, startDrag} from '../../internal/test-drag';
+import type ZnNavItem from '../nav-item';
+import type ZnNavList from './nav-list.component';
+
+const search = async (list: ZnNavList, value: string) => {
+  const input = list.shadowRoot!.querySelector('zn-input')!;
+  input.value = value;
+  input.dispatchEvent(new CustomEvent('zn-input', {bubbles: true, composed: true}));
+  await list.updateComplete;
+};
+
+describe('<zn-nav-list>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`<zn-nav-list></zn-nav-list>`);
+    expect(el).to.exist;
+  });
+
+  it('should switch zn-tabs panels and mark the selected item', async () => {
+    const tabs = await fixture(html`
+      <zn-tabs gap>
+        <zn-nav-list slot="left">
+          <zn-nav-item tab="" count="4">Monthly plans</zn-nav-item>
+          <zn-nav-item tab="annual">Annual plans</zn-nav-item>
+        </zn-nav-list>
+        <div id="">Monthly contents</div>
+        <div id="annual">Annual contents</div>
+      </zn-tabs>
+    `);
+    await aTimeout(50);
+
+    const items = [...tabs.querySelectorAll<ZnNavItem>('zn-nav-item')];
+    expect(items.map(item => item.getAttribute('aria-selected'))).to.deep.equal(['true', 'false']);
+
+    items[1].click();
+    await aTimeout(50);
+
+    expect(items.map(item => item.getAttribute('aria-selected'))).to.deep.equal(['false', 'true']);
+    expect(items.map(item => item.tabIndex)).to.deep.equal([-1, 0]);
+    expect(tabs.querySelector('#annual')!.hasAttribute('selected')).to.be.true;
+  });
+
+  it('should render the count', async () => {
+    const el = await fixture<ZnNavItem>(html`<zn-nav-item count="12">Leads</zn-nav-item>`);
+    expect(el.shadowRoot!.querySelector('[part="count"]')!.textContent).to.equal('12');
+  });
+
+  it('should render the description', async () => {
+    const el = await fixture<ZnNavItem>(html`<zn-nav-item description="Wrap-up and follow-up">Closing</zn-nav-item>`);
+    expect(el.shadowRoot!.querySelector('[part="description"]')!.textContent).to.equal('Wrap-up and follow-up');
+  });
+
+  it('should mark its items when divided', async () => {
+    const list = await fixture<ZnNavList>(html`
+      <zn-nav-list divide>
+        <zn-nav-item>General</zn-nav-item>
+        <zn-nav-item>Closing</zn-nav-item>
+      </zn-nav-list>
+    `);
+    await list.updateComplete;
+    const items = [...list.querySelectorAll('zn-nav-item')];
+    expect(items.every(item => item.hasAttribute('divide'))).to.be.true;
+
+    list.divide = false;
+    await list.updateComplete;
+    expect(items.some(item => item.hasAttribute('divide'))).to.be.false;
+  });
+
+  it('should filter items by label and show the empty message', async () => {
+    const list = await fixture<ZnNavList>(html`
+      <zn-nav-list searchable>
+        <zn-nav-item>Monthly plans</zn-nav-item>
+        <zn-nav-item>Annual plans</zn-nav-item>
+        <zn-nav-item>Billing</zn-nav-item>
+      </zn-nav-list>
+    `);
+    const items = [...list.querySelectorAll<ZnNavItem>('zn-nav-item')];
+
+    await search(list, 'plans');
+    expect(items.map(item => item.hidden)).to.deep.equal([false, false, true]);
+    expect(items.map(item => item.tabIndex)).to.deep.equal([0, -1, -1]);
+
+    await search(list, 'nothing');
+    expect(list.shadowRoot!.querySelector('[part="empty"]')).to.exist;
+
+    await search(list, '');
+    expect(items.map(item => item.hidden)).to.deep.equal([false, false, false]);
+  });
+
+  it('should move focus with the arrow keys', async () => {
+    const list = await fixture<ZnNavList>(html`
+      <zn-nav-list>
+        <zn-nav-item>One</zn-nav-item>
+        <zn-nav-item>Two</zn-nav-item>
+      </zn-nav-list>
+    `);
+    const items = [...list.querySelectorAll<ZnNavItem>('zn-nav-item')];
+
+    items[0].focus();
+    items[0].dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true, composed: true}));
+
+    expect(document.activeElement).to.equal(items[1]);
+    expect(items.map(item => item.tabIndex)).to.deep.equal([-1, 0]);
+  });
+
+  describe('sortable', () => {
+    const order = (form: HTMLFormElement) =>
+      (JSON.parse(String(new FormData(form).get('order'))) as {key: string; priority: number}[])
+        .map(({key, priority}) => `${key}=${priority}`);
+
+    it('shows a caption and header actions', async () => {
+      const list = await fixture<ZnNavList>(html`
+        <zn-nav-list caption="Sections"><button slot="actions">Add</button></zn-nav-list>
+      `);
+      await list.updateComplete;
+
+      expect(list.shadowRoot!.querySelector('.nav-list__caption')!.textContent).to.equal('Sections');
+      expect(list.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="actions"]')!.assignedElements()).to.have.length(1);
+    });
+
+    it('rounds a divided list placeholder into the card corner it moves into', async () => {
+      const list = await fixture<ZnNavList>(html`
+        <zn-nav-list divide sortable style="--zn-panel-border-radius: 12px">
+          <zn-nav-item value="a">A</zn-nav-item>
+          <zn-nav-item value="b">B</zn-nav-item>
+          <zn-nav-item value="c">C</zn-nav-item>
+        </zn-nav-list>
+      `);
+      await list.updateComplete;
+      const items = [...list.querySelectorAll<ZnNavItem>('zn-nav-item')];
+      const placeholderRadius = () => getComputedStyle(items[1].shadowRoot!.querySelector('.nav-item')!).borderRadius;
+
+      startDrag(items[1]);
+      await aTimeout(50);
+      expect(placeholderRadius()).to.equal('0px');
+
+      const last = items[2].getBoundingClientRect();
+      dragTo(centre(items[2]).x, last.bottom - 1);
+      await list.updateComplete;
+      expect(placeholderRadius()).to.equal('0px 0px 12px 12px');
+      window.dispatchEvent(new KeyboardEvent('keydown', {key: 'Escape'}));
+      drop(0, 0);
+    });
+
+    it('submits the order with the form and marks the items as sortable', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-nav-list sortable name="order">
+            <zn-nav-item tab="a" value="a">A</zn-nav-item>
+            <zn-nav-item tab="b" value="b">B</zn-nav-item>
+          </zn-nav-list>
+        </form>
+      `);
+      const list = form.querySelector<ZnNavList>('zn-nav-list')!;
+      await list.updateComplete;
+
+      const items = [...list.querySelectorAll<ZnNavItem>('zn-nav-item')];
+      expect(items.every(item => item.hasAttribute('sortable'))).to.be.true;
+      expect(order(form)).to.deep.equal(['a=1', 'b=2']);
+      expect(list.querySelector('input')).to.not.exist;
+    });
+
+    it('moves an item with Alt+Arrow keys and submits the new order', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-nav-list sortable name="order" formaction="/reorder">
+            <zn-nav-item tab="a" value="a">A</zn-nav-item>
+            <zn-nav-item tab="b" value="b">B</zn-nav-item>
+          </zn-nav-list>
+        </form>
+      `);
+      const list = form.querySelector<ZnNavList>('zn-nav-list')!;
+      await list.updateComplete;
+
+      let submittedTo = '';
+      let submitted: string[] = [];
+      form.addEventListener('submit', (e: SubmitEvent) => {
+        e.preventDefault();
+        submittedTo = e.submitter?.getAttribute('formaction') ?? '';
+        submitted = order(form);
+      });
+
+      const first = list.querySelector<ZnNavItem>('zn-nav-item[value="a"]')!;
+      first.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', altKey: true, bubbles: true, composed: true}));
+
+      expect([...list.querySelectorAll('zn-nav-item')].map(item => item.getAttribute('value'))).to.deep.equal(['b', 'a']);
+      expect(submittedTo).to.equal('/reorder');
+      expect(submitted).to.deep.equal(['b=1', 'a=2']);
+    });
+
+    it('reorders by drag and drop', async () => {
+      const list = await fixture<ZnNavList>(html`
+        <zn-nav-list sortable name="order">
+          <zn-nav-item value="a">A</zn-nav-item>
+          <zn-nav-item value="b">B</zn-nav-item>
+        </zn-nav-list>
+      `);
+      await list.updateComplete;
+      let reordered = 0;
+      list.addEventListener('zn-reorder', () => reordered++);
+
+      const [a, b] = [...list.querySelectorAll<ZnNavItem>('zn-nav-item')];
+      const rect = b.getBoundingClientRect();
+      startDrag(a);
+      dragTo(centre(b).x, rect.bottom - 1);
+      drop(centre(b).x, rect.bottom - 1);
+
+      expect([...list.querySelectorAll('zn-nav-item')].map(item => item.getAttribute('value'))).to.deep.equal(['b', 'a']);
+      expect(reordered).to.equal(1);
+    });
+
+    it('restores the order when let go outside the list', async () => {
+      const list = await fixture<ZnNavList>(html`
+        <zn-nav-list sortable name="order">
+          <zn-nav-item value="a">A</zn-nav-item>
+          <zn-nav-item value="b">B</zn-nav-item>
+        </zn-nav-list>
+      `);
+      await list.updateComplete;
+      let reordered = 0;
+      list.addEventListener('zn-reorder', () => reordered++);
+
+      const [a, b] = [...list.querySelectorAll<ZnNavItem>('zn-nav-item')];
+      startDrag(a);
+      dragTo(centre(b).x, b.getBoundingClientRect().bottom - 1);
+      expect([...list.querySelectorAll('zn-nav-item')].map(item => item.getAttribute('value'))).to.deep.equal(['b', 'a']);
+
+      const outside = list.getBoundingClientRect();
+      drop(outside.right + 50, outside.bottom + 50);
+      expect([...list.querySelectorAll('zn-nav-item')].map(item => item.getAttribute('value'))).to.deep.equal(['a', 'b']);
+      expect(reordered).to.equal(0);
+    });
+
+    it('leaves the order alone when not sortable', async () => {
+      const list = await fixture<ZnNavList>(html`
+        <zn-nav-list name="order">
+          <zn-nav-item value="a">A</zn-nav-item>
+          <zn-nav-item value="b">B</zn-nav-item>
+        </zn-nav-list>
+      `);
+      await list.updateComplete;
+      const first = list.querySelector<ZnNavItem>('zn-nav-item')!;
+      first.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', altKey: true, bubbles: true, composed: true}));
+
+      expect([...list.querySelectorAll('zn-nav-item')].map(item => item.getAttribute('value'))).to.deep.equal(['a', 'b']);
+      expect(list.querySelector('input')).to.not.exist;
+    });
+  });
+});