From b1f92e1639819b8555fbf6e9a1a0699f0659341f Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 13:12:38 -0300
Subject: [PATCH 01/25] internal(summary-control): add support for rendering
 count in details summary

---
 .../InternalSummaryControl.test.ts             | 18 ++++++++++++++++++
 .../InternalSummaryControl.ts                  |  9 +++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts
index fccdfb39..fcb92fc7 100644
--- a/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts
+++ b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts
@@ -25,6 +25,11 @@ describe('InternalSummaryControl', () => {
     expect(new Control()).to.have.property('layout', null);
   });
 
+  it('has a reactive property "count" that defaults to null', () => {
+    expect(Control).to.have.deep.nested.property('properties.count', { type: Number });
+    expect(new Control()).to.have.property('count', null);
+  });
+
   it('has a reactive property "open" that defaults to false', () => {
     expect(Control).to.have.deep.nested.property('properties.open', { type: Boolean });
     expect(new Control()).to.have.property('open', false);
@@ -48,6 +53,19 @@ describe('InternalSummaryControl', () => {
     expect(control.renderRoot).to.include.text('Foo bar');
   });
 
+  it('renders count in label if .count is set and layout is "details"', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-summary-control layout="details" label="Test"></foxy-internal-summary-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('Test');
+    expect(control.renderRoot).to.not.include.text('Test (123)');
+
+    control.count = 123;
+    await control.requestUpdate();
+    expect(control.renderRoot).to.include.text('Test (123)');
+  });
+
   it('renders helper text in default layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-summary-control></foxy-internal-summary-control>
diff --git a/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts
index c2ee5c58..d3ca55c4 100644
--- a/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts
+++ b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts
@@ -9,6 +9,7 @@ export class InternalSummaryControl extends InternalEditableControl {
     return {
       ...super.properties,
       layout: {},
+      count: { type: Number },
       open: { type: Boolean },
     };
   }
@@ -35,6 +36,8 @@ export class InternalSummaryControl extends InternalEditableControl {
 
   layout: null | 'section' | 'details' = null;
 
+  count: number | null = null;
+
   open = false;
 
   renderLightDom(): void {
@@ -50,7 +53,7 @@ export class InternalSummaryControl extends InternalEditableControl {
           @toggle=${(evt: Event) => {
             const details = evt.currentTarget as HTMLDetailsElement;
             this.open = details.open;
-            if (!evt.composed) this.dispatchEvent(new CustomEvent('toggle'));
+            if (!evt.composed && !evt.bubbles) this.dispatchEvent(new CustomEvent('toggle'));
           }}
         >
           <summary class="select-none cursor-pointer focus-outline-none group">
@@ -63,7 +66,9 @@ export class InternalSummaryControl extends InternalEditableControl {
                 class="font-medium uppercase text-s tracking-wider flex items-center justify-between gap-s"
                 ?hidden=${!this.label}
               >
-                <span>${this.label}</span>
+                <span>
+                  ${this.label}${typeof this.count === 'number' ? ` (${this.count})` : ''}
+                </span>
                 <span
                   class="flex items-center justify-center transition-colors text-tertiary group-hover-text-body"
                   style="transform: scale(1.35)"

From 9cfa9fd39a2720d766eb860cf52980699ff9e5ec Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 13:14:42 -0300
Subject: [PATCH 02/25] internal(async-list-control): add support for hiding
 when empty and rendering in details layout

---
 .../InternalAsyncListControl.test.ts          | 2161 +++++++++--------
 .../InternalAsyncListControl.ts               |  427 ++--
 .../InternalAsyncListControl/index.ts         |    2 +
 3 files changed, 1405 insertions(+), 1185 deletions(-)

diff --git a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
index 2c61677f..c9ebab68 100644
--- a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
+++ b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
@@ -1,3 +1,4 @@
+import type { InternalSummaryControl } from '../InternalSummaryControl/InternalSummaryControl';
 import type { NotificationElement } from '@vaadin/vaadin-notification';
 import type { CheckboxElement } from '@vaadin/vaadin-checkbox';
 import type { AttributeCard } from '../../public/AttributeCard/AttributeCard';
@@ -20,6 +21,7 @@ import { SwipeActions } from '../../public/SwipeActions/SwipeActions';
 import { getTestData } from '../../../testgen/getTestData';
 import { FormDialog } from '../../public/FormDialog/FormDialog';
 import { Pagination } from '../../public/Pagination/Pagination';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { getByTag } from '../../../testgen/getByTag';
 import { getByKey } from '../../../testgen/getByKey';
 import { spread } from '@open-wc/lit-helpers';
@@ -30,6 +32,15 @@ import { getByTestClass } from '../../../testgen/getByTestClass';
 import { createRouter } from '../../../server/hapi';
 import { Type } from '../../public/QueryBuilder/types';
 
+customElements.define(
+  'x-test-control-with-error-message',
+  class extends Control {
+    protected get _errorMessage() {
+      return 'Test error message';
+    }
+  }
+);
+
 describe('InternalAsyncListControl', () => {
   const OriginalResizeObserver = window.ResizeObserver;
 
@@ -150,6 +161,11 @@ describe('InternalAsyncListControl', () => {
     expect(Control).to.have.deep.nested.property('properties.related', { type: Array });
   });
 
+  it('has a reactive property "layout"', () => {
+    expect(new Control()).to.have.property('layout', null);
+    expect(Control).to.have.deep.nested.property('properties.layout', {});
+  });
+
   it('has a reactive property "first"', () => {
     expect(new Control()).to.have.property('first', null);
     expect(Control).to.have.deep.nested.property('properties.first', {});
@@ -191,6 +207,19 @@ describe('InternalAsyncListControl', () => {
     expect(Control).to.have.deep.nested.property('properties.wide', { type: Boolean });
   });
 
+  it('has a reactive property "open"', () => {
+    expect(new Control()).to.have.property('open', false);
+    expect(Control).to.have.deep.nested.property('properties.open', { type: Boolean });
+  });
+
+  it('has a reactive property "hideWhenEmpty"', () => {
+    expect(new Control()).to.have.property('hideWhenEmpty', false);
+    expect(Control).to.have.deep.nested.property('properties.hideWhenEmpty', {
+      type: Boolean,
+      attribute: 'hide-when-empty',
+    });
+  });
+
   it('has a reactive property "alert"', () => {
     expect(new Control()).to.have.property('alert', false);
     expect(Control).to.have.deep.nested.property('properties.alert', { type: Boolean });
@@ -275,7 +304,7 @@ describe('InternalAsyncListControl', () => {
     expect(dialog).to.have.attribute('infer', '');
   });
 
-  it("renders a translated label if it's defined", async () => {
+  it("renders a translated label in default layout if it's defined", async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-async-list-control></foxy-internal-async-list-control>
     `);
@@ -288,1110 +317,1212 @@ describe('InternalAsyncListControl', () => {
     expect(control.renderRoot).to.include.text('Test label');
   });
 
-  it('renders a pagination element for collection items', async () => {
+  it('renders helper text in default layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-async-list-control></foxy-internal-async-list-control>
     `);
 
-    const pagination = await getByTag(control, 'foxy-pagination');
-
-    expect(pagination).to.exist;
-    expect(pagination).to.not.have.attribute('first');
-    expect(pagination).to.have.attribute('infer', 'pagination');
-
-    control.first = 'https://demo.api/virtual/stall';
-    control.limit = 5;
-    await control.requestUpdate();
-
-    expect(pagination).to.have.attribute('first', 'https://demo.api/virtual/stall?limit=5');
-  });
-
-  it('renders a collection page under pagination', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination?.querySelector('foxy-collection-page');
-
-    expect(page).to.exist;
-    expect(page).to.have.attribute('infer', 'card');
-    expect(page).to.have.deep.property('related', []);
-    expect(page).to.have.deep.property('props', {});
-
-    control.related = ['https://demo.api/virtual/stall'];
-    await control.requestUpdate();
-    expect(page).to.have.deep.property('related', ['https://demo.api/virtual/stall']);
+    expect(control.renderRoot).to.include.text('helper_text');
 
-    control.itemProps = { foo: 'bar' };
+    control.helperText = 'Test helper text';
     await control.requestUpdate();
-    expect(page).to.have.deep.property('props', { foo: 'bar' });
-  });
-
-  it('can render collection page items as simple list items using local name', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = 'foxy-attribute-card';
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: null,
-        next: null,
-        ns: '',
-      })
-    );
-
-    expect(item).to.have.property('localName', 'foxy-attribute-card');
-    expect(item).to.have.attribute('related', '["https://demo.api/virtual/stall?related"]');
-    expect(item).to.have.attribute('parent', 'https://demo.api/virtual/stall?parent');
-    expect(item).to.have.attribute('infer', '');
-    expect(item).to.have.attribute('href', 'https://demo.api/virtual/stall?href');
-  });
-
-  it('can render collection page items as simple list items using render function', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = () => html`<div data-testclass="item"></div>`;
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: null,
-        next: null,
-        ns: '',
-      })
-    );
-
-    expect(item).to.include.html('<div data-testclass="item"></div>');
-  });
-
-  it('can render collection page items as links using local name', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.getPageHref = href => `https://demo.api/virtual/stall?href=${encodeURIComponent(href)}`;
-    control.item = 'foxy-attribute-card';
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const card = item.querySelector('foxy-attribute-card')!;
-    const a = card.closest('a')!;
-
-    expect(card).to.have.attribute('related', '["https://demo.api/virtual/stall?related"]');
-    expect(card).to.have.attribute('parent', 'https://demo.api/virtual/stall?parent');
-    expect(card).to.have.attribute('infer', '');
-    expect(card).to.have.attribute('href', 'https://demo.api/virtual/stall?href');
-
-    expect(a).to.have.attribute(
-      'href',
-      `https://demo.api/virtual/stall?href=${encodeURIComponent(
-        'https://demo.api/virtual/stall?href'
-      )}`
-    );
-  });
-
-  it('can render collection page items as links using render function', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.getPageHref = href => `https://demo.api/virtual/stall?href=${encodeURIComponent(href)}`;
-    control.item = () => html`<div data-testclass="item"></div>`;
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const a = item.querySelector('a')!;
-
-    expect(a).to.include.html('<div data-testclass="item"></div>');
-    expect(a).to.have.attribute(
-      'href',
-      `https://demo.api/virtual/stall?href=${encodeURIComponent(
-        'https://demo.api/virtual/stall?href'
-      )}`
-    );
-  });
-
-  it('can render collection page items as buttons opening a dialog using local name', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = 'foxy-attribute-card';
-    control.form = 'foxy-attribute-form';
-
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-    const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
-
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const card = item.querySelector('foxy-attribute-card')!;
-    const button = card.closest('button')!;
-    const showMethod = stub(dialog, 'show');
-
-    expect(card).to.have.attribute('related', '["https://demo.api/virtual/stall?related"]');
-    expect(card).to.have.attribute('parent', 'https://demo.api/virtual/stall?parent');
-    expect(card).to.have.attribute('infer', '');
-    expect(card).to.have.attribute('href', 'https://demo.api/virtual/stall?href');
-
-    button.click();
-
-    expect(showMethod).to.have.been.called;
-    expect(dialog).to.have.property('header', 'header_update');
-    expect(dialog).to.have.property('href', 'https://demo.api/virtual/stall?href');
-  });
-
-  it('can render collection page items as buttons opening a dialog using render function', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = () => html`<div data-testclass="item"></div>`;
-    control.form = 'foxy-attribute-form';
-
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-    const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
-
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const button = item.querySelector('button')!;
-    expect(button).to.include.html('<div data-testclass="item"></div>');
-
-    const showMethod = stub(dialog, 'show');
-    button.click();
-
-    expect(showMethod).to.have.been.called;
-    expect(dialog).to.have.property('header', 'header_update');
-    expect(dialog).to.have.property('href', 'https://demo.api/virtual/stall?href');
-  });
-
-  it('renders Delete button for collection page items', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = 'foxy-attribute-card';
-    control.form = 'foxy-attribute-form';
-
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-
-    const swipeActions = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const card = swipeActions.querySelector('foxy-attribute-card') as AttributeCard;
-    const label = swipeActions.querySelector('[key="delete_button_text"]')!;
-    const button = label.closest('vaadin-button')!;
-    const confirm = (await getByTag(
-      control,
-      'foxy-internal-confirm-dialog'
-    )) as InternalConfirmDialog;
-
-    expect(swipeActions).to.have.property('localName', 'foxy-swipe-actions');
-    expect(label).to.have.property('localName', 'foxy-i18n');
-    expect(label).to.have.attribute('infer', '');
-    expect(button).to.have.attribute('slot', 'action');
-
-    const confirmShowMethod = stub(confirm, 'show');
-    button.click();
-
-    expect(confirmShowMethod).to.have.been.called;
-
-    const cardDeleteMethod = stub(card, 'delete');
-    confirm.dispatchEvent(new DialogHideEvent());
-
-    expect(cardDeleteMethod).to.have.been.called;
-  });
-
-  it('hides delete button for collection page items if hideDeleteButton is true', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = 'foxy-attribute-card';
-    control.form = 'foxy-attribute-form';
-    control.hideDeleteButton = true;
-
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-
-    const swipeActions = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const selector = 'vaadin-button foxy-i18n[key="delete_button_text"]';
-    expect(swipeActions.querySelector(selector)).to.not.exist;
-  });
-
-  it('hides delete button for collection page items when readonly', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
 
-    control.item = 'foxy-attribute-card';
-    control.form = 'foxy-attribute-form';
-    control.readonly = true;
-
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-
-    const swipeActions = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const selector = 'vaadin-button foxy-i18n[key="delete_button_text"]';
-    expect(swipeActions.querySelector(selector)).to.not.exist;
-  });
-
-  it('renders Create button when .form is defined', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = 'foxy-attribute-card';
-    control.form = 'foxy-attribute-form';
-
-    const label = (await getByKey(control, 'create_button_text'))!;
-    const button = label.closest('vaadin-button')!;
-    const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
-
-    expect(label).to.have.property('localName', 'foxy-i18n');
-    expect(label).to.have.attribute('infer', 'pagination');
-
-    const dialogShowMethod = stub(dialog, 'show');
-    button.click();
-
-    expect(dialogShowMethod).to.have.been.called;
-    expect(dialog).to.have.property('header', 'header_create');
-    expect(dialog).to.have.property('href', '');
+    expect(control.renderRoot).to.not.include.text('helper_text');
+    expect(control.renderRoot).to.include.text('Test helper text');
   });
 
