diff --git a/playwright/cps-ui-kit/components/cps-autocomplete.spec.ts b/playwright/cps-ui-kit/components/cps-autocomplete.spec.ts
index 16cefb02c..ce2498f19 100644
--- a/playwright/cps-ui-kit/components/cps-autocomplete.spec.ts
+++ b/playwright/cps-ui-kit/components/cps-autocomplete.spec.ts
@@ -1,48 +1,459 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Page, type Locator } from '@playwright/test';
 
-test.describe('cps-autocomplete page', () => {
-  test.describe('required single autocomplete with a tooltip', () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/autocomplete');
+/**
+ * The async demo examples wait on a 500ms input debounce plus a 1000ms
+ * fake network delay (`_getOptionsFromServer` in
+ * autocomplete-page.component.ts) - 1500ms total. This is a 4x margin
+ * over that for CI/slower-browser headroom.
+ */
+const ASYNC_FETCH_TIMEOUT_MS = 6000;
+
+/**
+ * The async-validation demo example simulates a 3000ms validation delay
+ * (see onOptionSelected's delay(3000) in autocomplete-page.component.ts).
+ * This is a 2x margin over that for CI/slower-browser headroom.
+ */
+const ASYNC_VALIDATION_TIMEOUT_MS = 6000;
+
+function example(page: Page, testId: string): Locator {
+  return page.getByTestId(testId);
+}
+
+/** Opens the dropdown and clicks an option by its visible name. */
+async function selectOption(
+  wrapper: Locator,
+  page: Page,
+  optionName: string
+): Promise<void> {
+  await wrapper.click();
+  await page.getByRole('option', { name: optionName }).click();
+}
+
+/**
+ * Fills an autocomplete's input and waits for a specific fetched option
+ * to appear. Playwright's bundled WebKit build can occasionally close
+ * the dropdown itself right as async-loaded options render - a quirk
+ * confirmed specific to that test-runner engine (manually verified not
+ * to reproduce in real Safari, and never observed in Chromium). On
+ * other browsers this is a plain wait, so a real regression there still
+ * fails fast and clearly instead of being masked by the WebKit-only
+ * reopen-and-retry fallback below.
+ */
+async function fillAndWaitForOption(
+  wrapper: Locator,
+  page: Page,
+  browserName: string,
+  query: string,
+  optionName: string
+): Promise<void> {
+  await wrapper.getByTestId('cps-autocomplete-input').fill(query);
+
+  const option = page.getByRole('option', { name: optionName });
+
+  if (browserName !== 'webkit') {
+    await option.waitFor({
+      state: 'visible',
+      timeout: ASYNC_FETCH_TIMEOUT_MS
     });
+    return;
+  }
+
+  const listbox = page.getByTestId('cps-autocomplete-listbox');
+
+  await Promise.race([
+    option.waitFor({ state: 'visible', timeout: ASYNC_FETCH_TIMEOUT_MS }),
+    listbox.waitFor({ state: 'hidden', timeout: ASYNC_FETCH_TIMEOUT_MS })
+  ]).catch(() => {});
+
+  if (!(await option.isVisible())) {
+    await wrapper.click();
+    await option.waitFor({ state: 'visible', timeout: 2000 });
+  }
+}
+
+test.describe('cps-autocomplete', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/autocomplete');
+  });
+
+  test.describe('Required single-select with tooltip', () => {
+    test('selects and re-selects an option', async ({ page }) => {
+      const wrapper = example(page, 'required-autocomplete');
+      const input = wrapper.getByTestId('cps-autocomplete-input');
+
+      await expect(input).toHaveAttribute('role', 'combobox');
+      await expect(input).toHaveAttribute('aria-expanded', 'false');
+
+      await wrapper.click();
+      await expect(input).toHaveAttribute('aria-expanded', 'true');
+      await expect(
+        page.getByTestId('cps-autocomplete-listbox')
+      ).toHaveAttribute('role', 'listbox');
+      await expect(
+        page.getByTestId('cps-autocomplete-option').first()
+      ).toHaveAttribute('role', 'option');
 
-    test('should select items properly', async ({ page }) => {
-      await page.getByTestId('required-autocomplete').click();
       await page.getByRole('option', { name: 'Rome' }).click();
       await expect(
-        page
-          .getByTestId('required-autocomplete')
-          .locator('.single-item-selection')
+        wrapper.getByTestId('cps-autocomplete-selected-value')
       ).toHaveText('Rome');
 
-      await page.getByTestId('required-autocomplete').click();
-      await page.getByRole('option', { name: 'Prague' }).click();
+      await selectOption(wrapper, page, 'Prague');
       await expect(
-        page
-          .getByTestId('required-autocomplete')
-          .locator('.single-item-selection')
+        wrapper.getByTestId('cps-autocomplete-selected-value')
       ).toHaveText('Prague');
     });
 
-    test('should clear items', async ({ page }) => {
+    test('clearing shows the required error and marks the input invalid', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-autocomplete');
+
+      await selectOption(wrapper, page, 'Rome');
+
+      await wrapper.getByTestId('cps-autocomplete-clear-icon').click();
+      await page.locator('body').click({ position: { x: 0, y: 0 } });
+
+      await expect(wrapper.getByTestId('cps-autocomplete-error')).toHaveText(
+        'Field is required'
+      );
       await expect(
-        page
-          .getByTestId('required-autocomplete')
-          .locator('.single-item-selection')
-      ).toHaveText('Prague');
+        wrapper.getByTestId('cps-autocomplete-selected-value')
+      ).toHaveCount(0);
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-input')
+      ).toHaveAttribute('aria-invalid', 'true');
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-input')
+      ).toHaveAttribute('aria-required', 'true');
+    });
+  });
+
+  test.describe('Async single-select', () => {
+    test('shows a loading state, then populates fetched options', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'single-async-autocomplete');
+
+      await wrapper.getByTestId('cps-autocomplete-input').fill('lon');
+      await expect(page.getByTestId('cps-autocomplete-loading')).toHaveText(
+        'Loading cities...'
+      );
+      await expect(page.getByRole('option', { name: 'London' })).toBeVisible({
+        timeout: ASYNC_FETCH_TIMEOUT_MS
+      });
+    });
+
+    test('shows the empty message when no results match', async ({ page }) => {
+      const wrapper = example(page, 'single-async-autocomplete');
+
+      await wrapper.getByTestId('cps-autocomplete-input').fill('zzz-none');
+      await expect(page.getByTestId('cps-autocomplete-empty')).toHaveText(
+        'No cities found',
+        { timeout: ASYNC_FETCH_TIMEOUT_MS }
+      );
+    });
+  });
 
