diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index d8dd5cffc5..7064a97096 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -141,6 +141,16 @@ const borderless: InputType = {
   },
 };
 
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['m', 's'],
+  table: {
+    category: 'Form field',
+  },
+};
+
 const floatingLabel: InputType = {
   control: {
     type: 'boolean',
@@ -190,6 +200,7 @@ const defaultArgTypes: ArgTypes = {
   // Form field args
   negative,
   borderless,
+  size,
   floatingLabel,
 
   // Input args
@@ -218,6 +229,7 @@ const defaultArgs: Args = {
   // Form field args
   negative: false,
   borderless: false,
+  size: size.options![0],
   floatingLabel: false,
 
   // Input args
@@ -304,6 +316,7 @@ const Template = (args: Args): TemplateResult => html`
     <sbb-form-field
       ?negative=${args.negative}
       ?borderless=${args.borderless}
+      size=${args.size}
       ?floating-label=${args.floatingLabel}
       data-testid="form-field"
     >
@@ -337,6 +350,7 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html`
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
+      size=${args.size}
       data-testid="form-field"
     >
       <label>Label</label>
@@ -386,6 +400,13 @@ export const Negative: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const BasicSizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
 export const Disabled: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -426,6 +447,27 @@ export const BorderlessNegative: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const BorderlessSizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, borderless: true, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const FloatingLabel: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, floatingLabel: true },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const FloatingLabelSizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, floatingLabel: true, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
 export const BasicOpenAbove: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -463,6 +505,13 @@ export const WithOptionGroup: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const WithOptionGroupSizeS: StoryObj = {
+  render: OptionGroupTemplate,
+  argTypes: withGroupsArgTypes,
+  args: { ...withGroupsDefaultArgs, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
 export const WithOptionGroupNegative: StoryObj = {
   render: OptionGroupTemplate,
   argTypes: withGroupsArgTypes,
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts
index 284c297399..0d1fd0966a 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts
@@ -1,6 +1,5 @@
 import { sendKeys } from '@web/test-runner-commands';
 import { html, nothing, type TemplateResult } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { VisualDiffSetupBuilder } from '../../core/testing/private.js';
@@ -23,6 +22,7 @@ describe('sbb-autocomplete-grid', () => {
     preserveIconSpace: true,
     disableOption: false,
     borderless: false,
+    size: 'm',
     withGroup: false,
     disableGroup: false,
     withMixedOptionAndGroup: false,
@@ -46,48 +46,61 @@ describe('sbb-autocomplete-grid', () => {
   `;
 
   const createOptionBlockOne = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
-    ${repeat(
-      new Array(3),
-      (_, i) => html`
-        <sbb-autocomplete-grid-row>
-          <sbb-autocomplete-grid-option
-            value="Option ${i}"
-            icon-name=${withIcon && i !== 2 ? 'clock-small' : nothing}
-            ?disabled=${i === 1 && disableOption}
-          >
-            ${withIcon && i === 2
-              ? html`<sbb-icon slot="icon" name="clock-small"></sbb-icon>`
-              : nothing}
-            Option ${i}
-          </sbb-autocomplete-grid-option>
-          <sbb-autocomplete-grid-cell>
-            <sbb-autocomplete-grid-button
-              icon-name="pen-small"
-              ?disabled=${i === 1 && disableOption}
-            ></sbb-autocomplete-grid-button>
-          </sbb-autocomplete-grid-cell>
-        </sbb-autocomplete-grid-row>
-      `,
-    )}
+    <sbb-autocomplete-grid-row>
+      <sbb-autocomplete-grid-option
+        value="Option 1"
+        icon-name=${withIcon ? 'clock-small' : nothing}
+      >
+        Option 1
+      </sbb-autocomplete-grid-option>
+      <sbb-autocomplete-grid-cell>
+        <sbb-autocomplete-grid-button icon-name="pen-small"></sbb-autocomplete-grid-button>
+      </sbb-autocomplete-grid-cell>
+    </sbb-autocomplete-grid-row>
+    <sbb-autocomplete-grid-row>
+      <sbb-autocomplete-grid-option
+        value="Option 2"
+        icon-name=${withIcon ? 'clock-small' : nothing}
+        ?disabled=${disableOption}
+      >
+        Option 2
+      </sbb-autocomplete-grid-option>
+      <sbb-autocomplete-grid-cell>
+        <sbb-autocomplete-grid-button
+          icon-name="pen-small"
+          ?disabled=${disableOption}
+        ></sbb-autocomplete-grid-button>
+      </sbb-autocomplete-grid-cell>
+    </sbb-autocomplete-grid-row>
+    <sbb-autocomplete-grid-row>
+      <sbb-autocomplete-grid-option value="Option 3">
+        ${withIcon ? html`<sbb-icon slot="icon" name="clock-small"></sbb-icon>` : nothing} Option 3
+      </sbb-autocomplete-grid-option>
+      <sbb-autocomplete-grid-cell>
+        <sbb-autocomplete-grid-button icon-name="pen-small"></sbb-autocomplete-grid-button>
+      </sbb-autocomplete-grid-cell>
+    </sbb-autocomplete-grid-row>
   `;
 
   const createOptionBlockTwo = (): TemplateResult => html`
-    ${repeat(
-      new Array(2),
-      (_, i) => html`
-        <sbb-autocomplete-grid-row>
-          <sbb-autocomplete-grid-option value="Option ${i + 3}"
-            >Option ${i + 3}</sbb-autocomplete-grid-option
-          >
-          <sbb-autocomplete-grid-cell>
-            <sbb-autocomplete-grid-button icon-name="pen-small"></sbb-autocomplete-grid-button>
-          </sbb-autocomplete-grid-cell>
-          <sbb-autocomplete-grid-cell>
-            <sbb-autocomplete-grid-button icon-name="trash-small"></sbb-autocomplete-grid-button>
-          </sbb-autocomplete-grid-cell>
-        </sbb-autocomplete-grid-row>
-      `,
-    )}
+    <sbb-autocomplete-grid-row>
+      <sbb-autocomplete-grid-option value="Option 4">Option 4</sbb-autocomplete-grid-option>
+      <sbb-autocomplete-grid-cell>
+        <sbb-autocomplete-grid-button icon-name="pen-small"></sbb-autocomplete-grid-button>
+      </sbb-autocomplete-grid-cell>
+      <sbb-autocomplete-grid-cell>
+        <sbb-autocomplete-grid-button icon-name="trash-small"></sbb-autocomplete-grid-button>
+      </sbb-autocomplete-grid-cell>
+    </sbb-autocomplete-grid-row>
+    <sbb-autocomplete-grid-row>
+      <sbb-autocomplete-grid-option value="Option 5">Option 5</sbb-autocomplete-grid-option>
+      <sbb-autocomplete-grid-cell>
+        <sbb-autocomplete-grid-button icon-name="pen-small"></sbb-autocomplete-grid-button>
+      </sbb-autocomplete-grid-cell>
+      <sbb-autocomplete-grid-cell>
+        <sbb-autocomplete-grid-button icon-name="trash-small"></sbb-autocomplete-grid-button>
+      </sbb-autocomplete-grid-cell>
+    </sbb-autocomplete-grid-row>
   `;
 
   const createOptions = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
@@ -112,7 +125,7 @@ describe('sbb-autocomplete-grid', () => {
     disableOption: boolean,
     disableGroup: boolean,
   ): TemplateResult => html`
-    <sbb-option value="Option 1">
+    <sbb-option value="Option 1" selected>
       <sbb-icon slot="icon" name="clock-small" style="color: var(--sbb-color-sky)"></sbb-icon>
       Option Value
     </sbb-option>
@@ -120,7 +133,7 @@ describe('sbb-autocomplete-grid', () => {
   `;
 
   const template = (args: typeof defaultArgs): TemplateResult => html`
-    <sbb-form-field ?negative=${args.negative} ?borderless=${args.borderless}>
+    <sbb-form-field ?negative=${args.negative} ?borderless=${args.borderless} size=${args.size}>
       <label>Label</label>
       <input placeholder="Placeholder" ?disabled=${args.disabled} ?readonly=${args.readonly} />
       <sbb-autocomplete-grid ?preserve-icon-space=${args.preserveIconSpace}>
@@ -147,156 +160,177 @@ describe('sbb-autocomplete-grid', () => {
 
   describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => {
     for (const negative of [false, true]) {
-      for (const borderless of [false, true]) {
+      describe(`negative=${negative}`, () => {
         for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
-          it(
-            `state=above negative=${negative} borderless=${borderless} ${visualDiffState.name}`,
-            visualDiffState.with(async (setup) => {
-              await setup.withFixture(
-                html`
-                  <div style="position: absolute; inset-block-end: 2rem;">
-                    ${template({ ...defaultArgs, negative, borderless })}
-                  </div>
-                `,
-                {
-                  minHeight: '500px',
-                  backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-                },
+          describe(`state=above-${visualDiffState.name}`, () => {
+            for (const borderless of [false, true]) {
+              it(
+                `borderless=${borderless}`,
+                visualDiffState.with(async (setup) => {
+                  await setup.withFixture(
+                    html`
+                      <div style="position: absolute; inset-block-end: 2rem;">
+                        ${template({ ...defaultArgs, negative, borderless })}
+                      </div>
+                    `,
+                    {
+                      minHeight: '500px',
+                      backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+                    },
+                  );
+                  setup.withPostSetupAction(() => openAutocomplete(setup));
+                }),
               );
-              setup.withPostSetupAction(() => openAutocomplete(setup));
-            }),
-          );
+            }
+          });
         }
-      }
+      });
     }
   });
 
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
     for (const negative of [false, true]) {
-      const style = {
-        minHeight: '400px',
-        backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-      };
+      describe(`negative=${negative}`, () => {
+        const style = {
+          minHeight: '400px',
+          backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+        };
+
+        for (const size of ['m', 's']) {
+          for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+            it(
+              `state=${visualDiffState.name} size=${size}`,
+              visualDiffState.with(async (setup) => {
+                await setup.withFixture(template({ ...defaultArgs, negative, size }), style);
+              }),
+            );
+          }
+        }
 
-      for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
         it(
-          `state=${visualDiffState.name} negative=${negative}`,
-          visualDiffState.with(async (setup) => {
-            await setup.withFixture(template({ ...defaultArgs, negative }), style);
+          `state=required`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style);
           }),
         );
-      }
-
-      it(
-        `state=required negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style);
-        }),
-      );
-
-      it(
-        `state=disabled negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style);
-        }),
-      );
 
-      it(
-        `state=readonly negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style);
-        }),
-      );
-
-      it(
-        `state=borderless negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style);
-        }),
-      );
-
-      it(
-        `state=noIcon negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style);
-          setup.withPostSetupAction(() => openAutocomplete(setup));
-        }),
-      );
-
-      for (const withIcon of [false, true]) {
         it(
-          `state=noSpace negative=${negative} withIcon=${withIcon}`,
+          `state=disabled`,
           visualDiffDefault.with(async (setup) => {
-            await setup.withFixture(
-              template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }),
-              style,
-            );
-            setup.withPostSetupAction(() => openAutocomplete(setup));
+            await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style);
           }),
         );