-  it('renders Create link when .createPageHref is defined', async () => {
+  it('renders a summary control in details layout', async () => {
+    const router = createRouter();
     const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
+      <foxy-internal-async-list-control
+        layout="details"
+        first="https://demo.api/hapi/transactions"
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+      >
+      </foxy-internal-async-list-control>
     `);
 
-    control.item = 'foxy-attribute-card';
-    control.createPageHref = 'https://example.com';
-
-    const label = (await getByKey(control, 'create_button_text'))!;
-    const a = label.closest('a')!;
-
-    expect(label).to.have.property('localName', 'foxy-i18n');
-    expect(label).to.have.attribute('infer', '');
-    expect(a).to.have.attribute('href', 'https://example.com');
-  });
+    const summary = control.renderRoot.querySelector(
+      'foxy-internal-summary-control'
+    ) as InternalSummaryControl;
 
-  it("hides Create link/button if there's no form", async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = 'foxy-attribute-card';
+    const collectionPage = summary.querySelector('foxy-collection-page') as CollectionPage<any>;
+    await waitUntil(() => !!collectionPage.data, undefined, { timeout: 5000 });
     await control.requestUpdate();
 
-    const buttonSelector = 'vaadin-button foxy-i18n[key="create_button_text"]';
-    const aSelector = 'a foxy-i18n[key="create_button_text"]';
-
-    expect(control.querySelector(buttonSelector)).to.not.exist;
-    expect(control.querySelector(aSelector)).to.not.exist;
-  });
-
-  it('hides Create link/button if control is readonly', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
+    expect(summary).to.exist;
+    expect(summary).to.have.attribute('layout', 'details');
+    expect(summary).to.have.attribute('count', '2');
+    expect(summary).to.not.have.attribute('open');
 
-    control.item = 'foxy-attribute-card';
-    control.form = 'foxy-attribute-form';
-    control.readonly = true;
+    control.open = true;
     await control.requestUpdate();
+    expect(summary).to.have.attribute('open');
+    expect(summary).to.not.have.attribute('count');
 
-    const buttonSelector = 'vaadin-button foxy-i18n[key="create_button_text"]';
-    const aSelector = 'a foxy-i18n[key="create_button_text"]';
-
-    expect(control.querySelector(buttonSelector)).to.not.exist;
-    expect(control.querySelector(aSelector)).to.not.exist;
-  });
-
-  it('hides Create link/button if hideCreateButton is true', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    control.item = 'foxy-attribute-card';
-    control.form = 'foxy-attribute-form';
-    control.hideCreateButton = true;
+    summary.open = false;
+    summary.dispatchEvent(new CustomEvent('toggle'));
     await control.requestUpdate();
-
-    const buttonSelector = 'vaadin-button foxy-i18n[key="create_button_text"]';
-    const aSelector = 'a foxy-i18n[key="create_button_text"]';
-
-    expect(control.querySelector(buttonSelector)).to.not.exist;
-    expect(control.querySelector(aSelector)).to.not.exist;
+    expect(control).to.have.property('open', false);
+    expect(summary).to.have.attribute('count', '2');
   });
 
-  it('renders helper text', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    expect(control.renderRoot).to.include.text('helper_text');
-
-    control.helperText = 'Test helper text';
-    await control.requestUpdate();
-
-    expect(control.renderRoot).to.not.include.text('helper_text');
-    expect(control.renderRoot).to.include.text('Test helper text');
-  });
-
-  it('render error text if available', async () => {
-    let control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
-
-    expect(control.renderRoot).to.not.include.text('Test error message');
-
-    customElements.define(
-      'x-test-control',
-      class extends Control {
-        protected get _errorMessage() {
-          return 'Test error message';
-        }
-      }
-    );
-
-    control = await fixture<Control>(html`<x-test-control></x-test-control>`);
-    expect(control.renderRoot).to.include.text('Test error message');
-  });
-
-  it('renders actions if configured', async () => {
+  it('visually hides itself when collection has 0 items and hideWhenEmpty is true', async () => {
     const router = createRouter();
     const control = await fixture<Control>(html`
       <foxy-internal-async-list-control
-        first="https://demo.api/hapi/transactions"
-        limit="1"
-        form="foxy-test"
+        first="https://demo.api/hapi/transactions?some_key_that_doesnt_exist=foo"
         @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
       >
       </foxy-internal-async-list-control>
     `);
 
-    await waitUntil(
-      () => !!control.renderRoot.querySelector<CollectionPage<any>>('foxy-collection-page')?.data
-    );
+    const collectionPage = control.renderRoot.querySelector(
+      'foxy-collection-page'
+    ) as CollectionPage<any>;
 
-    let actions = await getByTestClass<ButtonElement>(control, 'action');
-    expect(actions).to.be.empty;
+    await waitUntil(() => !!collectionPage.data, undefined, { timeout: 5000 });
+    await control.requestUpdate();
+    const wrapper = control.shadowRoot?.firstElementChild;
+    expect(wrapper).to.not.have.attribute('class', 'hidden');
 
-    control.actions = [
-      { text: 'action_1', theme: 'primary', state: 'idle', onClick: stub() },
-      { text: 'action_2', theme: 'secondary', state: 'busy', onClick: stub() },
-    ];
+    control.hideWhenEmpty = true;
+    await control.requestUpdate();
+    expect(wrapper).to.have.attribute('class', 'hidden');
 
+    control.first = 'https://demo.api/hapi/transactions';
+    await control.requestUpdate();
+    await waitUntil(() => !!collectionPage.data, undefined, { timeout: 5000 });
     await control.requestUpdate();
-    actions = await getByTestClass<ButtonElement>(control, 'action');
+    expect(wrapper).to.not.have.attribute('class', 'hidden');
+  });
 
-    expect(actions).to.have.length(2);
+  [undefined, 'details'].forEach(layout => {
+    const layoutLabel = layout ?? 'default';
 
-    expect(actions[0].closest('foxy-swipe-actions')).to.exist;
-    expect(actions[1].closest('foxy-swipe-actions')).to.exist;
-    expect(actions[0].closest('foxy-swipe-actions')).to.equal(
-      actions[1].closest('foxy-swipe-actions')
-    );
+    it(`renders a pagination element for collection items in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
 
-    expect(actions[0]).to.have.attribute('theme', 'primary');
-    expect(actions[1]).to.have.attribute('theme', 'secondary');
+      const pagination = await getByTag(control, 'foxy-pagination');
 
-    actions[0].click();
-    expect(control.actions[0].onClick).to.have.been.calledOnce;
-    expect(control.actions[1].onClick).to.not.have.been.called;
+      expect(pagination).to.exist;
+      expect(pagination).to.not.have.attribute('first');
+      expect(pagination).to.have.attribute('infer', 'pagination');
 
-    actions[1].click();
-    expect(control.actions[0].onClick).to.have.been.calledOnce;
-    expect(control.actions[1].onClick).to.have.been.calledOnce;
+      control.first = 'https://demo.api/virtual/stall';
+      control.limit = 5;
+      await control.requestUpdate();
 
-    const action0Text = actions[0].querySelector('foxy-i18n');
-    expect(action0Text).to.have.attribute('infer', '');
-    expect(action0Text).to.have.attribute('key', 'action_1');
+      expect(pagination).to.have.attribute('first', 'https://demo.api/virtual/stall?limit=5');
+    });
 
-    const action1Text = actions[1].querySelector('foxy-i18n');
-    expect(action1Text).to.have.attribute('infer', '');
-    expect(action1Text).to.have.attribute('key', 'action_2');
+    it(`renders a collection page under pagination in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
 
-    const action0Spinner = actions[0].querySelector('foxy-spinner');
-    expect(action0Spinner).to.have.attribute('infer', 'spinner');
-    expect(action0Spinner).to.have.attribute('state', 'idle');
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination?.querySelector('foxy-collection-page');
 
-    const action1Spinner = actions[1].querySelector('foxy-spinner');
-    expect(action1Spinner).to.have.attribute('infer', 'spinner');
-    expect(action1Spinner).to.have.attribute('state', 'busy');
-  });
+      expect(page).to.exist;
+      expect(page).to.have.attribute('infer', 'card');
+      expect(page).to.have.deep.property('related', []);
+      expect(page).to.have.deep.property('props', {});
 
-  it('renders filters if configured', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control></foxy-internal-async-list-control>
-    `);
+      control.related = ['https://demo.api/virtual/stall'];
+      await control.requestUpdate();
+      expect(page).to.have.deep.property('related', ['https://demo.api/virtual/stall']);
 
-    expect(await getByKey(control, 'search_button_text')).to.not.exist;
-
-    control.filters = [
-      {
-        label: 'filter_1',
-        type: Type.Boolean,
-        path: 'foo',
-      },
-    ];
-
-    await control.requestUpdate();
-
-    const buttonLabel = await getByKey(control, 'search_button_text');
-    const button = buttonLabel?.closest('vaadin-button');
-    const overlay = control.renderRoot.querySelector(
-      'foxy-internal-async-list-control-filter-overlay'
-    );
-
-    expect(buttonLabel).to.exist;
-    expect(buttonLabel).to.have.attribute('infer', 'pagination');
-
-    expect(button).to.exist;
-    expect(button).to.not.have.attribute('disabled');
-
-    expect(overlay).to.exist;
-    expect(overlay).to.have.property('positionTarget', button);
-    expect(overlay).to.have.deep.property('model', {
-      options: control.filters,
-      value: '',
-      lang: control.lang,
-      ns: control.ns,
+      control.itemProps = { foo: 'bar' };
+      await control.requestUpdate();
+      expect(page).to.have.deep.property('props', { foo: 'bar' });
     });
 
-    expect(overlay).to.not.have.attribute('opened');
-
-    button?.click();
-    await control.requestUpdate();
-    expect(overlay).to.have.attribute('opened');
-
-    overlay?.dispatchEvent(new CustomEvent('vaadin-overlay-close'));
-    await control.requestUpdate();
-    expect(overlay).to.not.have.attribute('opened');
-
-    overlay?.dispatchEvent(new CustomEvent('search', { detail: 'foo=bar' }));
-    await control.requestUpdate();
-    expect(overlay).to.have.deep.property('model', {
-      options: control.filters,
-      value: 'foo=bar',
-      lang: control.lang,
-      ns: control.ns,
+    it(`can render collection page items as simple list items using local name in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      control.item = 'foxy-attribute-card';
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+
+      const wrapper = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: null,
+          next: null,
+          ns: '',
+        })
+      );
+
+      const item = wrapper.firstElementChild;
+
+      expect(item).to.have.property('localName', 'foxy-attribute-card');
+      expect(item).to.have.attribute('related', '["https://demo.api/virtual/stall?related"]');
+      expect(item).to.have.attribute('parent', 'https://demo.api/virtual/stall?parent');
+      expect(item).to.have.attribute('infer', '');
+      expect(item).to.have.attribute('href', 'https://demo.api/virtual/stall?href');
     });
-  });
 
-  it('emits "itemclick" event when collection page item is clicked', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control item="foxy-attribute-card" form="foxy-attribute-form">
-      </foxy-internal-async-list-control>
-    `);
+    it(`can render collection page items as simple list items using render function in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      control.item = () => html`<div data-testclass="item"></div>`;
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+
+      const item = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: null,
+          next: null,
+          ns: '',
+        })
+      );
+
+      expect(item).to.include.html('<div data-testclass="item"></div>');
+    });
 
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-    const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
-
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const card = item.querySelector('foxy-attribute-card')!;
-    const button = card.closest('button')!;
-    const showMethod = stub(dialog, 'show');
-
-    const whenGotItemClickEvent = oneEvent(control, 'itemclick');
-    button.click();
-    const itemClickEvent = await whenGotItemClickEvent;
-
-    expect(itemClickEvent).to.be.instanceOf(CustomEvent);
-    expect(itemClickEvent).to.have.property('cancelable', true);
-    expect(itemClickEvent).to.have.property('composed', true);
-    expect(itemClickEvent).to.have.property('bubbles', true);
-    expect(itemClickEvent).to.have.property('detail', 'https://demo.api/virtual/stall?href');
-    expect(showMethod).to.have.been.called;
-  });
+    it(`can render collection page items as links using local name in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      control.getPageHref = href =>
+        `https://demo.api/virtual/stall?href=${encodeURIComponent(href)}`;
+      control.item = 'foxy-attribute-card';
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+
+      const item = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const card = item.querySelector('foxy-attribute-card')!;
+      const a = card.closest('a')!;
+
+      expect(card).to.have.attribute('related', '["https://demo.api/virtual/stall?related"]');
+      expect(card).to.have.attribute('parent', 'https://demo.api/virtual/stall?parent');
+      expect(card).to.have.attribute('infer', '');
+      expect(card).to.have.attribute('href', 'https://demo.api/virtual/stall?href');
+
+      expect(a).to.have.attribute(
+        'href',
+        `https://demo.api/virtual/stall?href=${encodeURIComponent(
+          'https://demo.api/virtual/stall?href'
+        )}`
+      );
+    });
 
-  it('does not show dialog when "itemclick" event is canceled', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control item="foxy-attribute-card" form="foxy-attribute-form">
-      </foxy-internal-async-list-control>
-    `);
+    it(`can render collection page items as links using render function in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      control.getPageHref = href =>
+        `https://demo.api/virtual/stall?href=${encodeURIComponent(href)}`;
+      control.item = () => html`<div data-testclass="item"></div>`;
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+
+      const item = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const a = item.querySelector('a')!;
+
+      expect(a).to.include.html('<div data-testclass="item"></div>');
+      expect(a).to.have.attribute(
+        'href',
+        `https://demo.api/virtual/stall?href=${encodeURIComponent(
+          'https://demo.api/virtual/stall?href'
+        )}`
+      );
+    });
 
-    const pagination = await getByTag(control, 'foxy-pagination');
-    const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
-    const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
-
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    const card = item.querySelector('foxy-attribute-card')!;
-    const button = card.closest('button')!;
-    const showMethod = stub(dialog, 'show');
-
-    control.addEventListener('itemclick', evt => evt.preventDefault());
-    button.click();
-
-    expect(showMethod).to.not.have.been.called;
-  });
+    it(`can render collection page items as buttons opening a dialog using local name in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      control.item = 'foxy-attribute-card';
+      control.form = 'foxy-attribute-form';
+
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+      const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
+
+      const item = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const card = item.querySelector('foxy-attribute-card')!;
+      const button = card.closest('button')!;
+      const showMethod = stub(dialog, 'show');
+
+      expect(card).to.have.attribute('related', '["https://demo.api/virtual/stall?related"]');
+      expect(card).to.have.attribute('parent', 'https://demo.api/virtual/stall?parent');
+      expect(card).to.have.attribute('infer', '');
+      expect(card).to.have.attribute('href', 'https://demo.api/virtual/stall?href');
+
+      button.click();
+
+      expect(showMethod).to.have.been.called;
+      expect(dialog).to.have.property('header', 'header_update');
+      expect(dialog).to.have.property('href', 'https://demo.api/virtual/stall?href');
+    });
 
-  it('renders Select button when "first" and non-empty .bulkActions are defined', async () => {
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control
-        first="https://demo.api/hapi/customer_attributes"
-        item="foxy-attribute-card"
-        form="foxy-attribute-form"
-      >
-      </foxy-internal-async-list-control>
-    `);
+    it(`can render collection page items as buttons opening a dialog using render function  in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+        ></foxy-internal-async-list-control>
+      `);
+
+      control.item = () => html`<div data-testclass="item"></div>`;
+      control.form = 'foxy-attribute-form';
+
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+      const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
+
+      const item = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const button = item.querySelector('button')!;
+      expect(button).to.include.html('<div data-testclass="item"></div>');
+
+      const showMethod = stub(dialog, 'show');
+      button.click();
+
+      expect(showMethod).to.have.been.called;
+      expect(dialog).to.have.property('header', 'header_update');
+      expect(dialog).to.have.property('href', 'https://demo.api/virtual/stall?href');
+    });
 
-    expect(await getByKey(control, 'select_button_text')).to.not.exist;
+    it(`renders Delete button for collection page items in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      control.item = 'foxy-attribute-card';
+      control.form = 'foxy-attribute-form';
+
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+
+      const swipeActions = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const card = swipeActions.querySelector('foxy-attribute-card') as AttributeCard;
+      const label = swipeActions.querySelector('[key="delete_button_text"]')!;
+      const button = label.closest('vaadin-button')!;
+      const confirm = (await getByTag(
+        control,
+        'foxy-internal-confirm-dialog'
+      )) as InternalConfirmDialog;
+
+      expect(swipeActions).to.have.property('localName', 'foxy-swipe-actions');
+      expect(label).to.have.property('localName', 'foxy-i18n');
+      expect(label).to.have.attribute('infer', '');
+      expect(button).to.have.attribute('slot', 'action');
+
+      const confirmShowMethod = stub(confirm, 'show');
+      button.click();
+
+      expect(confirmShowMethod).to.have.been.called;
+
+      const cardDeleteMethod = stub(card, 'delete');
+      confirm.dispatchEvent(new DialogHideEvent());
+
+      expect(cardDeleteMethod).to.have.been.called;
+    });
 
-    control.first = 'https://demo.api/hapi/customer_attributes';
-    await control.requestUpdate();
-    expect(await getByKey(control, 'select_button_text')).to.not.exist;
+    it(`hides Delete button for collection page items if hideDeleteButton is true in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      control.item = 'foxy-attribute-card';
+      control.form = 'foxy-attribute-form';
+      control.hideDeleteButton = true;
+
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+
+      const swipeActions = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const selector = 'vaadin-button foxy-i18n[key="delete_button_text"]';
+      expect(swipeActions.querySelector(selector)).to.not.exist;
+    });
 
-    control.bulkActions = [];
-    await control.requestUpdate();
-    expect(await getByKey(control, 'select_button_text')).to.not.exist;
+    it(`hides Delete button for collection page items when readonly in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      control.item = 'foxy-attribute-card';
+      control.form = 'foxy-attribute-form';
+      control.readonly = true;
+
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+
+      const swipeActions = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const selector = 'vaadin-button foxy-i18n[key="delete_button_text"]';
+      expect(swipeActions.querySelector(selector)).to.not.exist;
+    });
 
-    control.bulkActions = [{ name: 'foo', onClick: stub() }];
-    await control.requestUpdate();
+    it(`renders Create button when .form is defined in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
 
-    const label = await getByKey(control, 'select_button_text');
-    const button = label?.closest('vaadin-button');
+      control.item = 'foxy-attribute-card';
+      control.form = 'foxy-attribute-form';
 
-    expect(label).to.exist;
-    expect(button).to.exist;
-    expect(label).to.have.property('localName', 'foxy-i18n');
-    expect(label).to.have.attribute('infer', 'pagination');
-  });
+      const label = (await getByKey(control, 'create_button_text'))!;
+      const button = label.closest('vaadin-button')!;
+      const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
 
-  it('renders Cancel button when selection mode is enabled', async () => {
-    const router = createRouter();
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control
-        first="https://demo.api/hapi/customer_attributes"
-        item="foxy-attribute-card"
-        form="foxy-attribute-form"
-        .bulkActions=${[{ name: 'foo', onClick: stub() }]}
-        @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
-      >
-      </foxy-internal-async-list-control>
-    `);
+      expect(label).to.have.property('localName', 'foxy-i18n');
+      expect(label).to.have.attribute('infer', 'pagination');
 
-    const page = await getByTag<CollectionPage<any>>(control, 'foxy-collection-page');
-    await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+      const dialogShowMethod = stub(dialog, 'show');
+      button.click();
 
-    expect(await getByKey(control, 'select_button_text')).to.exist;
-    expect(await getByKey(control, 'cancel_button_text')).to.not.exist;
+      expect(dialogShowMethod).to.have.been.called;
+      expect(dialog).to.have.property('header', 'header_create');
+      expect(dialog).to.have.property('href', '');
+    });
 
-    (await getByKey(control, 'select_button_text'))?.closest('vaadin-button')?.click();
-    await control.requestUpdate();
+    it(`renders Create link when .createPageHref is defined in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
 
-    expect(await getByKey(control, 'select_button_text')).to.not.exist;
-    expect(await getByKey(control, 'cancel_button_text')).to.exist;
-  });
+      control.item = 'foxy-attribute-card';
+      control.createPageHref = 'https://example.com';
 
-  it('renders bulk actions when selection mode is enabled and at least one item is selected', async () => {
-    const router = createRouter();
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control
-        first="https://demo.api/hapi/customer_attributes"
-        item="foxy-attribute-card"
-        form="foxy-attribute-form"
-        .bulkActions=${[{ name: 'foo', onClick: stub() }]}
-        @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
-      >
-      </foxy-internal-async-list-control>
-    `);
+      const label = (await getByKey(control, 'create_button_text'))!;
+      const a = label.closest('a')!;
 
-    const page = await getByTag<CollectionPage<any>>(control, 'foxy-collection-page');
-    await waitUntil(() => !!page?.data, '', { timeout: 5000 });
-    expect(await getByTestClass(control, 'bulk-action')).to.be.empty;
-
-    const label = await getByKey(control, 'select_button_text');
-    const button = label?.closest('vaadin-button');
-    button?.click();
-    await control.requestUpdate();
-    const anyCheckbox = await getByTag<CheckboxElement>(control, 'vaadin-checkbox');
-    expect(anyCheckbox).to.exist;
-    expect(await getByTestClass(control, 'bulk-action')).to.have.length(0);
-
-    anyCheckbox!.checked = true;
-    anyCheckbox!.dispatchEvent(new CustomEvent('change'));
-    await control.requestUpdate();
+      expect(label).to.have.property('localName', 'foxy-i18n');
+      expect(label).to.have.attribute('infer', '');
+      expect(a).to.have.attribute('href', 'https://example.com');
+    });
 
-    const bulkActions = await getByTestClass(control, 'bulk-action');
-    expect(bulkActions).to.have.length(1);
+    it(`hides Create link/button if there's no form in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
 
-    const firstBulkAction = bulkActions[0];
-    const firstBulkActionLabel = firstBulkAction.querySelector('foxy-i18n');
-    expect(firstBulkActionLabel).to.have.attribute('key', 'foo_bulk_action_caption_idle');
-    expect(firstBulkActionLabel).to.have.attribute('infer', 'pagination');
-    expect(firstBulkActionLabel).to.have.deep.property('options', { count: 1 });
-  });
+      control.item = 'foxy-attribute-card';
+      await control.requestUpdate();
 
-  it('renders collection items inside vaadin-checkbox elements when selection mode is enabled', async () => {
-    const router = createRouter();
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control
-        first="https://demo.api/hapi/customer_attributes"
-        item="foxy-attribute-card"
-        form="foxy-attribute-form"
-        .bulkActions=${[{ name: 'foo', onClick: stub() }]}
-        @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
-      >
-      </foxy-internal-async-list-control>
-    `);
+      const buttonSelector = 'vaadin-button foxy-i18n[key="create_button_text"]';
+      const aSelector = 'a foxy-i18n[key="create_button_text"]';
 
-    const page = (await getByTag<CollectionPage<any>>(control, 'foxy-collection-page'))!;
-    await waitUntil(() => !!page?.data, '', { timeout: 5000 });
-    expect(await getByTestClass(control, 'vaadin-checkbox')).to.be.empty;
+      expect(control.querySelector(buttonSelector)).to.not.exist;
+      expect(control.querySelector(aSelector)).to.not.exist;
+    });
 
-    const label = await getByKey(control, 'select_button_text');
-    const button = label?.closest('vaadin-button');
-    button?.click();
-    await control.requestUpdate();
+    it(`hides Create link/button if control is readonly in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
 
-    const item = await fixture(
-      (page.item as ItemRenderer<any>)({
-        simplifyNsLoading: false,
-        readonlyControls: BooleanSelector.False,
-        disabledControls: BooleanSelector.False,
-        hiddenControls: BooleanSelector.False,
-        templates: {},
-        readonly: false,
-        disabled: false,
-        previous: null,
-        related: ['https://demo.api/virtual/stall?related'],
-        hidden: false,
-        parent: 'https://demo.api/virtual/stall?parent',
-        spread: spread,
-        props: {},
-        group: '',
-        html: html,
-        lang: '',
-        href: 'https://demo.api/virtual/stall?href',
-        data: await getTestData('./hapi/customer_attributes/0'),
-        next: null,
-        ns: '',
-      })
-    );
-
-    expect(item).to.have.property('localName', 'vaadin-checkbox');
-    expect(item).to.not.have.attribute('checked');
-
-    const card = item.querySelector('foxy-attribute-card')!;
-
-    expect(card).to.have.attribute('related', '["https://demo.api/virtual/stall?related"]');
-    expect(card).to.have.attribute('parent', 'https://demo.api/virtual/stall?parent');
-    expect(card).to.have.attribute('infer', '');
-    expect(card).to.have.attribute('href', 'https://demo.api/virtual/stall?href');
-  });
+      control.item = 'foxy-attribute-card';
+      control.form = 'foxy-attribute-form';
+      control.readonly = true;
+      await control.requestUpdate();
 
-  it('can run a bulk action on selected items', async () => {
-    const onClick = stub();
-    const router = createRouter();
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control
-        first="https://demo.api/hapi/customer_attributes"
-        item="foxy-attribute-card"
-        form="foxy-attribute-form"
-        .bulkActions=${[{ name: 'foo', onClick }]}
-        @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
-      >
-      </foxy-internal-async-list-control>
-    `);
+      const buttonSelector = 'vaadin-button foxy-i18n[key="create_button_text"]';
+      const aSelector = 'a foxy-i18n[key="create_button_text"]';
 
-    const page = (await getByTag<CollectionPage<any>>(control, 'foxy-collection-page'))!;
-    await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+      expect(control.querySelector(buttonSelector)).to.not.exist;
+      expect(control.querySelector(aSelector)).to.not.exist;
+    });
 
-    const label = await getByKey(control, 'select_button_text');
-    const button = label?.closest('vaadin-button');
-    button?.click();
-    await control.requestUpdate();
+    it(`hides Create link/button if hideCreateButton is true in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
 
-    const checkbox = control.renderRoot.querySelector<CheckboxElement>('vaadin-checkbox');
-    checkbox!.checked = true;
-    checkbox!.dispatchEvent(new CustomEvent('change'));
-    await control.requestUpdate();
+      control.item = 'foxy-attribute-card';
+      control.form = 'foxy-attribute-form';
+      control.hideCreateButton = true;
+      await control.requestUpdate();
 
-    const bulkActions = await getByTestClass(control, 'bulk-action');
-    const fooAction = bulkActions[0];
-    fooAction.click();
+      const buttonSelector = 'vaadin-button foxy-i18n[key="create_button_text"]';
+      const aSelector = 'a foxy-i18n[key="create_button_text"]';
 
-    const customerAttribute0 = await getTestData('./hapi/customer_attributes/0');
-    expect(onClick).to.have.been.calledWithMatch([customerAttribute0]);
-  });
+      expect(control.querySelector(buttonSelector)).to.not.exist;
+      expect(control.querySelector(aSelector)).to.not.exist;
+    });
 