-      await page
-        .getByTestId('required-autocomplete')
-        .locator('.cps-autocomplete-box-clear-icon')
+  test.describe('Async multi-select', () => {
+    test('selects multiple options as chips and removes one', async ({
+      page,
+      browserName
+    }) => {
+      const wrapper = example(page, 'multiple-async-autocomplete');
+
+      await fillAndWaitForOption(wrapper, page, browserName, 'o', 'London');
+      await page.getByRole('option', { name: 'London' }).click();
+      await page.getByRole('option', { name: 'Oslo' }).click();
+      await expect(wrapper.locator('cps-chip')).toHaveCount(2);
+
+      await wrapper
+        .locator('cps-chip')
+        .filter({ hasText: 'London' })
+        .getByRole('button')
         .click();
+      await expect(wrapper.locator('cps-chip')).toHaveCount(1);
+      await expect(wrapper.locator('cps-chip')).toContainText('Oslo');
+    });
 
-      await page.locator('body').click({ position: { x: 0, y: 0 } });
-      await expect(page.getByText('Field is required')).toBeVisible();
+    test('select all toggles every currently fetched option', async ({
+      page,
+      browserName
+    }) => {
+      const wrapper = example(page, 'multiple-async-autocomplete');
+
+      await fillAndWaitForOption(wrapper, page, browserName, 'o', 'London');
+      const selectAll = page.getByTestId('cps-autocomplete-select-all');
+      await expect(selectAll).toBeVisible();
+
+      const optionCount = await page
+        .getByTestId('cps-autocomplete-option')
+        .count();
+      await selectAll.click();
+      await expect(wrapper.locator('cps-chip')).toHaveCount(optionCount);
+      await expect(selectAll).toHaveAttribute('aria-selected', 'true');
+
+      await selectAll.click();
+      await expect(wrapper.locator('cps-chip')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Disabled', () => {
+    test('does not open the dropdown', async ({ page }) => {
+      const wrapper = example(page, 'disabled-autocomplete');
+
+      await wrapper.getByTestId('cps-autocomplete-input').click({
+        force: true
+      });
+      await expect(page.getByTestId('cps-autocomplete-listbox')).toBeHidden();
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-input')
+      ).toBeDisabled();
+    });
+  });
+
+  test.describe('Multiple, not clearable, plain text', () => {
+    test('renders comma-separated text instead of chips and hides the clear icon', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'multiple-not-clearable-autocomplete');
+
+      await expect(wrapper.locator('cps-chip')).toHaveCount(0);
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-selected-text-item')
+      ).toHaveText('Capetown');
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-clear-icon')
+      ).toHaveCount(0);
+    });
+  });
+
+  test.describe('Virtual scroll', () => {
+    test('opens with a virtualized list and always shows the clear icon', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'virtual-scroll-autocomplete');
+
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-clear-icon')
+      ).toBeVisible();
+
+      await wrapper.click();
+      await expect(page.locator('.p-virtualscroller')).toBeVisible();
+      await expect(page.getByTestId('cps-autocomplete-select-all')).toHaveCount(
+        0
+      );
+    });
+
+    test('arrow keys highlight options', async ({ page }) => {
+      const wrapper = example(page, 'virtual-scroll-autocomplete');
+
+      await wrapper.click();
+      await expect(page.locator('.p-virtualscroller')).toBeVisible();
+      await page.keyboard.press('ArrowDown');
+      await expect(
+        page.locator('[data-testid="cps-autocomplete-option"].highlighten')
+      ).toHaveCount(1);
+    });
+  });
+
+  test.describe('Multiple with non-closable chips', () => {
+    test('chips have no remove button and the chevron is hidden', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'non-closable-chips-autocomplete');
+
+      await expect(wrapper.locator('cps-chip')).toHaveCount(2);
       await expect(
-        page
-          .getByTestId('required-autocomplete')
-          .locator('.single-item-selection')
+        wrapper.locator('cps-chip').first().getByRole('button')
       ).toHaveCount(0);
+      await expect(wrapper.getByTestId('cps-autocomplete-chevron')).toHaveCount(
+        0
+      );
+    });
+  });
+
+  test.describe('Multiple with prefix icon', () => {
+    test('shows the prefix icon', async ({ page }) => {
+      const wrapper = example(page, 'prefix-icon-autocomplete');
+
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-prefix-icon')
+      ).toBeVisible();
+    });
+  });
+
+  test.describe('Two-way ngModel binding', () => {
+    test('selection reflects into the bound model and keeps initial order', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'two-way-binding-autocomplete');
+
+      await selectOption(wrapper, page, 'Tesla');
+      await selectOption(wrapper, page, 'Amazon');
+
+      await expect(page.locator('.sync-val')).toHaveText('AMZN,TSLA');
+      const chipTexts = await wrapper.locator('cps-chip').allTextContents();
+      expect(chipTexts).toEqual(['Amazon', 'Tesla']);
+    });
+  });
+
+  test.describe('Async validation', () => {
+    test('shows a busy/validating state after selection that clears once resolved', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'async-validation-autocomplete');
+
+      await selectOption(wrapper, page, 'Rome');
+
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-input')
+      ).toHaveAttribute('aria-busy', 'true');
+      await expect(wrapper.locator('cps-progress-linear')).toBeVisible();
+
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-input')
+      ).not.toHaveAttribute('aria-busy', 'true', {
+        timeout: ASYNC_VALIDATION_TIMEOUT_MS
+      });
+      await expect(wrapper.locator('cps-progress-linear')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Alias filtering', () => {
+    test('matches an option by alias when the label does not match', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'alias-filtering-autocomplete');
+
+      await wrapper.getByTestId('cps-autocomplete-input').fill('prg');
+      await expect(page.getByRole('option', { name: 'Prague' })).toBeVisible();
+      await expect(page.getByTestId('cps-autocomplete-option')).toHaveCount(1);
+    });
+  });
+
+  test.describe('Custom empty option index', () => {
+    test('clearing resolves to the configured empty option instead of nothing', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'empty-option-index-autocomplete');
+
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-selected-value')
+      ).toHaveText('New York');
+
+      await wrapper.getByTestId('cps-autocomplete-clear-icon').click();
+
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-selected-value')
+      ).toHaveText('Capetown');
+    });
+  });
+
+  test.describe('Clear without reopening', () => {
+    test('does not reopen the dropdown after clearing', async ({ page }) => {
+      const wrapper = example(page, 'open-on-clear-false-autocomplete');
+
+      await wrapper.getByTestId('cps-autocomplete-clear-icon').click();
+      await expect(wrapper.getByTestId('cps-autocomplete-input')).toBeFocused();
+      await expect(page.getByTestId('cps-autocomplete-listbox')).toBeHidden();
+    });
+  });
+
+  test.describe('Hidden hint and error details', () => {
+    test('never renders hint or error text', async ({ page }) => {
+      const wrapper = example(page, 'hide-details-autocomplete');
+
+      await expect(wrapper.getByTestId('cps-autocomplete-hint')).toHaveCount(0);
+
+      await wrapper.click();
+      await page.locator('body').click({ position: { x: 0, y: 0 } });
+
+      await expect(wrapper.getByTestId('cps-autocomplete-error')).toHaveCount(
+        0
+      );
+    });
+  });
+
+  test.describe('Multiple without select all', () => {
+    test('does not show a select-all row', async ({ page }) => {
+      const wrapper = example(page, 'select-all-false-autocomplete');
+
+      await selectOption(wrapper, page, 'Rome');
+
+      await expect(page.getByTestId('cps-autocomplete-option')).not.toHaveCount(
+        0
+      );
+      await expect(page.getByTestId('cps-autocomplete-select-all')).toHaveCount(
+        0
+      );
+    });
+  });
+
+  test.describe('Keyboard navigation', () => {
+    test('ArrowDown/ArrowUp highlight options and wrap around', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'alias-filtering-autocomplete');
+      const input = wrapper.getByTestId('cps-autocomplete-input');
+      const firstOption = page.getByTestId('cps-autocomplete-option').first();
+      const lastOption = page.getByTestId('cps-autocomplete-option').last();
+
+      await wrapper.click();
+      await expect(page.getByTestId('cps-autocomplete-listbox')).toBeVisible();
+      await page.keyboard.press('ArrowDown');
+      await expect(firstOption).toHaveClass(/highlighten/);
+
+      const activeDescendant = await input.getAttribute(
+        'aria-activedescendant'
+      );
+      expect(activeDescendant).toBeTruthy();
+      await expect(page.locator(`#${activeDescendant}`)).toHaveAttribute(
+        'aria-selected',
+        'false'
+      );
+
+      await page.keyboard.press('ArrowUp');
+      await expect(lastOption).toHaveClass(/highlighten/);
+      await expect(firstOption).not.toHaveClass(/highlighten/);
+    });
+
+    test('Enter selects the highlighted option', async ({ page }) => {
+      const wrapper = example(page, 'alias-filtering-autocomplete');
+
+      await wrapper.click();
+      await expect(page.getByTestId('cps-autocomplete-listbox')).toBeVisible();
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('Enter');
+
+      await expect(
+        wrapper.getByTestId('cps-autocomplete-selected-value')
+      ).toHaveText('New York');
+      await expect(page.getByTestId('cps-autocomplete-listbox')).toBeHidden();
+    });
+
+    test('Escape closes the dropdown', async ({ page }) => {
+      const wrapper = example(page, 'required-autocomplete');
+
+      await wrapper.click();
+      await expect(page.getByTestId('cps-autocomplete-listbox')).toBeVisible();
+      await page.keyboard.press('Escape');
+      await expect(page.getByTestId('cps-autocomplete-listbox')).toBeHidden();
+    });
+
+    test('double Backspace removes the last chip in multi-select', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'non-closable-chips-autocomplete');
+      const input = wrapper.getByTestId('cps-autocomplete-input');
+
+      await expect(wrapper.locator('cps-chip')).toHaveCount(2);
+      await input.click();
+      await expect(input).toBeFocused();
+      await page.keyboard.press('Backspace');
+      await page.keyboard.press('Backspace');
+
+      await expect(wrapper.locator('cps-chip')).toHaveCount(1);
     });
   });
 });
