@kubex/zinc 1.1.61 → 1.1.63

package/src/components/preview-frame/preview-frame.component.ts

@@ -0,0 +1,246 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
+import {property, query, state} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './preview-frame.scss';
+
+/**
+ * @summary Embeds a live preview iframe and drives the hp-preview postMessage
+ * protocol: answers the frame's ready handshake with a config payload fetched
+ * from data-uri, auto-saves watched forms on change, and refreshes the
+ * preview after each save.
+ * @documentation https://zinc.style/components/preview-frame
+ * @status experimental
+ * @since 1.0
+ *
+ * @event zn-error - Emitted when the preview reports a render error or a save fails.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart iframe - The preview iframe.
+ * @csspart error - The error overlay.
+ */
+export default class ZnPreviewFrame extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  /** URL of the preview shell page (tokened embed URL). */
+  @property() src = '';
+
+  /** Expected origin of the iframe; all postMessage traffic is checked against it. */
+  @property({attribute: 'frame-origin'}) frameOrigin = '';
+
+  /** Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution. */
+  @property({attribute: 'data-uri'}) dataUri = '';
+
+  /**
+   * Selector (resolved against the component's root node) for the forms to watch.
+   * Defaults to only forms explicitly opted in via a `data-auto-save` attribute —
+   * unmarked forms keep normal submit behavior and are never intercepted,
+   * auto-saved, or used to trigger a preview refresh. Override to widen the scope.
+   */
+  @property() watch = 'form[data-auto-save]';
+
+  /** Debounce in ms between a form change and its auto-save. */
+  @property({type: Number}) debounce = 400;
+
+  /**
+   * Zooms the previewed page out (0–1]. The frame always fills the panel;
+   * zoom shrinks the content browser-style, so 0.4 shows the page at 40%
+   * size with correspondingly more of it visible. 1 = natural size.
+   */
+  @property({type: Number}) zoom = 1;
+
+  /**
+   * The visible height (in CSS pixels) of the preview panel. Fixed rather
+   * than measured, because a measured height would feed back into the
+   * scaled iframe's layout box and grow unbounded.
+   */
+  @property({type: Number, attribute: 'min-height'}) minHeight = 480;
+
+  @query('iframe') frame: HTMLIFrameElement;
+
+  @state() private error = '';
+
+  private _generation = 0;
+
+  private readonly _watchedForms = new Set<HTMLFormElement>();
+  private readonly _debounceTimers = new Map<HTMLFormElement, number>();
+
+  // Forms are siblings in light DOM and get replaced when other content
+  // re-renders; re-resolve them whenever the surrounding DOM changes.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  private readonly _formObserver = new MutationController(this, {
+    target: null,
+    config: {subtree: true, childList: true},
+    callback: () => this._attachForms(),
+  });
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('message', this._onMessage);
+    this._attachForms();
+    const root = this.getRootNode();
+    if (root instanceof Document) {
+      this._formObserver.observe(root.body);
+    } else if (root instanceof ShadowRoot) {
+      // MutationController's type only accepts Element, but MutationObserver.observe()
+      // accepts any Node at runtime, including a ShadowRoot.
+      this._formObserver.observe(root as unknown as Element);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('message', this._onMessage);
+    this._watchedForms.forEach(form => this._detachForm(form));
+    this._watchedForms.clear();
+  }
+
+  private readonly _onMessage = (e: MessageEvent) => {
+    // Fail closed: with frame-origin unset, every message is rejected.
+    if (e.origin !== this.frameOrigin) return;
+    if (!this.frame || e.source !== this.frame.contentWindow) return;
+
+    const data = e.data as {type?: string; message?: string} | undefined;
+    switch (data?.type) {
+      case 'hp-preview:ready':
+        void this._sendConfig();
+        break;
+      case 'hp-preview:rendered':
+        this.error = '';
+        break;
+      case 'hp-preview:error':
+        this._fail(String(data.message ?? 'Preview failed to render'));
+        break;
+    }
+  };
+
+  /** Re-fetches the payload and pushes a fresh config to the preview. */
+  refresh() {
+    return this._sendConfig();
+  }
+
+  private async _sendConfig() {
+    const generation = ++this._generation;
+    try {
+      const response = await fetch(this.dataUri, {
+        credentials: 'same-origin',
+        // The console proxy pagelet-wraps app responses; 'download' streams
+        // the endpoint's raw JSON through verbatim.
+        headers: {'x-kx-fetch-style': 'download'},
+      });
+      if (!response.ok) {
+        throw new Error(await response.text() || response.statusText);
+      }
+      const payload = await response.json() as Record<string, unknown>;
+      if (generation !== this._generation) return; // a newer refresh is in flight
+      this.frame?.contentWindow?.postMessage(
+        {type: 'hp-preview:config', ...payload},
+        this.frameOrigin
+      );
+    } catch (err) {
+      if (generation === this._generation) {
+        this._fail(err instanceof Error ? err.message : String(err));
+      }
+    }
+  }
+
+  private _attachForms() {
+    const root = this.getRootNode() as Document | ShadowRoot;
+    const matched = new Set<HTMLFormElement>();
+    root.querySelectorAll(this.watch).forEach(node => {
+      if (node instanceof HTMLFormElement) matched.add(node);
+    });
+
+    this._watchedForms.forEach(form => {
+      if (!matched.has(form)) {
+        this._detachForm(form);
+        this._watchedForms.delete(form);
+      }
+    });
+
+    matched.forEach(form => {
+      if (this._watchedForms.has(form)) return;
+      this._watchedForms.add(form);
+      form.addEventListener('submit', this._onSubmit, {capture: true});
+      form.addEventListener('zn-change', this._onChange);
+      form.addEventListener('zn-input', this._onChange);
+      form.addEventListener('change', this._onChange);
+    });
+  }
+
+  private _detachForm(form: HTMLFormElement) {
+    form.removeEventListener('submit', this._onSubmit, {capture: true});
+    form.removeEventListener('zn-change', this._onChange);
+    form.removeEventListener('zn-input', this._onChange);
+    form.removeEventListener('change', this._onChange);
+    const timer = this._debounceTimers.get(form);
+    if (timer) window.clearTimeout(timer);
+    this._debounceTimers.delete(form);
+  }
+
+  private readonly _onChange = (e: Event) => {
+    const form = e.currentTarget as HTMLFormElement;
+    const existing = this._debounceTimers.get(form);
+    if (existing) window.clearTimeout(existing);
+    this._debounceTimers.set(form, window.setTimeout(() => {
+      this._debounceTimers.delete(form);
+      if (!form.isConnected) return;
+      form.requestSubmit();
+    }, this.debounce));
+  };
+
+  private readonly _onSubmit = (e: SubmitEvent) => {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    void this._save(e.currentTarget as HTMLFormElement);
+  };
+
+  private async _save(form: HTMLFormElement) {
+    try {
+      const response = await fetch(form.getAttribute('action') || '', {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: new FormData(form),
+      });
+      if (!response.ok) {
+        throw new Error(await response.text() || response.statusText);
+      }
+      await this._sendConfig();
+    } catch (err) {
+      this._fail(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  private _fail(message: string) {
+    this.error = message;
+    this.emit('zn-error', {detail: {message}});
+  }
+
+  render() {
+    const zoom = this.zoom > 0 && this.zoom <= 1 ? this.zoom : 1;
+    // Browser-style zoom-out: the iframe lays out oversized (1/zoom) and is
+    // transformed back down, so the frame fills the panel while the content
+    // renders smaller and more of the page is visible. Percentage width means
+    // nothing is measured — no layout feedback loop.
+    const iframeStyles = {
+      width: `${100 / zoom}%`,
+      height: `${this.minHeight / zoom}px`,
+      transform: `scale(${zoom})`,
+      transformOrigin: '0 0',
+    };
+    const containerStyles = {height: `${this.minHeight}px`};
+
+    return html`
+      <div part="base" class="preview" style="${styleMap(containerStyles)}">
+        <iframe part="iframe"
+                src="${this.src}"
+                title="Payment form preview"
+                allow="local-network-access"
+                style="${styleMap(iframeStyles)}"></iframe>
+        ${this.error ? html`
+          <div part="error" class="preview__error">${this.error}</div>` : ''}
+      </div>`;
+  }
+}

package/src/components/preview-frame/preview-frame.scss

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+}
+
+.preview {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+iframe {
+  display: block;
+  width: 100%;
+  border: 0;
+}
+
+.preview__error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.65);
+  color: #fff;
+}

