diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png new file mode 100644 index 00000000000..8f2b0efd07c Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png new file mode 100644 index 00000000000..87ea0c76c3c Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b583f1b71a2 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png new file mode 100644 index 00000000000..8f2b0efd07c Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png new file mode 100644 index 00000000000..8f2b0efd07c Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png new file mode 100644 index 00000000000..8ffe3c17d6d Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png new file mode 100644 index 00000000000..f5870d3d762 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png new file mode 100644 index 00000000000..8ffe3c17d6d Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png new file mode 100644 index 00000000000..8ffe3c17d6d Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Add-New-Item-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-colorblind-linux.png new file mode 100644 index 00000000000..d266292ba69 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-dimmed-linux.png new file mode 100644 index 00000000000..af52ceaccff Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-high-contrast-linux.png new file mode 100644 index 00000000000..37adaa4a6ec Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-linux.png new file mode 100644 index 00000000000..d266292ba69 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d266292ba69 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-colorblind-linux.png new file mode 100644 index 00000000000..ef77c152656 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-high-contrast-linux.png new file mode 100644 index 00000000000..c4caecf0519 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-linux.png new file mode 100644 index 00000000000..ef77c152656 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-tritanopia-linux.png new file mode 100644 index 00000000000..ef77c152656 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Async-Loading-Of-Items-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png new file mode 100644 index 00000000000..4ae11a4ca57 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png new file mode 100644 index 00000000000..36150dc637a Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png new file mode 100644 index 00000000000..aa0998ad4fe Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png new file mode 100644 index 00000000000..4ae11a4ca57 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4ae11a4ca57 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png new file mode 100644 index 00000000000..efa0688b652 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png new file mode 100644 index 00000000000..ab9a51b2717 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png new file mode 100644 index 00000000000..efa0688b652 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png new file mode 100644 index 00000000000..efa0688b652 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Overlay-Menu-Anchor-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-colorblind-linux.png new file mode 100644 index 00000000000..5074563c7f0 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-dimmed-linux.png new file mode 100644 index 00000000000..93349866723 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-high-contrast-linux.png new file mode 100644 index 00000000000..2087092fffb Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-linux.png new file mode 100644 index 00000000000..5074563c7f0 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-tritanopia-linux.png new file mode 100644 index 00000000000..5074563c7f0 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-colorblind-linux.png new file mode 100644 index 00000000000..bef766a905c Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-high-contrast-linux.png new file mode 100644 index 00000000000..42296f638aa Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-linux.png new file mode 100644 index 00000000000..bef766a905c Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-tritanopia-linux.png new file mode 100644 index 00000000000..bef766a905c Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Search-Filter-Fn-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png new file mode 100644 index 00000000000..f77e4fb7ead Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png new file mode 100644 index 00000000000..94ed7b4473f Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png new file mode 100644 index 00000000000..711597fd4da Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png new file mode 100644 index 00000000000..f77e4fb7ead Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png new file mode 100644 index 00000000000..f77e4fb7ead Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png new file mode 100644 index 00000000000..5f0b35f900e Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png new file mode 100644 index 00000000000..64b36c1c76b Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png new file mode 100644 index 00000000000..5f0b35f900e Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png new file mode 100644 index 00000000000..5f0b35f900e Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Custom-Sort-After-Menu-Close-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..5a503afb5bc Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..63b695b2b5f Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..c466798d675 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png new file mode 100644 index 00000000000..5a503afb5bc Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..5a503afb5bc Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..0c72c279200 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..4f8242e7d21 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png new file mode 100644 index 00000000000..0c72c279200 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..0c72c279200 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png new file mode 100644 index 00000000000..7240b856ac9 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png new file mode 100644 index 00000000000..4b8455c8867 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png new file mode 100644 index 00000000000..c9e1b6378a0 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png new file mode 100644 index 00000000000..7240b856ac9 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png new file mode 100644 index 00000000000..7240b856ac9 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png new file mode 100644 index 00000000000..2c47d551135 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png new file mode 100644 index 00000000000..c09b79fdd3d Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png new file mode 100644 index 00000000000..2c47d551135 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png new file mode 100644 index 00000000000..2c47d551135 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-A-Dialog-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png new file mode 100644 index 00000000000..a2d92809dcb Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png new file mode 100644 index 00000000000..3bd9d1c57c5 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png new file mode 100644 index 00000000000..a5d214d4cb6 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png new file mode 100644 index 00000000000..ece5062ee2f Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png new file mode 100644 index 00000000000..ece5062ee2f Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png new file mode 100644 index 00000000000..3a966daebb3 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png new file mode 100644 index 00000000000..ff8eeeff8c2 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png new file mode 100644 index 00000000000..3a966daebb3 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png new file mode 100644 index 00000000000..3a966daebb3 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-In-Overlay-With-Custom-Scroll-Container-Ref-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png new file mode 100644 index 00000000000..2abd788c295 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png new file mode 100644 index 00000000000..dbf022ced1c Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png new file mode 100644 index 00000000000..00d2607c126 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png new file mode 100644 index 00000000000..2abd788c295 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png new file mode 100644 index 00000000000..2abd788c295 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png new file mode 100644 index 00000000000..011f5c085bc Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png new file mode 100644 index 00000000000..42c1c944b38 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png new file mode 100644 index 00000000000..011f5c085bc Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png new file mode 100644 index 00000000000..011f5c085bc Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Rendering-The-Menu-Outside-An-Overlay-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-colorblind-linux.png new file mode 100644 index 00000000000..3edac49fc7e Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-dimmed-linux.png new file mode 100644 index 00000000000..d6b444e0419 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-high-contrast-linux.png new file mode 100644 index 00000000000..120e22cd32f Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-linux.png new file mode 100644 index 00000000000..3edac49fc7e Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3edac49fc7e Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-colorblind-linux.png new file mode 100644 index 00000000000..b3c02834ebb Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-high-contrast-linux.png new file mode 100644 index 00000000000..9f080c5ce09 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-linux.png new file mode 100644 index 00000000000..b3c02834ebb Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-tritanopia-linux.png new file mode 100644 index 00000000000..b3c02834ebb Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-Sx-Prop-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png new file mode 100644 index 00000000000..62ddfe43656 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png new file mode 100644 index 00000000000..ff6a0219cb6 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png new file mode 100644 index 00000000000..d67fbd18ebf Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png new file mode 100644 index 00000000000..62ddfe43656 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png new file mode 100644 index 00000000000..62ddfe43656 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png new file mode 100644 index 00000000000..56a90ace378 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png new file mode 100644 index 00000000000..b45a0356c54 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png new file mode 100644 index 00000000000..56a90ace378 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png new file mode 100644 index 00000000000..56a90ace378 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Callback-When-Overlay-Open-State-Changes-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png new file mode 100644 index 00000000000..fb14840e742 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png new file mode 100644 index 00000000000..5be69e7cf10 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png new file mode 100644 index 00000000000..e836067a5ea Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png new file mode 100644 index 00000000000..fb14840e742 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png new file mode 100644 index 00000000000..fb14840e742 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png new file mode 100644 index 00000000000..3f8227b0613 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png new file mode 100644 index 00000000000..993c92adbf9 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png new file mode 100644 index 00000000000..3f8227b0613 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-linux.png differ diff --git a/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png new file mode 100644 index 00000000000..3f8227b0613 Binary files /dev/null and b/.playwright/snapshots/components/Autocomplete.test.ts-snapshots/Autocomplete-With-Token-Input-light-tritanopia-linux.png differ diff --git a/e2e/components/Autocomplete.test.ts b/e2e/components/Autocomplete.test.ts new file mode 100644 index 00000000000..cec09abca05 --- /dev/null +++ b/e2e/components/Autocomplete.test.ts @@ -0,0 +1,154 @@ +import {test, expect, type Page} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' + +const stories: Array<{title: string; id: string; setup: (page: Page) => void}> = [ + { + title: 'Default', + id: 'components-autocomplete--default', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'Add New Item', + id: 'components-autocomplete-features--add-new-item', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'Async Loading Of Items', + id: 'components-autocomplete-features--async-loading-of-items', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'Custom Overlay Menu Anchor', + id: 'components-autocomplete-features--custom-overlay-menu-anchor', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'Custom Search Filter Fn', + id: 'components-autocomplete-features--custom-search-filter-fn', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'Custom Sort After Menu Close', + id: 'components-autocomplete-features--custom-sort-after-menu-close', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'In A Dialog', + id: 'components-autocomplete-features--in-a-dialog', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + await expect(page.getByRole('dialog')).toBeVisible() + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'In Overlay With Custom Scroll Container Ref', + id: 'components-autocomplete-features--in-overlay-with-custom-scroll-container-ref', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('Enter') + await page.keyboard.press('D') + }, + }, + { + title: 'Rendering The Menu Outside An Overlay', + id: 'components-autocomplete-features--rendering-the-menu-outside-an-overlay', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'With Callback When Overlay Open State Changes', + id: 'components-autocomplete-features--with-callback-when-overlay-open-state-changes', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'With Token Input', + id: 'components-autocomplete-features--with-token-input', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, + { + title: 'Sx Prop', + id: 'components-autocomplete-dev--sx-prop', + setup: async page => { + await page.keyboard.press('Tab') + await page.keyboard.press('D') + }, + }, +] + +test.describe('Autocomplete', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('@vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + + story.setup(page) + + await expect(page).toHaveScreenshot(`Autocomplete.${story.title}.${theme}.png`, {animations: 'disabled'}) + }) + + test('@aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + + story.setup(page) + + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: + theme !== 'dark_colorblind' && + theme !== 'dark_dimmed' && + theme !== 'light' && + theme !== 'light_colorblind' && + theme !== 'light_tritanopia', + }, + 'aria-valid-attr-value': {enabled: false}, + }, + }) + }) + }) + } + }) + } +}) diff --git a/packages/react/src/Autocomplete/Autocomplete.dev.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.dev.stories.tsx new file mode 100644 index 00000000000..ea7cbf5c59b --- /dev/null +++ b/packages/react/src/Autocomplete/Autocomplete.dev.stories.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import type {Meta} from '@storybook/react' + +import Autocomplete from './Autocomplete' +import FormControl from '../FormControl' + +const autocompleteStoryMeta: Meta = { + title: 'Components/Autocomplete/Dev', +} as Meta + +export const SxProp = () => { + return ( +
+ + Label + + + + + + + +
+ ) +} + +export default autocompleteStoryMeta diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx index 5d3401b9e60..37a0393044e 100644 --- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx @@ -114,7 +114,7 @@ const autocompleteStoryMeta: Meta = { - + Last key pressed: {lastKey} @@ -567,6 +567,7 @@ export const InOverlayWithCustomScrollContainerRef = () => { }, }} block + aria-label="Search" /> { return ( <> - setIsDialogOpen(false)}> + setIsDialogOpen(false)} + >
{mounted ? ( diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx index b47abb90f09..d13a8d7a19e 100644 --- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx @@ -116,7 +116,7 @@ const autocompleteStoryMeta: Meta = { - + Last key pressed: {lastKey} diff --git a/packages/react/src/__tests__/Autocomplete.test.tsx b/packages/react/src/__tests__/Autocomplete.test.tsx index b8778f6ae1d..b310fb918f8 100644 --- a/packages/react/src/__tests__/Autocomplete.test.tsx +++ b/packages/react/src/__tests__/Autocomplete.test.tsx @@ -8,6 +8,7 @@ import BaseStyles from '../BaseStyles' import theme from '../theme' import {ThemeProvider} from '../ThemeProvider' import {render} from '../utils/testing' +import {FeatureFlags} from '../FeatureFlags' const mockItems = [ {text: 'zero', id: '0'}, @@ -218,6 +219,29 @@ describe('Autocomplete', () => { expect(getByDisplayValue('0')).toBeDefined() }) + + it('should support `className` on the outermost element', () => { + const Element = () => ( + + + + ) + const FeatureFlagElement = () => { + return ( + + + + ) + } + expect(HTMLRender().container.firstChild).toHaveClass('test-class-name') + expect(HTMLRender().container.firstChild).toHaveClass('test-class-name') + }) }) describe('Autocomplete.Menu', () => { @@ -439,6 +463,49 @@ describe('Autocomplete', () => { }) }) + describe('Autocomplete.Overlay', () => { + it('should support `className` on the outermost element', async () => { + const Element = ({className}: {className: string}) => ( + + + + + hi + + + + ) + const FeatureFlagElement = () => { + return ( + + + + ) + } + const {container: elementContainer, getByRole, rerender} = HTMLRender() + let inputNode = getByRole('combobox') + await userEvent.click(inputNode) + await userEvent.keyboard('{ArrowDown}') + // overlay is a sibling of elementContainer + expect(elementContainer.parentElement?.querySelectorAll('.test-class-name')).toHaveLength(1) + + rerender() + expect(elementContainer.parentElement?.querySelectorAll('.test-class-name')).toHaveLength(0) + inputNode = getByRole('combobox') + await userEvent.click(inputNode) + await userEvent.keyboard('{ArrowDown}') + + // overlay is a sibling of ffContainer + expect(elementContainer.parentElement?.querySelectorAll('.test-class-name-2')).toHaveLength(1) + }) + }) + describe('null context', () => { it('throws errors when Autocomplete context is null', () => { const spy = jest.spyOn(console, 'error').mockImplementation(() => {})