diff --git a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html
index d367bc28c..13e8951a5 100644
--- a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html
+++ b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html
@@ -22,6 +22,7 @@
       [htmlCode]="examples.singleAsync.html"
       [tsCode]="examples.singleAsync.ts">
       <cps-autocomplete
+        data-testid="single-async-autocomplete"
         label="Single search autocomplete with fetched options list"
         hint="This autocomplete fetches matching options list from the server side based on user input"
         [options]="singleOptionsObservable$ | async"
@@ -42,6 +43,7 @@
       [htmlCode]="examples.multipleAsync.html"
       [tsCode]="examples.multipleAsync.ts">
       <cps-autocomplete
+        data-testid="multiple-async-autocomplete"
         label="Multiple search autocomplete with fetched options list"
         hint="This autocomplete fetches matching options list from the server side based on user input"
         [options]="multiOptionsObservable$ | async"
@@ -60,6 +62,7 @@
 
     <app-code-example label="Disabled" [htmlCode]="examples.disabled.html">
       <cps-autocomplete
+        data-testid="disabled-autocomplete"
         label="Disabled autocomplete"
         [disabled]="true"
         hint="This autocomplete is disabled">
@@ -71,6 +74,7 @@
       [htmlCode]="examples.multipleNotClearable.html"
       [tsCode]="examples.multipleNotClearable.ts">
       <cps-autocomplete