-      }
 
-      for (const withGroup of [false, true]) {
-        const wrapperStyle = {
-          minHeight: withGroup ? '800px' : '400px',
-          backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-        };
+        it(
+          `state=readonly`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style);
+          }),
+        );
 
         it(
-          `negative=${negative} withGroup=${withGroup}`,
+          `state=borderless`,
           visualDiffDefault.with(async (setup) => {
             await setup.withFixture(
-              template({ ...defaultArgs, negative, withGroup }),
-              wrapperStyle,
+              template({ ...defaultArgs, negative, borderless: true }),
+              style,
             );
-            setup.withPostSetupAction(() => openAutocomplete(setup));
           }),
         );
 
         it(
-          `negative=${negative} withGroup=${withGroup} disableOption=true`,
+          `state=noIcon`,
           visualDiffDefault.with(async (setup) => {
-            await setup.withFixture(
-              template({ ...defaultArgs, negative, withGroup, disableOption: true }),
-              wrapperStyle,
-            );
+            await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style);
             setup.withPostSetupAction(() => openAutocomplete(setup));
           }),
         );
-      }
 
-      it(
-        `negative=${negative} withGroup=true disableGroup=true`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            template({
-              ...defaultArgs,
-              negative,
-              disableGroup: true,
-              withGroup: true,
+        for (const withIcon of [false, true]) {
+          it(
+            `state=noSpace withIcon=${withIcon}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }),
+                style,
+              );
+              setup.withPostSetupAction(() => openAutocomplete(setup));
+            }),
+          );
+        }
+
+        for (const withGroup of [false, true]) {
+          const wrapperStyle = {
+            minHeight: withGroup ? '800px' : '400px',
+            backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+          };
+
+          it(
+            `withGroup=${withGroup}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                template({ ...defaultArgs, negative, withGroup }),
+                wrapperStyle,
+              );
+              setup.withPostSetupAction(() => openAutocomplete(setup));
+            }),
+          );
+
+          it(
+            `withGroup=${withGroup} disableOption=true`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                template({ ...defaultArgs, negative, withGroup, disableOption: true }),
+                wrapperStyle,
+              );
+              setup.withPostSetupAction(() => openAutocomplete(setup));
             }),
