@kubex/zinc 2.0.2 → 2.0.4

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

@@ -162,6 +162,29 @@ input[type='text'].input__control[data-color-input] {
   }
 }
 
+// The same gap right of a suffix as above and below one 24px tall (an icon or copy button). Built-in controls such as
+// the clear button and stepper keep their own spacing.
+.input__suffix ::slotted(*) {
+  margin-inline-end: max(2px, calc((var(--input-height) - var(--zn-input-border-width) * 2 - 24px) / 2));
+}
+
+// Slotted buttons are held to the small button height, shrunk to fit smaller inputs, with the same gap all round.
+// Read from the density token: redefining --zn-button-height-small from itself would be a cycle.
+.input__suffix ::slotted(zn-button) {
+  --input-suffix-button-height: min(var(--zn-density-control-height-sm, 28px), calc(var(--input-height) - var(--zn-input-border-width) * 2 - 4px));
+  --zn-button-height: var(--input-suffix-button-height);
+  --zn-button-height-small: var(--input-suffix-button-height);
+  margin-inline-end: calc((var(--input-height) - var(--zn-input-border-width) * 2 - var(--input-suffix-button-height)) / 2);
+}
+
+.input__suffix ::slotted(zn-checkbox) {
+  margin-inline-end: 0;
+}
+
+.input__suffix-default {
+  margin-inline-end: var(--zn-spacing-small);
+}
+
 .input__prefix ::slotted(zn-icon),
 .input__suffix ::slotted(zn-icon) {
   --icon-size: var(--zn-font-size-medium);
@@ -174,6 +197,7 @@ input[type='text'].input__control[data-color-input] {
  */
 
 .input--x-small {
+  --input-height: var(--zn-input-height-x-small);
   border-radius: var(--zn-input-border-radius-x-small);
   font-size: var(--zn-input-font-size-small);
   height: var(--zn-input-height-x-small);
@@ -194,20 +218,14 @@ input[type='text'].input__control[data-color-input] {
   margin-inline-start: var(--zn-spacing-x-small);
 }
 
-.input--x-small .input__suffix ::slotted(*),
-.input__suffix-default {
-  margin-inline-end: var(--zn-input-spacing-x-small);
-}
-
-.input--x-small .input__suffix ::slotted(zn-button),
 .input--x-small .input__prefix ::slotted(zn-button),
-.input--x-small .input__suffix ::slotted(zn-checkbox),
-.input--x-small .input__prefix ::slotted(zn-checkbox), {
+.input--x-small .input__prefix ::slotted(zn-checkbox) {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
 
 .input--small {
+  --input-height: var(--zn-input-height-small);
   border-radius: var(--zn-input-border-radius-small);
   font-size: var(--zn-input-font-size-small);
   height: var(--zn-input-height-small);
@@ -228,20 +246,14 @@ input[type='text'].input__control[data-color-input] {
   margin-inline-start: var(--zn-input-spacing-small);
 }
 
-.input--small .input__suffix ::slotted(*),
-.input__suffix-default {
-  margin-inline-end: var(--zn-input-spacing-small);
-}
-
-.input--small .input__suffix ::slotted(zn-button),
 .input--small .input__prefix ::slotted(zn-button),
-.input--small .input__suffix ::slotted(zn-checkbox),
 .input--small .input__prefix ::slotted(zn-checkbox) {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
 
 .input--medium {
+  --input-height: var(--zn-input-height-medium);
   border-radius: var(--zn-input-border-radius-medium);
   font-size: var(--zn-input-font-size-medium);
   height: var(--zn-input-height-medium);
@@ -262,34 +274,23 @@ input[type='text'].input__control[data-color-input] {
   margin-inline-start: var(--zn-spacing-small);
 }
 
-.input--medium .input__suffix ::slotted(*),
-.input__suffix-default {
-  margin-inline-end: var(--zn-spacing-small);
-}
-
-.input--medium .input__suffix ::slotted(zn-button),
 .input--medium .input__prefix ::slotted(zn-button),
-.input--medium .input__suffix ::slotted(zn-checkbox),
 .input--medium .input__prefix ::slotted(zn-checkbox) {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
 
-.input__suffix ::slotted(zn-button),
 .input__prefix ::slotted(zn-button) {
   --zn-button-border-color: rgb(var(--zn-color-border));
   --zn-button-border-width: 0;
 }
 
-.input__suffix ::slotted(zn-button) {
-  --zn-button-border-left-width: 1px;
-}
-
 .input__prefix ::slotted(zn-button) {
   --zn-button-border-right-width: 1px;
 }
 
 .input--large {
+  --input-height: var(--zn-input-height-large);
   border-radius: var(--zn-input-border-radius-large);
   font-size: var(--zn-input-font-size-large);
   height: var(--zn-input-height-large);
@@ -305,9 +306,7 @@ input[type='text'].input__control[data-color-input] {
   width: calc(1em + var(--zn-input-spacing-large) * 2);
 }
 
-.input--large .input__suffix ::slotted(zn-button),
 .input--large .input__prefix ::slotted(zn-button),
-.input--large .input__suffix ::slotted(zn-checkbox),
 .input--large .input__prefix ::slotted(zn-checkbox) {
   margin-inline-end: 0;
   margin-inline-start: 0;
@@ -386,17 +385,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/key-value/key-value.component.ts

@@ -1,9 +1,11 @@
 import {classMap} from 'lit/directives/class-map.js';
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {defaultValue} from '../../internal/default-value';
 import {FormControlController} from '../../internal/form';
 import {HasSlotController} from '../../internal/slot';
 import {property, state} from 'lit/decorators.js';
 import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+import type ZnInput from '../input';
 
 import formControlStyles from '../../form-control.scss';
 import styles from './key-value.scss';
@@ -13,6 +15,8 @@ interface KeyValueRow {
   value: string;
 }
 
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+
 /**
  * @summary Edits a list of name and value pairs, submitted as a JSON object.
  * @documentation https://zinc.style/components/key-value
@@ -20,6 +24,8 @@ interface KeyValueRow {
  * @since 1.0
  *
  * @dependency zn-input
+ * @dependency zn-select
+ * @dependency zn-option
  * @dependency zn-button
  *
  * @event zn-change - Emitted when a pair is added, removed or edited.
@@ -41,9 +47,15 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
 
   @property() name = '';
 
-  /** The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. */
+  /**
+   * The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. With `list`, the names as a JSON array,
+   * such as `["10.0.0.0/24"]`.
+   */
   @property() value = '{}';
 
+  /** The value a form reset restores, taken from the initial `value` attribute. */
+  @defaultValue() defaultValue = '{}';
+
   @property() label = '';
 
   @property({attribute: 'help-text'}) helpText = '';
@@ -57,6 +69,15 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
   /** Passed to each value input, so its slash menu can insert merge fields. */
   @property({attribute: 'slash-items'}) slashItems = '';
 
+  /**
+   * Makes each value a choice instead of free text: a JSON object of option values to labels, such as
+   * `{"default": "System default", "auto": "Auto approve"}`. New rows take the first option.
+   */
+  @property({attribute: 'value-options', type: Object}) valueOptions: Record<string, string> | null = null;
+
+  /** Edits a plain list of names with no values, submitted as a JSON array. */
+  @property({type: Boolean, reflect: true}) list = false;
+
   @property({reflect: true}) form = '';
 
   @property({type: Boolean, reflect: true}) disabled = false;
@@ -87,15 +108,35 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
   }
 
   protected willUpdate(changed: PropertyValues) {
+    if (this.list && this.value === '{}') {
+      this.value = '[]';
+    }
     if (changed.has('value') && this.value !== this._serialise()) {
       this._rows = this._parse(this.value);
     }
+    this._rows = this._withSpareRow(this._rows);
+  }
+
+  private get _defaultValue(): string {
+    return this.valueOptions ? Object.keys(this.valueOptions)[0] ?? '' : '';
+  }
+
+  private _emptyRow(): KeyValueRow {
+    return {key: '', value: this._defaultValue};
+  }
+
+  // There's always a row to type into, so an empty list never leaves the add button on its own
+  private _withSpareRow(rows: KeyValueRow[]): KeyValueRow[] {
+    return rows.length ? rows : [this._emptyRow()];
   }
 
   private _parse(value: string): KeyValueRow[] {
     try {
-      const parsed: unknown = JSON.parse(value || '{}');
-      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      const parsed: unknown = JSON.parse(value || (this.list ? '[]' : '{}'));
+      if (Array.isArray(parsed)) {
+        return parsed.map(key => ({key: String(key ?? ''), value: this._defaultValue}));
+      }
+      if (parsed && typeof parsed === 'object') {
         return Object.entries(parsed as Record<string, unknown>).map(([key, v]) => ({key, value: String(v ?? '')}));
       }
     } catch {
@@ -105,8 +146,12 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
   }
 
   private _serialise(): string {
+    const named = this._rows.filter(row => row.key.trim());
+    if (this.list) {
+      return JSON.stringify(named.map(row => row.key.trim()));
+    }
     const pairs: Record<string, string> = {};
-    this._rows.filter(row => row.key.trim()).forEach(row => pairs[row.key.trim()] = row.value);
+    named.forEach(row => pairs[row.key.trim()] = row.value);
     return JSON.stringify(pairs);
   }
 
@@ -122,9 +167,70 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
     this._update(rows);
   }
 
+  private get _reduceMotion(): boolean {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  }
+
+  private _easing(): string {
+    return getComputedStyle(this).getPropertyValue('--zn-ease-out').trim() || EASE_OUT;
+  }
+
+  private async _add() {
+    this._update([...this._rows, this._emptyRow()]);
+    await this.updateComplete;
+    const rows = this.shadowRoot!.querySelectorAll<HTMLElement>('.key-value__row');
+    const row = rows[rows.length - 1];
+    if (!row) return;
+    // Opacity and transform only: the new inputs render for the first time during these frames
+    row.animate(
+      this._reduceMotion
+        ? [{opacity: 0}, {opacity: 1}]
+        : [{opacity: 0, transform: 'translateY(-4px)'}, {opacity: 1, transform: 'translateY(0)'}],
+      {duration: this._reduceMotion ? 150 : 180, easing: this._easing()});
+    const input = row.querySelector<ZnInput>('.key-value__key');
+    await input?.updateComplete;
+    input?.focus();
+  }
+
+  private async _remove(row: KeyValueRow, rowElement: HTMLElement) {
+    if (this._rows.length === 1) {
+      this._update([this._emptyRow()]);
+      return;
+    }
+    rowElement.style.pointerEvents = 'none';
+    rowElement.style.overflow = 'hidden';
+    const height = rowElement.getBoundingClientRect().height;
+    await rowElement.animate(
+      this._reduceMotion
+        ? [{opacity: 1}, {opacity: 0}]
+        : [{opacity: 1, transform: 'scale(1)', height: `${height}px`}, {opacity: 0, transform: 'scale(0.98)', height: '0px'}],
+      {duration: this._reduceMotion ? 150 : 220, easing: this._easing()}).finished.catch(() => undefined);
+    rowElement.style.pointerEvents = '';
+    rowElement.style.overflow = '';
+    this._update(this._rows.filter(r => r !== row));
+  }
+
+  private _renderValue(row: KeyValueRow, index: number) {
+    if (this.list) return null;
+    if (this.valueOptions) {
+      return html`
+        <zn-select class="key-value__value" .value=${row.value} ?disabled=${this.disabled} aria-label=${this.valueLabel}
+                   @zn-change=${(e: Event) => this._edit(index, 'value', e)}>
+          ${Object.entries(this.valueOptions).map(([value, label]) => html`
+            <zn-option value=${value}>${label}</zn-option>`)}
+        </zn-select>`;
+    }
+    return html`
+      <zn-input class="key-value__value" placeholder=${this.valueLabel} .value=${row.value}
+                slash-items=${this.slashItems} ?disabled=${this.disabled}
+                @zn-input=${(e: Event) => this._edit(index, 'value', e)}></zn-input>`;
+  }
+
   render() {
     const hasLabel = this.label || this.hasSlotController.test('label');
     const hasHelpText = this.helpText || this.hasSlotController.test('help-text');
+    // A lone empty row has nothing to remove; hidden rather than dropped so its inputs don't change width
+    const lonelyEmpty = this._rows.length === 1 && !this._rows[0].key.trim();
 
     return html`
       <div part="base" class=${classMap({
@@ -137,19 +243,24 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
           <slot name="label">${this.label}</slot>
         </label>
 
-        <div class="key-value__rows">
+        <div class=${classMap({
+          'key-value__rows': true,
+          'key-value__rows--list': this.list,
+          'key-value__rows--options': !!this.valueOptions && !this.list,
+        })}>
           ${this._rows.map((row, index) => html`
             <div part="row" class="key-value__row">
               <zn-input class="key-value__key" placeholder=${this.keyLabel} .value=${row.key}
-                        ?disabled=${this.disabled} @zn-input=${(e: Event) => this._edit(index, 'key', e)}></zn-input>
-              <zn-input class="key-value__value" placeholder=${this.valueLabel} .value=${row.value}
-                        slash-items=${this.slashItems} ?disabled=${this.disabled}
-                        @zn-input=${(e: Event) => this._edit(index, 'value', e)}></zn-input>
-              <zn-button icon="x@lu" color="transparent" size="small" title="Remove" icon-button="small" plain ?disabled=${this.disabled}
-                         @click=${() => this._update(this._rows.filter((_, i) => i !== index))}></zn-button>
+                        aria-label=${this.keyLabel} ?disabled=${this.disabled}
+                        @zn-input=${(e: Event) => this._edit(index, 'key', e)}></zn-input>
+              ${this._renderValue(row, index)}
+              <zn-button class=${classMap({'key-value__remove': true, 'key-value__remove--hidden': lonelyEmpty})}
+                         icon="x@lu" color="transparent" size="small" title="Remove" icon-button="small" plain
+                         ?disabled=${this.disabled}
+                         @click=${(e: Event) => this._remove(row, (e.currentTarget as HTMLElement).closest('.key-value__row')!)}></zn-button>
             </div>`)}
           <zn-button class="key-value__add" icon="plus@lu" color="secondary" size="small" ?disabled=${this.disabled}
-                     @click=${() => this._update([...this._rows, {key: '', value: ''}])}>${this.addText}</zn-button>
+                     @click=${() => this._add()}>${this.addText}</zn-button>
         </div>
 
         <div class="form-control__help-text" aria-hidden=${hasHelpText ? 'false' : 'true'}>

package/src/components/key-value/key-value.scss

@@ -18,3 +18,16 @@
   gap: var(--zn-spacing-x-small);
   width: 100%;
 }
+
+.key-value__rows--list .key-value__row {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.key-value__rows--options .key-value__row {
+  grid-template-columns: minmax(0, 1fr) var(--zn-key-value-option-width, 13rem) auto;
+}
+
+// Keeps its space so the inputs don't change width when it appears
+.key-value__remove--hidden {
+  visibility: hidden;
+}

package/src/components/key-value/key-value.test.ts

@@ -2,11 +2,15 @@ import '../../../dist/zn.min.js';
 import {expect, fixture, html} from '@open-wc/testing';
 import type ZnKeyValue from './key-value.component';
 
+const rows = (el: ZnKeyValue) => el.shadowRoot!.querySelectorAll<HTMLElement>('.key-value__row');
+// zn-button.click() skips the click event that the row buttons listen for, so press them as a user would
+const press = (button: Element) => button.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+
 describe('<zn-key-value>', () => {
   it('should show a row per pair in its value', async () => {
     const el = await fixture<ZnKeyValue>(html`<zn-key-value value='{"1":"{{recipient.firstName}}","2":"x"}'></zn-key-value>`);
 
-    expect(el.shadowRoot!.querySelectorAll('.key-value__row').length).to.equal(2);
+    expect(rows(el).length).to.equal(2);
   });
 
   it('should submit the pairs as a JSON object, leaving out unnamed rows', async () => {
@@ -14,9 +18,68 @@ describe('<zn-key-value>', () => {
       <form><zn-key-value name="pairs" value='{"1":"a"}'></zn-key-value></form>`);
     const el = form.querySelector<ZnKeyValue>('zn-key-value')!;
 
-    el.shadowRoot!.querySelector<HTMLElement>('.key-value__add')!.click();
+    press(el.shadowRoot!.querySelector('.key-value__add')!);
     await el.updateComplete;
 
     expect(new FormData(form).get('pairs')).to.equal('{"1":"a"}');
   });
+
+  it('keeps one empty row to type into, with nothing to remove', async () => {
+    const el = await fixture<ZnKeyValue>(html`<zn-key-value></zn-key-value>`);
+
+    expect(rows(el).length).to.equal(1);
+    expect(rows(el)[0].querySelector('.key-value__remove--hidden')).to.exist;
+  });
+
+  it('clears the last row instead of removing it', async () => {
+    const el = await fixture<ZnKeyValue>(html`<zn-key-value value='{"a":"1"}'></zn-key-value>`);
+
+    press(rows(el)[0].querySelector('.key-value__remove')!);
+    await el.updateComplete;
+
+    expect(rows(el).length).to.equal(1);
+    expect(el.value).to.equal('{}');
+  });
+
+  it('submits a list as a JSON array of names', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form><zn-key-value name="entries" list value='["10.0.0.1","10.0.0.0/24"]'></zn-key-value></form>`);
+    const el = form.querySelector<ZnKeyValue>('zn-key-value')!;
+
+    expect(rows(el).length).to.equal(2);
+    expect(rows(el)[0].querySelector('.key-value__value')).to.not.exist;
+    expect(new FormData(form).get('entries')).to.equal('["10.0.0.1","10.0.0.0/24"]');
+  });
+
+  it('renders value options as a select, defaulting new rows to the first option', async () => {
+    const options = JSON.stringify({default: 'System default', auto: 'Auto approve'});
+    const el = await fixture<ZnKeyValue>(html`
+      <zn-key-value value-options="${options}" value='{"a.com":"auto"}'></zn-key-value>`);
+
+    expect(rows(el)[0].querySelector('zn-select.key-value__value')).to.exist;
+
+    press(el.shadowRoot!.querySelector('.key-value__add')!);
+    await el.updateComplete;
+    const key = rows(el)[1].querySelector<HTMLElement & {value: string}>('.key-value__key')!;
+    key.value = 'b.com';
+    key.dispatchEvent(new CustomEvent('zn-input', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(JSON.parse(el.value)).to.deep.equal({'a.com': 'auto', 'b.com': 'default'});
+  });
+
+  it('restores its rows on form reset', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form><zn-key-value name="pairs" value='{"a":"1"}'></zn-key-value></form>`);
+    const el = form.querySelector<ZnKeyValue>('zn-key-value')!;
+
+    press(rows(el)[0].querySelector('.key-value__remove')!);
+    await el.updateComplete;
+    expect(el.value).to.equal('{}');
+
+    form.reset();
+    await el.updateComplete;
+    expect(el.value).to.equal('{"a":"1"}');
+    expect(rows(el).length).to.equal(1);
+  });
 });

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';