+        data-testid="multiple-not-clearable-autocomplete"
         label="Multiple autocomplete"
         [options]="options"
         optionLabel="name"
@@ -91,6 +95,7 @@
       [htmlCode]="examples.virtualScroll.html"
       [tsCode]="examples.virtualScroll.ts">
       <cps-autocomplete
+        data-testid="virtual-scroll-autocomplete"
         label="Multiple autocomplete with virtual scroll, chips and persistent clear icon"
         [options]="options"
         hint="This autocomplete doesn't have Select All option"
@@ -111,6 +116,7 @@
       [htmlCode]="examples.nonClosableChips.html"
       [tsCode]="examples.nonClosableChips.ts">
       <cps-autocomplete
+        data-testid="non-closable-chips-autocomplete"
         label="Multiple autocomplete with non-closable chips"
         [returnObject]="false"
         [options]="options"
@@ -132,6 +138,7 @@
       [htmlCode]="examples.prefixIcon.html"
       [tsCode]="examples.prefixIcon.ts">
       <cps-autocomplete
+        data-testid="prefix-icon-autocomplete"
         label="Multiple autocomplete with prefix icon"
         [options]="options"
         optionLabel="name"
@@ -151,6 +158,7 @@
       [tsCode]="examples.twoWayBinding.ts">
       <div class="sync-val-example">
         <cps-autocomplete