-            {
-              minHeight: '800px',
-              backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-            },
           );
-          setup.withPostSetupAction(() => openAutocomplete(setup));
-        }),
-      );
+        }
 
-      it(
-        `negative=${negative} withGroup=true withMixedOptionAndGroup=true`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            template({ ...defaultArgs, negative, withGroup: true, withMixedOptionAndGroup: true }),
-            {
-              minHeight: '800px',
-              backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-            },
+        describe('withGroup=true', () => {
+          it(
+            `disableGroup=true`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                template({
+                  ...defaultArgs,
+                  negative,
+                  disableGroup: true,
+                  withGroup: true,
+                }),
+                {
+                  minHeight: '800px',
+                  backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+                },
+              );
+              setup.withPostSetupAction(() => openAutocomplete(setup));
+            }),
           );
-          setup.withPostSetupAction(() => openAutocomplete(setup));
-        }),
-      );
+
+          for (const size of ['m', 's']) {
+            it(
+              `size=${size} withMixedOptionAndGroup=true`,
+              visualDiffDefault.with(async (setup) => {
+                await setup.withFixture(
+                  template({
+                    ...defaultArgs,
+                    negative,
+                    size,
+                    withGroup: true,
+                    withMixedOptionAndGroup: true,
+                  }),
+                  {
+                    minHeight: '800px',
+                    backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+                  },
+                );
+                setup.withPostSetupAction(() => openAutocomplete(setup));
+              }),
+            );
+          }
+        });
+      });
     }
   });
 });
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/readme.md b/src/elements/autocomplete-grid/autocomplete-grid/readme.md
index a529bcefe4..09af61a121 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid/readme.md
@@ -107,6 +107,18 @@ The displayed `sbb-autocomplete-grid-option` can be collected into groups using
 </sbb-form-field>
 ```
 
+### Size
+
+The component has no `size` property but, when slotted in a `sbb-form-field`, it adapts to the parent `size`.
+
+```html
+<sbb-form-field size="s">
+  <label>Label</label>
+  <input placeholder="Trigger element" />
+  <sbb-autocomplete-grid> ... </sbb-autocomplete-grid>
+</sbb-form-field>
+```
+
 ## Events
 
 The `sbb-autocomplete-grid-option` emits the `optionSelected` event when selected via user interaction.
diff --git a/src/elements/autocomplete/autocomplete.stories.ts b/src/elements/autocomplete/autocomplete.stories.ts
index 0c862b80a1..6132ac6de4 100644
--- a/src/elements/autocomplete/autocomplete.stories.ts
+++ b/src/elements/autocomplete/autocomplete.stories.ts
@@ -88,6 +88,16 @@ const borderless: InputType = {
   },
 };
 
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['m', 's'],
+  table: {
+    category: 'Form field',
+  },
+};
+
 const floatingLabel: InputType = {
   control: {
     type: 'boolean',
@@ -119,6 +129,7 @@ const defaultArgTypes: ArgTypes = {
 
   // Form field args
   borderless,
+  size,
   floatingLabel,
 };
 
@@ -142,6 +153,7 @@ const defaultArgs: Args = {
 
   // Form field args
   borderless: false,
+  size: size.options![0],
   floatingLabel: false,
 };
 
@@ -238,6 +250,7 @@ const Template = (args: Args): TemplateResult => html`
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
+      size=${args.size}
       data-testid="form-field"
     >
       <label>Label</label>