-  it('communicates bulk action state to the user (positive path, no errors)', async () => {
-    let next: (() => void) | null = null;
-    const onClick = () => new Promise<void>(resolve => (next = resolve));
+    it(`renders error text if available in ${layoutLabel} layout`, async () => {
+      let control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
 
-    const router = createRouter();
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control
-        first="https://demo.api/hapi/customer_attributes"
-        lang="es"
-        item="foxy-attribute-card"
-        form="foxy-attribute-form"
-        ns="test"
-        .bulkActions=${[{ name: 'foo', onClick }]}
-        @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
-      >
-      </foxy-internal-async-list-control>
-    `);
+      expect(control.renderRoot).to.not.include.text('Test error message');
 
-    const page = (await getByTag<CollectionPage<any>>(control, 'foxy-collection-page'))!;
-    await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+      control = await fixture<Control>(
+        html`<x-test-control-with-error-message></x-test-control-with-error-message>`
+      );
+      expect(control.renderRoot).to.include.text('Test error message');
+    });
 
-    const label = await getByKey(control, 'select_button_text');
-    const button = label?.closest('vaadin-button');
-    button?.click();
-    await control.requestUpdate();
+    it(`renders actions if configured in ${layoutLabel} layout`, async () => {
+      const router = createRouter();
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          first="https://demo.api/hapi/transactions"
+          limit="1"
+          form="foxy-test"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      await waitUntil(
+        () => !!control.renderRoot.querySelector<CollectionPage<any>>('foxy-collection-page')?.data
+      );
+
+      let actions = await getByTestClass<ButtonElement>(control, 'action');
+      expect(actions).to.be.empty;
+
+      control.actions = [
+        { text: 'action_1', theme: 'primary', state: 'idle', onClick: stub() },
+        { text: 'action_2', theme: 'secondary', state: 'busy', onClick: stub() },
+      ];
+
+      await control.requestUpdate();
+      actions = await getByTestClass<ButtonElement>(control, 'action');
+
+      expect(actions).to.have.length(2);
+
+      expect(actions[0].closest('foxy-swipe-actions')).to.exist;
+      expect(actions[1].closest('foxy-swipe-actions')).to.exist;
+      expect(actions[0].closest('foxy-swipe-actions')).to.equal(
+        actions[1].closest('foxy-swipe-actions')
+      );
+
+      expect(actions[0]).to.have.attribute('theme', 'primary');
+      expect(actions[1]).to.have.attribute('theme', 'secondary');
+
+      actions[0].click();
+      expect(control.actions[0].onClick).to.have.been.calledOnce;
+      expect(control.actions[1].onClick).to.not.have.been.called;
+
+      actions[1].click();
+      expect(control.actions[0].onClick).to.have.been.calledOnce;
+      expect(control.actions[1].onClick).to.have.been.calledOnce;
+
+      const action0Text = actions[0].querySelector('foxy-i18n');
+      expect(action0Text).to.have.attribute('infer', '');
+      expect(action0Text).to.have.attribute('key', 'action_1');
+
+      const action1Text = actions[1].querySelector('foxy-i18n');
+      expect(action1Text).to.have.attribute('infer', '');
+      expect(action1Text).to.have.attribute('key', 'action_2');
+
+      const action0Spinner = actions[0].querySelector('foxy-spinner');
+      expect(action0Spinner).to.have.attribute('infer', 'spinner');
+      expect(action0Spinner).to.have.attribute('state', 'idle');
+
+      const action1Spinner = actions[1].querySelector('foxy-spinner');
+      expect(action1Spinner).to.have.attribute('infer', 'spinner');
+      expect(action1Spinner).to.have.attribute('state', 'busy');
+    });
 
-    const checkbox = control.renderRoot.querySelector<CheckboxElement>('vaadin-checkbox');
-    checkbox!.checked = true;
-    checkbox!.dispatchEvent(new CustomEvent('change'));
-    await control.requestUpdate();
+    it(`renders filters if configured in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control layout=${ifDefined(layout)}>
+        </foxy-internal-async-list-control>
+      `);
+
+      expect(await getByKey(control, 'search_button_text')).to.not.exist;
+
+      control.filters = [
+        {
+          label: 'filter_1',
+          type: Type.Boolean,
+          path: 'foo',
+        },
+      ];
+
+      await control.requestUpdate();
+
+      const buttonLabel = await getByKey(control, 'search_button_text');
+      const button = buttonLabel?.closest('vaadin-button');
+      const overlay = control.renderRoot.querySelector(
+        'foxy-internal-async-list-control-filter-overlay'
+      );
+
+      expect(buttonLabel).to.exist;
+      expect(buttonLabel).to.have.attribute('infer', 'pagination');
+
+      expect(button).to.exist;
+      expect(button).to.not.have.attribute('disabled');
+
+      expect(overlay).to.exist;
+      expect(overlay).to.have.property('positionTarget', button);
+      expect(overlay).to.have.deep.property('model', {
+        options: control.filters,
+        value: '',
+        lang: control.lang,
+        ns: control.ns,
+      });
+
+      expect(overlay).to.not.have.attribute('opened');
+
+      button?.click();
+      await control.requestUpdate();
+      expect(overlay).to.have.attribute('opened');
+
+      overlay?.dispatchEvent(new CustomEvent('vaadin-overlay-close'));
+      await control.requestUpdate();
+      expect(overlay).to.not.have.attribute('opened');
+
+      overlay?.dispatchEvent(new CustomEvent('search', { detail: 'foo=bar' }));
+      await control.requestUpdate();
+      expect(overlay).to.have.deep.property('model', {
+        options: control.filters,
+        value: 'foo=bar',
+        lang: control.lang,
+        ns: control.ns,
+      });
+    });
 
-    const bulkActions = await getByTestClass(control, 'bulk-action');
-    const fooAction = bulkActions[0];
-    fooAction.click();
-    await control.requestUpdate();
+    it(`emits "itemclick" event when collection page item is clicked in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+      const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
+
+      const item = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const card = item.querySelector('foxy-attribute-card')!;
+      const button = card.closest('button')!;
+      const showMethod = stub(dialog, 'show');
+
+      const whenGotItemClickEvent = oneEvent(control, 'itemclick');
+      button.click();
+      const itemClickEvent = await whenGotItemClickEvent;
+
+      expect(itemClickEvent).to.be.instanceOf(CustomEvent);
+      expect(itemClickEvent).to.have.property('cancelable', true);
+      expect(itemClickEvent).to.have.property('composed', true);
+      expect(itemClickEvent).to.have.property('bubbles', true);
+      expect(itemClickEvent).to.have.property('detail', 'https://demo.api/virtual/stall?href');
+      expect(showMethod).to.have.been.called;
+    });
 
-    expect(await getByKey(control, 'foo_bulk_action_caption_idle')).to.not.exist;
-    expect(await getByKey(control, 'foo_bulk_action_caption_busy')).to.exist;
-    // @ts-expect-error it's too hard for TS to figure out that `next` is not null at this point
-    next?.();
-    await control.requestUpdate();
-    expect(await getByKey(control, 'foo_bulk_action_caption_idle')).to.not.exist;
-    expect(await getByKey(control, 'foo_bulk_action_caption_busy')).to.not.exist;
-    expect(await getByKey(control, 'cancel_button_text')).to.not.exist;
-    expect(await getByKey(control, 'select_button_text')).to.exist;
-    expect(await getByTestClass(control, 'bulk-action')).to.have.length(0);
-
-    const notification = await getByTag<NotificationElement>(control, 'vaadin-notification');
-    expect(notification).to.have.attribute('theme', 'success');
-    expect(notification).to.have.property('opened', true);
-
-    const notificationRoot = document.createElement('div');
-    notification?.renderer?.(notificationRoot);
-
-    const notificationText = notificationRoot.querySelector('foxy-i18n');
-    expect(notificationText).to.have.attribute('lang', 'es');
-    expect(notificationText).to.have.attribute('key', 'foo_bulk_action_notification_done');
-    expect(notificationText).to.have.attribute('ns', 'test pagination');
-  });
+    it(`does not show dialog when "itemclick" event is canceled in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const pagination = await getByTag(control, 'foxy-pagination');
+      const page = pagination!.querySelector('foxy-collection-page') as CollectionPage<any>;
+      const dialog = (await getByTag(control, 'foxy-form-dialog')) as FormDialog;
+
+      const item = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      const card = item.querySelector('foxy-attribute-card')!;
+      const button = card.closest('button')!;
+      const showMethod = stub(dialog, 'show');
+
+      control.addEventListener('itemclick', evt => evt.preventDefault());
+      button.click();
+
+      expect(showMethod).to.not.have.been.called;
+    });
 
-  it('communicates bulk action state to the user (negative path, failure)', async () => {
-    let next: (() => void) | null = null;
-    const onClick = () => new Promise<void>((_, reject) => (next = reject));
+    it(`renders Select button when "first" and non-empty .bulkActions are defined in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          first="https://demo.api/hapi/customer_attributes"
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      expect(await getByKey(control, 'select_button_text')).to.not.exist;
+
+      control.first = 'https://demo.api/hapi/customer_attributes';
+      await control.requestUpdate();
+      expect(await getByKey(control, 'select_button_text')).to.not.exist;
+
+      control.bulkActions = [];
+      await control.requestUpdate();
+      expect(await getByKey(control, 'select_button_text')).to.not.exist;
+
+      control.bulkActions = [{ name: 'foo', onClick: stub() }];
+      await control.requestUpdate();
+
+      const label = await getByKey(control, 'select_button_text');
+      const button = label?.closest('vaadin-button');
+
+      expect(label).to.exist;
+      expect(button).to.exist;
+      expect(label).to.have.property('localName', 'foxy-i18n');
+      expect(label).to.have.attribute('infer', 'pagination');
+    });
 
-    const router = createRouter();
-    const control = await fixture<Control>(html`
-      <foxy-internal-async-list-control
-        first="https://demo.api/hapi/customer_attributes"
-        lang="es"
-        item="foxy-attribute-card"
-        form="foxy-attribute-form"
-        ns="test"
-        .bulkActions=${[{ name: 'foo', onClick }]}
-        @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
-      >
-      </foxy-internal-async-list-control>
-    `);
+    it(`renders Cancel button when selection mode is enabled in ${layoutLabel} layout`, async () => {
+      const router = createRouter();
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          first="https://demo.api/hapi/customer_attributes"
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+          .bulkActions=${[{ name: 'foo', onClick: stub() }]}
+          @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const page = await getByTag<CollectionPage<any>>(control, 'foxy-collection-page');
+      await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+
+      expect(await getByKey(control, 'select_button_text')).to.exist;
+      expect(await getByKey(control, 'cancel_button_text')).to.not.exist;
+
+      (await getByKey(control, 'select_button_text'))?.closest('vaadin-button')?.click();
+      await control.requestUpdate();
+
+      expect(await getByKey(control, 'select_button_text')).to.not.exist;
+      expect(await getByKey(control, 'cancel_button_text')).to.exist;
+    });
 
-    const page = (await getByTag<CollectionPage<any>>(control, 'foxy-collection-page'))!;
-    await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+    it(`renders bulk actions when selection mode is enabled and at least one item is selected in ${layoutLabel} layout`, async () => {
+      const router = createRouter();
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          first="https://demo.api/hapi/customer_attributes"
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+          .bulkActions=${[{ name: 'foo', onClick: stub() }]}
+          @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const page = await getByTag<CollectionPage<any>>(control, 'foxy-collection-page');
+      await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+      expect(await getByTestClass(control, 'bulk-action')).to.be.empty;
+
+      const label = await getByKey(control, 'select_button_text');
+      const button = label?.closest('vaadin-button');
+      button?.click();
+      await control.requestUpdate();
+      const anyCheckbox = await getByTag<CheckboxElement>(control, 'vaadin-checkbox');
+      expect(anyCheckbox).to.exist;
+      expect(await getByTestClass(control, 'bulk-action')).to.have.length(0);
+
+      anyCheckbox!.checked = true;
+      anyCheckbox!.dispatchEvent(new CustomEvent('change'));
+      await control.requestUpdate();
+
+      const bulkActions = await getByTestClass(control, 'bulk-action');
+      expect(bulkActions).to.have.length(1);
+
+      const firstBulkAction = bulkActions[0];
+      const firstBulkActionLabel = firstBulkAction.querySelector('foxy-i18n');
+      expect(firstBulkActionLabel).to.have.attribute('key', 'foo_bulk_action_caption_idle');
+      expect(firstBulkActionLabel).to.have.attribute('infer', 'pagination');
+      expect(firstBulkActionLabel).to.have.deep.property('options', { count: 1 });
+    });
 
-    const label = await getByKey(control, 'select_button_text');
-    const button = label?.closest('vaadin-button');
-    button?.click();
-    await control.requestUpdate();
+    it(`renders collection items inside vaadin-checkbox elements when selection mode is enabled in ${layoutLabel} layout`, async () => {
+      const router = createRouter();
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          first="https://demo.api/hapi/customer_attributes"
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+          .bulkActions=${[{ name: 'foo', onClick: stub() }]}
+          @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const page = (await getByTag<CollectionPage<any>>(control, 'foxy-collection-page'))!;
+      await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+      expect(await getByTestClass(control, 'vaadin-checkbox')).to.be.empty;
+
+      const label = await getByKey(control, 'select_button_text');
+      const button = label?.closest('vaadin-button');
+      button?.click();
+      await control.requestUpdate();
+
+      const item = await fixture(
+        (page.item as ItemRenderer<any>)({
+          simplifyNsLoading: false,
+          readonlyControls: BooleanSelector.False,
+          disabledControls: BooleanSelector.False,
+          hiddenControls: BooleanSelector.False,
+          templates: {},
+          readonly: false,
+          disabled: false,
+          previous: null,
+          related: ['https://demo.api/virtual/stall?related'],
+          hidden: false,
+          parent: 'https://demo.api/virtual/stall?parent',
+          spread: spread,
+          props: {},
+          group: '',
+          html: html,
+          lang: '',
+          href: 'https://demo.api/virtual/stall?href',
+          data: await getTestData('./hapi/customer_attributes/0'),
+          next: null,
+          ns: '',
+        })
+      );
+
+      expect(item).to.have.property('localName', 'vaadin-checkbox');
+      expect(item).to.not.have.attribute('checked');
+
+      const card = item.querySelector('foxy-attribute-card')!;
+
+      expect(card).to.have.attribute('related', '["https://demo.api/virtual/stall?related"]');
+      expect(card).to.have.attribute('parent', 'https://demo.api/virtual/stall?parent');
+      expect(card).to.have.attribute('infer', '');
+      expect(card).to.have.attribute('href', 'https://demo.api/virtual/stall?href');
+    });
 
-    const checkbox = control.renderRoot.querySelector<CheckboxElement>('vaadin-checkbox');
-    checkbox!.checked = true;
-    checkbox!.dispatchEvent(new CustomEvent('change'));
-    await control.requestUpdate();
+    it(`can run a bulk action on selected items in ${layoutLabel} layout`, async () => {
+      const onClick = stub();
+      const router = createRouter();
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          first="https://demo.api/hapi/customer_attributes"
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+          .bulkActions=${[{ name: 'foo', onClick }]}
+          @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const page = (await getByTag<CollectionPage<any>>(control, 'foxy-collection-page'))!;
+      await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+
+      const label = await getByKey(control, 'select_button_text');
+      const button = label?.closest('vaadin-button');
+      button?.click();
+      await control.requestUpdate();
+
+      const checkbox = control.renderRoot.querySelector<CheckboxElement>('vaadin-checkbox');
+      checkbox!.checked = true;
+      checkbox!.dispatchEvent(new CustomEvent('change'));
+      await control.requestUpdate();
+
+      const bulkActions = await getByTestClass(control, 'bulk-action');
+      const fooAction = bulkActions[0];
+      fooAction.click();
+
+      const customerAttribute0 = await getTestData('./hapi/customer_attributes/0');
+      expect(onClick).to.have.been.calledWithMatch([customerAttribute0]);
+    });
 
-    const bulkActions = await getByTestClass(control, 'bulk-action');
-    const fooAction = bulkActions[0];
-    fooAction.click();
-    await control.requestUpdate();
+    it(`communicates bulk action state to the user (positive path, no errors) in ${layoutLabel} layout`, async () => {
+      let next: (() => void) | null = null;
+      const onClick = () => new Promise<void>(resolve => (next = resolve));
+
+      const router = createRouter();
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          first="https://demo.api/hapi/customer_attributes"
+          lang="es"
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+          ns="test"
+          .bulkActions=${[{ name: 'foo', onClick }]}
+          @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const page = (await getByTag<CollectionPage<any>>(control, 'foxy-collection-page'))!;
+      await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+
+      const label = await getByKey(control, 'select_button_text');
+      const button = label?.closest('vaadin-button');
+      button?.click();
+      await control.requestUpdate();
+
+      const checkbox = control.renderRoot.querySelector<CheckboxElement>('vaadin-checkbox');
+      checkbox!.checked = true;
+      checkbox!.dispatchEvent(new CustomEvent('change'));
+      await control.requestUpdate();
+
+      const bulkActions = await getByTestClass(control, 'bulk-action');
+      const fooAction = bulkActions[0];
+      fooAction.click();
+      await control.requestUpdate();
+
+      expect(await getByKey(control, 'foo_bulk_action_caption_idle')).to.not.exist;
+      expect(await getByKey(control, 'foo_bulk_action_caption_busy')).to.exist;
+      // @ts-expect-error it's too hard for TS to figure out that `next` is not null at this point
+      next?.();
+      await control.requestUpdate();
+      expect(await getByKey(control, 'foo_bulk_action_caption_idle')).to.not.exist;
+      expect(await getByKey(control, 'foo_bulk_action_caption_busy')).to.not.exist;
+      expect(await getByKey(control, 'cancel_button_text')).to.not.exist;
+      expect(await getByKey(control, 'select_button_text')).to.exist;
+      expect(await getByTestClass(control, 'bulk-action')).to.have.length(0);
+
+      const notification = await getByTag<NotificationElement>(control, 'vaadin-notification');
+      expect(notification).to.have.attribute('theme', 'success');
+      expect(notification).to.have.property('opened', true);
+
+      const notificationRoot = document.createElement('div');
+      notification?.renderer?.(notificationRoot);
+
+      const notificationText = notificationRoot.querySelector('foxy-i18n');
+      expect(notificationText).to.have.attribute('lang', 'es');
+      expect(notificationText).to.have.attribute('key', 'foo_bulk_action_notification_done');
+      expect(notificationText).to.have.attribute('ns', 'test pagination');
+    });
 