+          data-testid="two-way-binding-autocomplete"
           width="31.25rem"
           label="Multiple autocomplete with two-way binding and keeping initial items order"
           [returnObject]="false"
@@ -212,6 +220,7 @@
       [htmlCode]="examples.asyncValidation.html"
       [tsCode]="examples.asyncValidation.ts">
       <cps-autocomplete
+        data-testid="async-validation-autocomplete"
         label="Autocomplete with async validation"
         [options]="options"
         optionLabel="name"
@@ -226,5 +235,88 @@
         hint="This autocomplete simulates async validation upon selection.">
       </cps-autocomplete>
     </app-code-example>
+
+    <app-code-example
+      label="Filtering by alias"
+      [htmlCode]="examples.aliasFiltering.html"
+      [tsCode]="examples.aliasFiltering.ts">
+      <cps-autocomplete
+        data-testid="alias-filtering-autocomplete"
+        label="Autocomplete filtering by alias"
+        hint="Try typing a country code such as PRG or CPT - it matches the alias field, not the label"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        [withOptionsAliases]="true"
+        [useOptionsAliasesWhenNoMatch]="true"
+        placeholder="Enter a city or its alias">
+      </cps-autocomplete>
+    </app-code-example>
+
+    <app-code-example
+      label="Custom empty option index"
+      [htmlCode]="examples.emptyOptionIndex.html"
+      [tsCode]="examples.emptyOptionIndex.ts">
+      <cps-autocomplete
+        data-testid="empty-option-index-autocomplete"
+        label="Autocomplete with a custom empty option index"
+        hint="Clearing this autocomplete falls back to Capetown instead of an empty value"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        [emptyOptionIndex]="2"
+        [clearable]="true"
+        [value]="emptyOptionIndexValue">
+      </cps-autocomplete>
+    </app-code-example>
+
+    <app-code-example
+      label="Clear without reopening"
+      [htmlCode]="examples.openOnClear.html"
+      [tsCode]="examples.openOnClear.ts">
+      <cps-autocomplete
+        data-testid="open-on-clear-false-autocomplete"
+        label="Autocomplete that stays closed after clearing"
+        hint="Clearing this autocomplete does not reopen the dropdown"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        [clearable]="true"
+        [openOnClear]="false"
+        [value]="openOnClearValue">
+      </cps-autocomplete>
+    </app-code-example>
+
+    <app-code-example
+      label="Hidden hint and error details"
+      [htmlCode]="examples.hideDetails.html"
+      [tsCode]="examples.hideDetails.ts">
+      <cps-autocomplete
+        data-testid="hide-details-autocomplete"
+        label="Required autocomplete without hint or error text"
+        hint="This hint is never shown because hideDetails is true"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        [clearable]="true"
+        [hideDetails]="true"
+        formControlName="hideDetailsAutocomplete">
+      </cps-autocomplete>
+    </app-code-example>
+
+    <app-code-example
+      label="Multiple without select all"
+      [htmlCode]="examples.selectAllFalse.html">
+      <cps-autocomplete
+        data-testid="select-all-false-autocomplete"
+        label="Multiple autocomplete without a Select all option"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        placeholder="Enter a city"
+        [multiple]="true"
+        [selectAll]="false">
+      </cps-autocomplete>
+    </app-code-example>
   </form>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.ts b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.ts