@@ -262,6 +275,7 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html`
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
+      size=${args.size}
       data-testid="form-field"
     >
       <label>Label</label>
@@ -289,6 +303,7 @@ const MixedTemplate = (args: Args): TemplateResult => html`
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
+      size=${args.size}
       data-testid="form-field"
     >
       <label>Label</label>
@@ -329,6 +344,7 @@ const RequiredTemplate = (args: Args): TemplateResult => {
         ?negative=${args.negative}
         ?borderless=${args.borderless}
         ?floating-label=${args.floatingLabel}
+        size=${args.size}
         data-testid="form-field"
         id="sbb-form-field"
       >
@@ -378,6 +394,13 @@ export const BasicNegative: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const BasicSizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
 export const BasicOpenAbove: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -400,6 +423,13 @@ export const BorderlessNegative: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const BorderlessSizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, borderless: true, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
 export const FloatingLabel: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -407,6 +437,13 @@ export const FloatingLabel: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const FloatingLabelSizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, floatingLabel: true, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
 export const WithError: StoryObj = {
   render: RequiredTemplate,
   argTypes: withGroupsArgTypes,
@@ -481,6 +518,13 @@ export const MixedSingleOptionWithOptionGroupNegative: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const MixedSingleOptionWithOptionGroupSizeS: StoryObj = {
+  render: MixedTemplate,
+  argTypes: withGroupsArgTypes,
+  args: { ...withGroupsDefaultArgs, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
 const meta: Meta = {
   decorators: [withActions as Decorator],
   parameters: {
diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts
index ec4d9415b6..2a52cdaad9 100644
--- a/src/elements/autocomplete/autocomplete.visual.spec.ts
+++ b/src/elements/autocomplete/autocomplete.visual.spec.ts
@@ -1,6 +1,5 @@
 import { sendKeys } from '@web/test-runner-commands';
 import { html, nothing, type TemplateResult } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { VisualDiffSetupBuilder } from '../core/testing/private.js';
@@ -21,6 +20,7 @@ describe('sbb-autocomplete', () => {
     preserveIconSpace: true,
     disableOption: false,
     borderless: false,
+    size: 'm',
     withGroup: false,
     disableGroup: false,
     withMixedOptionAndGroup: false,
@@ -44,21 +44,19 @@ describe('sbb-autocomplete', () => {
   `;
 
   const createOptionBlockOne = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
-    ${repeat(
-      new Array(3),
-      (_, i) => html`
-        <sbb-option
-          value="Option ${i}"
-          icon-name=${withIcon && i !== 2 ? 'clock-small' : nothing}
-          ?disabled=${i === 1 && disableOption}
-        >
-          ${withIcon && i === 2
-            ? html`<sbb-icon slot="icon" name="clock-small"></sbb-icon>`
-            : nothing}
-          Option ${i}
-        </sbb-option>
-      `,
-    )}
+    <sbb-option value="Option 1" icon-name=${withIcon ? 'clock-small' : nothing}>
+      Option 1
+    </sbb-option>
+    <sbb-option
+      value="Option 2"
+      icon-name=${withIcon ? 'clock-small' : nothing}
+      ?disabled=${disableOption}
+    >
+      Option 2
+    </sbb-option>
+    <sbb-option value="Option 3">
+      ${withIcon ? html`<sbb-icon slot="icon" name="clock-small"></sbb-icon>` : nothing} Option 3
+    </sbb-option>
   `;
 
   const createOptionBlockTwo = (): TemplateResult => html`
@@ -86,7 +84,7 @@ describe('sbb-autocomplete', () => {
     disableOption: boolean,
     disableGroup: boolean,
   ): TemplateResult => html`
-    <sbb-option value="Option 1">
+    <sbb-option value="Option 1" selected>
       <sbb-icon slot="icon" name="clock-small" style="color: var(--sbb-color-sky)"></sbb-icon>
       Option Value
     </sbb-option>
@@ -94,7 +92,7 @@ describe('sbb-autocomplete', () => {
   `;
 
   const template = (args: typeof defaultArgs): TemplateResult => html`
-    <sbb-form-field ?negative=${args.negative} ?borderless=${args.borderless}>
+    <sbb-form-field ?negative=${args.negative} ?borderless=${args.borderless} size=${args.size}>
       <label>Label</label>
       <input placeholder="Placeholder" ?disabled=${args.disabled} ?readonly=${args.readonly} />
       <sbb-autocomplete ?preserve-icon-space=${args.preserveIconSpace}>
@@ -121,156 +119,177 @@ describe('sbb-autocomplete', () => {
 
   describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => {
     for (const negative of [false, true]) {
-      for (const borderless of [false, true]) {
+      describe(`negative=${negative}`, () => {
         for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
-          it(
-            `state=above negative=${negative} borderless=${borderless} ${visualDiffState.name}`,
-            visualDiffState.with(async (setup) => {
-              await setup.withFixture(
-                html`
-                  <div style="position: absolute; inset-block-end: 2rem;">
-                    ${template({ ...defaultArgs, negative, borderless })}
-                  </div>
-                `,
-                {
-                  minHeight: '500px',
-                  backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-                },
+          describe(`state=above-${visualDiffState.name}`, () => {
+            for (const borderless of [false, true]) {
+              it(
+                `borderless=${borderless}`,
+                visualDiffState.with(async (setup) => {
+                  await setup.withFixture(
+                    html`
+                      <div style="position: absolute; inset-block-end: 2rem;">
+                        ${template({ ...defaultArgs, negative, borderless })}
+                      </div>
+                    `,
+                    {
+                      minHeight: '500px',
+                      backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+                    },
+                  );
+                  setup.withPostSetupAction(() => openAutocomplete(setup));
+                }),
               );
-              setup.withPostSetupAction(() => openAutocomplete(setup));
-            }),
-          );
+            }
+          });
         }
-      }
+      });
     }
   });
 
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
     for (const negative of [false, true]) {
-      const style = {
-        minHeight: '400px',
-        backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-      };
+      describe(`negative=${negative}`, () => {
+        const style = {
+          minHeight: '400px',
+          backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+        };
+
+        for (const size of ['m', 's']) {
+          for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+            it(
+              `state=${visualDiffState.name} size=${size}`,
+              visualDiffState.with(async (setup) => {
+                await setup.withFixture(template({ ...defaultArgs, negative, size }), style);
+              }),
+            );
+          }
+        }
 
-      for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
         it(
-          `state=${visualDiffState.name} negative=${negative}`,
-          visualDiffState.with(async (setup) => {
-            await setup.withFixture(template({ ...defaultArgs, negative }), style);
+          `state=required`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style);
           }),
         );
-      }
-
-      it(
-        `state=required negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style);
-        }),
-      );
-
-      it(
-        `state=disabled negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style);
-        }),
-      );
-
-      it(
-        `state=readonly negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style);
-        }),
-      );
-
-      it(
-        `state=borderless negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style);
-        }),
-      );
 
-      it(
-        `state=noIcon negative=${negative}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style);
-          setup.withPostSetupAction(() => openAutocomplete(setup));
-        }),
-      );
-
-      for (const withIcon of [false, true]) {
         it(
-          `state=noSpace negative=${negative} withIcon=${withIcon}`,
+          `state=disabled`,
           visualDiffDefault.with(async (setup) => {
-            await setup.withFixture(
-              template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }),
-              style,
-            );
-            setup.withPostSetupAction(() => openAutocomplete(setup));
+            await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style);
           }),
         );
-      }
 
-      for (const withGroup of [false, true]) {
-        const wrapperStyle = {
-          minHeight: withGroup ? '800px' : '400px',
-          backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-        };
+        it(
+          `state=readonly`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style);
+          }),
+        );
 
         it(
-          `negative=${negative} withGroup=${withGroup}`,
+          `state=borderless`,
           visualDiffDefault.with(async (setup) => {
             await setup.withFixture(
-              template({ ...defaultArgs, negative, withGroup }),
-              wrapperStyle,
+              template({ ...defaultArgs, negative, borderless: true }),
+              style,
             );
-            setup.withPostSetupAction(() => openAutocomplete(setup));
           }),
         );
 
         it(
-          `negative=${negative} withGroup=${withGroup} disableOption=true`,
+          `state=noIcon`,
           visualDiffDefault.with(async (setup) => {
-            await setup.withFixture(
-              template({ ...defaultArgs, negative, withGroup, disableOption: true }),
-              wrapperStyle,
-            );
+            await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style);
             setup.withPostSetupAction(() => openAutocomplete(setup));
           }),
         );
-      }
 
-      it(
-        `negative=${negative} withGroup=true disableGroup=true`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            template({
-              ...defaultArgs,
-              negative,
-              disableGroup: true,
-              withGroup: true,
+        for (const withIcon of [false, true]) {
+          it(
+            `state=noSpace withIcon=${withIcon}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }),
+                style,
+              );
+              setup.withPostSetupAction(() => openAutocomplete(setup));
+            }),
+          );
+        }
+
+        for (const withGroup of [false, true]) {
+          const wrapperStyle = {
+            minHeight: withGroup ? '800px' : '400px',
+            backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+          };
+
+          it(
+            `withGroup=${withGroup}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                template({ ...defaultArgs, negative, withGroup }),
+                wrapperStyle,
+              );
+              setup.withPostSetupAction(() => openAutocomplete(setup));
+            }),
+          );
+
+          it(
+            `withGroup=${withGroup} disableOption=true`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                template({ ...defaultArgs, negative, withGroup, disableOption: true }),
+                wrapperStyle,
+              );
+              setup.withPostSetupAction(() => openAutocomplete(setup));
             }),
-            {
-              minHeight: '800px',
-              backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-            },
           );
-          setup.withPostSetupAction(() => openAutocomplete(setup));
-        }),
-      );
+        }
 
-      it(
-        `negative=${negative} withGroup=true withMixedOptionAndGroup=true`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            template({ ...defaultArgs, negative, withGroup: true, withMixedOptionAndGroup: true }),
-            {
-              minHeight: '800px',
-              backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
-            },
+        describe('withGroup=true ', () => {
+          it(
+            `disableGroup=true`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                template({
+                  ...defaultArgs,
+                  negative,
+                  disableGroup: true,
+                  withGroup: true,
+                }),
+                {
+                  minHeight: '800px',
+                  backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+                },
+              );
+              setup.withPostSetupAction(() => openAutocomplete(setup));
+            }),
           );
-          setup.withPostSetupAction(() => openAutocomplete(setup));
-        }),
-      );
+
+          for (const size of ['m', 's']) {
+            it(
+              `size=${size} withMixedOptionAndGroup=true`,
+              visualDiffDefault.with(async (setup) => {
+                await setup.withFixture(
+                  template({
+                    ...defaultArgs,
+                    negative,
+                    size,
+                    withGroup: true,
+                    withMixedOptionAndGroup: true,
+                  }),
+                  {
+                    minHeight: '800px',
+                    backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+                  },
+                );
+                setup.withPostSetupAction(() => openAutocomplete(setup));
+              }),
+            );
+          }
+        });
+      });
     }
   });
 });
diff --git a/src/elements/autocomplete/readme.md b/src/elements/autocomplete/readme.md
index c2e8661ce0..4b1a1efa4c 100644
--- a/src/elements/autocomplete/readme.md
+++ b/src/elements/autocomplete/readme.md
@@ -68,6 +68,18 @@ The displayed `sbb-option` can be collected into groups using `sbb-optgroup` ele
 </sbb-form-field>
 ```
 
+### Size
+
+The component has no `size` property but, when slotted in a `sbb-form-field`, it adapts to the parent `size`.
+
+```html
+<sbb-form-field size="s">
+  <label>Label</label>
+  <input placeholder="Trigger element" />
+  <sbb-autocomplete> ... </sbb-autocomplete>
+</sbb-form-field>
+```
+
 ## Events
 
 The `sbb-option` emits the `optionSelected` event when selected via user interaction.
diff --git a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts
index 3f04b6a05d..aeafbd68e4 100644
--- a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts
+++ b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts
@@ -9,7 +9,7 @@ import style from './test-title-chip-list.scss?lit&inline';
  * - simple => "key=value" patterns
  * - complex => "key=( key=value-... )
  */
-const paramsRegex = /(?<complex>[a-zA-Z]*=\(.*\))|(?<simple>[a-zA-Z]+=[a-zA-Z]*)/gm;
+const paramsRegex = /(?<complex>[a-zA-Z]*=\(.*\))|(?<simple>[a-zA-Z]+=[a-zA-Z0-9-]*)/gm;
 
 type DescribeEachItem = {
   key: string;