package/src/components/preview-frame/preview-frame.test.ts

@@ -0,0 +1,268 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+
+// The container's ResizeObserver can emit a benign "loop completed with undelivered
+// notifications" warning when the panel resizes during layout-measuring tests. It's
+// not a real error — ignore it so the test runner doesn't treat it as an uncaught
+// exception (capture phase runs before the runner's).
+window.addEventListener('error', (e: ErrorEvent) => {
+  if (typeof e.message === 'string' && e.message.includes('ResizeObserver loop')) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}, true);
+
+describe('<zn-preview-frame>', () => {
+  it('renders an iframe pointing at src', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame
+        src="https://site.example/embed/preview?t=x"
+        frame-origin="https://site.example"
+        data-uri="/payload"></zn-preview-frame>`);
+
+    const iframe = el.shadowRoot!.querySelector('iframe');
+    expect(iframe).to.exist;
+    expect(iframe!.getAttribute('src')).to.equal('https://site.example/embed/preview?t=x');
+  });
+
+  const FIXTURE = html`
+    <zn-preview-frame
+      src="about:blank"
+      frame-origin="https://site.example"
+      data-uri="/payload"></zn-preview-frame>`;
+
+  const PAYLOAD = {pageType: 'payment.subscribe', page: {Name: 'Page'}, config: {BaseProduct: 'prod'}};
+
+  let fetchCalls: {uri: string; init?: RequestInit}[];
+  const realFetch = window.fetch;
+
+  beforeEach(() => {
+    fetchCalls = [];
+    window.fetch = (uri: RequestInfo | URL, init?: RequestInit) => {
+      fetchCalls.push({uri: String(uri), init});
+      return Promise.resolve(new Response(JSON.stringify(PAYLOAD), {
+        status: 200,
+        headers: {'Content-Type': 'application/json'}
+      }));
+    };
+  });
+
+  afterEach(() => {
+    window.fetch = realFetch;
+  });
+
+  function ready(el: Element, origin = 'https://site.example') {
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    window.dispatchEvent(new MessageEvent('message', {
+      data: {type: 'hp-preview:ready'},
+      origin,
+      source: iframe.contentWindow
+    }));
+    return iframe;
+  }
+
+  it('answers hp-preview:ready by fetching the payload and posting hp-preview:config', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: {msg: Record<string, unknown>; origin: string}[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>, origin: string) => void}).postMessage =
+      (msg: Record<string, unknown>, origin: string) => posted.push({msg, origin});
+
+    ready(el);
+
+    await waitUntil(() => posted.length === 1);
+    expect(fetchCalls[0].uri).to.equal('/payload');
+    expect((fetchCalls[0].init?.headers as Record<string, string>)['x-kx-fetch-style']).to.equal('download');
+    expect(posted[0].origin).to.equal('https://site.example');
+    expect(posted[0].msg['type']).to.equal('hp-preview:config');
+    expect(posted[0].msg['pageType']).to.equal('payment.subscribe');
+    expect(posted[0].msg['config']).to.deep.equal({BaseProduct: 'prod'});
+  });
+
+  it('refresh() re-fetches the payload and posts a fresh config', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: Record<string, unknown>[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>) => void}).postMessage = (msg: Record<string, unknown>) => posted.push(msg);
+
+    await (el as HTMLElement & {refresh: () => Promise<void>}).refresh();
+
+    expect(fetchCalls[0].uri).to.equal('/payload');
+    expect(posted[0]['type']).to.equal('hp-preview:config');
+  });
+
+  it('ignores messages from other origins', async () => {
+    const el = await fixture(FIXTURE);
+    ready(el, 'https://evil.example');
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(fetchCalls.length).to.equal(0);
+  });
+
+  it('rejects all messages when frame-origin is unset', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame src="about:blank" data-uri="/payload"></zn-preview-frame>`);
+    ready(el, 'https://site.example');
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(fetchCalls.length).to.equal(0);
+  });
+
+  it('auto-saves a watched form on change, then refreshes the preview', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post" data-auto-save>
+          <input name="caption" value="hello">
+        </form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          debounce="10"></zn-preview-frame>
+      </div>`);
+
+    const el = wrapper.querySelector('zn-preview-frame')!;
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    const posted: Record<string, unknown>[] = [];
+    (iframe.contentWindow as {postMessage: (msg: Record<string, unknown>) => void}).postMessage = (msg: Record<string, unknown>) => posted.push(msg);
+
+    const form = wrapper.querySelector('form')!;
+    form.querySelector('input')!.dispatchEvent(
+      new Event('change', {bubbles: true}));
+
+    await waitUntil(() => fetchCalls.length === 2);
+    expect(fetchCalls[0].uri).to.contain('/save');
+    expect(fetchCalls[0].init?.method).to.equal('POST');
+    expect(fetchCalls[0].init?.body).to.be.instanceOf(FormData);
+    expect((fetchCalls[0].init!.body as FormData).get('caption')).to.equal('hello');
+    expect(fetchCalls[1].uri).to.equal('/payload');
+    await waitUntil(() => posted.length === 1);
+    expect(posted[0]['type']).to.equal('hp-preview:config');
+  });
+
+  it('intercepts watched form submits so they never bubble to the shell', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post" data-auto-save><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"></zn-preview-frame>
+      </div>`);
+
+    let bubbled = false;
+    wrapper.addEventListener('submit', () => { bubbled = true; });
+
+    wrapper.querySelector('form')!.requestSubmit();
+
+    await waitUntil(() => fetchCalls.length >= 1);
+    expect(bubbled).to.equal(false);
+    expect(fetchCalls[0].uri).to.contain('/save');
+  });
+
+  it('does not save a form removed from the DOM mid-debounce', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post" data-auto-save><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          debounce="10"></zn-preview-frame>
+      </div>`);
+
+    const form = wrapper.querySelector('form')!;
+    form.querySelector('input')!.dispatchEvent(new Event('change', {bubbles: true}));
+    form.remove();
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(fetchCalls.length).to.equal(0);
+  });
+
+  it('leaves forms without data-auto-save alone', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post"><input name="a" value="1"></form>
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          debounce="10"></zn-preview-frame>
+      </div>`);
+
+    let bubbled = false;
+    wrapper.addEventListener('submit', e => { bubbled = true; e.preventDefault(); });
+
+    const form = wrapper.querySelector('form')!;
+    form.querySelector('input')!.dispatchEvent(new Event('change', {bubbles: true}));
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(fetchCalls.length).to.equal(0);
+
+    form.requestSubmit();
+    expect(bubbled).to.equal(true);
+  });
+
+  it('shows hp-preview:error messages in the overlay and clears on rendered', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    let znError: CustomEvent<{message?: string}> | null = null;
+    el.addEventListener('zn-error', (e: Event) => { znError = e as CustomEvent<{message?: string}>; });
+
+    window.dispatchEvent(new MessageEvent('message', {
+      data: {type: 'hp-preview:error', message: 'bad config'},
+      origin: 'https://site.example',
+      source: iframe.contentWindow
+    }));
+
+    await waitUntil(() => el.shadowRoot!.querySelector('[part="error"]'));
+    expect(el.shadowRoot!.querySelector('[part="error"]')!.textContent).to.contain('bad config');
+    expect(znError).to.exist;
+    expect(znError!.detail.message).to.equal('bad config');
+
+    window.dispatchEvent(new MessageEvent('message', {
+      data: {type: 'hp-preview:rendered'},
+      origin: 'https://site.example',
+      source: iframe.contentWindow
+    }));
+
+    await waitUntil(() => !el.shadowRoot!.querySelector('[part="error"]'));
+  });
+
+  it('shows a payload fetch failure in the overlay', async () => {
+    window.fetch = () => Promise.resolve(new Response('payload exploded', {status: 500}));
+    const el = await fixture(FIXTURE);
+    ready(el);
+
+    await waitUntil(() => el.shadowRoot!.querySelector('[part="error"]'));
+    expect(el.shadowRoot!.querySelector('[part="error"]')!.textContent).to.contain('payload exploded');
+  });
+
+  it('zooms the content out: oversized layout scaled back into the frame', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame
+        src="about:blank"
+        frame-origin="https://site.example"
+        data-uri="/payload"
+        zoom="0.4"
+        min-height="600"></zn-preview-frame>`);
+
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    await waitUntil(() => iframe.style.transform === 'scale(0.4)');
+    // 1/zoom oversize, transformed back down — the frame itself fills the
+    // panel while the page renders at 40%.
+    expect(iframe.style.width).to.equal('250%');
+    expect(iframe.style.height).to.equal('1500px');
+    const container = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+    expect(container.style.height).to.equal('600px');
+  });
+
+  it('renders at natural size by default', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    await waitUntil(() => iframe.style.transform === 'scale(1)');
+    expect(iframe.style.width).to.equal('100%');
+    expect(iframe.style.height).to.equal('480px');
+    const container = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+    expect(container.style.height).to.equal('480px');
+  });
+});

package/src/components/query-builder/query-builder.component.ts

@@ -398,7 +398,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
       <zn-datepicker
         name="${uniqueId}"
         format-time="HH:mm"
-        time-picker="${hasTime}"
+        ?time-picker="${hasTime}"
         class="query-builder__value"
         @zn-change="${(e: ZnChangeEvent) => this._updateDateValue(uniqueId, e, submitFormat)}"
         >

package/src/components/select/select.component.ts

@@ -1109,6 +1109,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.updateComplete.then(() => {
         this.emit('zn-input');
         this.emit('zn-change');
+
+        if (this.triggerSubmit) {
+          this.formControlController.submit();
+        }
       });
     }
   }

package/src/components/select/select.test.ts

@@ -260,6 +260,35 @@ describe('<zn-select>', () => {
     });
   });
 
+  describe('trigger-submit', () => {
+    it('submits the form when a tag is removed', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-select multiple trigger-submit value="a b">
+            <zn-option value="a">Option 1</zn-option>
+            <zn-option value="b">Option 2</zn-option>
+          </zn-select>
+        </form>
+      `);
+      const el = form.querySelector<ZnSelect>('zn-select')!;
+      await el.updateComplete;
+
+      let submitted = false;
+      form.addEventListener('submit', e => {
+        e.preventDefault();
+        submitted = true;
+      });
+
+      const removeIcon = el.shadowRoot!.querySelector<HTMLElement>('.select__tags zn-icon[slot="action"]')!;
+      removeIcon.click();
+      await el.updateComplete;
+      await el.updateComplete;
+
+      expect(el.value).to.deep.equal(['b']);
+      expect(submitted).to.be.true;
+    });
+  });
+
   describe('free-text', () => {
     const type = (el: ZnSelect, text: string) => {
       const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;

package/src/components/sp/sp.scss

@@ -36,6 +36,10 @@
   height: 100%;
   margin: var(--zn-default-margin, 0 auto);
 
+  &--divide {
+    gap: calc(var(--zn-sp-gap) * 2);
+  }
+
   &--divide.sp--no-gap {
     ::slotted(*:not(:last-child)) {
       border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
@@ -54,7 +58,7 @@
         left: 0;
         width: 100%;
         max-width: 100%;
-        bottom: calc((var(--zn-sp-gap) / 2) * -1);
+        bottom: calc((var(--zn-sp-gap) / 1) * -1);
         background-color: rgb(var(--zn-border-color));
       }
     }

package/src/components/tile/tile.scss

@@ -25,8 +25,12 @@
     padding-inline: var(--zn-base-gap);
   }
 
+  &--has-description#{&}--has-caption {
+    padding-block: var(--zn-spacing-small);
+  }
+
   &--has-image {
-    padding: var(--zn-base-gap);
+    padding: var(--zn-spacing-small);
   }
 
   &--has-href {

package/src/components/toggle/toggle.component.ts

@@ -36,7 +36,7 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'description');
 
   private readonly formControlController = new FormControlController(this, {
-    value: (control: ZnToggle) => (control.checked ? control.value || 'on' : undefined),
+    value: (control: ZnToggle) => (control.checked ? control.value || 'on' : control.fallbackValue),
     defaultValue: (control: ZnToggle) => control.defaultChecked,
     setValue: (control: ZnToggle, checked: boolean) => (control.checked = checked)
   });
@@ -51,7 +51,8 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
   @property() value: string;
 
-  @property({ attribute: 'fallback' }) fallbackValue: string = '';
+  /** The value submitted when the toggle is unchecked, so the toggle always submits a value. */
+  @property({ attribute: 'fallback' }) fallbackValue: string = 'off';
 
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -167,15 +168,6 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
   // End Public API methods
 
   render() {
-    let fallback = html``;
-    if (this.fallbackValue !== '') {
-      fallback = html`
-        <input type="hidden"
-               name=${this.name}
-               value=${this.fallbackValue}
-        />`;
-    }
-
     const tooltipContent = this.checked ? this.onText : this.offText;
     const showTooltip = !!tooltipContent;
     const hasHelpText = this.helpText ? true : this.hasSlotController.test('help-text');
@@ -183,7 +175,6 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
     const toggle = html`
       <div class="switch__input-wrapper" part="base">
-        ${fallback}
         <input
           class="switch__input"
           type="checkbox"