index 40ae97d92..10620aa1c 100644
--- a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.ts
+++ b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.ts
@@ -31,16 +31,31 @@ import { CommonModule } from '@angular/common';
 })
 export class AutocompletePageComponent implements OnInit {
   options = [
-    { name: 'New York', data: { code: 'NY' } },
-    { name: 'Prague', data: { code: 'PRG' }, info: 'Prague info' },
-    { name: 'Capetown', data: { code: 'CPT' }, info: 'Capetown info' },
-    { name: 'Rome', data: { code: 'RM' } },
-    { name: 'London', data: { code: 'LDN' }, info: 'London info' },
-    { name: 'Istanbul', data: { code: 'IST' } },
-    { name: 'Paris', data: { code: 'PRS' } },
-    { name: 'Tokyo', data: { code: 'TOK' } },
-    { name: 'Oslo', data: { code: 'OSL' }, info: 'Oslo info' },
-    { name: 'Berlin', data: { code: 'BER' } }
+    { name: 'New York', data: { code: 'NY' }, alias: 'NYC' },
+    {
+      name: 'Prague',
+      data: { code: 'PRG' },
+      info: 'Prague info',
+      alias: 'PRG'
+    },
+    {
+      name: 'Capetown',
+      data: { code: 'CPT' },
+      info: 'Capetown info',
+      alias: 'CPT'
+    },
+    { name: 'Rome', data: { code: 'RM' }, alias: 'ROM' },
+    {
+      name: 'London',
+      data: { code: 'LDN' },
+      info: 'London info',
+      alias: 'LDN'
+    },
+    { name: 'Istanbul', data: { code: 'IST' }, alias: 'IST' },
+    { name: 'Paris', data: { code: 'PRS' }, alias: 'PAR' },
+    { name: 'Tokyo', data: { code: 'TOK' }, alias: 'TOK' },
+    { name: 'Oslo', data: { code: 'OSL' }, info: 'Oslo info', alias: 'OSL' },
+    { name: 'Berlin', data: { code: 'BER' }, alias: 'BER' }
   ];
 
   syncOptions = [
@@ -57,6 +72,9 @@ export class AutocompletePageComponent implements OnInit {
   syncVal: any = [];
   componentData = ComponentData;
 
+  emptyOptionIndexValue = this.options[0];
+  openOnClearValue = this.options[3];
+
   isSingleLoading = false;
   isMultiLoading = false;
   externalError = '';
@@ -79,7 +97,8 @@ export class AutocompletePageComponent implements OnInit {
 
   ngOnInit(): void {
     this.form = this._formBuilder.group({
-      requiredAutocomplete: [this.options[1], [Validators.required]]
+      requiredAutocomplete: [this.options[1], [Validators.required]],
+      hideDetailsAutocomplete: [null, [Validators.required]]
     });
 
     this.singleOptionsObservable$ = this._defineOptionsObservable(
diff --git a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts
index 96e6f66b5..31d2417d4 100644
--- a/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts
+++ b/projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts
@@ -1,15 +1,15 @@
 const citiesOptionsTs = `
 options = [
-  { name: 'New York', data: { code: 'NY' } },
-  { name: 'Prague', data: { code: 'PRG' }, info: 'Prague info' },
-  { name: 'Capetown', data: { code: 'CPT' }, info: 'Capetown info' },
-  { name: 'Rome', data: { code: 'RM' } },
-  { name: 'London', data: { code: 'LDN' }, info: 'London info' },
-  { name: 'Istanbul', data: { code: 'IST' } },
-  { name: 'Paris', data: { code: 'PRS' } },
-  { name: 'Tokyo', data: { code: 'TOK' } },
-  { name: 'Oslo', data: { code: 'OSL' }, info: 'Oslo info' },
-  { name: 'Berlin', data: { code: 'BER' } }
+  { name: 'New York', data: { code: 'NY' }, alias: 'NYC' },
+  { name: 'Prague', data: { code: 'PRG' }, info: 'Prague info', alias: 'PRG' },
+  { name: 'Capetown', data: { code: 'CPT' }, info: 'Capetown info', alias: 'CPT' },
+  { name: 'Rome', data: { code: 'RM' }, alias: 'ROM' },
+  { name: 'London', data: { code: 'LDN' }, info: 'London info', alias: 'LDN' },
+  { name: 'Istanbul', data: { code: 'IST' }, alias: 'IST' },
+  { name: 'Paris', data: { code: 'PRS' }, alias: 'PAR' },
+  { name: 'Tokyo', data: { code: 'TOK' }, alias: 'TOK' },
+  { name: 'Oslo', data: { code: 'OSL' }, info: 'Oslo info', alias: 'OSL' },
+  { name: 'Berlin', data: { code: 'BER' }, alias: 'BER' }
 ];`;
 
 export const autocompleteExamples: Record<
@@ -265,5 +265,90 @@ onOptionSelected(option: Option): void {
     error: () => (this.externalError = 'Validation failed')
   });
 }`
+  },
+
+  aliasFiltering: {
+    html: `
+<cps-autocomplete
+  label="Autocomplete filtering by alias"
+  hint="Try typing a country code such as PRG or CPT - it matches the alias field, not the label"
+  [options]="options"
+  optionLabel="name"
+  optionInfo="info"
+  [withOptionsAliases]="true"
+  [useOptionsAliasesWhenNoMatch]="true"
+  placeholder="Enter a city or its alias">
+</cps-autocomplete>`,
+    ts: citiesOptionsTs
+  },
+
+  emptyOptionIndex: {
+    html: `
+<cps-autocomplete
+  label="Autocomplete with a custom empty option index"
+  hint="Clearing this autocomplete falls back to Capetown instead of an empty value"
+  [options]="options"
+  optionLabel="name"
+  optionInfo="info"
+  [emptyOptionIndex]="2"
+  [clearable]="true"
+  [value]="emptyOptionIndexValue">
+</cps-autocomplete>`,
+    ts: `
+${citiesOptionsTs.trim()}
+
+emptyOptionIndexValue = this.options[0];`
+  },
+
+  openOnClear: {
+    html: `
+<cps-autocomplete
+  label="Autocomplete that stays closed after clearing"
+  hint="Clearing this autocomplete does not reopen the dropdown"
+  [options]="options"
+  optionLabel="name"
+  optionInfo="info"
+  [clearable]="true"
+  [openOnClear]="false"
+  [value]="openOnClearValue">
+</cps-autocomplete>`,
+    ts: `
+${citiesOptionsTs.trim()}
+
+openOnClearValue = this.options[3];`
+  },
+
+  hideDetails: {
+    html: `
+<cps-autocomplete
+  label="Required autocomplete without hint or error text"
+  hint="This hint is never shown because hideDetails is true"
+  [options]="options"
+  optionLabel="name"
+  optionInfo="info"
+  [clearable]="true"
+  [hideDetails]="true"
+  formControlName="hideDetailsAutocomplete">
+</cps-autocomplete>`,
+    ts: `
+${citiesOptionsTs.trim()}
+
+form = this.fb.group({
+  hideDetailsAutocomplete: [null, [Validators.required]]
+});`
+  },
+
+  selectAllFalse: {
+    html: `
+<cps-autocomplete
+  label="Multiple autocomplete without a Select all option"
+  [options]="options"
+  optionLabel="name"
+  optionInfo="info"
+  placeholder="Enter a city"
+  [multiple]="true"
+  [selectAll]="false">
+</cps-autocomplete>`,
+    ts: citiesOptionsTs
   }
 };
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html
index 3cc2fdd2e..56ab52767 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html
@@ -1,6 +1,7 @@
 <div
   [ngStyle]="{ width: cvtWidth }"
   class="cps-autocomplete"
+  data-testid="cps-autocomplete"
   [ngClass]="{
     disabled: disabled,
     error: error || externalError,
@@ -9,7 +10,7 @@
   }"
   #autocompleteContainer>
   @if (label) {
-    <div class="cps-autocomplete-label">
+    <div class="cps-autocomplete-label" data-testid="cps-autocomplete-label">
       <label>{{ label }}</label>
       @if (infoTooltip) {
         <cps-info-circle
@@ -44,14 +45,17 @@
             [icon]="prefixIcon"
             [style.color]="disabled ? 'var(--cps-text-muted)' : null"
             [size]="prefixIconSize"
-            class="prefix-icon">
+            class="prefix-icon"
+            data-testid="cps-autocomplete-prefix-icon">
           </cps-icon>
         }
         @if (hasSelectedValue()) {
           <div class="cps-autocomplete-box-items">
             @if (!multiple) {
               <span class="single-item">
-                <div class="single-item-selection">
+                <div
+                  class="single-item-selection"
+                  data-testid="cps-autocomplete-selected-value">
                   <span [style.opacity]="activeSingle ? 0 : 1">{{
                     returnObject
                       ? value[optionLabel]
@@ -84,6 +88,7 @@
                   ) {
                     <div
                       class="text-group-item"
+                      data-testid="cps-autocomplete-selected-text-item"
                       role="listitem"
                       [ngClass]="{
                         'about-to-remove': last && backspaceClickedOnce
@@ -158,12 +163,13 @@
             <span
               role="button"
               (click)="clear($event)"
-              (mousedown)="$event.preventDefault()"
+              (mousedown)="$event.preventDefault(); $event.stopPropagation()"
               (keydown.enter)="clear($event)"
               (keydown.space)="clear($event)"
               aria-label="Clear selection"
               [tabindex]="disabled ? -1 : 0"
               class="cps-autocomplete-box-clear-icon"
+              data-testid="cps-autocomplete-clear-icon"
               [ngClass]="{
                 'cps-autocomplete-box-clear-icon-hidden':
                   !persistentClear && !hasSelectedValue()
@@ -174,6 +180,7 @@
           @if (showChevron && options.length) {
             <span
               class="cps-autocomplete-box-chevron"
+              data-testid="cps-autocomplete-chevron"
               role="button"
               (mousedown)="onChevronClick($event)"
               (keydown.enter)="onChevronClick($event)"
@@ -202,6 +209,7 @@
         #optionsList
         role="listbox"
         [id]="optionsListId"
+        data-testid="cps-autocomplete-listbox"
         tabindex="-1"
         aria-readonly="false"
         aria-disabled="false"
@@ -212,6 +220,7 @@
         @if (loading && showLoadingMessage) {
           <div
             class="cps-autocomplete-options-loading"
+            data-testid="cps-autocomplete-loading"
             role="option"
             tabindex="-1"
             aria-disabled="true"
@@ -227,6 +236,7 @@
         ) {
           <div
             class="cps-autocomplete-options-empty"
+            data-testid="cps-autocomplete-empty"
             role="option"
             tabindex="-1"
             aria-disabled="true"
@@ -237,6 +247,7 @@
         @if (isSelectAllVisible) {
           <div
             class="cps-autocomplete-options-option select-all-option"
+            data-testid="cps-autocomplete-select-all"
             [id]="selectAllOptionId"
             role="option"
             tabindex="-1"
@@ -311,7 +322,10 @@
     }
   </div>
   @if (!error && !externalError && !hideDetails) {
-    <div [id]="hintId" class="cps-autocomplete-hint">
+    <div
+      [id]="hintId"
+      class="cps-autocomplete-hint"
+      data-testid="cps-autocomplete-hint">
       {{ hint }}
     </div>
   }
@@ -319,6 +333,7 @@
     <div
       [id]="errorId"
       class="cps-autocomplete-error"
+      data-testid="cps-autocomplete-error"
       aria-live="polite"
       aria-atomic="true">
       {{ error || externalError }}
@@ -334,6 +349,7 @@
     #autocompleteInput
     type="text"
     class="cps-autocomplete-box-input"
+    data-testid="cps-autocomplete-input"
     spellcheck="false"
     [disabled]="disabled"
     role="combobox"
@@ -360,6 +376,7 @@
 <ng-template #itemTemplate let-item="item" let-itemIndex="itemIndex">
   <div
     class="cps-autocomplete-options-option"
+    data-testid="cps-autocomplete-option"
     [id]="getOptionId(item, itemIndex)"
     role="option"
     tabindex="-1"