-    expect(await getByKey(control, 'foo_bulk_action_caption_idle')).to.not.exist;
-    expect(await getByKey(control, 'foo_bulk_action_caption_busy')).to.exist;
-    // @ts-expect-error it's too hard for TS to figure out that `next` is not null at this point
-    next?.();
-    await control.requestUpdate();
-    expect(await getByKey(control, 'foo_bulk_action_caption_idle')).to.exist;
-    expect(await getByKey(control, 'foo_bulk_action_caption_busy')).to.not.exist;
-    expect(await getByKey(control, 'cancel_button_text')).to.exist;
-    expect(await getByKey(control, 'select_button_text')).to.not.exist;
-    expect(await getByTestClass(control, 'bulk-action')).to.have.length(1);
-
-    const notification = await getByTag<NotificationElement>(control, 'vaadin-notification');
-    expect(notification).to.have.attribute('theme', 'error');
-    expect(notification).to.have.property('opened', true);
-
-    const notificationRoot = document.createElement('div');
-    notification?.renderer?.(notificationRoot);
-
-    const notificationText = notificationRoot.querySelector('foxy-i18n');
-    expect(notificationText).to.have.attribute('lang', 'es');
-    expect(notificationText).to.have.attribute('key', 'foo_bulk_action_notification_fail');
-    expect(notificationText).to.have.attribute('ns', 'test pagination');
+    it(`communicates bulk action state to the user (negative path, failure) in ${layoutLabel} layout`, async () => {
+      let next: (() => void) | null = null;
+      const onClick = () => new Promise<void>((_, reject) => (next = reject));
+
+      const router = createRouter();
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          first="https://demo.api/hapi/customer_attributes"
+          lang="es"
+          item="foxy-attribute-card"
+          form="foxy-attribute-form"
+          ns="test"
+          .bulkActions=${[{ name: 'foo', onClick }]}
+          @fetch=${(evt: FetchEvent) => !evt.defaultPrevented && router.handleEvent(evt)}
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const page = (await getByTag<CollectionPage<any>>(control, 'foxy-collection-page'))!;
+      await waitUntil(() => !!page?.data, '', { timeout: 5000 });
+
+      const label = await getByKey(control, 'select_button_text');
+      const button = label?.closest('vaadin-button');
+      button?.click();
+      await control.requestUpdate();
+
+      const checkbox = control.renderRoot.querySelector<CheckboxElement>('vaadin-checkbox');
+      checkbox!.checked = true;
+      checkbox!.dispatchEvent(new CustomEvent('change'));
+      await control.requestUpdate();
+
+      const bulkActions = await getByTestClass(control, 'bulk-action');
+      const fooAction = bulkActions[0];
+      fooAction.click();
+      await control.requestUpdate();
+
+      expect(await getByKey(control, 'foo_bulk_action_caption_idle')).to.not.exist;
+      expect(await getByKey(control, 'foo_bulk_action_caption_busy')).to.exist;
+      // @ts-expect-error it's too hard for TS to figure out that `next` is not null at this point
+      next?.();
+      await control.requestUpdate();
+      expect(await getByKey(control, 'foo_bulk_action_caption_idle')).to.exist;
+      expect(await getByKey(control, 'foo_bulk_action_caption_busy')).to.not.exist;
+      expect(await getByKey(control, 'cancel_button_text')).to.exist;
+      expect(await getByKey(control, 'select_button_text')).to.not.exist;
+      expect(await getByTestClass(control, 'bulk-action')).to.have.length(1);
+
+      const notification = await getByTag<NotificationElement>(control, 'vaadin-notification');
+      expect(notification).to.have.attribute('theme', 'error');
+      expect(notification).to.have.property('opened', true);
+
+      const notificationRoot = document.createElement('div');
+      notification?.renderer?.(notificationRoot);
+
+      const notificationText = notificationRoot.querySelector('foxy-i18n');
+      expect(notificationText).to.have.attribute('lang', 'es');
+      expect(notificationText).to.have.attribute('key', 'foo_bulk_action_notification_fail');
+      expect(notificationText).to.have.attribute('ns', 'test pagination');
+    });
   });
 });
diff --git a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts
index 7e7a2a64..fbd5fa1c 100644
--- a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts
+++ b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts
@@ -1,11 +1,13 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { CollectionPage, NucleonElement } from '../../public/index';
 import type { BulkAction, SwipeAction } from './types';
+import type { InternalSummaryControl } from '../InternalSummaryControl/InternalSummaryControl';
 import type { InternalConfirmDialog } from '../InternalConfirmDialog';
 import type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';
 import type { HALJSONResource } from '../../public/NucleonElement/types';
 import type { CheckboxElement } from '@vaadin/vaadin-checkbox';
 import type { ItemRenderer } from '../../public/CollectionPage/types';
+import type { UpdateEvent } from '../../public/NucleonElement/UpdateEvent';
 import type { FormDialog } from '../../index';
 import type { Option } from '../../public/QueryBuilder/types';
 
@@ -26,6 +28,7 @@ export class InternalAsyncListControl extends InternalEditableControl {
       createPageHref: { attribute: 'create-page-href' },
       getPageHref: { attribute: false },
       related: { type: Array },
+      layout: {},
       first: {},
       limit: { type: Number },
       form: {},
@@ -33,12 +36,15 @@ export class InternalAsyncListControl extends InternalEditableControl {
       item: {},
       itemProps: { type: Object, attribute: 'item-props' },
       wide: { type: Boolean },
+      open: { type: Boolean },
+      hideWhenEmpty: { type: Boolean, attribute: 'hide-when-empty' },
       alert: { type: Boolean },
       actions: { attribute: false },
       bulkActions: { attribute: false },
       filters: { type: Array },
       __filter: { attribute: false },
       __selection: { attribute: false },
+      __totalItems: { attribute: false },
       __isSelecting: { attribute: false },
       __notification: { attribute: false },
       __isFilterVisible: { attribute: false },
@@ -61,6 +67,9 @@ export class InternalAsyncListControl extends InternalEditableControl {
   /** Same as the `related` property of `NucleonElement`. */
   related = [] as string[];
 
+  /** When set to `details`, makes the entire control collapsible. */
+  layout: 'details' | null = null;
+
   /** Swipe actions. */
   actions = [] as SwipeAction[];
 
@@ -88,6 +97,12 @@ export class InternalAsyncListControl extends InternalEditableControl {
   /** Same as the `wide` property of `FormDialog`. */
   wide = false;
 
+  /** Visually hides the control when the collection is empty or loading. */
+  hideWhenEmpty = false;
+
+  /** Same as the `open` property of `InternalSummaryControl`. */
+  open = false;
+
   /** Same as the `alert` property of `FormDialog`. */
   alert = false;
 
@@ -115,15 +130,20 @@ export class InternalAsyncListControl extends InternalEditableControl {
 
   private __isSelecting = false;
 
+  private __totalItems = 0;
+
   private __selection: HALJSONResource[] = [];
 
   private __itemRenderer: ItemRenderer = ctx => {
-    if (!ctx.data) return this.__cardRenderer(ctx);
+    const item = this.__cardRenderer(ctx);
+    const readonlyItem = html`<div class="bg-contrast-5">${item}</div>`;
+
+    if (!ctx.data) return readonlyItem;
 
     if (this.__isSelecting) {
       return html`
         <vaadin-checkbox
-          class="block w-full"
+          class=${classMap({ 'block w-full': true, 'bg-contrast-5': this.layout === 'details' })}
           style="padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
           data-async-list-control
           ?disabled=${this.disabled || !!this.__activeBulkAction}
@@ -144,18 +164,18 @@ export class InternalAsyncListControl extends InternalEditableControl {
     }
 
     const href = this.getPageHref?.(ctx.href, ctx.data);
-    if (typeof href !== 'string' && !this.form) return this.__cardRenderer(ctx);
+    if (typeof href !== 'string' && !this.form) return readonlyItem;
 
     const isDisabled = this.disabledSelector.matches('card', true);
     const card = this.__cardRenderer(ctx);
     let clickableItem: TemplateResult;
 
     const wrapperClass = classMap({
-      'rounded-t': !ctx.previous,
+      'rounded-t': this.layout !== 'details' && !ctx.previous,
       'rounded-b': !ctx.next,
       'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,
-      'text-left w-full block transition-colors': true,
-      'hover-bg-contrast-5': !isDisabled,
+      'text-left w-full block bg-contrast-5 transition-colors': true,
+      'hover-bg-contrast-10': !isDisabled,
     });
 
     if (this.getPageHref) {
@@ -258,19 +278,14 @@ export class InternalAsyncListControl extends InternalEditableControl {
 
   private __filter = '';
 
-  renderControl(): TemplateResult {
-    let first: string | undefined;
-
-    try {
-      const url = new URL(this.first ?? '');
-      const filter = new URLSearchParams(this.__filter);
+  render(): TemplateResult {
+    const hidden = this.hideWhenEmpty && !this.__totalItems;
+    return html`<div class=${classMap({ hidden })}>${super.render()}</div>`;
+  }
 
-      url.searchParams.set('limit', String(this.limit));
-      filter.forEach((value, key) => url.searchParams.set(key, value));
-      first = url.toString();
-    } catch {
-      first = undefined;
-    }
+  renderControl(): TemplateResult {
+    const actions = this.__renderActions();
+    const content = this.__renderContent();
 
     return html`
       ${this.form && !this.__isSelecting
@@ -307,157 +322,53 @@ export class InternalAsyncListControl extends InternalEditableControl {
             >
             </foxy-internal-confirm-dialog>
           `}
-      <div class="flex gap-m items-center justify-between text-l font-medium">
-        <span class="text-body mr-auto">
-          ${this.label && this.label !== 'label' ? this.label : ''}
-        </span>
-
-        ${this.filters.length > 0 && !this.__isSelecting
-          ? html`
-              <foxy-internal-async-list-control-filter-overlay
-                .noVerticalOverlap=${true}
-                .positionTarget=${this.renderRoot.querySelector('#filters')}
-                .model=${{
-                  options: this.filters,
-                  value: this.__filter,
-                  lang: this.lang,
-                  ns: this.ns,
-                }}
-                ?opened=${this.__isFilterVisible}
-                @vaadin-overlay-close=${() => (this.__isFilterVisible = false)}
-                @search=${(evt: CustomEvent<string | undefined>) => {
-                  this.__filter = evt.detail ?? '';
-                }}
-              >
-              </foxy-internal-async-list-control-filter-overlay>
-
-              <vaadin-button
-                theme="tertiary-inline contrast"
-                id="filters"
-                ?disabled=${this.disabled}
-                @click=${() => (this.__isFilterVisible = !this.__isFilterVisible)}
-              >
-                <foxy-i18n infer="pagination" key="search_button_text"></foxy-i18n>
-              </vaadin-button>
-            `
-          : ''}
-        ${this.bulkActions.length > 0 && this.first
-          ? html`
-              ${this.__selection.length > 0
-                ? this.bulkActions.map(action => {
-                    const nPrefix = `${action.name}_bulk_action_notification`;
-                    const cPrefix = `${action.name}_bulk_action_caption`;
-                    const isActive = this.__activeBulkAction?.name === action.name;
-
-                    return html`
-                      <vaadin-button
-                        data-testclass="bulk-action"
-                        theme="tertiary-inline"
-                        ?disabled=${this.disabled || !!this.__activeBulkAction}
-                        @click=${async () => {
-                          this.__activeBulkAction = action;
-
-                          try {
-                            await action.onClick(this.__selection);
-                            this.__selection = [];
-                            this.__isSelecting = false;
-                            this.__notification = { key: `${nPrefix}_done`, theme: 'success' };
-                          } catch {
-                            this.__notification = { key: `${nPrefix}_fail`, theme: 'error' };
-                          } finally {
-                            this.__activeBulkAction = null;
-                            this.renderRoot.querySelector('vaadin-notification')?.open();
-                          }
-                        }}
+      ${this.layout === 'details'
+        ? html`
+            <foxy-internal-summary-control
+              layout="details"
+              count=${ifDefined(this.open ? void 0 : `${this.__totalItems}`)}
+              infer=""
+              ?open=${this.open}
+              @toggle=${(evt: CustomEvent) => {
+                const summary = evt.currentTarget as InternalSummaryControl;
+                this.open = summary.open;
+                if (!evt.composed && !evt.bubbles) this.dispatchEvent(new CustomEvent('toggle'));
+              }}
+            >
+              ${actions.length
+                ? html`
+                    <div class="flex gap-s">
+                      <foxy-i18n
+                        infer=""
+                        class="mr-auto text-tertiary"
+                        key="total_items"
+                        .options=${{ count: this.__totalItems }}
                       >
-                        <foxy-i18n
-                          infer="pagination"
-                          key="${cPrefix}_${isActive ? 'busy' : 'idle'}"
-                          .options=${{ count: this.__selection.length }}
-                        >
-                        </foxy-i18n>
-                      </vaadin-button>
-                    `;
-                  })
+                      </foxy-i18n>
+                      ${actions}
+                    </div>
+                  `
                 : ''}
-              <vaadin-button
-                theme="tertiary-inline contrast"
-                ?disabled=${this.disabled || !!this.__activeBulkAction}
-                @click=${() => {
-                  this.__isSelecting = !this.__isSelecting;
-                  this.__selection = [];
-                }}
-              >
-                <foxy-i18n
-                  infer="pagination"
-                  key=${this.__isSelecting ? 'cancel_button_text' : 'select_button_text'}
-                >
-                </foxy-i18n>
-              </vaadin-button>
-            `
-          : ''}
-        ${(!this.form && !this.createPageHref) ||
-        this.readonly ||
-        this.hideCreateButton ||
-        this.__isSelecting
-          ? ''
-          : this.createPageHref && !this.disabled
-          ? html`
-              <a
-                class="rounded-s text-primary group focus-outline-none focus-ring-2 focus-ring-primary-50"
-                href=${this.createPageHref}
-              >
-                <foxy-i18n
-                  class="transition-opacity group-hover-opacity-80"
-                  infer=""
-                  key="create_button_text"
-                >
-                </foxy-i18n>
-              </a>
-            `
-          : html`
-              <vaadin-button
-                theme="tertiary-inline"
-                ?disabled=${this.disabled}
-                @click=${(evt: Event) => {
-                  evt.preventDefault();
-                  evt.stopPropagation();
-
-                  const dialog = this.__dialog;
-                  const button = evt.currentTarget as HTMLButtonElement;
-
-                  dialog.header = 'header_create';
-                  dialog.href = '';
-                  dialog.show(button);
-                }}
-              >
-                <foxy-i18n infer="pagination" key="create_button_text"></foxy-i18n>
-              </vaadin-button>
-            `}
-      </div>
-
-      <div
-        class="text-secondary text-s"
-        ?hidden=${!this.helperText || this.helperText === 'helper_text'}
-      >
-        ${this.helperText}
-      </div>
+              <div class="p-0 bg-transparent">${content}</div>
+            </foxy-internal-summary-control>
+          `
+        : html`
+            <div class="flex gap-s items-center justify-between font-medium">
+              <span class="text-body mr-auto text-l">
+                ${this.label && this.label !== 'label' ? this.label : ''}
+              </span>
+              ${actions}
+            </div>
+
+            <div
+              class="text-secondary text-s"
+              ?hidden=${!this.helperText || this.helperText === 'helper_text'}
+            >
+              ${this.helperText}
+            </div>
 
-      <foxy-pagination first=${ifDefined(first)} infer="pagination">
-        <foxy-collection-page
-          class=${classMap({
-            'block divide-y divide-contrast-5 bg-contrast-5 rounded overflow-hidden': true,
-            'mt-s':
-              (!!this.label && this.label !== 'label') ||
-              (!!this.helperText && this.helperText !== 'helper_text'),
-          })}
-          infer="card"
-          .related=${this.related}
-          .props=${this.itemProps}
-          .item=${this.__itemRenderer}
-        >
-        </foxy-collection-page>
-      </foxy-pagination>
+            ${content}
+          `}
 
       <div
         class="mt-s text-s leading-xs text-error"
@@ -491,10 +402,6 @@ export class InternalAsyncListControl extends InternalEditableControl {
     `;
   }
 
-  private get __dialog() {
-    return this.renderRoot.querySelector('#form') as FormDialog;
-  }
-
   private get __cardRenderer() {
     const item = this.item;
 
@@ -526,4 +433,184 @@ export class InternalAsyncListControl extends InternalEditableControl {
 
     return this.__cachedCardRenderer.render;
   }
+
+  private get __dialog() {
+    return this.renderRoot.querySelector('#form') as FormDialog;
+  }
+
+  private __renderActions() {
+    return [
+      this.filters.length > 0 && !this.__isSelecting
+        ? html`
+            <foxy-internal-async-list-control-filter-overlay
+              .noVerticalOverlap=${true}
+              .positionTarget=${this.renderRoot.querySelector('#filters')}
+              .model=${{
+                options: this.filters,
+                value: this.__filter,
+                lang: this.lang,
+                ns: this.ns,
+              }}
+              ?opened=${this.__isFilterVisible}
+              @vaadin-overlay-close=${() => (this.__isFilterVisible = false)}
+              @search=${(evt: CustomEvent<string | undefined>) => {
+                this.__filter = evt.detail ?? '';
+              }}
+            >
+            </foxy-internal-async-list-control-filter-overlay>
+
+            <vaadin-button
+              theme="tertiary-inline contrast"
+              id="filters"
+              ?disabled=${this.disabled}
+              @click=${() => (this.__isFilterVisible = !this.__isFilterVisible)}
+            >
+              <foxy-i18n infer="pagination" key="search_button_text"></foxy-i18n>
+            </vaadin-button>
+          `
+        : '',
+
+      this.bulkActions.length > 0 && this.first
+        ? html`
+            ${this.__selection.length > 0
+              ? this.bulkActions.map(action => {
+                  const nPrefix = `${action.name}_bulk_action_notification`;
+                  const cPrefix = `${action.name}_bulk_action_caption`;
+                  const isActive = this.__activeBulkAction?.name === action.name;
+
+                  return html`
+                    <vaadin-button
+                      data-testclass="bulk-action"
+                      theme="tertiary-inline"
+                      ?disabled=${this.disabled || !!this.__activeBulkAction}
+                      @click=${async () => {
+                        this.__activeBulkAction = action;
+
+                        try {
+                          await action.onClick(this.__selection);
+                          this.__selection = [];
+                          this.__isSelecting = false;
+                          this.__notification = { key: `${nPrefix}_done`, theme: 'success' };
+                        } catch {
+                          this.__notification = { key: `${nPrefix}_fail`, theme: 'error' };
+                        } finally {
+                          this.__activeBulkAction = null;
+                          this.renderRoot.querySelector('vaadin-notification')?.open();
+                        }
+                      }}
+                    >
+                      <foxy-i18n
+                        infer="pagination"
+                        key="${cPrefix}_${isActive ? 'busy' : 'idle'}"
+                        .options=${{ count: this.__selection.length }}
+                      >
+                      </foxy-i18n>
+                    </vaadin-button>
+                  `;
+                })
+              : ''}
+            <vaadin-button
+              theme="tertiary-inline contrast"
+              ?disabled=${this.disabled || !!this.__activeBulkAction}
+              @click=${() => {
+                this.__isSelecting = !this.__isSelecting;
+                this.__selection = [];
+              }}
+            >
+              <foxy-i18n
+                infer="pagination"
+                key=${this.__isSelecting ? 'cancel_button_text' : 'select_button_text'}
+              >
+              </foxy-i18n>
+            </vaadin-button>
+          `
+        : '',
+
+      (!this.form && !this.createPageHref) ||
+      this.readonly ||
+      this.hideCreateButton ||
+      this.__isSelecting
+        ? ''
+        : this.createPageHref && !this.disabled
+        ? html`
+            <a
+              class="rounded-s text-primary group focus-outline-none focus-ring-2 focus-ring-primary-50"
+              href=${this.createPageHref}
+            >
+              <foxy-i18n
+                class="transition-opacity group-hover-opacity-80"
+                infer=""
+                key="create_button_text"
+              >
+              </foxy-i18n>
+            </a>
+          `
+        : html`
+            <vaadin-button
+              theme="tertiary-inline"
+              ?disabled=${this.disabled}
+              @click=${(evt: Event) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+
+                const dialog = this.__dialog;
+                const button = evt.currentTarget as HTMLButtonElement;
+
+                dialog.header = 'header_create';
+                dialog.href = '';
+                dialog.show(button);
+              }}
+            >
+              <foxy-i18n infer="pagination" key="create_button_text"></foxy-i18n>
+            </vaadin-button>
+          `,
+    ].filter(v => !!v);
+  }
+
+  private __renderContent() {
+    const helperText = this.helperText;
+    const isDetails = this.layout === 'details';
+    const label = this.label;
+
+    let first: string | undefined;
+
+    try {
+      const url = new URL(this.first ?? '');
+      const filter = new URLSearchParams(this.__filter);
+
+      url.searchParams.set('limit', String(this.limit));
+      filter.forEach((value, key) => url.searchParams.set(key, value));
+      first = url.toString();
+    } catch {
+      first = undefined;
+    }
+
+    return html`
+      <foxy-pagination
+        first=${ifDefined(first)}
+        infer="pagination"
+        class=${classMap({ hidden: isDetails && this.__totalItems === 0 })}
+      >
+        <foxy-collection-page
+          class=${classMap({
+            'grid grid-cols-1 overflow-hidden': true,
+            'rounded': !isDetails,
+            'mt-s':
+              !isDetails &&
+              ((!!label && label !== 'label') || (!!helperText && helperText !== 'helper_text')),
+          })}
+          style="gap: 1px"
+          infer="card"
+          .related=${this.related}
+          .props=${this.itemProps}
+          .item=${this.__itemRenderer}
+          @update=${(evt: UpdateEvent) => {
+            const page = evt.currentTarget as CollectionPage<any>;
+            this.__totalItems = parseInt(page.data?.total_items ?? 0);
+          }}
+        >
+        </foxy-collection-page>
+      </foxy-pagination>
+    `;
+  }
 }
diff --git a/src/elements/internal/InternalAsyncListControl/index.ts b/src/elements/internal/InternalAsyncListControl/index.ts
index ea9a6131..4c97f6c3 100644
--- a/src/elements/internal/InternalAsyncListControl/index.ts
+++ b/src/elements/internal/InternalAsyncListControl/index.ts
@@ -3,6 +3,8 @@ import '@vaadin/vaadin-checkbox';
 import '@vaadin/vaadin-overlay';
 import '@vaadin/vaadin-button';
 
+import '../../internal/InternalSummaryControl/index';
+
 import '../../public/CollectionPage/index';
 import '../../public/SwipeActions/index';
 import '../../public/FormDialog/index';

From 08e06b11b0d6e0258399e10b46eab49215d0e081 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 13:16:37 -0300
Subject: [PATCH 03/25] internal(resource-picker-control): change font size of
 actions

---
 .../InternalResourcePickerControl.ts                          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
index 8f7ff86c..0686a684 100644
--- a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
+++ b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
@@ -192,11 +192,11 @@ export class InternalResourcePickerControl extends InternalEditableControl {
       <div class="block group">
         <div
           class=${classMap({
-            'flex items-center gap-m transition-colors font-medium text-l': true,
+            'flex items-center gap-s transition-colors font-medium': true,
             'text-disabled': this.disabled,
           })}
         >
-          <span class="mr-auto">${this.label}</span>
+          <span class="mr-auto text-l">${this.label}</span>
           ${selectionUrl
             ? html`
                 <a

From 9b9f70cbc82161d2198d3a41124da3fb8b98c93d Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 13:17:52 -0300
Subject: [PATCH 04/25] fix: fix language strings not being updated sometimes
 in internal controls

---
 .../InternalEditableControl.ts                | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/elements/internal/InternalEditableControl/InternalEditableControl.ts b/src/elements/internal/InternalEditableControl/InternalEditableControl.ts
index 3f5b7470..68bd59bb 100644
--- a/src/elements/internal/InternalEditableControl/InternalEditableControl.ts
+++ b/src/elements/internal/InternalEditableControl/InternalEditableControl.ts
@@ -100,8 +100,9 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set placeholder(newValue: string) {
-    this.requestUpdate('placeholder', this.__placeholder);
+    const oldValue = this.__placeholder;
     this.__placeholder = newValue;
+    this.requestUpdate('placeholder', oldValue);
   }
 
   /**
@@ -114,8 +115,9 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set helperText(newValue: string) {
-    this.requestUpdate('helperText', this.__helperText);
+    const oldValue = this.__helperText;
     this.__helperText = newValue;
+    this.requestUpdate('helperText', oldValue);
   }
 
   /**
@@ -130,8 +132,9 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set v8nPrefix(newValue: string) {
-    this.requestUpdate('v8nPrefix', this.__v8nPrefix);
+    const oldValue = this.__v8nPrefix;
     this.__v8nPrefix = newValue;
+    this.requestUpdate('v8nPrefix', oldValue);
   }
 
   /**
@@ -146,8 +149,9 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set property(newValue: string) {
-    this.requestUpdate('property', this.__property);
+    const oldValue = this.__property;
     this.__property = newValue;
+    this.requestUpdate('property', oldValue);
   }
 
   /**
@@ -159,38 +163,44 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set label(newValue: string) {
-    this.requestUpdate('label', this.__label);
+    const oldValue = this.__label;
     this.__label = newValue;
+    this.requestUpdate('label', oldValue);
   }
 
   /** Restores the default placeholder translation. */
   resetPlaceholder(): void {
-    this.requestUpdate('placeholder', this.__placeholder);
+    const oldValue = this.__placeholder;
     this.__placeholder = null;
+    this.requestUpdate('placeholder', oldValue);
   }
 
   /** Restores the default helper text translation. */
   resetHelperText(): void {
-    this.requestUpdate('helperText', this.__helperText);
+    const oldValue = this.__helperText;
     this.__helperText = null;
+    this.requestUpdate('helperText', oldValue);
   }
 
   /** Restores the default v8n prefix for errors. */
   resetV8nPrefix(): void {
-    this.requestUpdate('v8nPrefix', this.__v8nPrefix);
+    const oldValue = this.__v8nPrefix;
     this.__v8nPrefix = null;
+    this.requestUpdate('v8nPrefix', oldValue);
   }
 
   /** Restores the default property name. */
   resetProperty(): void {
-    this.requestUpdate('property', this.__property);
+    const oldValue = this.__property;
     this.__property = null;
+    this.requestUpdate('property', oldValue);
   }
 
   /** Restores the default label translation. */
   resetLabel(): void {
-    this.requestUpdate('label', this.__label);
+    const oldValue = this.__label;
     this.__label = null;
+    this.requestUpdate('label', oldValue);
   }
 
   reportValidity(): void {

From 687c33314740d1dcc78ffa372604d97bf04aaee3 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 13:21:03 -0300
Subject: [PATCH 05/25] feat(foxy-experimental-add-to-cart-builder): make
 custom options section collapsible

---
 .../InternalExperimentalAddToCartBuilderItemControl.test.ts  | 1 +
 .../InternalExperimentalAddToCartBuilderItemControl.ts       | 1 +
 .../translations/experimental-add-to-cart-builder/en.json    | 5 ++++-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/elements/public/ExperimentalAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.test.ts b/src/elements/public/ExperimentalAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.test.ts
index 478c86b5..6774bd47 100644
--- a/src/elements/public/ExperimentalAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.test.ts
+++ b/src/elements/public/ExperimentalAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.test.ts
@@ -872,6 +872,7 @@ describe('ExperimentalAddToCartBuilder', () => {
       );
 
       expect(control).to.exist;
+      expect(control).to.have.attribute('layout', 'details');
       expect(control).to.have.attribute(
         'first',
         `foxy://${element.nucleon?.virtualHost}/form/items/0/custom_options`
diff --git a/src/elements/public/ExperimentalAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.ts b/src/elements/public/ExperimentalAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.ts
index 08b7e163..08d1f190 100644
--- a/src/elements/public/ExperimentalAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.ts
+++ b/src/elements/public/ExperimentalAddToCartBuilder/internal/InternalExperimentalAddToCartBuilderItemControl/InternalExperimentalAddToCartBuilderItemControl.ts
@@ -351,6 +351,7 @@ export class InternalExperimentalAddToCartBuilderItemControl extends InternalCon
         </foxy-internal-summary-control>
 
         <foxy-internal-async-list-control
+          layout="details"
           first="foxy://${nucleon?.virtualHost}/form/items/${index}/custom_options"
           infer="custom-options"
           form="foxy-internal-experimental-add-to-cart-builder-custom-option-form"
diff --git a/src/static/translations/experimental-add-to-cart-builder/en.json b/src/static/translations/experimental-add-to-cart-builder/en.json
index 9e5bfcdd..fc989035 100644
--- a/src/static/translations/experimental-add-to-cart-builder/en.json
+++ b/src/static/translations/experimental-add-to-cart-builder/en.json
@@ -278,6 +278,9 @@
         },
         "custom-options": {
           "label": "Custom options",
+          "helper_text": "",
+          "total_items": "{{ count }} option",
+          "total_items_plural": "{{ count }} options",
           "delete_header": "Remove custom option?",
           "delete_message": "Please confirm that you'd like to remove this custom option from the product.",
           "delete_confirm": "Remove",
@@ -444,7 +447,7 @@
             "first": "First",
             "last": "Last",
             "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "pagination": "{{from}}-{{to}}",
             "previous": "Previous"
           }
         },

From cd370728ac0fb775eb9944e5aa44808e3f79ee9a Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 13:46:10 -0300
Subject: [PATCH 06/25] fix(foxy-user-invitation-form): fix conditional
 visibility for Delete and Resend buttons

---
 .../UserInvitationForm.test.ts                | 27 ++++++++++---------
 .../UserInvitationForm/UserInvitationForm.ts  |  5 ++--
 .../translations/user-invitation-form/en.json |  6 ++---
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/elements/public/UserInvitationForm/UserInvitationForm.test.ts b/src/elements/public/UserInvitationForm/UserInvitationForm.test.ts
index c9740625..d14950db 100644
--- a/src/elements/public/UserInvitationForm/UserInvitationForm.test.ts
+++ b/src/elements/public/UserInvitationForm/UserInvitationForm.test.ts
@@ -82,8 +82,9 @@ describe('UserInvitationForm', () => {
     expect(form.hiddenSelector.matches('undo', true)).to.be.true;
   });
 
-  it('hides Delete button when status is not "rejected" or "expired" (in admin layout)', async () => {
+  it('hides Delete button when status is not "revoked" or "expired" (in admin layout)', async () => {
     const form = new Form();
+    form.layout = 'admin';
     expect(form.hiddenSelector.matches('delete', true)).to.be.true;
 
     const data = await getTestData<Data>('./hapi/user_invitations/0');
@@ -93,14 +94,19 @@ describe('UserInvitationForm', () => {
 
     data.status = 'rejected';
     form.data = { ...data };
-    expect(form.hiddenSelector.matches('delete', true)).to.be.false;
+    expect(form.hiddenSelector.matches('delete', true)).to.be.true;
 
     data.status = 'expired';
     form.data = { ...data };
-    expect(form.hiddenSelector.matches('delete', true)).to.be.true;
+    expect(form.hiddenSelector.matches('delete', true)).to.be.false;
 
-    form.layout = 'admin';
+    data.status = 'revoked';
+    form.data = { ...data };
     expect(form.hiddenSelector.matches('delete', true)).to.be.false;
+
+    data.status = 'accepted';
+    form.data = { ...data };
+    expect(form.hiddenSelector.matches('delete', true)).to.be.true;
   });
 
   it('hides Leave button when status is not "accepted"', async () => {
@@ -135,18 +141,19 @@ describe('UserInvitationForm', () => {
     expect(form.hiddenSelector.matches('revoke', true)).to.be.true;
   });
 
-  it('hides Resend button when status is not "revoked" or "sent" or "expired" (in admin layout)', async () => {
+  it('hides Resend button when status is not "sent" (in admin layout)', async () => {
     const form = new Form();
     expect(form.hiddenSelector.matches('resend', true)).to.be.true;
 
     const data = await getTestData<Data>('./hapi/user_invitations/0');
     data.status = 'accepted';
+    form.layout = 'admin';
     form.data = { ...data };
     expect(form.hiddenSelector.matches('resend', true)).to.be.true;
 
     data.status = 'revoked';
     form.data = { ...data };
-    expect(form.hiddenSelector.matches('resend', true)).to.be.false;
+    expect(form.hiddenSelector.matches('resend', true)).to.be.true;
 
     data.status = 'sent';
     form.data = { ...data };
@@ -155,27 +162,21 @@ describe('UserInvitationForm', () => {
     data.status = 'expired';
     form.data = { ...data };
     expect(form.hiddenSelector.matches('resend', true)).to.be.true;
-
-    form.layout = 'admin';
-    expect(form.hiddenSelector.matches('resend', true)).to.be.false;
   });
 
-  it('hides Resend, Accept and Reject buttons when status is not "sent"', async () => {
+  it('hides Accept and Reject buttons when status is not "sent"', async () => {
     const form = new Form();
-    expect(form.hiddenSelector.matches('resend', true)).to.be.true;
     expect(form.hiddenSelector.matches('accept', true)).to.be.true;
     expect(form.hiddenSelector.matches('reject', true)).to.be.true;
 
     const data = await getTestData<Data>('./hapi/user_invitations/0');
     data.status = 'accepted';
     form.data = { ...data };
-    expect(form.hiddenSelector.matches('resend', true)).to.be.true;
     expect(form.hiddenSelector.matches('accept', true)).to.be.true;
     expect(form.hiddenSelector.matches('reject', true)).to.be.true;
 
     data.status = 'sent';
     form.data = { ...data };
-    expect(form.hiddenSelector.matches('resend', true)).to.be.false;
     expect(form.hiddenSelector.matches('accept', true)).to.be.false;
     expect(form.hiddenSelector.matches('reject', true)).to.be.false;
   });
diff --git a/src/elements/public/UserInvitationForm/UserInvitationForm.ts b/src/elements/public/UserInvitationForm/UserInvitationForm.ts
index 298c7cc5..bfe862b0 100644
--- a/src/elements/public/UserInvitationForm/UserInvitationForm.ts
+++ b/src/elements/public/UserInvitationForm/UserInvitationForm.ts
@@ -87,12 +87,13 @@ export class UserInvitationForm extends Base<Data> {
 
     if (
       (status !== 'rejected' || layout !== 'user') &&
-      (status !== 'expired' || layout !== 'admin')
+      (status !== 'expired' || layout !== 'admin') &&
+      (status !== 'revoked' || layout !== 'admin')
     ) {
       alwaysMatch.unshift('delete');
     }
 
-    if (status !== 'sent' && status !== 'revoked' && (status !== 'expired' || layout !== 'admin')) {
+    if (status !== 'sent' || layout !== 'admin') {
       alwaysMatch.unshift('resend');
     }
 
diff --git a/src/static/translations/user-invitation-form/en.json b/src/static/translations/user-invitation-form/en.json
index 11ba9fb0..d2dc8c36 100644
--- a/src/static/translations/user-invitation-form/en.json
+++ b/src/static/translations/user-invitation-form/en.json
@@ -7,11 +7,11 @@
   "admin_status_title_rejected": "Invitation rejected",
   "admin_status_title_accepted": "This user is a store admin",
   "admin_status_title_expired": "Invitation expired",
-  "admin_status_text_revoked": "This user may have been an admin in the past but has no access to this store at the moment. We will keep this record for historical purposes. To restore this user's access, resend the invitation using the button below.",
+  "admin_status_text_revoked": "This user may have been an admin in the past but has no access to this store at the moment. We will keep this record for historical purposes. To restore this user's access, delete the invitation using the button below and invite the user again.",
   "admin_status_text_sent": "We've sent an email to this user asking them to join this store. Once they accept, they will be granted full admin access. If they don't accept within 2 weeks, this invitation will expire.",
   "admin_status_text_rejected": "If this was a mistake, ask the user to delete this invitation in profile settings. You will be able to invite them again after that.",
   "admin_status_text_accepted": "They have full access to this store, including the ability to add and remove users.",
-  "admin_status_text_expired": "This invitation has expired. You can resend this invitation using the button below.",
+  "admin_status_text_expired": "This invitation has expired. To add this user again, please delete this invitation and create a new one.",
   "user_status_title_rejected": "You've rejected an invitation to join {{ store_name }} as administrator",
   "user_status_title_accepted": "You're a store administrator at {{ store_name }}",
   "user_status_title_revoked": "You no longer have access to {{ store_name }}",
@@ -21,7 +21,7 @@
   "user_status_text_accepted": "If you'd like to leave this store, you can do so by pressing the button below. Please note that if you'd like to join again, the store owner will need to invite you.",
   "user_status_text_revoked": "If you'd like to join this store again, please ask the store owner to reactivate your access in settings.",
   "user_status_text_sent": "Accepting this invitation will grant you full access to this store. Rejecting it will prevent this store from inviting you again.",
-  "user_status_text_expired": "To join this store, please ask the store owner to delete this invitation and invite you again.",
+  "user_status_text_expired": "To join this store, please ask the store owner to reactivate your access in settings.",
   "full_name": "{{ first_name }} {{ last_name }}",
   "full_name_empty": "Unknown User",
   "leave": {

From 056fd0d5ef8cec6d4ba03aaf77d59518120f1021 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 13:51:37 -0300
Subject: [PATCH 07/25] refactor(foxy-user-invitation-form): delay refresh by
 1s to avoid hitting cache

---
 .../InternalUserInvitationFormAsyncAction.ts           | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/elements/public/UserInvitationForm/internal/InternalUserInvitationFormAsyncAction/InternalUserInvitationFormAsyncAction.ts b/src/elements/public/UserInvitationForm/internal/InternalUserInvitationFormAsyncAction/InternalUserInvitationFormAsyncAction.ts
index 60d98cc5..a046dc03 100644
--- a/src/elements/public/UserInvitationForm/internal/InternalUserInvitationFormAsyncAction/InternalUserInvitationFormAsyncAction.ts
+++ b/src/elements/public/UserInvitationForm/internal/InternalUserInvitationFormAsyncAction/InternalUserInvitationFormAsyncAction.ts
@@ -46,8 +46,14 @@ export class InternalUserInvitationFormAsyncAction extends InternalControl {
       const api = new NucleonElement.API(this);
       const response = await api.fetch(this.href ?? '', { method: 'POST' });
 
-      this.__state = response.ok ? 'idle' : 'fail';
-      if (response.ok) this.nucleon?.refresh();
+      if (response.ok) {
+        // if we refresh right away, sometimes we get an old response from cache
+        await new Promise<void>(resolve => setTimeout(resolve, 1000));
+        this.nucleon?.refresh();
+        this.__state = 'idle';
+      } else {
+        this.__state = 'fail';
+      }
     } catch {
       this.__state = 'fail';
     }

From 1db2020f978c47ac13a33a1721b0a995aaf629c2 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 17:51:14 -0300
Subject: [PATCH 08/25] fix(foxy-gift-card-code-form): add missing imports

---
 .../public/GiftCardCodeForm/GiftCardCodeForm.test.ts      | 8 ++++++++
 src/elements/public/GiftCardCodeForm/index.ts             | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
index cd79c7d0..fd482210 100644
--- a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
+++ b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
@@ -48,6 +48,14 @@ describe('GiftCardCodeForm', () => {
     expect(customElements.get('foxy-customer-card')).to.exist;
   });
 
+  it('imports and defines foxy-item-card', () => {
+    expect(customElements.get('foxy-item-card')).to.exist;
+  });
+
+  it('imports and defines foxy-nucleon', () => {
+    expect(customElements.get('foxy-nucleon')).to.exist;
+  });
+
   it('imports and defines itself as foxy-gift-card-code-form', () => {
     expect(customElements.get('foxy-gift-card-code-form')).to.equal(GiftCardCodeForm);
   });
diff --git a/src/elements/public/GiftCardCodeForm/index.ts b/src/elements/public/GiftCardCodeForm/index.ts
index e576b4de..1d8038ef 100644
--- a/src/elements/public/GiftCardCodeForm/index.ts
+++ b/src/elements/public/GiftCardCodeForm/index.ts
@@ -7,7 +7,9 @@ import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 
 import '../GiftCardCodeLogCard/index';
+import '../NucleonElement/index';
 import '../CustomerCard/index';
+import '../ItemCard/index';
 
 import { GiftCardCodeForm } from './GiftCardCodeForm';
 

From 997edabe85fdaf918804d262a2b7eee06aedd4bd Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 17:56:21 -0300
Subject: [PATCH 09/25] fix(foxy-gift-card-code-form): fix end date picker

---
 src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts | 1 +
 src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts      | 2 +-
 src/static/translations/gift-card-code-form/en.json           | 1 +
 src/static/translations/gift-card-form/en.json                | 1 +
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
index fd482210..1a77fe7e 100644
--- a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
+++ b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
@@ -177,6 +177,7 @@ describe('GiftCardCodeForm', () => {
     );
 
     expect(control).to.exist;
+    expect(control).to.have.attribute('format', 'iso-long');
   });
 
   it('renders a resource picker control for associated customer', async () => {
diff --git a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts
index 7589f6dc..69bad101 100644
--- a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts
+++ b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts
@@ -108,7 +108,7 @@ export class GiftCardCodeForm extends Base<Data> {
         <foxy-internal-text-control layout="summary-item" infer="code"></foxy-internal-text-control>
         <foxy-internal-number-control layout="summary-item" infer="current-balance">
         </foxy-internal-number-control>
-        <foxy-internal-date-control layout="summary-item" infer="end-date">
+        <foxy-internal-date-control layout="summary-item" format="iso-long" infer="end-date">
         </foxy-internal-date-control>
       </foxy-internal-summary-control>
 
diff --git a/src/static/translations/gift-card-code-form/en.json b/src/static/translations/gift-card-code-form/en.json
index 2a223e55..b0f220cf 100644
--- a/src/static/translations/gift-card-code-form/en.json
+++ b/src/static/translations/gift-card-code-form/en.json
@@ -36,6 +36,7 @@
     "end-date": {
       "label": "Expires on",
       "placeholder": "Optional",
+      "display_value": "{{ value, date }}",
       "helper_text": ""
     }
   },
diff --git a/src/static/translations/gift-card-form/en.json b/src/static/translations/gift-card-form/en.json
index 1af3dbb3..420c532f 100644
--- a/src/static/translations/gift-card-form/en.json
+++ b/src/static/translations/gift-card-form/en.json
@@ -403,6 +403,7 @@
           "end-date": {
             "label": "Expires on",
             "placeholder": "Optional",
+            "display_value": "{{ value, date }}",
             "helper_text": ""
           }
         },

From bfa6954fd29f0a93e57e227dd92c72bde80820b2 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 18:39:12 -0300
Subject: [PATCH 10/25] feat(foxy-email-template-form): add support for
 overriding default subject with handlebars syntax via a form property

---
 .../EmailTemplateForm.stories.ts               | 10 ++++++----
 .../EmailTemplateForm.test.ts                  | 16 ++++++++++++++++
 .../EmailTemplateForm/EmailTemplateForm.ts     | 18 ++++++++++++++++--
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/elements/public/EmailTemplateForm/EmailTemplateForm.stories.ts b/src/elements/public/EmailTemplateForm/EmailTemplateForm.stories.ts
index af9a6e12..cd1cf340 100644
--- a/src/elements/public/EmailTemplateForm/EmailTemplateForm.stories.ts
+++ b/src/elements/public/EmailTemplateForm/EmailTemplateForm.stories.ts
@@ -30,10 +30,12 @@ const summary: Summary = {
 
 export default getMeta(summary);
 
-export const Playground = getStory({ ...summary, code: true });
-export const Empty = getStory(summary);
-export const Error = getStory(summary);
-export const Busy = getStory(summary);
+const ext = `default-subject="Receipt ({{ order_id }})"`;
+
+export const Playground = getStory({ ...summary, ext, code: true });
+export const Empty = getStory({ ...summary, ext });
+export const Error = getStory({ ...summary, ext });
+export const Busy = getStory({ ...summary, ext });
 
 Empty.args.href = '';
 Error.args.href = 'https://demo.api/virtual/empty?status=404';
diff --git a/src/elements/public/EmailTemplateForm/EmailTemplateForm.test.ts b/src/elements/public/EmailTemplateForm/EmailTemplateForm.test.ts
index 94adc3ca..a7e49b5f 100644
--- a/src/elements/public/EmailTemplateForm/EmailTemplateForm.test.ts
+++ b/src/elements/public/EmailTemplateForm/EmailTemplateForm.test.ts
@@ -43,6 +43,13 @@ describe('EmailTemplateForm', () => {
     expect(customElements.get('foxy-email-template-form')).to.equal(Form);
   });
 
+  it('has a reactive property "defaultSubject"', () => {
+    expect(new Form()).to.have.property('defaultSubject', null);
+    expect(Form.properties).to.have.deep.property('defaultSubject', {
+      attribute: 'default-subject',
+    });
+  });
+
   it('extends foxy-internal-form', () => {
     expect(new Form()).to.be.instanceOf(customElements.get('foxy-internal-form'));
   });
@@ -193,6 +200,15 @@ describe('EmailTemplateForm', () => {
     control?.setValue(true);
     expect(control?.getValue()).to.be.true;
     expect(form.form.subject).to.equal('general.subject.default_value');
+
+    control?.setValue(false);
+    expect(control?.getValue()).to.be.false;
+    expect(form.form.subject).to.equal('');
+
+    form.defaultSubject = 'Receipt ({{ order_id }})';
+    control?.setValue(true);
+    expect(control?.getValue()).to.be.true;
+    expect(form.form.subject).to.equal('Receipt ({{ order_id }})');
   });
 
   it('renders a text control for Subject in General summary', async () => {
diff --git a/src/elements/public/EmailTemplateForm/EmailTemplateForm.ts b/src/elements/public/EmailTemplateForm/EmailTemplateForm.ts
index c529ed79..a1cdeda9 100644
--- a/src/elements/public/EmailTemplateForm/EmailTemplateForm.ts
+++ b/src/elements/public/EmailTemplateForm/EmailTemplateForm.ts
@@ -1,4 +1,4 @@
-import type { TemplateResult } from 'lit-element';
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { Data } from './types';
 
 import { TranslatableMixin } from '../../../mixins/translatable';
@@ -17,6 +17,16 @@ const Base = TranslatableMixin(InternalForm, NS);
  * @since 1.14.0
  */
 export class EmailTemplateForm extends Base<Data> {
+  static get properties(): PropertyDeclarations {
+    return {
+      ...super.properties,
+      defaultSubject: { attribute: 'default-subject' },
+    };
+  }
+
+  /** Default email subject. Use this instead of i18next key when you need to use handlebars syntax. */
+  defaultSubject: string | null = null;
+
   private readonly __templateLanguageOptions = [
     { rawLabel: 'Nunjucks', value: 'nunjucks' },
     { rawLabel: 'Handlebars', value: 'handlebars' },
@@ -28,7 +38,11 @@ export class EmailTemplateForm extends Base<Data> {
   private readonly __toggleGetValue = () => !!this.form.subject;
 
   private readonly __toggleSetValue = (newValue: boolean) => {
-    this.edit({ subject: newValue ? this.t('general.subject.default_value') : '' });
+    if (newValue) {
+      this.edit({ subject: this.defaultSubject ?? this.t('general.subject.default_value') });
+    } else {
+      this.edit({ subject: '' });
+    }
   };
 
   get readonlySelector(): BooleanSelector {

From d8c88ec953d68e21e2fd255fc0ca56b36f4cdbf7 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 18:57:01 -0300
Subject: [PATCH 11/25] fix(foxy-payments-api): fix hosted payment gateway url
 constructor

---
 src/elements/public/PaymentsApi/PaymentsApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/public/PaymentsApi/PaymentsApi.ts b/src/elements/public/PaymentsApi/PaymentsApi.ts
index 2f6de982..ccb9d15d 100644
--- a/src/elements/public/PaymentsApi/PaymentsApi.ts
+++ b/src/elements/public/PaymentsApi/PaymentsApi.ts
@@ -172,7 +172,7 @@ export class PaymentsApi extends LitElement {
       paymentGatewaysUrl,
 
       getPaymentMethodSetHostedPaymentGatewayUrl: createGetter(
-        paymentMethodSetHostedPaymentGatewaysUrl
+        paymentMethodSetHostedPaymentGatewayBaseUrl
       ),
 
       getHostedPaymentGatewayUrl: createGetter(hostedPaymentGatewayBaseUrl),

From 5f08d2575d474fbae53befdb796b6500468d7d4e Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Fri, 17 Jan 2025 19:05:32 -0300
Subject: [PATCH 12/25] feat(foxy-transaction): add link to view web receipt

---
 .../InternalTransactionActionsControl.test.ts | 39 +++++++++++++++++++
 .../InternalTransactionActionsControl.ts      | 15 +++++++
 .../admin-subscription-form/en.json           |  3 ++
 src/static/translations/transaction/en.json   |  3 ++
 4 files changed, 60 insertions(+)

diff --git a/src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.test.ts b/src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.test.ts
index 793b21bc..29d42f0c 100644
--- a/src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.test.ts
+++ b/src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.test.ts
@@ -232,5 +232,44 @@ describe('Transaction', () => {
       expect(link).to.exist;
       expect(link).to.have.property('href', 'https://example.com/test');
     });
+
+    it('renders View Receipt action if transaction has fx:receipt link', async () => {
+      const router = createRouter();
+      const wrapper = await fixture<Transaction>(html`
+        <foxy-nucleon
+          href="https://demo.api/hapi/transactions/0"
+          @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
+        >
+          <foxy-internal-transaction-actions-control infer="actions">
+          </foxy-internal-transaction-actions-control>
+        </foxy-nucleon>
+      `);
+
+      await waitUntil(() => wrapper.in({ idle: 'snapshot' }));
+      const control = wrapper.firstElementChild as InternalTransactionActionsControl;
+
+      unset(wrapper, 'data._links["fx:receipt"]');
+      wrapper.data = { ...wrapper.data! };
+      await wrapper.requestUpdate();
+      await control.requestUpdate();
+
+      expect(control.renderRoot.querySelector('[infer="receipt"]')).to.not.exist;
+
+      set(wrapper, 'data._links["fx:receipt"]', { href: 'https://example.com/receipt' });
+      wrapper.data = { ...wrapper.data! };
+      await wrapper.requestUpdate();
+      await control.requestUpdate();
+
+      const action = control.renderRoot.querySelector('[infer="receipt"]');
+
+      expect(action).to.exist;
+      expect(action).to.have.property('localName', 'foxy-i18n');
+      expect(action).to.have.property('key', 'caption');
+
+      const link = action?.closest('a');
+      expect(link).to.exist;
+      expect(link).to.have.attribute('href', 'https://example.com/receipt');
+      expect(link).to.have.attribute('target', '_blank');
+    });
   });
 });
diff --git a/src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.ts b/src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.ts
index aa27de1f..ec656f94 100644
--- a/src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.ts
+++ b/src/elements/public/Transaction/internal/InternalTransactionActionsControl/InternalTransactionActionsControl.ts
@@ -12,6 +12,7 @@ export class InternalTransactionActionsControl extends InternalControl {
         ${this.nucleon?.data?._links['fx:refund'] ? this.__renderRefundAction() : ''}
         ${this.nucleon?.data?._links['fx:send_emails'] ? this.__renderSendEmailsAction() : ''}
         ${this.nucleon?.data?._links['fx:subscription'] ? this.__renderSubscriptionAction() : ''}
+        ${this.nucleon?.data?._links['fx:receipt'] ? this.__renderReceiptAction() : ''}
       </div>
     `;
   }
@@ -76,4 +77,18 @@ export class InternalTransactionActionsControl extends InternalControl {
       </a>
     `;
   }
+
+  private __renderReceiptAction() {
+    const host = this.nucleon as Transaction | null;
+
+    return html`
+      <a
+        target="_blank"
+        class="rounded text-m font-medium text-primary cursor-pointer transition-opacity hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+        href=${ifDefined(host?.data?._links['fx:receipt']?.href)}
+      >
+        <foxy-i18n infer="receipt" key="caption"></foxy-i18n>
+      </a>
+    `;
+  }
 }
diff --git a/src/static/translations/admin-subscription-form/en.json b/src/static/translations/admin-subscription-form/en.json
index 0aaebbe3..c2c52ad9 100644
--- a/src/static/translations/admin-subscription-form/en.json
+++ b/src/static/translations/admin-subscription-form/en.json
@@ -1949,6 +1949,9 @@
           },
           "subscription": {
             "caption": "Go to subscription"
+          },
+          "receipt": {
+            "caption": "View receipt"
           }
         },
         "spinner": {
diff --git a/src/static/translations/transaction/en.json b/src/static/translations/transaction/en.json
index ed171a78..3b5323db 100644
--- a/src/static/translations/transaction/en.json
+++ b/src/static/translations/transaction/en.json
@@ -1710,6 +1710,9 @@
     },
     "subscription": {
       "caption": "Go to subscription"
+    },
+    "receipt": {
+      "caption": "View receipt"
     }
   },
   "spinner": {

From fa2ab4af8b1151af23694b58bb1b21aeb9fec53f Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 10:51:46 -0300
Subject: [PATCH 13/25] fix(foxy-item-category-form): fix shipping flat rate
 type options

---
 src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts | 2 +-
 src/elements/public/ItemCategoryForm/ItemCategoryForm.ts      | 2 +-
 src/static/translations/item-category-form/en.json            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts b/src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts
index 0356201e..5cf5234c 100644
--- a/src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts
+++ b/src/elements/public/ItemCategoryForm/ItemCategoryForm.test.ts
@@ -680,7 +680,7 @@ describe('ItemCategoryForm', () => {
     expect(control).to.have.attribute('layout', 'summary-item');
     expect(control).to.have.deep.property('options', [
       { label: 'option_per_order', value: 'per_order' },
-      { label: 'option_per_shipment', value: 'per_shipment' },
+      { label: 'option_per_item', value: 'per_item' },
     ]);
   });
 
diff --git a/src/elements/public/ItemCategoryForm/ItemCategoryForm.ts b/src/elements/public/ItemCategoryForm/ItemCategoryForm.ts
index aa42868f..552ee077 100644
--- a/src/elements/public/ItemCategoryForm/ItemCategoryForm.ts
+++ b/src/elements/public/ItemCategoryForm/ItemCategoryForm.ts
@@ -135,7 +135,7 @@ export class ItemCategoryForm extends TranslatableMixin(InternalForm, 'item-cate
 
   private static __shippingFlatRateTypeOptions = [
     { label: 'option_per_order', value: 'per_order' },
-    { label: 'option_per_shipment', value: 'per_shipment' },
+    { label: 'option_per_item', value: 'per_item' },
   ];
 
   private static __defaultWeightUnitOptions = [
diff --git a/src/static/translations/item-category-form/en.json b/src/static/translations/item-category-form/en.json
index 766ad1f6..629d1775 100644
--- a/src/static/translations/item-category-form/en.json
+++ b/src/static/translations/item-category-form/en.json
@@ -97,7 +97,7 @@
       "label": "Flat rate applies",
       "placeholder": "Select...",
       "option_per_order": "Per order",
-      "option_per_shipment": "Per shipment",
+      "option_per_item": "Per item",
       "helper_text": "",
       "v8n_required": "Please select a value"
     },

From 892cd9e4287618de344338d43c70177992510097 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 11:53:56 -0300
Subject: [PATCH 14/25] internal(resource-picker-control): pass resource data
 to item url getter

---
 .../InternalResourcePickerControl.test.ts     | 14 +++-
 .../InternalResourcePickerControl.ts          | 65 ++++++++++++-------
 2 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts
index f0dc5251..db114914 100644
--- a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts
+++ b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts
@@ -9,6 +9,7 @@ import { FormDialog } from '../../public/FormDialog/FormDialog';
 import { Type } from '../../public/QueryBuilder/types';
 import { stub } from 'sinon';
 import { createRouter } from '../../../server';
+import { getTestData } from '../../../testgen/getTestData';
 
 async function waitForIdle(element: Control) {
   await waitUntil(
@@ -443,12 +444,15 @@ describe('InternalResourcePickerControl', () => {
   });
 
   it('renders View link in standalone layout when value is set and getItemUrl is defined', async () => {
+    const getItemUrl = stub().returns('https://example.com/hapi/customers/0');
+    const router = createRouter();
     const control = await fixture<Control>(html`
       <foxy-internal-resource-picker-control
         infer=""
         first="https://demo.api/hapi/customers"
         item="foxy-customer-card"
-        .getItemUrl=${(value: string) => value.replace('demo.api', 'example.com')}
+        .getItemUrl=${getItemUrl}
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
       >
       </foxy-internal-resource-picker-control>
     `);
@@ -458,6 +462,9 @@ describe('InternalResourcePickerControl', () => {
 
     control.getValue = () => 'https://demo.api/hapi/customers/0';
     await control.requestUpdate();
+    await waitForIdle(control);
+    await control.requestUpdate();
+
     linkText = control.renderRoot.querySelector('[key="view"]');
     expect(linkText).to.exist;
     expect(linkText).to.have.attribute('infer', '');
@@ -465,6 +472,11 @@ describe('InternalResourcePickerControl', () => {
     const viewLink = linkText?.closest('a');
     expect(viewLink).to.exist;
     expect(viewLink).to.have.attribute('href', 'https://example.com/hapi/customers/0');
+
+    const customer = await getTestData('./hapi/customers/0', router);
+    getItemUrl.resetHistory();
+    await control.requestUpdate();
+    expect(getItemUrl).to.have.been.calledWith('https://demo.api/hapi/customers/0', customer);
   });
 
   it('renders Copy ID button in standalone layout when value is set and showCopyIdButton is true', async () => {
diff --git a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
index 0686a684..a5519198 100644
--- a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
+++ b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
@@ -42,7 +42,7 @@ export class InternalResourcePickerControl extends InternalEditableControl {
 
   virtualHost = uniqueId('internal-resource-picker-control-');
 
-  getItemUrl: ((href: string) => string) | null = null;
+  getItemUrl: ((href: string, data: unknown | null) => string) | null = null;
 
   formProps: Record<string, unknown> = {};
 
@@ -185,8 +185,12 @@ export class InternalResourcePickerControl extends InternalEditableControl {
   }
 
   private __renderStandaloneLayout() {
-    const selectionUrl = typeof this._value === 'string' ? this.getItemUrl?.(this._value) : void 0;
+    const valueLoader = this.__valueLoader;
     const selectionId = typeof this._value === 'string' ? getResourceId(this._value) : void 0;
+    const selectionUrl =
+      typeof this._value === 'string'
+        ? this.getItemUrl?.(this._value, valueLoader?.data ?? null)
+        : void 0;
 
     return html`
       <div class="block group">
@@ -252,28 +256,36 @@ export class InternalResourcePickerControl extends InternalEditableControl {
           }}
         >
           <div class=${classMap({ 'transition-opacity': true, 'opacity-50': this.disabled })}>
-            ${this.__getItemRenderer(this.item)({
-              html,
-              data: null,
-              href: (this._value as string | undefined) || '',
-              related: [],
-              parent: '',
-              props: {},
-              spread: spread,
-              simplifyNsLoading: this.simplifyNsLoading,
-              disabled: this.disabled,
-              disabledControls: this.disabledControls,
-              readonly: this.readonly,
-              readonlyControls: this.readonlyControls,
-              hidden: this.hidden,
-              hiddenControls: this.hiddenControls,
-              templates: this.templates,
-              previous: null,
-              next: null,
-              group: this.nucleon?.group ?? '',
-              lang: this.lang,
-              ns: this.ns,
-            })}
+            <foxy-nucleon
+              class="block"
+              infer=""
+              href=${ifDefined(this._value || void 0)}
+              id="valueLoader"
+              @update=${() => this.requestUpdate()}
+            >
+              ${this.__getItemRenderer(this.item)({
+                html,
+                data: valueLoader?.data ?? null,
+                href: (this._value as string | undefined) || '',
+                related: [],
+                parent: '',
+                props: {},
+                spread: spread,
+                simplifyNsLoading: this.simplifyNsLoading,
+                disabled: this.disabled,
+                disabledControls: this.disabledControls,
+                readonly: this.readonly,
+                readonlyControls: this.readonlyControls,
+                hidden: this.hidden,
+                hiddenControls: this.hiddenControls,
+                templates: this.templates,
+                previous: null,
+                next: null,
+                group: this.nucleon?.group ?? '',
+                lang: this.lang,
+                ns: this.ns,
+              })}
+            </foxy-nucleon>
           </div>
         </button>
 
@@ -321,4 +333,9 @@ export class InternalResourcePickerControl extends InternalEditableControl {
       })
     );
   }
+
+  private get __valueLoader() {
+    type Loader = NucleonElement<any>;
+    return this.renderRoot.querySelector<Loader>('#valueLoader');
+  }
 }

From a6e1d584957b6643f5e04903fa2e4f5cf292b3ef Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 12:09:20 -0300
Subject: [PATCH 15/25] feat(foxy-gift-card-code-form): add support for linking
 cart item to transaction page

---
 .../GiftCardCodeForm/GiftCardCodeForm.test.ts | 16 +++++++++++++++
 .../GiftCardCodeForm/GiftCardCodeForm.ts      | 20 ++++++++++++++++++-
 src/elements/public/GiftCardCodeForm/types.ts |  2 ++
 .../translations/gift-card-code-form/en.json  |  1 +
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
index 1a77fe7e..aa71f350 100644
--- a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
+++ b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.test.ts
@@ -5,6 +5,7 @@ import './index';
 
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { GiftCardCodeForm } from './GiftCardCodeForm';
+import { getResourceId } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 import { createRouter } from '../../../server';
 import { getTestData } from '../../../testgen/getTestData';
@@ -68,6 +69,13 @@ describe('GiftCardCodeForm', () => {
     expect(new GiftCardCodeForm()).to.have.property('ns', 'gift-card-code-form');
   });
 
+  it('has a reactive property "getTransactionPageHref"', () => {
+    expect(new GiftCardCodeForm()).to.have.property('getTransactionPageHref', null);
+    expect(GiftCardCodeForm).to.have.deep.nested.property('properties.getTransactionPageHref', {
+      attribute: false,
+    });
+  });
+
   it('has a reactive property "getCustomerHref"', () => {
     expect(GiftCardCodeForm).to.have.deep.nested.property('properties.getCustomerHref', {
       attribute: false,
@@ -234,10 +242,15 @@ describe('GiftCardCodeForm', () => {
 
   it('renders a resource picker control for associated cart item', async () => {
     const router = createRouter();
+    const getTransactionPageHref = (href: string) => {
+      return `https://example.com/transactions/${getResourceId(href)}`;
+    };
+
     const element = await fixture<GiftCardCodeForm>(
       html`
         <foxy-gift-card-code-form
           href="https://demo.api/hapi/gift_card_codes/0"
+          .getTransactionPageHref=${getTransactionPageHref}
           @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
         >
         </foxy-gift-card-code-form>
@@ -252,6 +265,9 @@ describe('GiftCardCodeForm', () => {
     expect(control).to.exist;
     expect(control).to.have.attribute('item', 'foxy-item-card');
     expect(control?.getValue()).to.equal('https://demo.api/hapi/items/0?zoom=item_options');
+    expect(
+      control?.getItemUrl?.('https://demo.api/hapi/items/0', await getTestData('./hapi/items/0'))
+    ).to.equal('https://example.com/transactions/0');
   });
 
   it('renders a list control for logs', async () => {
diff --git a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts
index 69bad101..e62bc77f 100644
--- a/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts
+++ b/src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts
@@ -1,5 +1,5 @@
 import type { PropertyDeclarations } from 'lit-element';
-import type { Data } from './types';
+import type { Data, TransactionPageHrefGetter } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonElement } from '../NucleonElement/NucleonElement';
 import type { NucleonV8N } from '../NucleonElement/types';
@@ -26,6 +26,7 @@ export class GiftCardCodeForm extends Base<Data> {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
+      getTransactionPageHref: { attribute: false },
       getCustomerHref: { attribute: false },
     };
   }
@@ -39,11 +40,27 @@ export class GiftCardCodeForm extends Base<Data> {
     ];
   }
 
+  /** When set, the Cart Item section will display a link to transaction. */
+  getTransactionPageHref: TransactionPageHrefGetter | null = null;
+
   /** Returns a `fx:customer` Resource URL for a Customer ID. */
   getCustomerHref: (id: number | string) => string = id => {
     return `https://api.foxycart.com/customers/${id}`;
   };
 
+  private readonly __cartItemGetItemUrl = (_: string, data: Resource<Rels.Item> | null) => {
+    let itemUrl: string | undefined | null = null;
+
+    try {
+      const transactionUrl = data?._links['fx:transaction'].href;
+      if (transactionUrl) itemUrl = this.getTransactionPageHref?.(transactionUrl);
+    } catch (err) {
+      console.log(err);
+    }
+
+    return itemUrl ?? null;
+  };
+
   private readonly __customerGetValue = () => {
     const link = this.data?._links?.['fx:customer']?.href;
     const id = this.form.customer_id;
@@ -125,6 +142,7 @@ export class GiftCardCodeForm extends Base<Data> {
       <foxy-internal-resource-picker-control
         infer="cart-item"
         item="foxy-item-card"
+        .getItemUrl=${this.__cartItemGetItemUrl}
         .getValue=${() => href}
       >
       </foxy-internal-resource-picker-control>
diff --git a/src/elements/public/GiftCardCodeForm/types.ts b/src/elements/public/GiftCardCodeForm/types.ts
index 61c2376c..4a7335f8 100644
--- a/src/elements/public/GiftCardCodeForm/types.ts
+++ b/src/elements/public/GiftCardCodeForm/types.ts
@@ -1,6 +1,8 @@
 import type { Resource } from '@foxy.io/sdk/core';
 import type { Rels } from '@foxy.io/sdk/backend';
 
+export type TransactionPageHrefGetter = (href: string) => string | null;
+
 export type Data = Resource<Rels.GiftCardCode> & {
   customer_id?: number | string;
 };
diff --git a/src/static/translations/gift-card-code-form/en.json b/src/static/translations/gift-card-code-form/en.json
index b0f220cf..ec9fc9d0 100644
--- a/src/static/translations/gift-card-code-form/en.json
+++ b/src/static/translations/gift-card-code-form/en.json
@@ -129,6 +129,7 @@
   "cart-item": {
     "label": "Cart item",
     "helper_text": "",
+    "view": "View transaction",
     "card": {
       "daily": "Daily",
       "daily_plural": "Every {{count}} days",

From 06d3816ce6fe588d45e2b113763c41af968047a9 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 12:12:33 -0300
Subject: [PATCH 16/25] feat(foxy-gift-card-form): add support for linking to
 transaction page from gift card code dialog

---
 src/elements/public/GiftCardForm/GiftCardForm.test.ts |  8 ++++++++
 src/elements/public/GiftCardForm/GiftCardForm.ts      | 10 +++++++++-
 src/static/translations/gift-card-form/en.json        |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/elements/public/GiftCardForm/GiftCardForm.test.ts b/src/elements/public/GiftCardForm/GiftCardForm.test.ts
index 82e5d1e8..83e676b0 100644
--- a/src/elements/public/GiftCardForm/GiftCardForm.test.ts
+++ b/src/elements/public/GiftCardForm/GiftCardForm.test.ts
@@ -110,6 +110,13 @@ describe('GiftCardForm', () => {
     expect(new GiftCardForm()).to.have.property('ns', 'gift-card-form');
   });
 
+  it('has a reactive property "getTransactionPageHref"', () => {
+    expect(new GiftCardForm()).to.have.property('getTransactionPageHref', null);
+    expect(GiftCardForm).to.have.deep.nested.property('properties.getTransactionPageHref', {
+      attribute: false,
+    });
+  });
+
   it('has a reactive property "getCustomerHref"', () => {
     expect(GiftCardForm).to.have.deep.nested.property('properties.getCustomerHref', {
       attribute: false,
@@ -440,6 +447,7 @@ describe('GiftCardForm', () => {
     expect(control).to.have.attribute('form', 'foxy-gift-card-code-form');
     expect(control).to.have.attribute('alert');
     expect(control).to.have.deep.property('formProps', {
+      '.getTransactionPageHref': element.getTransactionPageHref,
       '.getCustomerHref': element.getCustomerHref,
     });
 
diff --git a/src/elements/public/GiftCardForm/GiftCardForm.ts b/src/elements/public/GiftCardForm/GiftCardForm.ts
index 85eb9def..75642081 100644
--- a/src/elements/public/GiftCardForm/GiftCardForm.ts
+++ b/src/elements/public/GiftCardForm/GiftCardForm.ts
@@ -1,4 +1,5 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { TransactionPageHrefGetter } from '../GiftCardCodeForm/types';
 import type { NucleonElement } from '../NucleonElement/NucleonElement';
 import type { SwipeAction } from '../../internal/InternalAsyncListControl/types';
 import type { NucleonV8N } from '../NucleonElement/types';
@@ -30,6 +31,7 @@ export class GiftCardForm extends Base<Data> {
   static get properties(): PropertyDeclarations {
     return {
       ...super.properties,
+      getTransactionPageHref: { attribute: false },
       getCustomerHref: { attribute: false },
     };
   }
@@ -64,6 +66,9 @@ export class GiftCardForm extends Base<Data> {
     ];
   }
 
+  /** When set, the Cart Item section in Gift Card Code form will display a link to transaction. */
+  getTransactionPageHref: TransactionPageHrefGetter | null = null;
+
   /** Returns a `fx:customer` Resource URL for a Customer ID. */
   getCustomerHref: (id: number | string) => string = id => {
     return `https://api.foxycart.com/customers/${id}`;
@@ -296,9 +301,12 @@ export class GiftCardForm extends Base<Data> {
         item="foxy-gift-card-code-card"
         form="foxy-gift-card-code-form"
         alert
-        .formProps=${{ '.getCustomerHref': this.getCustomerHref }}
         .actions=${this.__codesActions}
         .filters=${this.__codesFilters}
+        .formProps=${{
+          '.getTransactionPageHref': this.getTransactionPageHref,
+          '.getCustomerHref': this.getCustomerHref,
+        }}
       >
       </foxy-internal-async-list-control>
 
diff --git a/src/static/translations/gift-card-form/en.json b/src/static/translations/gift-card-form/en.json
index 420c532f..fe72fa9b 100644
--- a/src/static/translations/gift-card-form/en.json
+++ b/src/static/translations/gift-card-form/en.json
@@ -496,6 +496,7 @@
         "cart-item": {
           "label": "Cart item",
           "helper_text": "",
+          "view": "View transaction",
           "card": {
             "daily": "Daily",
             "daily_plural": "Every {{count}} days",

From 5c89f7a5c4812744f87f83d6d5ea2b5e1a7aee8d Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 12:17:52 -0300
Subject: [PATCH 17/25] fix(foxy-webhook-form): use text controls for query and
 enpoint

---
 .../public/WebhookForm/WebhookForm.test.ts    | 19 +++++++--------
 .../public/WebhookForm/WebhookForm.ts         |  8 ++++---
 src/elements/public/WebhookForm/index.ts      |  1 -
 src/static/translations/webhook-form/en.json  | 24 +++++++++----------
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/elements/public/WebhookForm/WebhookForm.test.ts b/src/elements/public/WebhookForm/WebhookForm.test.ts
index ad62b4f2..8dcfce6e 100644
--- a/src/elements/public/WebhookForm/WebhookForm.test.ts
+++ b/src/elements/public/WebhookForm/WebhookForm.test.ts
@@ -5,7 +5,6 @@ import type { Data } from './types';
 import { InternalAsyncListControl } from '../../internal/InternalAsyncListControl/InternalAsyncListControl';
 import { InternalPasswordControl } from '../../internal/InternalPasswordControl/InternalPasswordControl';
 import { InternalSelectControl } from '../../internal/InternalSelectControl/InternalSelectControl';
-import { InternalSourceControl } from '../../internal/InternalSourceControl/InternalSourceControl';
 import { expect, fixture, html } from '@open-wc/testing';
 import { InternalTextControl } from '../../internal/InternalTextControl/InternalTextControl';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
@@ -26,10 +25,6 @@ describe('WebhookForm', () => {
     expect(customElements.get('foxy-internal-select-control')).to.exist;
   });
 
-  it('imports and defines foxy-internal-source-control element', () => {
-    expect(customElements.get('foxy-internal-source-control')).to.exist;
-  });
-
   it('imports and defines foxy-internal-text-control element', () => {
     expect(customElements.get('foxy-internal-text-control')).to.exist;
   });
@@ -164,20 +159,22 @@ describe('WebhookForm', () => {
     expect(control).to.have.attribute('layout', 'summary-item');
   });
 
-  it('renders webhook query as source control', async () => {
+  it('renders webhook query as text control inside of the General summary', async () => {
     const element = await fixture<WebhookForm>(html`<foxy-webhook-form></foxy-webhook-form>`);
-    const control = element.renderRoot.querySelector('[infer="query"]');
+    const control = element.renderRoot.querySelector('[infer="general"] [infer="query"]');
 
     expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalSourceControl);
+    expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
   });
 
-  it('renders webhook url as source control', async () => {
+  it('renders webhook url as text control inside of the General summary', async () => {
     const element = await fixture<WebhookForm>(html`<foxy-webhook-form></foxy-webhook-form>`);
-    const control = element.renderRoot.querySelector('[infer="url"]');
+    const control = element.renderRoot.querySelector('[infer="general"] [infer="url"]');
 
     expect(control).to.exist;
-    expect(control).to.be.instanceOf(InternalSourceControl);
+    expect(control).to.be.instanceOf(InternalTextControl);
+    expect(control).to.have.attribute('layout', 'summary-item');
   });
 
   it('renders webhook encryption key as password control inside of the General summary', async () => {
diff --git a/src/elements/public/WebhookForm/WebhookForm.ts b/src/elements/public/WebhookForm/WebhookForm.ts
index 2c27337e..4685f3f4 100644
--- a/src/elements/public/WebhookForm/WebhookForm.ts
+++ b/src/elements/public/WebhookForm/WebhookForm.ts
@@ -123,10 +123,12 @@ export class WebhookForm extends TranslatableMixin(InternalForm, 'webhook-form')
           .generatorOptions=${this.__encryptionKeyGeneratorOptions}
         >
         </foxy-internal-password-control>
-      </foxy-internal-summary-control>
 
-      <foxy-internal-source-control infer="query"></foxy-internal-source-control>
-      <foxy-internal-source-control infer="url"></foxy-internal-source-control>
+        <foxy-internal-text-control layout="summary-item" infer="query">
+        </foxy-internal-text-control>
+
+        <foxy-internal-text-control layout="summary-item" infer="url"></foxy-internal-text-control>
+      </foxy-internal-summary-control>
 
       <foxy-internal-async-list-control
         first=${ifDefined(statusesLink)}
diff --git a/src/elements/public/WebhookForm/index.ts b/src/elements/public/WebhookForm/index.ts
index 21d20fa3..c2359103 100644
--- a/src/elements/public/WebhookForm/index.ts
+++ b/src/elements/public/WebhookForm/index.ts
@@ -2,7 +2,6 @@ import '../../internal/InternalAsyncListControl/index';
 import '../../internal/InternalPasswordControl/index';
 import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalSelectControl/index';
-import '../../internal/InternalSourceControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 
diff --git a/src/static/translations/webhook-form/en.json b/src/static/translations/webhook-form/en.json
index a9a48e17..89f06d01 100644
--- a/src/static/translations/webhook-form/en.json
+++ b/src/static/translations/webhook-form/en.json
@@ -45,20 +45,20 @@
       "event_resource_subscription": "Subscription",
       "event_resource_transaction": "Transaction",
       "event_resource_customer": "Customer"
+    },
+    "url": {
+      "label": "Endpoint",
+      "placeholder": "Example: https://example.com/webhook",
+      "helper_text": "",
+      "v8n_too_long": "URL cannot exceed 1000 characters"
+    },
+    "query": {
+      "label": "Query",
+      "placeholder": "Example: zoom=items,items:options,customer",
+      "helper_text": "",
+      "v8n_too_long": "Query cannot exceed 1000 characters"
     }
   },
-  "url": {
-    "label": "Endpoint",
-    "placeholder": "Example: https://example.com/webhook",
-    "helper_text": "",
-    "v8n_too_long": "URL cannot exceed 1000 characters"
-  },
-  "query": {
-    "label": "Query",
-    "placeholder": "Example: zoom=items,items:options,customer",
-    "helper_text": "",
-    "v8n_too_long": "Query cannot exceed 1000 characters"
-  },
   "statuses": {
     "label": "Runs",
     "pagination": {

From 5048471dfb7905a77f35ca09db52093c867bdc47 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 13:46:55 -0300
Subject: [PATCH 18/25] internal(async-list-control): add support for setting
 filters externally

---
 .../InternalAsyncListControl.test.ts          | 27 +++++++++++++++++++
 .../InternalAsyncListControl.ts               | 13 ++++-----
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
index c9ebab68..e690ca5b 100644
--- a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
+++ b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
@@ -240,6 +240,11 @@ describe('InternalAsyncListControl', () => {
     expect(Control).to.have.deep.nested.property('properties.filters', { type: Array });
   });
 
+  it('has a reactive property "filter"', () => {
+    expect(new Control()).to.have.deep.property('filter', null);
+    expect(Control).to.have.deep.nested.property('properties.filter', {});
+  });
+
   it('renders a form dialog if "form" is specified', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-async-list-control></foxy-internal-async-list-control>
@@ -1104,6 +1109,28 @@ describe('InternalAsyncListControl', () => {
       });
     });
 
+    it(`sets default filter if configured in ${layoutLabel} layout`, async () => {
+      const control = await fixture<Control>(html`
+        <foxy-internal-async-list-control
+          layout=${ifDefined(layout)}
+          filter="foo=bar&baz=qux"
+          .filters=${[{ label: 'filter_1', type: Type.Boolean, path: 'foo' }]}
+        >
+        </foxy-internal-async-list-control>
+      `);
+
+      const overlay = control.renderRoot.querySelector(
+        'foxy-internal-async-list-control-filter-overlay'
+      );
+
+      expect(overlay).to.have.deep.property('model', {
+        options: control.filters,
+        value: 'foo=bar&baz=qux',
+        lang: control.lang,
+        ns: control.ns,
+      });
+    });
+
     it(`emits "itemclick" event when collection page item is clicked in ${layoutLabel} layout`, async () => {
       const control = await fixture<Control>(html`
         <foxy-internal-async-list-control
diff --git a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts
index fbd5fa1c..3c3502ba 100644
--- a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts
+++ b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts
@@ -42,7 +42,7 @@ export class InternalAsyncListControl extends InternalEditableControl {
       actions: { attribute: false },
       bulkActions: { attribute: false },
       filters: { type: Array },
-      __filter: { attribute: false },
+      filter: {},
       __selection: { attribute: false },
       __totalItems: { attribute: false },
       __isSelecting: { attribute: false },
@@ -115,6 +115,8 @@ export class InternalAsyncListControl extends InternalEditableControl {
   /** If set, renders list items as <a> tags. */
   getPageHref: ((itemHref: string, item: unknown) => string | null) | null = null;
 
+  filter: string | null = null;
+
   private __deletionConfimationCallback: (() => void) | null = null;
 
   private __cachedCardRenderer: {
@@ -276,8 +278,6 @@ export class InternalAsyncListControl extends InternalEditableControl {
     `;
   };
 
-  private __filter = '';
-
   render(): TemplateResult {
     const hidden = this.hideWhenEmpty && !this.__totalItems;
     return html`<div class=${classMap({ hidden })}>${super.render()}</div>`;
@@ -447,14 +447,14 @@ export class InternalAsyncListControl extends InternalEditableControl {
               .positionTarget=${this.renderRoot.querySelector('#filters')}
               .model=${{
                 options: this.filters,
-                value: this.__filter,
+                value: this.filter ?? '',
                 lang: this.lang,
                 ns: this.ns,
               }}
               ?opened=${this.__isFilterVisible}
               @vaadin-overlay-close=${() => (this.__isFilterVisible = false)}
               @search=${(evt: CustomEvent<string | undefined>) => {
-                this.__filter = evt.detail ?? '';
+                this.filter = evt.detail ?? '';
               }}
             >
             </foxy-internal-async-list-control-filter-overlay>
@@ -466,6 +466,7 @@ export class InternalAsyncListControl extends InternalEditableControl {
               @click=${() => (this.__isFilterVisible = !this.__isFilterVisible)}
             >
               <foxy-i18n infer="pagination" key="search_button_text"></foxy-i18n>
+              ${this.filter ? html`<span>(${this.filter.split('&').length})</span>` : ''}
             </vaadin-button>
           `
         : '',
@@ -576,7 +577,7 @@ export class InternalAsyncListControl extends InternalEditableControl {
 
     try {
       const url = new URL(this.first ?? '');
-      const filter = new URLSearchParams(this.__filter);
+      const filter = new URLSearchParams(this.filter ?? '');
 
       url.searchParams.set('limit', String(this.limit));
       filter.forEach((value, key) => url.searchParams.set(key, value));

From 6de0a51e65de1f1787eb8eb9553af1234f023f9a Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 13:52:17 -0300
Subject: [PATCH 19/25] feat(foxy-gift-card-form): add support for settings
 Codes section filters externally

---
 .../public/GiftCardForm/GiftCardForm.test.ts       | 14 +++++++++++++-
 src/elements/public/GiftCardForm/GiftCardForm.ts   |  5 +++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/elements/public/GiftCardForm/GiftCardForm.test.ts b/src/elements/public/GiftCardForm/GiftCardForm.test.ts
index 83e676b0..8766203e 100644
--- a/src/elements/public/GiftCardForm/GiftCardForm.test.ts
+++ b/src/elements/public/GiftCardForm/GiftCardForm.test.ts
@@ -128,6 +128,13 @@ describe('GiftCardForm', () => {
     );
   });
 
+  it('has a reactive property "codesFilter"', () => {
+    expect(new GiftCardForm()).to.have.property('codesFilter', null);
+    expect(GiftCardForm).to.have.deep.nested.property('properties.codesFilter', {
+      attribute: 'codes-filter',
+    });
+  });
+
   it('extends foxy-internal-form', () => {
     expect(new GiftCardForm()).to.be.instanceOf(customElements.get('foxy-internal-form'));
   });
@@ -429,7 +436,11 @@ describe('GiftCardForm', () => {
     const writeTextMethod = stub(navigator.clipboard, 'writeText').resolves();
 
     const element = await fixture<GiftCardForm>(html`
-      <foxy-gift-card-form .data=${await getTestData('./hapi/gift_cards/0')}> </foxy-gift-card-form>
+      <foxy-gift-card-form
+        codes-filter="code=abc123"
+        .data=${await getTestData('./hapi/gift_cards/0')}
+      >
+      </foxy-gift-card-form>
     `);
 
     const control = element.renderRoot.querySelector(
@@ -442,6 +453,7 @@ describe('GiftCardForm', () => {
       'https://demo.api/hapi/gift_card_codes?gift_card_id=0&order=date_created+desc'
     );
 
+    expect(control).to.have.attribute('filter', 'code=abc123');
     expect(control).to.have.attribute('limit', '5');
     expect(control).to.have.attribute('item', 'foxy-gift-card-code-card');
     expect(control).to.have.attribute('form', 'foxy-gift-card-code-form');
diff --git a/src/elements/public/GiftCardForm/GiftCardForm.ts b/src/elements/public/GiftCardForm/GiftCardForm.ts
index 75642081..df44e52b 100644
--- a/src/elements/public/GiftCardForm/GiftCardForm.ts
+++ b/src/elements/public/GiftCardForm/GiftCardForm.ts
@@ -33,6 +33,7 @@ export class GiftCardForm extends Base<Data> {
       ...super.properties,
       getTransactionPageHref: { attribute: false },
       getCustomerHref: { attribute: false },
+      codesFilter: { attribute: 'codes-filter' },
     };
   }
 
@@ -74,6 +75,9 @@ export class GiftCardForm extends Base<Data> {
     return `https://api.foxycart.com/customers/${id}`;
   };
 
+  /** When set, will apply as default filter in Codes section. */
+  codesFilter: string | null = null;
+
   private readonly __provisioningMaxBalanceValueGetter = () => {
     return this.form.provisioning_config?.initial_balance_max;
   };
@@ -295,6 +299,7 @@ export class GiftCardForm extends Base<Data> {
       </foxy-internal-summary-control>
 
       <foxy-internal-async-list-control
+        filter=${ifDefined(this.codesFilter ?? void 0)}
         first=${codesUrl}
         limit="5"
         infer="codes"

From fa04b9df14f1ccf699fd87adc0861be456168c5f Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 13:54:22 -0300
Subject: [PATCH 20/25] fix: use "Filters" instead of "Search" for Filters menu
 buttons

---
 .../translations/admin-subscription-form/en.json       |  2 +-
 src/static/translations/cart-form/en.json              | 10 +++++-----
 src/static/translations/customer/en.json               |  2 +-
 .../experimental-add-to-cart-builder/en.json           |  6 +++---
 src/static/translations/gift-card-code-form/en.json    |  2 +-
 src/static/translations/gift-card-form/en.json         |  4 ++--
 src/static/translations/item-category-form/en.json     |  2 +-
 src/static/translations/item-form/en.json              |  2 +-
 src/static/translations/payment-method-card/en.json    |  4 ++--
 src/static/translations/transaction/en.json            |  2 +-
 .../translations/update-payment-method-form/en.json    |  2 +-
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/static/translations/admin-subscription-form/en.json b/src/static/translations/admin-subscription-form/en.json
index c2c52ad9..bf95e047 100644
--- a/src/static/translations/admin-subscription-form/en.json
+++ b/src/static/translations/admin-subscription-form/en.json
@@ -390,7 +390,7 @@
                       "search": "Search",
                       "clear": "Clear",
                       "pagination": {
-                        "search_button_text": "Search",
+                        "search_button_text": "Filters",
                         "first": "First",
                         "last": "Last",
                         "next": "Next",
diff --git a/src/static/translations/cart-form/en.json b/src/static/translations/cart-form/en.json
index 9ecb0563..1b86d05c 100644
--- a/src/static/translations/cart-form/en.json
+++ b/src/static/translations/cart-form/en.json
@@ -34,7 +34,7 @@
           "label": "Template sets",
           "helper_text": "",
           "pagination": {
-            "search_button_text": "Search",
+            "search_button_text": "Filters",
             "first": "First",
             "last": "Last",
             "next": "Next",
@@ -119,7 +119,7 @@
           "value": "Value"
         },
         "pagination": {
-          "search_button_text": "Search",
+          "search_button_text": "Filters",
           "first": "First",
           "last": "Last",
           "next": "Next",
@@ -185,7 +185,7 @@
                 "search": "Search",
                 "clear": "Clear",
                 "pagination": {
-                  "search_button_text": "Search",
+                  "search_button_text": "Filters",
                   "first": "First",
                   "last": "Last",
                   "next": "Next",
@@ -360,7 +360,7 @@
             "value": "Value"
           },
           "pagination": {
-            "search_button_text": "Search",
+            "search_button_text": "Filters",
             "first": "First",
             "last": "Last",
             "next": "Next",
@@ -656,7 +656,7 @@
                 "search": "Search",
                 "clear": "Clear",
                 "pagination": {
-                  "search_button_text": "Search",
+                  "search_button_text": "Filters",
                   "first": "First",
                   "last": "Last",
                   "next": "Next",
diff --git a/src/static/translations/customer/en.json b/src/static/translations/customer/en.json
index ed966655..84e277e5 100644
--- a/src/static/translations/customer/en.json
+++ b/src/static/translations/customer/en.json
@@ -942,7 +942,7 @@
               "search": "Search",
               "clear": "Clear",
               "pagination": {
-                "search_button_text": "Search",
+                "search_button_text": "Filters",
                 "first": "First",
                 "last": "Last",
                 "next": "Next",
diff --git a/src/static/translations/experimental-add-to-cart-builder/en.json b/src/static/translations/experimental-add-to-cart-builder/en.json
index fc989035..064364a4 100644
--- a/src/static/translations/experimental-add-to-cart-builder/en.json
+++ b/src/static/translations/experimental-add-to-cart-builder/en.json
@@ -29,7 +29,7 @@
                 "search": "Search",
                 "clear": "Clear",
                 "pagination": {
-                  "search_button_text": "Search",
+                  "search_button_text": "Filters",
                   "first": "First",
                   "last": "Last",
                   "next": "Next",
@@ -388,7 +388,7 @@
                       "search": "Search",
                       "clear": "Clear",
                       "pagination": {
-                        "search_button_text": "Search",
+                        "search_button_text": "Filters",
                         "first": "First",
                         "last": "Last",
                         "next": "Next",
@@ -478,7 +478,7 @@
           "label": "Template sets",
           "helper_text": "",
           "pagination": {
-            "search_button_text": "Search",
+            "search_button_text": "Filters",
             "first": "First",
             "last": "Last",
             "next": "Next",
diff --git a/src/static/translations/gift-card-code-form/en.json b/src/static/translations/gift-card-code-form/en.json
index ec9fc9d0..45eca3c7 100644
--- a/src/static/translations/gift-card-code-form/en.json
+++ b/src/static/translations/gift-card-code-form/en.json
@@ -53,7 +53,7 @@
         "search": "Search",
         "clear": "Clear",
         "pagination": {
-          "search_button_text": "Search",
+          "search_button_text": "Filters",
           "first": "First",
           "last": "Last",
           "next": "Next",
diff --git a/src/static/translations/gift-card-form/en.json b/src/static/translations/gift-card-form/en.json
index fe72fa9b..29efcda3 100644
--- a/src/static/translations/gift-card-form/en.json
+++ b/src/static/translations/gift-card-form/en.json
@@ -420,7 +420,7 @@
               "search": "Search",
               "clear": "Clear",
               "pagination": {
-                "search_button_text": "Search",
+                "search_button_text": "Filters",
                 "first": "First",
                 "last": "Last",
                 "next": "Next",
@@ -570,7 +570,7 @@
     },
     "pagination": {
       "create_button_text": "Add code +",
-      "search_button_text": "Search codes",
+      "search_button_text": "Filters",
       "card": {
         "delete_button_text": "Delete",
         "copy_button_text": "Copy code",
diff --git a/src/static/translations/item-category-form/en.json b/src/static/translations/item-category-form/en.json
index 629d1775..f4d47a66 100644
--- a/src/static/translations/item-category-form/en.json
+++ b/src/static/translations/item-category-form/en.json
@@ -205,7 +205,7 @@
           "label": "Email templates",
           "helper_text": "",
           "pagination": {
-            "search_button_text": "Search",
+            "search_button_text": "Filters",
             "first": "First",
             "last": "Last",
             "next": "Next",
diff --git a/src/static/translations/item-form/en.json b/src/static/translations/item-form/en.json
index f896ba3a..c7cf32de 100644
--- a/src/static/translations/item-form/en.json
+++ b/src/static/translations/item-form/en.json
@@ -55,7 +55,7 @@
           "search": "Search",
           "clear": "Clear",
           "pagination": {
-            "search_button_text": "Search",
+            "search_button_text": "Filters",
             "first": "First",
             "last": "Last",
             "next": "Next",
diff --git a/src/static/translations/payment-method-card/en.json b/src/static/translations/payment-method-card/en.json
index 7eb7e5e6..fc252bda 100644
--- a/src/static/translations/payment-method-card/en.json
+++ b/src/static/translations/payment-method-card/en.json
@@ -31,7 +31,7 @@
             "search": "Search",
             "clear": "Clear",
             "pagination": {
-              "search_button_text": "Search",
+              "search_button_text": "Filters",
               "first": "First",
               "last": "Last",
               "next": "Next",
@@ -157,4 +157,4 @@
     "loading_empty": "No payment method",
     "loading_error": "Unknown error"
   }
-}
+}
\ No newline at end of file
diff --git a/src/static/translations/transaction/en.json b/src/static/translations/transaction/en.json
index 3b5323db..f1425663 100644
--- a/src/static/translations/transaction/en.json
+++ b/src/static/translations/transaction/en.json
@@ -151,7 +151,7 @@
                 "search": "Search",
                 "clear": "Clear",
                 "pagination": {
-                  "search_button_text": "Search",
+                  "search_button_text": "Filters",
                   "first": "First",
                   "last": "Last",
                   "next": "Next",
diff --git a/src/static/translations/update-payment-method-form/en.json b/src/static/translations/update-payment-method-form/en.json
index e6b7a483..59cd0175 100644
--- a/src/static/translations/update-payment-method-form/en.json
+++ b/src/static/translations/update-payment-method-form/en.json
@@ -22,7 +22,7 @@
         "search": "Search",
         "clear": "Clear",
         "pagination": {
-          "search_button_text": "Search",
+          "search_button_text": "Filters",
           "first": "First",
           "last": "Last",
           "next": "Next",

From 7c0a54e0bed234aa33376a3742874b5862dba605 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 14:32:51 -0300
Subject: [PATCH 21/25] internal(date-control): output long iso dates in api
 time zone

---
 .../InternalDateControl.test.ts               |  3 +--
 .../InternalDateControl.ts                    | 22 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.test.ts b/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
index ec1ab404..7148ed2a 100644
--- a/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
+++ b/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
@@ -272,8 +272,7 @@ describe('InternalDateControl', () => {
     field.value = '2020-01-01';
     field.dispatchEvent(new CustomEvent('change'));
 
-    const expectedValue = parseDate('2020-01-01')?.toISOString();
-    expect(control).to.have.property('testValue', expectedValue);
+    expect(control).to.have.property('testValue', '2019-12-31T19:00:00-0800');
   });
 
   it('submits the host nucleon form on Enter', async () => {
diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.ts b/src/elements/internal/InternalDateControl/InternalDateControl.ts
index 9e1117c3..bde3a214 100644
--- a/src/elements/internal/InternalDateControl/InternalDateControl.ts
+++ b/src/elements/internal/InternalDateControl/InternalDateControl.ts
@@ -68,7 +68,8 @@ export class InternalDateControl extends InternalEditableControl {
           if (this.format === 'unix') {
             this._value = Math.floor((parseDate(field.value)?.getTime() ?? 0) / 1000);
           } else if (this.format === 'iso-long') {
-            this._value = parseDate(field.value)?.toISOString() ?? null;
+            const parsedDate = parseDate(field.value);
+            this._value = parsedDate ? this.__toApiDate(parsedDate) : null;
           } else {
             this._value = field.value;
           }
@@ -97,4 +98,23 @@ export class InternalDateControl extends InternalEditableControl {
       },
     };
   }
+
+  private __toApiDate(date: Date): string {
+    return date
+      .toLocaleString('en-US', {
+        timeZone: 'America/Los_Angeles',
+        timeZoneName: 'longOffset',
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+      })
+      .replace(
+        /(\d+)\/(\d+)\/(\d+),\s(\d+):(\d+):(\d+) GMT([+-])(\d+):(\d+)/,
+        '$3-$1-$2T$4:$5:$6$7$8$9'
+      );
+  }
 }

From 4e957d3e8c2bd4ded494d32a26b0b5dc36fffe1e Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Mon, 20 Jan 2025 14:35:26 -0300
Subject: [PATCH 22/25] fix(foxy-admin-subscription-form): revert to iso-long
 format in start/next/end dates

---
 .../AdminSubscriptionForm.test.ts                   |  3 +++
 .../AdminSubscriptionForm/AdminSubscriptionForm.ts  | 13 ++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts
index 4daaad0b..8d238075 100644
--- a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts
+++ b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts
@@ -193,6 +193,7 @@ describe('AdminSubscriptionForm', () => {
 
     expect(control?.localName).to.equal('foxy-internal-date-control');
     expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('format', 'iso-long');
   });
 
   it('renders frequency control inside of the general summary control', async () => {
@@ -232,6 +233,7 @@ describe('AdminSubscriptionForm', () => {
 
     expect(control?.localName).to.equal('foxy-internal-date-control');
     expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('format', 'iso-long');
   });
 
   it('renders date control for end date inside of the general summary control', async () => {
@@ -251,6 +253,7 @@ describe('AdminSubscriptionForm', () => {
 
     expect(control?.localName).to.equal('foxy-internal-date-control');
     expect(control).to.have.attribute('layout', 'summary-item');
+    expect(control).to.have.attribute('format', 'iso-long');
   });
 
   it('renders summary control with overdue information', async () => {
diff --git a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
index a3e5505b..801e5270 100644
--- a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
+++ b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
@@ -53,17 +53,24 @@ export class AdminSubscriptionForm extends Base<Data> {
       </foxy-internal-admin-subscription-form-error>
 
       <foxy-internal-summary-control infer="general">
-        <foxy-internal-date-control layout="summary-item" infer="start-date">
+        <foxy-internal-date-control format="iso-long" layout="summary-item" infer="start-date">
         </foxy-internal-date-control>
+
         <foxy-internal-frequency-control
           layout="summary-item"
           infer="frequency"
           allow-twice-a-month
         >
         </foxy-internal-frequency-control>
-        <foxy-internal-date-control layout="summary-item" infer="next-transaction-date">
+
+        <foxy-internal-date-control
+          format="iso-long"
+          layout="summary-item"
+          infer="next-transaction-date"
+        >
         </foxy-internal-date-control>
-        <foxy-internal-date-control layout="summary-item" infer="end-date">
+
+        <foxy-internal-date-control format="iso-long" layout="summary-item" infer="end-date">
         </foxy-internal-date-control>
       </foxy-internal-summary-control>
 

From 53093669a64366cff463ea1399eac93aebdea3a1 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Wed, 22 Jan 2025 15:00:19 -0300
Subject: [PATCH 23/25] Revert "internal(date-control): output long iso dates
 in api time zone"

This reverts commit 7c0a54e0bed234aa33376a3742874b5862dba605.
---
 .../InternalDateControl.test.ts               |  3 ++-
 .../InternalDateControl.ts                    | 22 +------------------
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.test.ts b/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
index 7148ed2a..ec1ab404 100644
--- a/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
+++ b/src/elements/internal/InternalDateControl/InternalDateControl.test.ts
@@ -272,7 +272,8 @@ describe('InternalDateControl', () => {
     field.value = '2020-01-01';
     field.dispatchEvent(new CustomEvent('change'));
 
-    expect(control).to.have.property('testValue', '2019-12-31T19:00:00-0800');
+    const expectedValue = parseDate('2020-01-01')?.toISOString();
+    expect(control).to.have.property('testValue', expectedValue);
   });
 
   it('submits the host nucleon form on Enter', async () => {
diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.ts b/src/elements/internal/InternalDateControl/InternalDateControl.ts
index bde3a214..9e1117c3 100644
--- a/src/elements/internal/InternalDateControl/InternalDateControl.ts
+++ b/src/elements/internal/InternalDateControl/InternalDateControl.ts
@@ -68,8 +68,7 @@ export class InternalDateControl extends InternalEditableControl {
           if (this.format === 'unix') {
             this._value = Math.floor((parseDate(field.value)?.getTime() ?? 0) / 1000);
           } else if (this.format === 'iso-long') {
-            const parsedDate = parseDate(field.value);
-            this._value = parsedDate ? this.__toApiDate(parsedDate) : null;
+            this._value = parseDate(field.value)?.toISOString() ?? null;
           } else {
             this._value = field.value;
           }
@@ -98,23 +97,4 @@ export class InternalDateControl extends InternalEditableControl {
       },
     };
   }
-
-  private __toApiDate(date: Date): string {
-    return date
-      .toLocaleString('en-US', {
-        timeZone: 'America/Los_Angeles',
-        timeZoneName: 'longOffset',
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-        hour12: false,
-      })
-      .replace(
-        /(\d+)\/(\d+)\/(\d+),\s(\d+):(\d+):(\d+) GMT([+-])(\d+):(\d+)/,
-        '$3-$1-$2T$4:$5:$6$7$8$9'
-      );
-  }
 }

From 82ca662e7bc3cea85e2338878e2213ebff621390 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Wed, 22 Jan 2025 15:04:52 -0300
Subject: [PATCH 24/25] internal(date-control): ensure iso-short value is
 always 10 characters long

---
 .../internal/InternalDateControl/InternalDateControl.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.ts b/src/elements/internal/InternalDateControl/InternalDateControl.ts
index 9e1117c3..d9d39c56 100644
--- a/src/elements/internal/InternalDateControl/InternalDateControl.ts
+++ b/src/elements/internal/InternalDateControl/InternalDateControl.ts
@@ -43,7 +43,7 @@ export class InternalDateControl extends InternalEditableControl {
       } else if (this.format === 'iso-long') {
         value = serializeDate(new Date(this._value as string));
       } else {
-        value = this._value as string;
+        value = ((this._value as string | null) ?? '').substring(0, 10);
       }
     }
 

From 43ce36a723c123f369fa403ac0703a4e85fc8074 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Wed, 22 Jan 2025 15:05:44 -0300
Subject: [PATCH 25/25] Revert "fix(foxy-admin-subscription-form): revert to
 iso-long format in start/next/end dates"

This reverts commit 4e957d3e8c2bd4ded494d32a26b0b5dc36fffe1e.
---
 .../AdminSubscriptionForm.test.ts                   |  3 ---
 .../AdminSubscriptionForm/AdminSubscriptionForm.ts  | 13 +++----------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts
index 8d238075..4daaad0b 100644
--- a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts
+++ b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.test.ts
@@ -193,7 +193,6 @@ describe('AdminSubscriptionForm', () => {
 
     expect(control?.localName).to.equal('foxy-internal-date-control');
     expect(control).to.have.attribute('layout', 'summary-item');
-    expect(control).to.have.attribute('format', 'iso-long');
   });
 
   it('renders frequency control inside of the general summary control', async () => {
@@ -233,7 +232,6 @@ describe('AdminSubscriptionForm', () => {
 
     expect(control?.localName).to.equal('foxy-internal-date-control');
     expect(control).to.have.attribute('layout', 'summary-item');
-    expect(control).to.have.attribute('format', 'iso-long');
   });
 
   it('renders date control for end date inside of the general summary control', async () => {
@@ -253,7 +251,6 @@ describe('AdminSubscriptionForm', () => {
 
     expect(control?.localName).to.equal('foxy-internal-date-control');
     expect(control).to.have.attribute('layout', 'summary-item');
-    expect(control).to.have.attribute('format', 'iso-long');
   });
 
   it('renders summary control with overdue information', async () => {
diff --git a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
index 801e5270..a3e5505b 100644
--- a/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
+++ b/src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts
@@ -53,24 +53,17 @@ export class AdminSubscriptionForm extends Base<Data> {
       </foxy-internal-admin-subscription-form-error>
 
       <foxy-internal-summary-control infer="general">
-        <foxy-internal-date-control format="iso-long" layout="summary-item" infer="start-date">
+        <foxy-internal-date-control layout="summary-item" infer="start-date">
         </foxy-internal-date-control>
-
         <foxy-internal-frequency-control
           layout="summary-item"
           infer="frequency"
           allow-twice-a-month
         >
         </foxy-internal-frequency-control>
-
-        <foxy-internal-date-control
-          format="iso-long"
-          layout="summary-item"
-          infer="next-transaction-date"
-        >
+        <foxy-internal-date-control layout="summary-item" infer="next-transaction-date">
         </foxy-internal-date-control>
-
-        <foxy-internal-date-control format="iso-long" layout="summary-item" infer="end-date">
+        <foxy-internal-date-control layout="summary-item" infer="end-date">
         </foxy-internal-date-control>
       </foxy-internal-summary-control>