From afcbe2017de8c1a557dca5325de328b92d0884c7 Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Mon, 5 Aug 2024 14:46:04 -0400
Subject: [PATCH 1/4] chore: add automatic sorting for tailwind classes (#4233)

This PR adds `prettier-plugin-tailwindcss`, which is the [recommended
solution](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)
to sort tailwind classes.

https://coveord.atlassian.net/browse/KIT-3439

---------

Co-authored-by: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com>
---
 .prettierrc.js                                |  5 +-
 package-lock.json                             | 75 +++++++++++++++++++
 package.json                                  |  1 +
 .../atomic-commerce-products-per-page.pcss    |  2 +-
 .../atomic-commerce-search-box.tsx            |  4 +-
 .../atomic-commerce-category-facet.pcss       |  4 +-
 .../atomic-commerce-facet-number-input.tsx    |  4 +-
 .../atomic-product-children.tsx               |  2 +-
 .../atomic-product-description.tsx            |  2 +-
 .../atomic-product-price.tsx                  |  4 +-
 .../atomic-product-rating.tsx                 |  2 +-
 .../common/atomic-modal/atomic-modal.pcss     |  2 +-
 .../common/atomic-modal/atomic-modal.tsx      | 15 ++--
 .../common/atomic-rating/atomic-rating.tsx    |  2 +-
 .../common/breadbox/breadcrumb-clear-all.tsx  |  2 +-
 .../common/breadbox/breadcrumb-container.tsx  |  6 +-
 .../common/breadbox/breadcrumb-content.tsx    |  2 +-
 .../common/breadbox/breadcrumb-show-less.tsx  |  2 +-
 .../common/breadbox/breadcrumb-show-more.tsx  |  2 +-
 .../atomic/src/components/common/carousel.tsx |  4 +-
 .../facets/category-facet/search-value.tsx    |  8 +-
 .../common/facets/facet-common.pcss           |  4 +-
 .../facet-container/facet-container.tsx       |  2 +-
 .../facet-date-input/facet-date-input.tsx     |  4 +-
 .../facets/facet-header/facet-header.tsx      |  8 +-
 .../facet-number-input/facet-number-input.tsx |  4 +-
 .../facet-placeholder/facet-placeholder.tsx   |  6 +-
 .../facet-search/facet-search-input.tsx       |  8 +-
 .../facet-search/facet-search-matches.tsx     |  4 +-
 .../facet-value-box/facet-value-box.pcss      |  2 +-
 .../facet-value-box/facet-value-box.tsx       |  4 +-
 .../facet-value-checkbox.pcss                 |  4 +-
 .../facet-value-exclude.tsx                   |  2 +-
 .../facet-value-label-highlight.tsx           |  2 +-
 .../facet-value-link/facet-value-link.tsx     |  2 +-
 .../atomic-citation/atomic-citation.tsx       | 14 ++--
 ...atomic-generated-answer-feedback-modal.tsx | 16 ++--
 .../common/generated-answer/copy-button.tsx   |  2 +-
 .../generated-answer/feedback-button.tsx      |  2 +-
 .../generated-answer-common.tsx               |  8 +-
 .../generated-markdown-content.pcss           | 14 ++--
 .../generated-markdown-content.tsx            |  2 +-
 .../generated-text-content.tsx                |  2 +-
 .../generated-answer/rephrase-buttons.tsx     |  8 +-
 .../common/generated-answer/retry-prompt.tsx  |  4 +-
 .../common/generated-answer/show-button.tsx   |  4 +-
 .../generated-answer/source-citations.tsx     |  4 +-
 .../styles/generated-answer.pcss              |  6 +-
 .../src/components/common/iconButton.tsx      |  6 +-
 .../image-carousel-indicators.tsx             | 10 +--
 .../common/image-carousel/image-carousel.tsx  |  2 +-
 .../common/items-per-page/label.tsx           |  2 +-
 .../components/common/load-more/button.tsx    |  2 +-
 .../common/load-more/progress-bar.tsx         |  4 +-
 .../components/common/load-more/summary.tsx   |  2 +-
 .../src/components/common/no-items/cancel.tsx |  2 +-
 .../components/common/no-items/container.tsx  |  2 +-
 .../common/no-items/magnifying-glass.tsx      |  2 +-
 .../components/common/no-items/no-items.tsx   |  4 +-
 .../src/components/common/no-items/tips.tsx   |  2 +-
 .../components/common/pager/pager-buttons.tsx |  6 +-
 .../query-correction/trigger-correction.tsx   |  4 +-
 .../common/query-error/container.tsx          |  2 +-
 .../common/query-error/description.tsx        |  2 +-
 .../components/common/query-error/details.tsx |  2 +-
 .../components/common/query-error/link.tsx    |  2 +-
 .../common/query-error/show-more.tsx          |  2 +-
 .../components/common/query-error/title.tsx   |  2 +-
 .../components/common/query-summary/guard.tsx |  2 +-
 .../components/common/refine-modal/body.tsx   |  2 +-
 .../components/common/refine-modal/button.tsx |  2 +-
 .../common/refine-modal/filters.tsx           |  4 +-
 .../components/common/refine-modal/guard.tsx  |  2 +-
 .../components/common/refine-modal/modal.tsx  |  6 +-
 .../components/common/refine-modal/sort.tsx   |  8 +-
 .../common/search-box/clear-button.tsx        |  4 +-
 .../common/search-box/search-box.pcss         |  4 +-
 .../common/search-box/search-input.tsx        |  6 +-
 .../common/search-box/search-text-area.tsx    |  8 +-
 .../common/search-box/submit-button.tsx       |  4 +-
 .../search-box/text-area-clear-button.tsx     |  6 +-
 .../search-box/text-area-submit-button.tsx    |  6 +-
 ...atomic-smart-snippet-collapse-wrapper.pcss |  2 +-
 .../atomic-smart-snippet-collapse-wrapper.tsx |  4 +-
 ...tomic-smart-snippet-expandable-answer.pcss |  2 +-
 ...atomic-smart-snippet-expandable-answer.tsx |  4 +-
 .../atomic-smart-snippet-feedback-banner.tsx  |  4 +-
 .../atomic-smart-snippet-feedback-modal.pcss  |  4 +-
 .../smart-snippet-feedback-modal-common.tsx   |  8 +-
 .../smart-snippet-suggestions-common.tsx      | 10 +--
 .../smart-snippet-common.tsx                  |  2 +-
 .../src/components/common/sort/container.tsx  |  2 +-
 .../src/components/common/sort/guard.tsx      |  2 +-
 .../src/components/common/sort/label.tsx      |  2 +-
 .../src/components/common/sort/select.tsx     |  2 +-
 .../common/suggestions/query-suggestions.tsx  |  6 +-
 .../common/suggestions/recent-queries.tsx     |  8 +-
 .../common/tab-manager/tab-button.tsx         |  2 +-
 .../common/tab-manager/tab-dropdown.tsx       |  4 +-
 .../src/components/common/tabs/tab-bar.tsx    |  2 +-
 .../components/common/tabs/tab-popover.tsx    |  8 +-
 .../atomic-insight-full-search-button.pcss    |  4 +-
 .../atomic-insight-query-summary.tsx          |  2 +-
 .../atomic-insight-refine-modal.tsx           |  4 +-
 .../atomic-insight-result-action-bar.pcss     |  4 +-
 .../atomic-insight-search-box.pcss            | 10 +--
 .../atomic-insight-search-box.tsx             |  4 +-
 .../atomic-insight-tab.pcss                   |  2 +-
 .../result-lists/styles/list-display.pcss     |  2 +-
 .../ipx/atomic-ipx-body/atomic-ipx-body.pcss  |  4 +-
 .../ipx/atomic-ipx-body/atomic-ipx-body.tsx   |  4 +-
 .../atomic-ipx-button/atomic-ipx-button.pcss  |  4 +-
 .../atomic-ipx-refine-modal.tsx               |  4 +-
 .../atomic-ipx-refine-toggle.pcss             |  4 +-
 .../ipx/atomic-ipx-tab/atomic-ipx-tab.pcss    |  2 +-
 .../atomic-notifications.tsx                  |  6 +-
 .../atomic-relevance-inspector.tsx            |  4 +-
 .../atomic-result-table-placeholder.tsx       | 14 ++--
 .../atomic-results-per-page.pcss              |  2 +-
 .../atomic-search-box/atomic-search-box.pcss  |  2 +-
 .../atomic-search-box/atomic-search-box.tsx   |  4 +-
 .../atomic-category-facet.pcss                |  4 +-
 .../atomic-color-facet/atomic-color-facet.tsx |  2 +-
 .../facets/atomic-popover/atomic-popover.tsx  | 14 ++--
 .../atomic-rating-range-facet.tsx             |  2 +-
 .../atomic-segmented-facet-scrollable.tsx     |  6 +-
 .../atomic-segmented-facet.tsx                |  4 +-
 .../color-facet-checkbox.pcss                 |  2 +-
 .../facet-segmented-value.tsx                 |  4 +-
 .../atomic-quickview-modal.pcss               |  2 +-
 .../atomic-quickview-modal.tsx                |  6 +-
 .../atomic-quickview-sidebar.tsx              | 14 ++--
 .../atomic-quickview/atomic-quickview.tsx     |  2 +-
 .../atomic-result-badge.tsx                   |  4 +-
 .../quickview-iframe/quickview-iframe.tsx     |  2 +-
 .../atomic-tab-manager/atomic-tab-manager.tsx |  2 +-
 packages/atomic/src/global/global.pcss        | 24 +++---
 .../pages/examples/commerce-website/cart.html |  2 +-
 .../examples/commerce-website/homepage.html   |  2 +-
 .../commerce-website/listing-pants.html       |  2 +-
 .../listing-surf-accessories.html             |  2 +-
 .../commerce-website/listing-towels.html      |  2 +-
 .../examples/commerce-website/search.html     |  6 +-
 .../src/pages/CommerceSearchPage.tsx          |  2 +-
 144 files changed, 384 insertions(+), 310 deletions(-)

diff --git a/.prettierrc.js b/.prettierrc.js
index ef1aec7470c..1f0b0cf9eef 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -5,7 +5,10 @@ const decoratorPlugin = JSON.stringify([
 
 /** @type {import('prettier').Config} */
 module.exports = {
-  plugins: ['@trivago/prettier-plugin-sort-imports'],
+  plugins: [
+    '@trivago/prettier-plugin-sort-imports',
+    'prettier-plugin-tailwindcss',
+  ],
   bracketSpacing: false,
   singleQuote: true,
   trailingComma: 'es5',
diff --git a/package-lock.json b/package-lock.json
index ca2201ee909..f7dac3070c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,6 +83,7 @@
         "nx": "19.0.4",
         "patch-package": "8.0.0",
         "prettier": "3.3.3",
+        "prettier-plugin-tailwindcss": "0.6.5",
         "react-syntax-highlighter": "15.5.0",
         "rimraf": "5.0.9",
         "semver": "7.6.3",
@@ -47308,6 +47309,80 @@
         "prettier": "^3.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",
+      "integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index e7031a4eb17..44bd9beabe0 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "nx": "19.0.4",
     "patch-package": "8.0.0",
     "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.5",
     "react-syntax-highlighter": "15.5.0",
     "rimraf": "5.0.9",
     "semver": "7.6.3",
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.pcss b/packages/atomic/src/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.pcss
index ba9ae1fb155..d8f29ba58f2 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.pcss
+++ b/packages/atomic/src/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.pcss
@@ -1,5 +1,5 @@
 @import '../../../global/global.pcss';
 
 .btn-page {
-  @apply w-10 h-10;
+  @apply h-10 w-10;
 }
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx b/packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx
index cb3c8ffbd3e..2e5f573745d 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx
+++ b/packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx
@@ -535,7 +535,7 @@ export class AtomicCommerceSearchBox
             ? 'suggestions-double-list'
             : 'suggestions-single-list'
         }`}
-        class={`flex w-full z-10 absolute left-0 top-full rounded-md bg-background border border-neutral ${
+        class={`bg-background border-neutral absolute left-0 top-full z-10 flex w-full rounded-md border ${
           this.suggestionManager.hasSuggestions &&
           this.isExpanded &&
           !this.isSearchDisabledForEndUser(this.searchBoxState.value)
@@ -604,7 +604,7 @@ export class AtomicCommerceSearchBox
       <textarea
         aria-hidden
         part="textarea-spacer"
-        class="invisible text-lg py-3.5 px-4 w-full"
+        class="invisible w-full px-4 py-3.5 text-lg"
         rows={1}
       ></textarea>
     );
diff --git a/packages/atomic/src/components/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.pcss b/packages/atomic/src/components/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.pcss
index ceeb35f0691..b7a0b473a13 100644
--- a/packages/atomic/src/components/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.pcss
+++ b/packages/atomic/src/components/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.pcss
@@ -11,9 +11,9 @@
 
 [part~='all-categories-button'],
 [part~='parent-button'] {
-  @apply w-full py-2.5 pr-2 pl-7 text-left relative flex items-center;
+  @apply relative flex w-full items-center py-2.5 pl-7 pr-2 text-left;
 }
 
 [part~='back-arrow'] {
-  @apply h-5 w-5 absolute left-1;
+  @apply absolute left-1 h-5 w-5;
 }
diff --git a/packages/atomic/src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx b/packages/atomic/src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx
index 714956e069b..757d7d504a4 100644
--- a/packages/atomic/src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx
+++ b/packages/atomic/src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx
@@ -79,7 +79,7 @@ export class FacetNumberInput {
 
     return (
       <form
-        class="mt-4 px-2 gap-y-0.5"
+        class="mt-4 gap-y-0.5 px-2"
         part="input-form"
         onSubmit={(e) => {
           e.preventDefault();
@@ -133,7 +133,7 @@ export class FacetNumberInput {
           style="outline-primary"
           type="submit"
           part="input-apply-button"
-          class="p-2.5 flex-none truncate"
+          class="flex-none truncate p-2.5"
           ariaLabel={applyAria}
           text={apply}
         ></Button>
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-children/atomic-product-children.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-children/atomic-product-children.tsx
index 43f1e5ca7e2..61460ba9135 100644
--- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-children/atomic-product-children.tsx
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-children/atomic-product-children.tsx
@@ -146,7 +146,7 @@ export class AtomicProductChildren
 
   private renderLabel() {
     return (
-      <div class="my-2 font-semibold text-neutral-dark">
+      <div class="text-neutral-dark my-2 font-semibold">
         <atomic-commerce-text
           value={this.bindings.i18n.t(this.label)}
         ></atomic-commerce-text>
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-description/atomic-product-description.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-description/atomic-product-description.tsx
index b827878c3f9..e00153f0ba8 100644
--- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-description/atomic-product-description.tsx
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-description/atomic-product-description.tsx
@@ -128,7 +128,7 @@ export class AtomicProductDescription
       >
         <atomic-icon
           icon={PlusIcon}
-          class="w-2 ml-1 align-baseline"
+          class="ml-1 w-2 align-baseline"
         ></atomic-icon>{' '}
         {this.bindings.i18n.t('show-more')}
       </Button>
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx
index cadc6ebcb31..c224720fa78 100644
--- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx
@@ -46,14 +46,14 @@ export class AtomicProductPrice
     return (
       <div class="flex flex-wrap">
         <atomic-product-numeric-field-value
-          class={`truncate break-keep mx-1 ${hasPromotionalPrice && 'text-error'}`}
+          class={`mx-1 truncate break-keep ${hasPromotionalPrice && 'text-error'}`}
           field={hasPromotionalPrice ? 'ec_promo_price' : 'ec_price'}
         >
           <atomic-format-currency currency={currency}></atomic-format-currency>
         </atomic-product-numeric-field-value>
         {hasPromotionalPrice && (
           <atomic-product-numeric-field-value
-            class="truncate break-keep mx-1 text-xl line-through"
+            class="mx-1 truncate break-keep text-xl line-through"
             field="ec_price"
           >
             <atomic-format-currency
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/atomic-product-rating.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/atomic-product-rating.tsx
index 4ddd73385a7..6fe57e25ab4 100644
--- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/atomic-product-rating.tsx
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/atomic-product-rating.tsx
@@ -119,7 +119,7 @@ export class AtomicProductRating
         ></Rating>
 
         {this.ratingDetails !== null && (
-          <span class="pl-1 text-neutral-dark rating-details">
+          <span class="text-neutral-dark rating-details pl-1">
             ({this.ratingDetails})
           </span>
         )}
diff --git a/packages/atomic/src/components/common/atomic-modal/atomic-modal.pcss b/packages/atomic/src/components/common/atomic-modal/atomic-modal.pcss
index ccf13faa23b..d4026b1094e 100644
--- a/packages/atomic/src/components/common/atomic-modal/atomic-modal.pcss
+++ b/packages/atomic/src/components/common/atomic-modal/atomic-modal.pcss
@@ -75,7 +75,7 @@ atomic-focus-trap {
   }
 
   [part='body-wrapper'] {
-    @apply px-6 pt-8 pb-5;
+    @apply px-6 pb-5 pt-8;
   }
 
   [part='footer-wrapper'] {
diff --git a/packages/atomic/src/components/common/atomic-modal/atomic-modal.tsx b/packages/atomic/src/components/common/atomic-modal/atomic-modal.tsx
index dc3d09937e2..2387dbd9f44 100644
--- a/packages/atomic/src/components/common/atomic-modal/atomic-modal.tsx
+++ b/packages/atomic/src/components/common/atomic-modal/atomic-modal.tsx
@@ -140,16 +140,14 @@ export class AtomicModal implements InitializableComponent<AnyBindings> {
     const Content = () => (
       <article
         part="container"
-        class={`flex flex-col justify-between bg-background text-on-background
-          ${this.isOpen ? 'animate-scaleUpModal' : 'animate-slideDownModal'}
-          ${this.wasEverOpened ? '' : 'invisible'}`}
+        class={`bg-background text-on-background flex flex-col justify-between ${this.isOpen ? 'animate-scaleUpModal' : 'animate-slideDownModal'} ${this.wasEverOpened ? '' : 'invisible'}`}
         onAnimationEnd={() => this.animationEnded.emit()}
         ref={(ref) => (this.animatableContainer = ref)}
       >
         <header part="header-wrapper" class="flex flex-col items-center">
           <div
             part="header"
-            class="flex justify-between text-xl w-full max-w-lg"
+            class="flex w-full max-w-lg justify-between text-xl"
             id={this.headerId}
           >
             <slot name="header"></slot>
@@ -158,7 +156,7 @@ export class AtomicModal implements InitializableComponent<AnyBindings> {
         <hr part="header-ruler" class="border-neutral"></hr>
         <div
           part="body-wrapper"
-          class="overflow-auto grow flex flex-col items-center w-full"
+          class="flex w-full grow flex-col items-center overflow-auto"
         >
           <div
             part="body"
@@ -176,7 +174,7 @@ export class AtomicModal implements InitializableComponent<AnyBindings> {
         </div>
         <footer
           part="footer-wrapper"
-          class="border-neutral border-t bg-background z-10 flex flex-col items-center w-full"
+          class="border-neutral bg-background z-10 flex w-full flex-col items-center border-t"
         >
           <div part="footer" class="w-full max-w-lg">
             <slot name="footer"></slot>
@@ -189,10 +187,7 @@ export class AtomicModal implements InitializableComponent<AnyBindings> {
       <Host class={this.getClasses().join(' ')}>
         <div
           part="backdrop"
-          class={`
-            ${this.boundary === 'page' ? 'fixed' : 'absolute'}
-            left-0 top-0 right-0 bottom-0 z-[9999]
-          `}
+          class={` ${this.boundary === 'page' ? 'fixed' : 'absolute'} bottom-0 left-0 right-0 top-0 z-[9999]`}
           onClick={(e) => e.target === e.currentTarget && this.close()}
         >
           <atomic-focus-trap
diff --git a/packages/atomic/src/components/common/atomic-rating/atomic-rating.tsx b/packages/atomic/src/components/common/atomic-rating/atomic-rating.tsx
index 78d7c532430..1e9d7634dfb 100644
--- a/packages/atomic/src/components/common/atomic-rating/atomic-rating.tsx
+++ b/packages/atomic/src/components/common/atomic-rating/atomic-rating.tsx
@@ -53,7 +53,7 @@ export const Rating: FunctionalComponent<RatingProps> = (props) => {
     >
       <div class="z-0 flex gap-0.5">{emptyIconDisplay()}</div>
       <div
-        class="absolute left-0 top-0 z-1 flex gap-0.5 overflow-hidden"
+        class="z-1 absolute left-0 top-0 flex gap-0.5 overflow-hidden"
         style={{width}}
       >
         {filledIconDisplay()}
diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-clear-all.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-clear-all.tsx
index a8bad3ace68..daaa5bd8585 100644
--- a/packages/atomic/src/components/common/breadbox/breadcrumb-clear-all.tsx
+++ b/packages/atomic/src/components/common/breadbox/breadcrumb-clear-all.tsx
@@ -19,7 +19,7 @@ export const BreadcrumbClearAll: FunctionalComponent<
         part="clear"
         style="text-primary"
         text={props.i18n.t('clear')}
-        class="p-2 btn-pill"
+        class="btn-pill p-2"
         ariaLabel={props.i18n.t('clear-all-filters')}
         onClick={props.onClick}
       ></Button>
diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-container.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-container.tsx
index 6569f80242c..fa155fa2c23 100644
--- a/packages/atomic/src/components/common/breadbox/breadcrumb-container.tsx
+++ b/packages/atomic/src/components/common/breadbox/breadcrumb-container.tsx
@@ -10,8 +10,8 @@ export const BreadcrumbContainer: FunctionalComponent<
   BreadcrumbContainerProps
 > = (props, children) => {
   return (
-    <div part="container" class="flex text-sm text-on-background">
-      <span part="label" class="font-bold py-[0.625rem] pl-0 pr-2">
+    <div part="container" class="text-on-background flex text-sm">
+      <span part="label" class="py-[0.625rem] pl-0 pr-2 font-bold">
         {props.i18n.t('with-colon', {
           text: props.i18n.t('filters'),
         })}
@@ -20,7 +20,7 @@ export const BreadcrumbContainer: FunctionalComponent<
         <ul
           part="breadcrumb-list"
           class={`flex gap-1 ${
-            props.isCollapsed ? 'flex-nowrap absolute w-full' : 'flex-wrap'
+            props.isCollapsed ? 'absolute w-full flex-nowrap' : 'flex-wrap'
           }`}
         >
           {children}
diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-content.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-content.tsx
index 3854442bed3..4ed08218677 100644
--- a/packages/atomic/src/components/common/breadbox/breadcrumb-content.tsx
+++ b/packages/atomic/src/components/common/breadbox/breadcrumb-content.tsx
@@ -37,7 +37,7 @@ export const BreadcrumbContent: FunctionalComponent<BreadcrumbContentProps> = (
       </span>
       <atomic-icon
         part="breadcrumb-clear"
-        class="w-2.5 h-2.5 ml-2 mt-px"
+        class="ml-2 mt-px h-2.5 w-2.5"
         icon={CloseIcon}
       ></atomic-icon>
     </Fragment>
diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-show-less.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-show-less.tsx
index 11439c4083d..b122086a5ec 100644
--- a/packages/atomic/src/components/common/breadbox/breadcrumb-show-less.tsx
+++ b/packages/atomic/src/components/common/breadbox/breadcrumb-show-less.tsx
@@ -23,7 +23,7 @@ export const BreadcrumbShowLess: FunctionalComponent<
         part="show-less"
         style="outline-primary"
         text={props.i18n.t('show-less')}
-        class="p-2 btn-pill"
+        class="btn-pill p-2"
         onClick={props.onShowLess}
       ></Button>
     </li>
diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-show-more.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-show-more.tsx
index 2f8232ab60d..667732ffabd 100644
--- a/packages/atomic/src/components/common/breadbox/breadcrumb-show-more.tsx
+++ b/packages/atomic/src/components/common/breadbox/breadcrumb-show-more.tsx
@@ -22,7 +22,7 @@ export const BreadcrumbShowMore: FunctionalComponent<
         ref={props.setRef}
         part="show-more"
         style="outline-primary"
-        class="p-2 btn-pill whitespace-nowrap"
+        class="btn-pill whitespace-nowrap p-2"
         onClick={props.onShowMore}
         ariaLabel={props.i18n.t('show-n-more-filters', {
           value: props.numberOfCollapsedBreadcrumbs,
diff --git a/packages/atomic/src/components/common/carousel.tsx b/packages/atomic/src/components/common/carousel.tsx
index 8ef4240e6c1..75ea99141ee 100644
--- a/packages/atomic/src/components/common/carousel.tsx
+++ b/packages/atomic/src/components/common/carousel.tsx
@@ -53,13 +53,13 @@ export const Carousel: FunctionalComponent<
 
   function renderIndicators() {
     return (
-      <ul part="indicators" class="flex gap-2 justify-center mt-6">
+      <ul part="indicators" class="mt-6 flex justify-center gap-2">
         {Array.from({length: props.numberOfPages}, (_, index) => {
           const isActive = index === props.currentPage % props.numberOfPages;
           return (
             <li
               part={`indicator ${isActive ? 'active-indicator' : ''}`}
-              class={`rounded-md h-1 w-12 ${
+              class={`h-1 w-12 rounded-md ${
                 isActive ? 'bg-primary' : 'bg-neutral'
               } `}
             ></li>
diff --git a/packages/atomic/src/components/common/facets/category-facet/search-value.tsx b/packages/atomic/src/components/common/facets/category-facet/search-value.tsx
index 351d4bfe99d..d98a1e25a8e 100644
--- a/packages/atomic/src/components/common/facets/category-facet/search-value.tsx
+++ b/packages/atomic/src/components/common/facets/category-facet/search-value.tsx
@@ -51,7 +51,7 @@ export const CategoryFacetSearchValue: FunctionalComponent<
       <span class="mr-0.5">{inLabel}</span>,
       ellipsedPath(path).map((value, index) => [
         index > 0 && <span class="mx-0.5">{SEPARATOR}</span>,
-        <span class={value === ELLIPSIS ? '' : 'truncate flex-1 max-w-max'}>
+        <span class={value === ELLIPSIS ? '' : 'max-w-max flex-1 truncate'}>
           {value}
         </span>,
       ]),
@@ -64,10 +64,10 @@ export const CategoryFacetSearchValue: FunctionalComponent<
         style="text-neutral"
         part="search-result"
         onClick={() => onClick()}
-        class="w-full flex flex-col px-2 py-2.5 truncate group no-outline"
+        class="no-outline group flex w-full flex-col truncate px-2 py-2.5"
         aria-label={ariaLabel}
       >
-        <div class="w-full flex">
+        <div class="flex w-full">
           <FacetValueLabelHighlight
             displayValue={value.displayValue}
             isSelected={false}
@@ -81,7 +81,7 @@ export const CategoryFacetSearchValue: FunctionalComponent<
         </div>
         <div
           part="search-result-path"
-          class="flex w-full text-neutral-dark mt-1 group-focus:text-primary group-hover:text-primary"
+          class="text-neutral-dark group-focus:text-primary group-hover:text-primary mt-1 flex w-full"
         >
           {renderPath(localizedPath)}
         </div>
diff --git a/packages/atomic/src/components/common/facets/facet-common.pcss b/packages/atomic/src/components/common/facets/facet-common.pcss
index d35beea6009..983993e0553 100644
--- a/packages/atomic/src/components/common/facets/facet-common.pcss
+++ b/packages/atomic/src/components/common/facets/facet-common.pcss
@@ -1,7 +1,7 @@
 @import '../../../global/global.pcss';
 
 .value-count {
-  @apply ml-1.5 text-neutral-dark;
+  @apply text-neutral-dark ml-1.5;
 
   [part='value-exclude-button'] + & {
     @apply mr-2;
@@ -20,7 +20,7 @@
   }
 
   &::part(values) {
-    @apply max-h-96 overflow-y-auto mt-0;
+    @apply mt-0 max-h-96 overflow-y-auto;
   }
 
   &::part(search-wrapper) {
diff --git a/packages/atomic/src/components/common/facets/facet-container/facet-container.tsx b/packages/atomic/src/components/common/facets/facet-container/facet-container.tsx
index 1f362ac91ce..8ccb68ecf16 100644
--- a/packages/atomic/src/components/common/facets/facet-container/facet-container.tsx
+++ b/packages/atomic/src/components/common/facets/facet-container/facet-container.tsx
@@ -1,7 +1,7 @@
 import {FunctionalComponent, h} from '@stencil/core';
 
 export const FacetContainer: FunctionalComponent = (_, children) => (
-  <div class="bg-background border border-neutral rounded-lg p-4" part="facet">
+  <div class="bg-background border-neutral rounded-lg border p-4" part="facet">
     {children}
   </div>
 );
diff --git a/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx b/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx
index af716a8939b..b1ff09a8730 100644
--- a/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx
+++ b/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx
@@ -95,7 +95,7 @@ export class FacetDateInput {
 
     return (
       <form
-        class="grid gap-2 grid-cols-min-1fr mt-4 px-2"
+        class="grid-cols-min-1fr mt-4 grid gap-2 px-2"
         onSubmit={(e) => {
           e.preventDefault();
           this.apply();
@@ -159,7 +159,7 @@ export class FacetDateInput {
           style="outline-primary"
           type="submit"
           part="input-apply-button"
-          class="p-2.5 col-span-2 truncate"
+          class="col-span-2 truncate p-2.5"
           ariaLabel={applyAria}
           text={apply}
         ></Button>
diff --git a/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx b/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx
index 3eba4e61d97..66c656f86a4 100644
--- a/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx
+++ b/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx
@@ -33,7 +33,7 @@ export const FacetHeader: FunctionalComponent<FacetHeaderProps> = (props) => {
     <Button
       style="text-transparent"
       part="label-button"
-      class="flex font-bold justify-between w-full py-1 px-2 text-lg rounded-none"
+      class="flex w-full justify-between rounded-none px-2 py-1 text-lg font-bold"
       title={props.isCollapsed ? expandFacet : collapseFacet}
       onClick={() => props.onToggleCollapse()}
       ariaExpanded={(!props.isCollapsed).toString()}
@@ -44,7 +44,7 @@ export const FacetHeader: FunctionalComponent<FacetHeaderProps> = (props) => {
       </Heading>
       <atomic-icon
         part="label-button-icon"
-        class="w-3 self-center shrink-0 ml-4"
+        class="ml-4 w-3 shrink-0 self-center"
         icon={props.isCollapsed ? ArrowBottomIcon : ArrowTopIcon}
       ></atomic-icon>
     </Button>,
@@ -52,13 +52,13 @@ export const FacetHeader: FunctionalComponent<FacetHeaderProps> = (props) => {
       <Button
         style="text-primary"
         part="clear-button"
-        class="flex items-baseline max-w-full p-2 text-sm"
+        class="flex max-w-full items-baseline p-2 text-sm"
         ariaLabel={clearFiltersForFacet}
         onClick={() => props.onClearFilters!()}
       >
         <atomic-icon
           part="clear-button-icon"
-          class="w-2 h-2 mr-1"
+          class="mr-1 h-2 w-2"
           icon={CloseIcon}
         ></atomic-icon>
         <span>{clearFilters}</span>
diff --git a/packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx b/packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx
index ac2b888d4a0..15b1de295fc 100644
--- a/packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx
+++ b/packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx
@@ -64,7 +64,7 @@ export class FacetNumberInput {
 
     return (
       <form
-        class="mt-4 px-2 gap-y-0.5"
+        class="mt-4 gap-y-0.5 px-2"
         part="input-form"
         onSubmit={(e) => {
           e.preventDefault();
@@ -122,7 +122,7 @@ export class FacetNumberInput {
           style="outline-primary"
           type="submit"
           part="input-apply-button"
-          class="p-2.5 flex-none truncate"
+          class="flex-none truncate p-2.5"
           ariaLabel={applyAria}
           text={apply}
         ></Button>
diff --git a/packages/atomic/src/components/common/facets/facet-placeholder/facet-placeholder.tsx b/packages/atomic/src/components/common/facets/facet-placeholder/facet-placeholder.tsx
index c52402422a3..3edf702fe76 100644
--- a/packages/atomic/src/components/common/facets/facet-placeholder/facet-placeholder.tsx
+++ b/packages/atomic/src/components/common/facets/facet-placeholder/facet-placeholder.tsx
@@ -13,7 +13,7 @@ export const FacetPlaceholder: FunctionalComponent<FacetPlaceholderProps> = ({
   for (let i = 0; i < numberOfValues; i++) {
     facetValues.push(
       <div
-        class="flex bg-neutral h-5 mt-4"
+        class="bg-neutral mt-4 flex h-5"
         style={{width: '100%', opacity: '0.5'}}
       ></div>
     );
@@ -22,10 +22,10 @@ export const FacetPlaceholder: FunctionalComponent<FacetPlaceholderProps> = ({
   return (
     <div
       part="placeholder"
-      class="bg-background animate-pulse border border-neutral rounded-lg mb-4 p-7"
+      class="bg-background border-neutral mb-4 animate-pulse rounded-lg border p-7"
       aria-hidden="true"
     >
-      <div class="bg-neutral rounded h-8" style={{width: '75%'}}></div>
+      <div class="bg-neutral h-8 rounded" style={{width: '75%'}}></div>
       {!isCollapsed && <div class="mt-7">{facetValues}</div>}
     </div>
   );
diff --git a/packages/atomic/src/components/common/facets/facet-search/facet-search-input.tsx b/packages/atomic/src/components/common/facets/facet-search/facet-search-input.tsx
index 157a71661d6..e037745f547 100644
--- a/packages/atomic/src/components/common/facets/facet-search/facet-search-input.tsx
+++ b/packages/atomic/src/components/common/facets/facet-search/facet-search-input.tsx
@@ -22,11 +22,11 @@ export const FacetSearchInput: FunctionalComponent<FacetSearchInputProps> = (
   let inputRef: HTMLInputElement | undefined;
 
   return (
-    <div class="px-2 mt-3" part="search-wrapper">
+    <div class="mt-3 px-2" part="search-wrapper">
       <div class="relative h-10">
         <input
           part="search-input"
-          class="input-primary w-full h-full px-9 placeholder-neutral-dark text-sm group"
+          class="input-primary placeholder-neutral-dark group h-full w-full px-9 text-sm"
           type="text"
           placeholder={search}
           aria-label={facetSearch}
@@ -34,14 +34,14 @@ export const FacetSearchInput: FunctionalComponent<FacetSearchInputProps> = (
           onInput={(e) => props.onChange((e.target as HTMLInputElement).value)}
           ref={(ref) => (inputRef = ref)}
         />
-        <div class="search-icon pointer-events-none absolute inline-flex justify-center items-center left-0 w-9 h-full text-on-background">
+        <div class="search-icon text-on-background pointer-events-none absolute left-0 inline-flex h-full w-9 items-center justify-center">
           <atomic-icon part="search-icon" icon={SearchIcon}></atomic-icon>
         </div>
         {props.query !== '' && (
           <Button
             style="text-transparent"
             title={clear}
-            class="search-clear-button absolute inline-flex justify-center items-center right-px w-9 top-px bottom-px"
+            class="search-clear-button absolute bottom-px right-px top-px inline-flex w-9 items-center justify-center"
             onClick={() => {
               props.onClear();
               inputRef!.focus();
diff --git a/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx b/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx
index 5766f63e4ed..9a71526569f 100644
--- a/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx
+++ b/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx
@@ -42,7 +42,7 @@ export const FacetSearchMatches: FunctionalComponent<
       <div class="px-2">
         <div
           part="no-matches"
-          class="truncate p-3 bg-neutral-light text-neutral-dark text-sm rounded"
+          class="bg-neutral-light text-neutral-dark truncate rounded p-3 text-sm"
           innerHTML={matchesFound(
             'no-matches-found-for',
             props.query,
@@ -75,7 +75,7 @@ export const FacetSearchMatches: FunctionalComponent<
       <div class="px-2">
         <div
           part="more-matches"
-          class="truncate mt-3 text-neutral-dark text-sm"
+          class="text-neutral-dark mt-3 truncate text-sm"
           innerHTML={matchesFound('more-matches-for', props.query, props.i18n)}
         ></div>
       </div>
diff --git a/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.pcss b/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.pcss
index 6a896e0132e..5e627e8c8f8 100644
--- a/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.pcss
+++ b/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.pcss
@@ -10,7 +10,7 @@
 
 .value-box .value-label,
 .value-box-count {
-  @apply w-full block;
+  @apply block w-full;
 }
 
 .value-box.selected {
diff --git a/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.tsx b/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.tsx
index 5b164c96828..537c1ccf229 100644
--- a/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.tsx
+++ b/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.tsx
@@ -23,7 +23,7 @@ export const FacetValueBox: FunctionalComponent<FacetValueProps> = (
         style="outline-bg-neutral"
         part={`value-box${props.isSelected ? ' value-box-selected' : ''}`}
         onClick={() => props.onClick()}
-        class={`value-box box-border w-full h-full items-center p-2 group ${
+        class={`value-box group box-border h-full w-full items-center p-2 ${
           props.isSelected ? 'selected' : ''
         }`}
         ariaPressed={props.isSelected.toString()}
@@ -34,7 +34,7 @@ export const FacetValueBox: FunctionalComponent<FacetValueProps> = (
         <span
           title={count}
           part="value-count"
-          class="value-box-count text-neutral-dark truncate w-full text-sm mt-1"
+          class="value-box-count text-neutral-dark mt-1 w-full truncate text-sm"
         >
           {props.i18n.t('between-parentheses', {
             text: compactCount,
diff --git a/packages/atomic/src/components/common/facets/facet-value-checkbox/facet-value-checkbox.pcss b/packages/atomic/src/components/common/facets/facet-value-checkbox/facet-value-checkbox.pcss
index c2a6c498e5a..7a05e527555 100644
--- a/packages/atomic/src/components/common/facets/facet-value-checkbox/facet-value-checkbox.pcss
+++ b/packages/atomic/src/components/common/facets/facet-value-checkbox/facet-value-checkbox.pcss
@@ -5,11 +5,11 @@
   width: var(--atomic-facet-checkbox-size, 1rem);
   height: var(--atomic-facet-checkbox-size, 1rem);
 
-  @apply absolute z-1 left-2;
+  @apply z-1 absolute left-2;
 }
 
 .value-checkbox + label {
-  @apply w-full flex flex-row pl-8 pr-2 py-2.5 text-on-background cursor-pointer truncate hover:bg-neutral-light;
+  @apply text-on-background hover:bg-neutral-light flex w-full cursor-pointer flex-row truncate py-2.5 pl-8 pr-2;
 }
 
 .value-checkbox.selected:focus-visible + label .value-label,
diff --git a/packages/atomic/src/components/common/facets/facet-value-exclude/facet-value-exclude.tsx b/packages/atomic/src/components/common/facets/facet-value-exclude/facet-value-exclude.tsx
index d0fff62921b..6bf6f539288 100644
--- a/packages/atomic/src/components/common/facets/facet-value-exclude/facet-value-exclude.tsx
+++ b/packages/atomic/src/components/common/facets/facet-value-exclude/facet-value-exclude.tsx
@@ -40,7 +40,7 @@ export const FacetValueExclude: FunctionalComponent<ExcludeProps> = (props) => {
     >
       <atomic-icon
         class={
-          'w-4 p-1 rounded bg-neutral order-last hover:bg-error hover:fill-white invisible group-hover:visible'
+          'bg-neutral hover:bg-error invisible order-last w-4 rounded p-1 hover:fill-white group-hover:visible'
         }
         icon={Tick}
       ></atomic-icon>
diff --git a/packages/atomic/src/components/common/facets/facet-value-label-highlight/facet-value-label-highlight.tsx b/packages/atomic/src/components/common/facets/facet-value-label-highlight/facet-value-label-highlight.tsx
index 9ad465b1cbe..c71ef062318 100644
--- a/packages/atomic/src/components/common/facets/facet-value-label-highlight/facet-value-label-highlight.tsx
+++ b/packages/atomic/src/components/common/facets/facet-value-label-highlight/facet-value-label-highlight.tsx
@@ -16,7 +16,7 @@ export const FacetValueLabelHighlight: FunctionalComponent<
     <span
       title={props.displayValue}
       part="value-label"
-      class={`value-label truncate peer-hover:text-error ${
+      class={`value-label peer-hover:text-error truncate ${
         props.isSelected || !!props.isExcluded ? 'font-bold' : ''
       }`}
       innerHTML={highlightSearchResult(props.displayValue, props.searchQuery)}
diff --git a/packages/atomic/src/components/common/facets/facet-value-link/facet-value-link.tsx b/packages/atomic/src/components/common/facets/facet-value-link/facet-value-link.tsx
index 010430a4a94..31c8f79f09c 100644
--- a/packages/atomic/src/components/common/facets/facet-value-link/facet-value-link.tsx
+++ b/packages/atomic/src/components/common/facets/facet-value-link/facet-value-link.tsx
@@ -30,7 +30,7 @@ export const FacetValueLink: FunctionalComponent<FacetValueLinkProps> = (
         style="text-neutral"
         part={part}
         onClick={() => props.onClick()}
-        class="group w-full flex items-center px-2 py-2.5 text-left truncate no-outline"
+        class="no-outline group flex w-full items-center truncate px-2 py-2.5 text-left"
         ariaPressed={props.isSelected.toString()}
         ariaLabel={ariaLabel}
         ref={props.buttonRef}
diff --git a/packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.tsx b/packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.tsx
index 519650cb1bf..a234b80c742 100644
--- a/packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.tsx
+++ b/packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.tsx
@@ -117,16 +117,16 @@ export class AtomicCitation {
     return (
       <div
         part="citation-popover"
-        class={`rounded-md border border-neutral p-4 shadow z-10 bg-background ${
+        class={`border-neutral bg-background z-10 rounded-md border p-4 shadow ${
           this.isOpen ? 'desktop-only:flex' : 'hidden'
-        } flex-col gap-3 mobile-only:hidden`}
+        } mobile-only:hidden flex-col gap-3`}
         ref={(el) => (this.popupRef = el!)}
         role="dialog"
       >
-        <div class="truncate text-neutral-dark text-sm">
+        <div class="text-neutral-dark truncate text-sm">
           {this.citation.uri}
         </div>
-        <Heading level={0} class="font-bold text-md">
+        <Heading level={0} class="text-md font-bold">
           {this.citation.title}
         </Heading>
         <p class="text-on-background text-sm">{this.getTruncatedText()}</p>
@@ -144,7 +144,7 @@ export class AtomicCitation {
           target="_blank"
           rel="noopener"
           aria-haspopup="dialog"
-          className="flex items-center p-1 bg-background btn-outline-primary border rounded-full border-neutral text-on-background"
+          className="bg-background btn-outline-primary border-neutral text-on-background flex items-center rounded-full border p-1"
           onSelect={() => this.interactiveCitation.select()}
           onBeginDelayedSelect={() =>
             this.interactiveCitation.beginDelayedSelect()
@@ -160,11 +160,11 @@ export class AtomicCitation {
         >
           <div
             part="citation-index"
-            class="rounded-full font-medium flex items-center text-bg-primary shrink-0"
+            class="text-bg-primary flex shrink-0 items-center rounded-full font-medium"
           >
             <div class="mx-auto">{this.index + 1}</div>
           </div>
-          <span class="citation-title truncate mx-1">
+          <span class="citation-title mx-1 truncate">
             {this.citation.title}
           </span>
         </LinkWithItemAnalytics>
diff --git a/packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx b/packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx
index 7c0f5fc6519..f7ba34d0d7a 100644
--- a/packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx
+++ b/packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx
@@ -172,11 +172,11 @@ export class AtomicGeneratedAnswerFeedbackModal
       <div
         slot="header"
         part="modal-header"
-        class="w-full flex justify-between items-center"
+        class="flex w-full items-center justify-between"
       >
         <h1>
           <span>{this.bindings.i18n.t('feedback-modal-title')}</span>
-          <span class="ml-0.5 hide">
+          <span class="hide ml-0.5">
             {this.bindings.i18n.t('additional-feedback')}
           </span>
         </h1>
@@ -263,7 +263,7 @@ export class AtomicGeneratedAnswerFeedbackModal
           ({localeKey, correspondingAnswer}) => (
             <FieldsetGroup label={this.bindings.i18n.t(localeKey)}>
               <div
-                class={`answer-evaluation flex items-center justify-between mt-3 ${String(correspondingAnswer)}`}
+                class={`answer-evaluation mt-3 flex items-center justify-between ${String(correspondingAnswer)}`}
                 key={String(correspondingAnswer)}
               >
                 {this.renderAnswerEvaluation(localeKey, correspondingAnswer)}
@@ -293,7 +293,7 @@ export class AtomicGeneratedAnswerFeedbackModal
           type="text"
           ref={(linkInputRef) => (this.linkInputRef = linkInputRef)}
           placeholder="https://URL"
-          class="input-primary mt-4 w-full h-9 rounded-md px-4 placeholder-neutral-dark"
+          class="input-primary placeholder-neutral-dark mt-4 h-9 w-full rounded-md px-4"
           onChange={(e) =>
             this.setCurrentAnswer(
               'documentUrl',
@@ -314,7 +314,7 @@ export class AtomicGeneratedAnswerFeedbackModal
         <textarea
           name="answer-details"
           ref={(detailsInput) => (this.detailsInputRef = detailsInput)}
-          class="mt-4 px-4 py-2 w-full placeholder-neutral-dark leading-5 border border-neutral resize-none rounded-md hover:border-primary-light focus-visible:border-primary focus:outline-none focus-visible:ring-2 "
+          class="placeholder-neutral-dark border-neutral hover:border-primary-light focus-visible:border-primary mt-4 w-full resize-none rounded-md border px-4 py-2 leading-5 focus:outline-none focus-visible:ring-2"
           rows={4}
           placeholder={this.bindings.i18n.t('add-notes')}
           onChange={(e) =>
@@ -346,7 +346,7 @@ export class AtomicGeneratedAnswerFeedbackModal
 
   private renderSuccessMessage() {
     return (
-      <div slot="body" class="flex flex-col items-center gap-4 my-4">
+      <div slot="body" class="my-4 flex flex-col items-center gap-4">
         <atomic-icon icon={Success} class="w-48" />
         <p class="text-base">
           {this.bindings.i18n.t('generated-answer-feedback-success')}
@@ -370,7 +370,7 @@ export class AtomicGeneratedAnswerFeedbackModal
     return (
       <div slot="footer" part="modal-footer">
         <div class="flex items-center justify-between">
-          <div class="text-base required-label">
+          <div class="required-label text-base">
             <span class="text-error mr-0.5">*</span>
             {this.bindings.i18n.t('required-fields')}
           </div>
@@ -408,7 +408,7 @@ export class AtomicGeneratedAnswerFeedbackModal
             part="cancel-button"
             style="primary"
             onClick={() => this.close()}
-            class="flex justify-center text-sm leading-4 p-2"
+            class="flex justify-center p-2 text-sm leading-4"
             ariaLabel={this.bindings.i18n.t('modal-done')}
           >
             {this.bindings.i18n.t('modal-done')}
diff --git a/packages/atomic/src/components/common/generated-answer/copy-button.tsx b/packages/atomic/src/components/common/generated-answer/copy-button.tsx
index 0ee04e94fba..df3736b610d 100644
--- a/packages/atomic/src/components/common/generated-answer/copy-button.tsx
+++ b/packages/atomic/src/components/common/generated-answer/copy-button.tsx
@@ -15,7 +15,7 @@ export const CopyButton: FunctionalComponent<CopyButtonProps> = (props) => {
       title={props.title}
       part="copy-button"
       style={'text-transparent'}
-      class={`p-2 rounded-md ${props.isCopied ? 'copied' : ''} ${
+      class={`rounded-md p-2 ${props.isCopied ? 'copied' : ''} ${
         props.error ? 'error' : ''
       }`}
       onClick={props.onClick}
diff --git a/packages/atomic/src/components/common/generated-answer/feedback-button.tsx b/packages/atomic/src/components/common/generated-answer/feedback-button.tsx
index ee4dc36a9bc..a2dfd1b8048 100644
--- a/packages/atomic/src/components/common/generated-answer/feedback-button.tsx
+++ b/packages/atomic/src/components/common/generated-answer/feedback-button.tsx
@@ -19,7 +19,7 @@ export const FeedbackButton: FunctionalComponent<FeedbackButtonProps> = (
       title={props.title}
       style="text-transparent"
       part="feedback-button"
-      class={`feedback-button p-2 rounded-md ${props.variant} ${
+      class={`feedback-button rounded-md p-2 ${props.variant} ${
         props.active ? 'active' : ''
       }`}
       onClick={props.onClick}
diff --git a/packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx b/packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx
index 5ab5b3b69a8..fb27866d6d0 100644
--- a/packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx
+++ b/packages/atomic/src/components/common/generated-answer/generated-answer-common.tsx
@@ -376,7 +376,7 @@ export class GeneratedAnswerCommon {
     return (
       <div
         part="is-generating"
-        class="hidden text-primary font-light text-base"
+        class="text-primary hidden text-base font-light"
       >
         {i18n.t('generating-answer')}...
       </div>
@@ -396,11 +396,11 @@ export class GeneratedAnswerCommon {
           <Heading
             level={0}
             part="header-label"
-            class="text-bg-primary font-medium inline-block rounded-md py-2 px-2.5"
+            class="text-bg-primary inline-block rounded-md px-2.5 py-2 font-medium"
           >
             {i18n.t('generated-answer-title')}
           </Heading>
-          <div class="flex h-9 items-center ml-auto">
+          <div class="ml-auto flex h-9 items-center">
             <Switch
               part="toggle"
               checked={this.isAnswerVisible}
@@ -442,7 +442,7 @@ export class GeneratedAnswerCommon {
         ) : null}
 
         {!this.hasRetryableError && this.isAnswerVisible && (
-          <div part="generated-answer-footer" class="flex justify-end mt-6">
+          <div part="generated-answer-footer" class="mt-6 flex justify-end">
             {this.renderGeneratingAnswerLabel()}
             {this.renderShowButton()}
             {this.renderDisclaimer()}
diff --git a/packages/atomic/src/components/common/generated-answer/generated-content/generated-markdown-content.pcss b/packages/atomic/src/components/common/generated-answer/generated-content/generated-markdown-content.pcss
index 6c340439e34..f7ee6f2a1e4 100644
--- a/packages/atomic/src/components/common/generated-answer/generated-content/generated-markdown-content.pcss
+++ b/packages/atomic/src/components/common/generated-answer/generated-content/generated-markdown-content.pcss
@@ -20,7 +20,7 @@
   [part='answer-heading-4'],
   [part='answer-heading-5'],
   [part='answer-heading-6'] {
-    @apply mt-4 mb-2;
+    @apply mb-2 mt-4;
     font-weight: var(--atomic-font-bold);
   }
 
@@ -41,15 +41,15 @@
   }
 
   [part='answer-ordered-list'] {
-    @apply list-decimal ps-8 mb-2;
+    @apply mb-2 list-decimal ps-8;
   }
 
   [part='answer-unordered-list'] {
-    @apply list-disc ps-8 mb-2;
+    @apply mb-2 list-disc ps-8;
   }
 
   [part='answer-inline-code'] {
-    @apply px-1 py-0.5 border border-solid;
+    @apply border border-solid px-1 py-0.5;
     color: var(--atomic-inline-code);
     font-size: var(--atomic-text-sm);
     background-color: var(--atomic-neutral-light);
@@ -58,7 +58,7 @@
   }
 
   [part='answer-code-block'] {
-    @apply border border-solid p-2 my-4 overflow-auto max-h-96;
+    @apply my-4 max-h-96 overflow-auto border border-solid p-2;
     background-color: var(--atomic-neutral-light);
     border-color: var(--atomic-neutral);
     border-radius: var(--atomic-border-radius-md);
@@ -73,12 +73,12 @@
   }
 
   [part='answer-table-container'] {
-    @apply mb-6 inline-block border border-solid overflow-auto max-h-96;
+    @apply mb-6 inline-block max-h-96 overflow-auto border border-solid;
     border-color: var(--atomic-neutral-dim);
     border-radius: var(--atomic-border-radius-md);
 
     [part='answer-table-header'] {
-      @apply top-0 sticky;
+      @apply sticky top-0;
     }
   }
 
diff --git a/packages/atomic/src/components/common/generated-answer/generated-content/generated-markdown-content.tsx b/packages/atomic/src/components/common/generated-answer/generated-content/generated-markdown-content.tsx
index 02e31a55fda..4fb1eb7d0ae 100644
--- a/packages/atomic/src/components/common/generated-answer/generated-content/generated-markdown-content.tsx
+++ b/packages/atomic/src/components/common/generated-answer/generated-content/generated-markdown-content.tsx
@@ -18,7 +18,7 @@ export const GeneratedMarkdownContent: FunctionalComponent<
   return (
     <div
       part="generated-text"
-      class={`mb-0 text-on-background ${props.isStreaming ? 'cursor' : ''}`}
+      class={`text-on-background mb-0 ${props.isStreaming ? 'cursor' : ''}`}
       innerHTML={answerAsHtml}
     />
   );
diff --git a/packages/atomic/src/components/common/generated-answer/generated-content/generated-text-content.tsx b/packages/atomic/src/components/common/generated-answer/generated-content/generated-text-content.tsx
index 0cc54d73aea..e714232e249 100644
--- a/packages/atomic/src/components/common/generated-answer/generated-content/generated-text-content.tsx
+++ b/packages/atomic/src/components/common/generated-answer/generated-content/generated-text-content.tsx
@@ -11,7 +11,7 @@ export const GeneratedTextContent: FunctionalComponent<
   return (
     <p
       part="generated-text"
-      class={`mb-0 text-on-background whitespace-pre-wrap ${
+      class={`text-on-background mb-0 whitespace-pre-wrap ${
         props.isStreaming ? 'cursor' : ''
       }`}
     >
diff --git a/packages/atomic/src/components/common/generated-answer/rephrase-buttons.tsx b/packages/atomic/src/components/common/generated-answer/rephrase-buttons.tsx
index e96bc783577..78c334433f7 100644
--- a/packages/atomic/src/components/common/generated-answer/rephrase-buttons.tsx
+++ b/packages/atomic/src/components/common/generated-answer/rephrase-buttons.tsx
@@ -53,12 +53,12 @@ export const RephraseButtons: FunctionalComponent<RephraseButtonProps> = (
   const {i18n} = props;
   return (
     <div part="rephrase-buttons" class="shrink-0">
-      <p part="rephrase-label" class="mb-2 text-neutral-dark shrink-0">
+      <p part="rephrase-label" class="text-neutral-dark mb-2 shrink-0">
         {i18n.t('rephrase')}
       </p>
       <div
         part="rephrase-buttons-container"
-        class="flex flex-wrap gap-2 ml-auto border border-solid rounded-md p-1"
+        class="ml-auto flex flex-wrap gap-2 rounded-md border border-solid p-1"
       >
         {options.map((option) => {
           const isActive = props.answerStyle === option.value;
@@ -73,12 +73,12 @@ export const RephraseButtons: FunctionalComponent<RephraseButtonProps> = (
               }}
               ariaPressed={String(isActive)}
             >
-              <div class="icon-container text-neutral-dark h-full mx-auto shrink-0 relative">
+              <div class="icon-container text-neutral-dark relative mx-auto h-full shrink-0">
                 <atomic-icon icon={option.icon}></atomic-icon>
               </div>
               <div
                 part="rephrase-button-label"
-                class="hidden text-neutral-dark"
+                class="text-neutral-dark hidden"
               >
                 {i18n.t(option.titleKey)}
               </div>
diff --git a/packages/atomic/src/components/common/generated-answer/retry-prompt.tsx b/packages/atomic/src/components/common/generated-answer/retry-prompt.tsx
index a84ece5817d..27e4998059f 100644
--- a/packages/atomic/src/components/common/generated-answer/retry-prompt.tsx
+++ b/packages/atomic/src/components/common/generated-answer/retry-prompt.tsx
@@ -9,9 +9,9 @@ interface RetryPromptProps {
 
 export const RetryPrompt: FunctionalComponent<RetryPromptProps> = (props) => (
   <div part="retry-container" class="mt-4">
-    <div class="mx-auto text-center text-neutral-dark">{props.message}</div>
+    <div class="text-neutral-dark mx-auto text-center">{props.message}</div>
     <Button
-      class="block px-4 py-2 mt-4 mx-auto"
+      class="mx-auto mt-4 block px-4 py-2"
       style="outline-primary"
       onClick={props.onClick}
     >
diff --git a/packages/atomic/src/components/common/generated-answer/show-button.tsx b/packages/atomic/src/components/common/generated-answer/show-button.tsx
index 2657c2e3343..3533cf21ae4 100644
--- a/packages/atomic/src/components/common/generated-answer/show-button.tsx
+++ b/packages/atomic/src/components/common/generated-answer/show-button.tsx
@@ -17,14 +17,14 @@ export const ShowButton: FunctionalComponent<ShowButtonProps> = (props) => (
     class="hidden items-center hover:bg-transparent"
     onClick={() => props.onClick()}
   >
-    <div class="font-light text-base">
+    <div class="text-base font-light">
       {props.isCollapsed
         ? props.i18n.t('show-more')
         : props.i18n.t('show-less')}
     </div>
     <atomic-icon
       part="answer-show-icon"
-      class="w-3.5 ml-2"
+      class="ml-2 w-3.5"
       icon={props.isCollapsed ? ArrowBottomIcon : ArrowTopIcon}
     ></atomic-icon>
   </Button>
diff --git a/packages/atomic/src/components/common/generated-answer/source-citations.tsx b/packages/atomic/src/components/common/generated-answer/source-citations.tsx
index 9a4c6095001..3e3db3ebd03 100644
--- a/packages/atomic/src/components/common/generated-answer/source-citations.tsx
+++ b/packages/atomic/src/components/common/generated-answer/source-citations.tsx
@@ -11,10 +11,10 @@ export const SourceCitations: FunctionalComponent<SourceCitationsProps> = (
 ) =>
   props.isVisible ? (
     <div class="source-citations">
-      <p part="citations-label" class="mb-2 text-neutral-dark shrink-0">
+      <p part="citations-label" class="text-neutral-dark mb-2 shrink-0">
         {props.label}
       </p>
-      <ol class="list-none citations-container gap-2 flex items-center flex-wrap">
+      <ol class="citations-container flex list-none flex-wrap items-center gap-2">
         {children}
       </ol>
     </div>
diff --git a/packages/atomic/src/components/common/generated-answer/styles/generated-answer.pcss b/packages/atomic/src/components/common/generated-answer/styles/generated-answer.pcss
index b4f94c4bfd3..0b51927fa4c 100644
--- a/packages/atomic/src/components/common/generated-answer/styles/generated-answer.pcss
+++ b/packages/atomic/src/components/common/generated-answer/styles/generated-answer.pcss
@@ -43,7 +43,7 @@
   }
 
   .feedback-buttons {
-    @apply relative top-0 right-0;
+    @apply relative right-0 top-0;
   }
 }
 
@@ -97,14 +97,14 @@
 
 [part='generated-container'] {
   &.answer-collapsed {
-    @apply max-h-64 overflow-hidden relative content-[''];
+    @apply relative max-h-64 overflow-hidden content-[''];
 
     .feedback-buttons {
       @apply hidden;
     }
   }
   &.answer-collapsed:before {
-    @apply h-full w-full absolute top-0 left-0 content-[''];
+    @apply absolute left-0 top-0 h-full w-full content-[''];
     background: linear-gradient(transparent 11.25rem, var(--atomic-background));
   }
 }
diff --git a/packages/atomic/src/components/common/iconButton.tsx b/packages/atomic/src/components/common/iconButton.tsx
index 628db5ef34c..af599260c56 100644
--- a/packages/atomic/src/components/common/iconButton.tsx
+++ b/packages/atomic/src/components/common/iconButton.tsx
@@ -13,20 +13,20 @@ export const IconButton: FunctionalComponent<IconButtonProps> = (props) => {
     <div class="relative" part={`${props.partPrefix}-container`}>
       <Button
         {...props}
-        class="p-3 relative w-[2.6rem] h-[2.6rem]"
+        class="relative h-[2.6rem] w-[2.6rem] p-3"
         part={`${props.partPrefix}-button`}
         ref={props.buttonRef}
       >
         <atomic-icon
           icon={props.icon}
-          class="w-4 h-4 shrink-0"
+          class="h-4 w-4 shrink-0"
           part={`${props.partPrefix}-icon`}
         ></atomic-icon>
       </Button>
       {props.badge && (
         <span
           part={`${props.partPrefix}-badge`}
-          class="absolute block h-4 w-4 text-center bg-primary text-on-primary rounded-[100%] text-xs leading-4 -top-2 -right-2"
+          class="bg-primary text-on-primary absolute -right-2 -top-2 block h-4 w-4 rounded-[100%] text-center text-xs leading-4"
         >
           {props.badge}
         </span>
diff --git a/packages/atomic/src/components/common/image-carousel/image-carousel-indicators.tsx b/packages/atomic/src/components/common/image-carousel/image-carousel-indicators.tsx
index f476cbcf2e4..01e8fc4d855 100644
--- a/packages/atomic/src/components/common/image-carousel/image-carousel-indicators.tsx
+++ b/packages/atomic/src/components/common/image-carousel/image-carousel-indicators.tsx
@@ -17,7 +17,7 @@ const CarouselIndicator: FunctionalComponent<CarouselIndicatorProps> = ({
   return (
     <ul
       part="indicators"
-      class="mb-1 absolute flex items-center justify-center gap-2 mt-6 bottom-2 max-w-[80%]"
+      class="absolute bottom-2 mb-1 mt-6 flex max-w-[80%] items-center justify-center gap-2"
     >
       {Array.from({length: numberOfImages}, (_, index) => {
         const isActive = index === currentImage % numberOfImages;
@@ -44,12 +44,12 @@ const CarouselIndicator: FunctionalComponent<CarouselIndicatorProps> = ({
         return (
           <li
             part={`indicator ${isActive ? 'active-indicator' : ''}`}
-            class={`rounded-md shadow cursor-pointer hover:bg-primary-light transition-all duration-200 ease-in-out ${
+            class={`hover:bg-primary-light cursor-pointer rounded-md shadow transition-all duration-200 ease-in-out ${
               isActive ? 'bg-primary' : 'bg-neutral'
-            } ${isLastDisplayed || isFirstDisplayed ? 'w-1 h-1 mobile-only:w-2 mobile-only:h-2 transform scale-75' : 'h-2 w-2 mobile-only:w-3 mobile-only:h-3 transform scale-100'} ${
+            } ${isLastDisplayed || isFirstDisplayed ? 'mobile-only:w-2 mobile-only:h-2 h-1 w-1 scale-75 transform' : 'mobile-only:w-3 mobile-only:h-3 h-2 w-2 scale-100 transform'} ${
               shouldDisplay
-                ? 'opacity-80 pointer-events-auto'
-                : 'opacity-0 pointer-events-none hidden'
+                ? 'pointer-events-auto opacity-80'
+                : 'pointer-events-none hidden opacity-0'
             }`}
             onClick={() => navigateToImage(index)}
           ></li>
diff --git a/packages/atomic/src/components/common/image-carousel/image-carousel.tsx b/packages/atomic/src/components/common/image-carousel/image-carousel.tsx
index 1ed3f6395af..06f4063d248 100644
--- a/packages/atomic/src/components/common/image-carousel/image-carousel.tsx
+++ b/packages/atomic/src/components/common/image-carousel/image-carousel.tsx
@@ -63,7 +63,7 @@ export const ImageCarousel: FunctionalComponent<
   }
   return (
     <Fragment>
-      <div class="relative flex items-center justify-center w-full min-w-full">
+      <div class="relative flex w-full min-w-full items-center justify-center">
         {renderPreviousButton()}
         {children}
         {renderNextButton()}
diff --git a/packages/atomic/src/components/common/items-per-page/label.tsx b/packages/atomic/src/components/common/items-per-page/label.tsx
index 8c0aae12960..71f4f190619 100644
--- a/packages/atomic/src/components/common/items-per-page/label.tsx
+++ b/packages/atomic/src/components/common/items-per-page/label.tsx
@@ -4,7 +4,7 @@ export const Label: FunctionalComponent = (_, children) => {
   return (
     <span
       part="label"
-      class="self-start text-on-background text-lg mr-3 leading-10"
+      class="text-on-background mr-3 self-start text-lg leading-10"
       aria-hidden="true"
     >
       {children}
diff --git a/packages/atomic/src/components/common/load-more/button.tsx b/packages/atomic/src/components/common/load-more/button.tsx
index 8b5542c0537..7c1699f80db 100644
--- a/packages/atomic/src/components/common/load-more/button.tsx
+++ b/packages/atomic/src/components/common/load-more/button.tsx
@@ -23,7 +23,7 @@ export const LoadMoreButton: FunctionalComponent<LoadMoreButtonProps> = ({
       style="primary"
       text={i18n.t(label || 'load-more-results')}
       part="load-more-results-button"
-      class="font-bold my-2 p-3"
+      class="my-2 p-3 font-bold"
       onClick={() => onClick()}
     ></Button>
   );
diff --git a/packages/atomic/src/components/common/load-more/progress-bar.tsx b/packages/atomic/src/components/common/load-more/progress-bar.tsx
index e3ea3d13993..f78c3be6342 100644
--- a/packages/atomic/src/components/common/load-more/progress-bar.tsx
+++ b/packages/atomic/src/components/common/load-more/progress-bar.tsx
@@ -11,9 +11,9 @@ export const LoadMoreProgressBar: FunctionalComponent<
   const percentage = (from / to) * 100;
   const width = `${Math.ceil(percentage)}%`;
   return (
-    <div part="progress-bar" class="relative w-72 h-1 my-2 rounded bg-neutral">
+    <div part="progress-bar" class="bg-neutral relative my-2 h-1 w-72 rounded">
       <div
-        class="progress-bar absolute h-full left-0 top-0 z-1 overflow-hidden rounded bg-gradient-to-r"
+        class="progress-bar z-1 absolute left-0 top-0 h-full overflow-hidden rounded bg-gradient-to-r"
         style={{width}}
       ></div>
     </div>
diff --git a/packages/atomic/src/components/common/load-more/summary.tsx b/packages/atomic/src/components/common/load-more/summary.tsx
index c1748206514..69eb18bc2b0 100644
--- a/packages/atomic/src/components/common/load-more/summary.tsx
+++ b/packages/atomic/src/components/common/load-more/summary.tsx
@@ -27,7 +27,7 @@ export const LoadMoreSummary: FunctionalComponent<LoadMoreSummaryProps> = ({
 
   return (
     <div
-      class="my-2 text-lg text-neutral-dark"
+      class="text-neutral-dark my-2 text-lg"
       part="showing-results"
       innerHTML={content}
     ></div>
diff --git a/packages/atomic/src/components/common/no-items/cancel.tsx b/packages/atomic/src/components/common/no-items/cancel.tsx
index 7be7c66d953..386e1f26f83 100644
--- a/packages/atomic/src/components/common/no-items/cancel.tsx
+++ b/packages/atomic/src/components/common/no-items/cancel.tsx
@@ -13,7 +13,7 @@ export const Cancel: FunctionalComponent<CancelProps> = ({i18n, onClick}) => {
       part="cancel-button"
       text={i18n.t('cancel-last-action')}
       onClick={() => onClick()}
-      class="font-bold px-2.5 py-3 my-3"
+      class="my-3 px-2.5 py-3 font-bold"
     ></Button>
   );
 };
diff --git a/packages/atomic/src/components/common/no-items/container.tsx b/packages/atomic/src/components/common/no-items/container.tsx
index 6943606e1db..c9d89f631a3 100644
--- a/packages/atomic/src/components/common/no-items/container.tsx
+++ b/packages/atomic/src/components/common/no-items/container.tsx
@@ -2,7 +2,7 @@ import {FunctionalComponent, h} from '@stencil/core';
 import _ from 'lodash';
 
 export const NoItemsContainer: FunctionalComponent = (_, children) => [
-  <div class="flex flex-col items-center h-full w-full text-on-background">
+  <div class="text-on-background flex h-full w-full flex-col items-center">
     {children}
   </div>,
   <slot></slot>,
diff --git a/packages/atomic/src/components/common/no-items/magnifying-glass.tsx b/packages/atomic/src/components/common/no-items/magnifying-glass.tsx
index 43534e0f4aa..c1672501e8c 100644
--- a/packages/atomic/src/components/common/no-items/magnifying-glass.tsx
+++ b/packages/atomic/src/components/common/no-items/magnifying-glass.tsx
@@ -5,6 +5,6 @@ export const MagnifyingGlass: FunctionalComponent = () => (
   <atomic-icon
     part="icon"
     icon={MagnifyingGlassIcon}
-    class="my-6 flex flex-col items-center w-1/2 max-w-lg"
+    class="my-6 flex w-1/2 max-w-lg flex-col items-center"
   ></atomic-icon>
 );
diff --git a/packages/atomic/src/components/common/no-items/no-items.tsx b/packages/atomic/src/components/common/no-items/no-items.tsx
index 6fbd2001d2d..395be1115b4 100644
--- a/packages/atomic/src/components/common/no-items/no-items.tsx
+++ b/packages/atomic/src/components/common/no-items/no-items.tsx
@@ -14,7 +14,7 @@ export const NoItems: FunctionalComponent<NoItemsProps> = ({i18n, query}) => {
       params={{
         query: (
           <span
-            class="font-bold truncate inline-block align-bottom max-w-full whitespace-normal"
+            class="inline-block max-w-full truncate whitespace-normal align-bottom font-bold"
             part="highlight"
           >
             <LocalizedString
@@ -31,7 +31,7 @@ export const NoItems: FunctionalComponent<NoItemsProps> = ({i18n, query}) => {
   );
   return (
     <div
-      class="my-2 text-2xl font-medium max-w-full text-center"
+      class="my-2 max-w-full text-center text-2xl font-medium"
       part="no-results"
     >
       {content}
diff --git a/packages/atomic/src/components/common/no-items/tips.tsx b/packages/atomic/src/components/common/no-items/tips.tsx
index 6b991d9f59a..3b80352a124 100644
--- a/packages/atomic/src/components/common/no-items/tips.tsx
+++ b/packages/atomic/src/components/common/no-items/tips.tsx
@@ -6,7 +6,7 @@ interface SearchTipsProps {
 }
 export const SearchTips: FunctionalComponent<SearchTipsProps> = ({i18n}) => {
   return (
-    <div class="my-2 text-lg text-neutral-dark text-center" part="search-tips">
+    <div class="text-neutral-dark my-2 text-center text-lg" part="search-tips">
       {i18n.t('search-tips')}
     </div>
   );
diff --git a/packages/atomic/src/components/common/pager/pager-buttons.tsx b/packages/atomic/src/components/common/pager/pager-buttons.tsx
index e417609b8e0..6dab16cdc2e 100644
--- a/packages/atomic/src/components/common/pager/pager-buttons.tsx
+++ b/packages/atomic/src/components/common/pager/pager-buttons.tsx
@@ -32,7 +32,7 @@ export const PagerPreviousButton: FunctionalComponent<
       ariaLabel={props.i18n.t('previous')}
       style="outline-primary"
       part="previous-button"
-      class="p-1 min-w-[2.5rem] min-h-[2.5rem] flex justify-center items-center"
+      class="flex min-h-[2.5rem] min-w-[2.5rem] items-center justify-center p-1"
     >
       <atomic-icon
         icon={props.icon}
@@ -52,7 +52,7 @@ export const PagerNextButton: FunctionalComponent<
       ariaLabel={props.i18n.t('next')}
       style="outline-primary"
       part="next-button"
-      class="p-1 min-w-[2.5rem] min-h-[2.5rem] flex justify-center items-center"
+      class="flex min-h-[2.5rem] min-w-[2.5rem] items-center justify-center p-1"
     >
       <atomic-icon
         icon={props.icon}
@@ -73,7 +73,7 @@ export const PagerPageButton: FunctionalComponent<PagerPageButtonProps> = (
       style="outline-neutral"
       checked={props.isSelected}
       ariaCurrent={props.isSelected ? 'page' : 'false'}
-      class="btn-page focus-visible:bg-neutral-light p-1 min-w-[2.5rem] min-h-[2.5rem]"
+      class="btn-page focus-visible:bg-neutral-light min-h-[2.5rem] min-w-[2.5rem] p-1"
       part={`page-button${props.isSelected ? ' active-page-button' : ''}`}
     ></RadioButton>
   );
diff --git a/packages/atomic/src/components/common/query-correction/trigger-correction.tsx b/packages/atomic/src/components/common/query-correction/trigger-correction.tsx
index fc7d94ed13a..f07529042ba 100644
--- a/packages/atomic/src/components/common/query-correction/trigger-correction.tsx
+++ b/packages/atomic/src/components/common/query-correction/trigger-correction.tsx
@@ -17,7 +17,7 @@ export const TriggerCorrection: FunctionalComponent<TriggerCorrectionProps> = ({
   return (
     <Fragment>
       <p
-        class="text-on-background leading-6 text-lg"
+        class="text-on-background text-lg leading-6"
         part="showing-results-for"
       >
         <LocalizedString
@@ -27,7 +27,7 @@ export const TriggerCorrection: FunctionalComponent<TriggerCorrectionProps> = ({
         />
       </p>
       <p
-        class="text-on-background leading-5 text-base"
+        class="text-on-background text-base leading-5"
         part="search-instead-for"
       >
         <LocalizedString
diff --git a/packages/atomic/src/components/common/query-error/container.tsx b/packages/atomic/src/components/common/query-error/container.tsx
index 5ec05f6d143..d5f63cf5b34 100644
--- a/packages/atomic/src/components/common/query-error/container.tsx
+++ b/packages/atomic/src/components/common/query-error/container.tsx
@@ -1,5 +1,5 @@
 import {FunctionalComponent, h} from '@stencil/core';
 
 export const QueryErrorContainer: FunctionalComponent = (_, children) => {
-  return <div class="text-center p-8">{children}</div>;
+  return <div class="p-8 text-center">{children}</div>;
 };
diff --git a/packages/atomic/src/components/common/query-error/description.tsx b/packages/atomic/src/components/common/query-error/description.tsx
index 90b02735db3..d3d67376383 100644
--- a/packages/atomic/src/components/common/query-error/description.tsx
+++ b/packages/atomic/src/components/common/query-error/description.tsx
@@ -13,7 +13,7 @@ export const QueryErrorDescription: FunctionalComponent<
   QueryErrorDescriptionProps
 > = ({errorType, i18n, url, organizationId}) => {
   return (
-    <p part="description" class="text-lg text-neutral-dark mt-2.5">
+    <p part="description" class="text-neutral-dark mt-2.5 text-lg">
       {getErrorDescriptionFromErrorType(i18n, organizationId, url, errorType)}
     </p>
   );
diff --git a/packages/atomic/src/components/common/query-error/details.tsx b/packages/atomic/src/components/common/query-error/details.tsx
index 8c540e2eb49..dd4eafda465 100644
--- a/packages/atomic/src/components/common/query-error/details.tsx
+++ b/packages/atomic/src/components/common/query-error/details.tsx
@@ -14,7 +14,7 @@ export const QueryErrorDetails: FunctionalComponent<QueryErrorDetailsProps> = ({
   return (
     <pre
       part="error-info"
-      class="text-left border border-neutral bg-neutral-light p-3 rounded mt-8 whitespace-pre-wrap"
+      class="border-neutral bg-neutral-light mt-8 whitespace-pre-wrap rounded border p-3 text-left"
     >
       <code>{JSON.stringify(error, null, 2)}</code>
     </pre>
diff --git a/packages/atomic/src/components/common/query-error/link.tsx b/packages/atomic/src/components/common/query-error/link.tsx
index adc97c3ddd6..746147acf60 100644
--- a/packages/atomic/src/components/common/query-error/link.tsx
+++ b/packages/atomic/src/components/common/query-error/link.tsx
@@ -27,7 +27,7 @@ export const QueryErrorLink: FunctionalComponent<QueryErrorLinkProps> = ({
   const link = getErrorLink();
 
   return link ? (
-    <a href={link} part="doc-link" class="btn-primary p-3 mt-10 inline-block">
+    <a href={link} part="doc-link" class="btn-primary mt-10 inline-block p-3">
       {i18n.t('coveo-online-help')}
     </a>
   ) : null;
diff --git a/packages/atomic/src/components/common/query-error/show-more.tsx b/packages/atomic/src/components/common/query-error/show-more.tsx
index 7a3dc01af68..b12066e3a6b 100644
--- a/packages/atomic/src/components/common/query-error/show-more.tsx
+++ b/packages/atomic/src/components/common/query-error/show-more.tsx
@@ -19,7 +19,7 @@ export const QueryErrorShowMore: FunctionalComponent<
     <Button
       part="more-info-btn"
       style="primary"
-      class="p-3 mt-8"
+      class="mt-8 p-3"
       onClick={() => {
         onShowMore();
       }}
diff --git a/packages/atomic/src/components/common/query-error/title.tsx b/packages/atomic/src/components/common/query-error/title.tsx
index ed652ce2f03..af7d9cf8dca 100644
--- a/packages/atomic/src/components/common/query-error/title.tsx
+++ b/packages/atomic/src/components/common/query-error/title.tsx
@@ -14,7 +14,7 @@ export const QueryErrorTitle: FunctionalComponent<QueryErrorTitleProps> = ({
   organizationId,
 }) => {
   return (
-    <p part="title" class="text-2xl text-on-background mt-8">
+    <p part="title" class="text-on-background mt-8 text-2xl">
       {getErrorTitleFromErrorType(i18n, organizationId, errorType)}
     </p>
   );
diff --git a/packages/atomic/src/components/common/query-summary/guard.tsx b/packages/atomic/src/components/common/query-summary/guard.tsx
index 6b448457f0b..963fc4b4e43 100644
--- a/packages/atomic/src/components/common/query-summary/guard.tsx
+++ b/packages/atomic/src/components/common/query-summary/guard.tsx
@@ -18,7 +18,7 @@ export const QuerySummaryGuard: FunctionalComponent<QuerySummaryGuardProps> = (
       <div
         part="placeholder"
         aria-hidden="true"
-        class="h-6 my-2 w-60 bg-neutral rounded animate-pulse"
+        class="bg-neutral my-2 h-6 w-60 animate-pulse rounded"
       ></div>
     );
   }
diff --git a/packages/atomic/src/components/common/refine-modal/body.tsx b/packages/atomic/src/components/common/refine-modal/body.tsx
index fa25ca6e6cf..6aeff766e6f 100644
--- a/packages/atomic/src/components/common/refine-modal/body.tsx
+++ b/packages/atomic/src/components/common/refine-modal/body.tsx
@@ -5,7 +5,7 @@ export const RefineModalBody: FunctionalComponent = (_, children) => {
     <aside
       part="content"
       slot="body"
-      class="flex flex-col w-full adjust-for-scroll-bar"
+      class="adjust-for-scroll-bar flex w-full flex-col"
     >
       {children}
     </aside>
diff --git a/packages/atomic/src/components/common/refine-modal/button.tsx b/packages/atomic/src/components/common/refine-modal/button.tsx
index afbecb62637..ea39dd1b7c7 100644
--- a/packages/atomic/src/components/common/refine-modal/button.tsx
+++ b/packages/atomic/src/components/common/refine-modal/button.tsx
@@ -13,7 +13,7 @@ export const RefineToggleButton: FunctionalComponent<
   return (
     <Button
       style="outline-primary"
-      class="p-3 w-full"
+      class="w-full p-3"
       onClick={onClick}
       text={i18n.t('sort-and-filter')}
       ref={setRef}
diff --git a/packages/atomic/src/components/common/refine-modal/filters.tsx b/packages/atomic/src/components/common/refine-modal/filters.tsx
index e8011412939..f216399df73 100644
--- a/packages/atomic/src/components/common/refine-modal/filters.tsx
+++ b/packages/atomic/src/components/common/refine-modal/filters.tsx
@@ -12,10 +12,10 @@ export const RefineModalFiltersSection: FunctionalComponent<
 > = ({i18n, withAutomaticFacets, withFacets}, children) => {
   return (
     <Fragment>
-      <div part="filter-section" class="w-full flex justify-between mt-8 mb-3">
+      <div part="filter-section" class="mb-3 mt-8 flex w-full justify-between">
         <h1
           part="section-title section-filters-title"
-          class="text-2xl font-bold truncate"
+          class="truncate text-2xl font-bold"
         >
           {i18n.t('filters')}
         </h1>
diff --git a/packages/atomic/src/components/common/refine-modal/guard.tsx b/packages/atomic/src/components/common/refine-modal/guard.tsx
index 15679fd3234..da4319e5dcf 100644
--- a/packages/atomic/src/components/common/refine-modal/guard.tsx
+++ b/packages/atomic/src/components/common/refine-modal/guard.tsx
@@ -18,7 +18,7 @@ export const RefineToggleGuard: FunctionalComponent<RefineToggleGuardProps> = (
       <div
         part="placeholder"
         aria-hidden
-        class="rounded w-28 h-8 my-2 bg-neutral animate-pulse"
+        class="bg-neutral my-2 h-8 w-28 animate-pulse rounded"
       ></div>
     );
   }
diff --git a/packages/atomic/src/components/common/refine-modal/modal.tsx b/packages/atomic/src/components/common/refine-modal/modal.tsx
index c351ecc09f1..3d8e80a0667 100644
--- a/packages/atomic/src/components/common/refine-modal/modal.tsx
+++ b/packages/atomic/src/components/common/refine-modal/modal.tsx
@@ -44,7 +44,7 @@ export const RefineModal: FunctionalComponent<RefineModalProps> = (
         >
           <atomic-icon
             part="close-icon"
-            class="w-5 h-5"
+            class="h-5 w-5"
             icon={CloseIcon}
           ></atomic-icon>
         </Button>
@@ -58,10 +58,10 @@ export const RefineModal: FunctionalComponent<RefineModalProps> = (
         <Button
           style="primary"
           part="footer-button"
-          class="w-full p-3 flex text-lg justify-center"
+          class="flex w-full justify-center p-3 text-lg"
           onClick={props.onClose}
         >
-          <span part="footer-button-text" class="truncate mr-1">
+          <span part="footer-button-text" class="mr-1 truncate">
             {props.i18n.t('view-results')}
           </span>
           <span part="footer-button-count">
diff --git a/packages/atomic/src/components/common/refine-modal/sort.tsx b/packages/atomic/src/components/common/refine-modal/sort.tsx
index 15609fb2ce1..fed5f906fdf 100644
--- a/packages/atomic/src/components/common/refine-modal/sort.tsx
+++ b/packages/atomic/src/components/common/refine-modal/sort.tsx
@@ -13,13 +13,13 @@ export const RefineModalSortSection: FunctionalComponent<
     <Fragment>
       <h1
         part="section-title section-sort-title"
-        class="text-2xl font-bold truncate mb-3"
+        class="mb-3 truncate text-2xl font-bold"
       >
         {i18n.t('sort')}
       </h1>
       <div part="select-wrapper" class="relative">
         <select
-          class="btn-outline-neutral w-full cursor-pointer text-lg font-bold grow appearance-none rounded-lg px-6 py-5"
+          class="btn-outline-neutral w-full grow cursor-pointer appearance-none rounded-lg px-6 py-5 text-lg font-bold"
           part="select"
           aria-label={i18n.t('sort-by')}
           onChange={onSelect}
@@ -28,12 +28,12 @@ export const RefineModalSortSection: FunctionalComponent<
         </select>
         <div
           part="select-icon-wrapper"
-          class="absolute pointer-events-none top-0 bottom-0 right-0 flex justify-center items-center pr-6"
+          class="pointer-events-none absolute bottom-0 right-0 top-0 flex items-center justify-center pr-6"
         >
           <atomic-icon
             part="select-icon"
             icon={SortIcon}
-            class="w-6 h-6"
+            class="h-6 w-6"
           ></atomic-icon>
         </div>
       </div>
diff --git a/packages/atomic/src/components/common/search-box/clear-button.tsx b/packages/atomic/src/components/common/search-box/clear-button.tsx
index e761c8487ef..bfc61e4309f 100644
--- a/packages/atomic/src/components/common/search-box/clear-button.tsx
+++ b/packages/atomic/src/components/common/search-box/clear-button.tsx
@@ -17,7 +17,7 @@ export const ClearButton: FunctionalComponent<Props> = ({
   <Button
     style="text-transparent"
     part="clear-button"
-    class="w-8 h-8 mr-1.5 text-neutral-dark shrink-0"
+    class="text-neutral-dark mr-1.5 h-8 w-8 shrink-0"
     onClick={() => {
       onClick?.();
       inputRef?.focus();
@@ -28,7 +28,7 @@ export const ClearButton: FunctionalComponent<Props> = ({
     <atomic-icon
       part="clear-icon"
       icon={ClearIcon}
-      class="w-3 h-3"
+      class="h-3 w-3"
     ></atomic-icon>
   </Button>
 );
diff --git a/packages/atomic/src/components/common/search-box/search-box.pcss b/packages/atomic/src/components/common/search-box/search-box.pcss
index 909fd1aa326..bb6bc3e85d5 100644
--- a/packages/atomic/src/components/common/search-box/search-box.pcss
+++ b/packages/atomic/src/components/common/search-box/search-box.pcss
@@ -6,7 +6,7 @@
 
 .loading::after {
   content: '';
-  @apply absolute w-5/6 h-5/6 bg-background rounded-full;
+  @apply bg-background absolute h-5/6 w-5/6 rounded-full;
 }
 
 [part='textarea-expander'] {
@@ -22,7 +22,7 @@
 
   > [part='textarea'],
   &::after {
-    @apply whitespace-nowrap z-10 h-full outline-none resize-none bg-transparent text-neutral-dark text-lg grow p-3.5 px-4 overflow-hidden;
+    @apply text-neutral-dark z-10 h-full grow resize-none overflow-hidden whitespace-nowrap bg-transparent p-3.5 px-4 text-lg outline-none;
     /* Place on top of each other */
     grid-area: 1 / 1 / 2 / 2;
   }
diff --git a/packages/atomic/src/components/common/search-box/search-input.tsx b/packages/atomic/src/components/common/search-box/search-input.tsx
index d18aa890219..32adff1167f 100644
--- a/packages/atomic/src/components/common/search-box/search-input.tsx
+++ b/packages/atomic/src/components/common/search-box/search-input.tsx
@@ -45,13 +45,13 @@ export const SearchInput: FunctionalComponent<Props> = ({
   popup,
   ...defaultInputProps
 }) => (
-  <div class="grow flex items-center">
+  <div class="flex grow items-center">
     <input
       part="input"
       aria-label={ariaLabel}
       placeholder={bindings.i18n.t('search')}
       type="text"
-      class="h-full outline-none bg-transparent w-0 grow px-4 py-3.5 text-neutral-dark placeholder-neutral-dark text-lg"
+      class="text-neutral-dark placeholder-neutral-dark h-full w-0 grow bg-transparent px-4 py-3.5 text-lg outline-none"
       onKeyDown={(e) => {
         onKeyDown?.(e);
       }}
@@ -62,7 +62,7 @@ export const SearchInput: FunctionalComponent<Props> = ({
     {loading && (
       <span
         part="loading"
-        class="loading w-5 h-5 rounded-full bg-gradient-to-r animate-spin mr-3 grid place-items-center"
+        class="loading mr-3 grid h-5 w-5 animate-spin place-items-center rounded-full bg-gradient-to-r"
       ></span>
     )}
     {!loading && value && (
diff --git a/packages/atomic/src/components/common/search-box/search-text-area.tsx b/packages/atomic/src/components/common/search-box/search-text-area.tsx
index b28ea489c62..002367b70eb 100644
--- a/packages/atomic/src/components/common/search-box/search-text-area.tsx
+++ b/packages/atomic/src/components/common/search-box/search-text-area.tsx
@@ -82,8 +82,8 @@ export const SearchTextArea: FunctionalComponent<Props> = ({
   popup,
   ...defaultInputProps
 }) => (
-  <div class="grow flex overflow-hidden">
-    <div part="textarea-expander" class="grow grid overflow-hidden">
+  <div class="flex grow overflow-hidden">
+    <div part="textarea-expander" class="grid grow overflow-hidden">
       <textarea
         part="textarea"
         aria-label={ariaLabel}
@@ -135,10 +135,10 @@ export const SearchTextArea: FunctionalComponent<Props> = ({
     </div>
 
     {loading && (
-      <div class="searchbox-button-wrapper flex items-center justify-center ml-2">
+      <div class="searchbox-button-wrapper ml-2 flex items-center justify-center">
         <span
           part="loading"
-          class="loading w-5 h-5 rounded-full bg-gradient-to-r animate-spin mr-2 grid place-items-center"
+          class="loading mr-2 grid h-5 w-5 animate-spin place-items-center rounded-full bg-gradient-to-r"
         ></span>
       </div>
     )}
diff --git a/packages/atomic/src/components/common/search-box/submit-button.tsx b/packages/atomic/src/components/common/search-box/submit-button.tsx
index 7d87a8d11f1..6833d7dbac0 100644
--- a/packages/atomic/src/components/common/search-box/submit-button.tsx
+++ b/packages/atomic/src/components/common/search-box/submit-button.tsx
@@ -14,7 +14,7 @@ export const SubmitButton: FunctionalComponent<Props> = ({
 }) => (
   <Button
     style="primary"
-    class="flex items-center justify-center w-12 h-auto rounded-r-md rounded-l-none -my-px -mr-px shrink-0"
+    class="-my-px -mr-px flex h-auto w-12 shrink-0 items-center justify-center rounded-l-none rounded-r-md"
     part="submit-button"
     ariaLabel={bindings.i18n.t('search')}
     onClick={() => {
@@ -25,7 +25,7 @@ export const SubmitButton: FunctionalComponent<Props> = ({
     <atomic-icon
       part="submit-icon"
       icon={SearchIcon}
-      class="w-4 h-4"
+      class="h-4 w-4"
     ></atomic-icon>
   </Button>
 );
diff --git a/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx b/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx
index 393798930a3..33f38493558 100644
--- a/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx
+++ b/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx
@@ -16,12 +16,12 @@ export const TextAreaClearButton: FunctionalComponent<Props> = ({
 }) => (
   <div
     part="clear-button-wrapper"
-    class="py-2 flex items-start justify-center items-center ml-2"
+    class="ml-2 flex items-start items-center justify-center py-2"
   >
     <Button
       style="text-transparent"
       part="clear-button"
-      class="flex items-center justify-center w-8 h-8 text-neutral-dark shrink-0"
+      class="text-neutral-dark flex h-8 w-8 shrink-0 items-center justify-center"
       onClick={() => {
         onClick?.();
         inputRef?.focus();
@@ -32,7 +32,7 @@ export const TextAreaClearButton: FunctionalComponent<Props> = ({
       <atomic-icon
         part="clear-icon"
         icon={ClearSlim}
-        class="w-4 h-4"
+        class="h-4 w-4"
       ></atomic-icon>
     </Button>
   </div>
diff --git a/packages/atomic/src/components/common/search-box/text-area-submit-button.tsx b/packages/atomic/src/components/common/search-box/text-area-submit-button.tsx
index 263bbfd4fc8..4b5a81330b2 100644
--- a/packages/atomic/src/components/common/search-box/text-area-submit-button.tsx
+++ b/packages/atomic/src/components/common/search-box/text-area-submit-button.tsx
@@ -14,11 +14,11 @@ export const TextAreaSubmitButton: FunctionalComponent<Props> = ({
 }) => (
   <div
     part="submit-button-wrapper"
-    class="py-2 flex items-start justify-center items-center mr-2"
+    class="mr-2 flex items-start items-center justify-center py-2"
   >
     <Button
       style="text-primary"
-      class="flex items-center justify-center w-8 h-8 rounded-full shrink-0"
+      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
       part="submit-button"
       ariaLabel={bindings.i18n.t('search')}
       onClick={() => {
@@ -29,7 +29,7 @@ export const TextAreaSubmitButton: FunctionalComponent<Props> = ({
       <atomic-icon
         part="submit-icon"
         icon={SearchSlimIcon}
-        class="w-4 h-4"
+        class="h-4 w-4"
       ></atomic-icon>
     </Button>
   </div>
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.pcss b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.pcss
index a62bc1e9598..90f284b4d8b 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.pcss
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.pcss
@@ -35,6 +35,6 @@
   }
 
   button atomic-icon {
-    @apply -scale-y-100 top-0;
+    @apply top-0 -scale-y-100;
   }
 }
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.tsx
index e8fdbbc5599..319d5956024 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.tsx
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.tsx
@@ -66,13 +66,13 @@ export class AtomicSmartSnippetCollapseWrapper {
     return (
       <button
         onClick={() => (this.isExpanded = !this.isExpanded)}
-        class="text-primary hover:underline mb-4"
+        class="text-primary mb-4 hover:underline"
         part={this.isExpanded ? 'show-less-button' : 'show-more-button'}
       >
         {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}
         <atomic-icon
           icon={ArrowDown}
-          class="w-3 ml-2 align-baseline"
+          class="ml-2 w-3 align-baseline"
         ></atomic-icon>
       </button>
     );
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.pcss b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.pcss
index e9658e1587d..cb444311bcb 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.pcss
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.pcss
@@ -35,7 +35,7 @@
     }
 
     button atomic-icon {
-      @apply -scale-y-100 top-0;
+      @apply top-0 -scale-y-100;
     }
   }
 }
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.tsx
index d254b3b6912..586a31d7548 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.tsx
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.tsx
@@ -134,13 +134,13 @@ export class AtomicSmartSnippetExpandableAnswer {
         onClick={() =>
           this.isExpanded ? this.collapse.emit() : this.expand.emit()
         }
-        class="text-primary hover:underline mb-4"
+        class="text-primary mb-4 hover:underline"
         part={this.isExpanded ? 'show-less-button' : 'show-more-button'}
       >
         {this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}
         <atomic-icon
           icon={ArrowDown}
-          class="w-3 ml-2 align-baseline"
+          class="ml-2 w-3 align-baseline"
         ></atomic-icon>
       </button>
     );
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner.tsx
index ca216dadc27..6ef780031e5 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner.tsx
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner.tsx
@@ -45,7 +45,7 @@ export const SmartSnippetFeedbackBanner: FunctionalComponent<
           text={props.i18n.t('yes')}
           checked={props.liked}
           onChecked={() => props.onLike()}
-          class="text-inherit cursor-inherit"
+          class="cursor-inherit text-inherit"
         ></RadioButton>
       </label>
       <label
@@ -61,7 +61,7 @@ export const SmartSnippetFeedbackBanner: FunctionalComponent<
           text={props.i18n.t('no')}
           checked={props.disliked}
           onChecked={() => props.onDislike()}
-          class="text-inherit cursor-inherit"
+          class="cursor-inherit text-inherit"
         ></RadioButton>
       </label>
     </div>
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.pcss b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.pcss
index 83e4fddef0d..120f90a1272 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.pcss
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/atomic-smart-snippet-feedback-modal.pcss
@@ -1,7 +1,7 @@
 @import '../../../../global/global.pcss';
 
 [part='reason'] {
-  @apply text-base leading-4 text-neutral-dark;
+  @apply text-neutral-dark text-base leading-4;
 
   @screen desktop-only {
     @apply mt-2;
@@ -14,5 +14,5 @@
 
 [part='cancel-button'],
 [part='submit-button'] {
-  @apply flex justify-center text-sm leading-4 p-2;
+  @apply flex justify-center p-2 text-sm leading-4;
 }
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common.tsx
index 982dda49314..9308d5147a5 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common.tsx
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common.tsx
@@ -82,7 +82,7 @@ export class SmartSnippetFeedbackModalCommon {
       <fieldset>
         <legend
           part="reason-title"
-          class="font-bold text-on-background text-lg"
+          class="text-on-background text-lg font-bold"
         >
           {this.props
             .getBindings()
@@ -100,7 +100,7 @@ export class SmartSnippetFeedbackModalCommon {
                 (e.currentTarget as HTMLInputElement | null)?.checked &&
                 this.props.setCurrentAnswer(correspondingAnswer)
               }
-              class="mr-2 w-4 h-4"
+              class="mr-2 h-4 w-4"
               required
             />
             <label part="reason-label" htmlFor={id}>
@@ -121,7 +121,7 @@ export class SmartSnippetFeedbackModalCommon {
       <fieldset>
         <legend
           part="details-title"
-          class="font-bold text-on-background text-lg"
+          class="text-on-background text-lg font-bold"
         >
           {this.props.getBindings().i18n.t('details')}
         </legend>
@@ -129,7 +129,7 @@ export class SmartSnippetFeedbackModalCommon {
           part="details-input"
           name="answer-details"
           ref={(detailsInput) => this.props.setDetailsInputRef(detailsInput)}
-          class="mt-2 p-2 w-full text-base leading-5 border border-neutral resize-none rounded"
+          class="border-neutral mt-2 w-full resize-none rounded border p-2 text-base leading-5"
           rows={4}
           required
         ></textarea>
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx
index 9c8d3d3d617..30e3907d70d 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx
@@ -72,11 +72,11 @@ export class SmartSnippetSuggestionCommon {
         <atomic-icon
           icon={relatedQuestion.expanded ? ArrowDown : ArrowRight}
           part={this.getQuestionPart('question-icon', relatedQuestion)}
-          class="w-2.5 mr-3 stroke-[1.25]"
+          class="mr-3 w-2.5 stroke-[1.25]"
         ></atomic-icon>
         <Heading
           level={headingLevel ? headingLevel + 1 : headingLevel}
-          class="text-left text-xl font-bold py-4"
+          class="py-4 text-left text-xl font-bold"
           part={this.getQuestionPart('question-text', relatedQuestion)}
         >
           {relatedQuestion.question}
@@ -172,7 +172,7 @@ export class SmartSnippetSuggestionCommon {
           {relatedQuestion.expanded && (
             <div
               part="answer-and-source"
-              class="pl-10 pr-6 pb-6"
+              class="pb-6 pl-10 pr-6"
               id={this.getRelatedQuestionId(index)}
             >
               {this.renderContent(relatedQuestion)}
@@ -192,12 +192,12 @@ export class SmartSnippetSuggestionCommon {
     return (
       <aside
         part="container"
-        class="bg-background border border-neutral rounded-lg text-on-background overflow-hidden"
+        class="bg-background border-neutral text-on-background overflow-hidden rounded-lg border"
       >
         <Heading
           level={this.props.getHeadingLevel()}
           part="heading"
-          class="px-6 py-4 text-xl leading-8 border-b border-neutral"
+          class="border-neutral border-b px-6 py-4 text-xl leading-8"
         >
           {this.props.getBindings().i18n.t('smart-snippet-people-also-ask')}
         </Heading>
diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx
index ea6a3401067..2da0d4c2f6d 100644
--- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx
+++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/smart-snippet-common.tsx
@@ -151,7 +151,7 @@ export class SmartSnippetCommon {
           {this.props.getBindings().i18n.t('smart-snippet')}
         </Heading>
         <article
-          class="bg-background border border-neutral rounded-lg p-6 pb-4 text-on-background"
+          class="bg-background border-neutral text-on-background rounded-lg border p-6 pb-4"
           part="smart-snippet"
         >
           <atomic-smart-snippet-collapse-wrapper
diff --git a/packages/atomic/src/components/common/sort/container.tsx b/packages/atomic/src/components/common/sort/container.tsx
index c6bb3b4fa6b..07411edc78f 100644
--- a/packages/atomic/src/components/common/sort/container.tsx
+++ b/packages/atomic/src/components/common/sort/container.tsx
@@ -2,6 +2,6 @@ import {FunctionalComponent, h} from '@stencil/core';
 
 export const SortContainer: FunctionalComponent = (_, children) => {
   return (
-    <div class="flex items-center flex-wrap text-on-background">{children}</div>
+    <div class="text-on-background flex flex-wrap items-center">{children}</div>
   );
 };
diff --git a/packages/atomic/src/components/common/sort/guard.tsx b/packages/atomic/src/components/common/sort/guard.tsx
index 9594f15a75b..f531ee960bc 100644
--- a/packages/atomic/src/components/common/sort/guard.tsx
+++ b/packages/atomic/src/components/common/sort/guard.tsx
@@ -18,7 +18,7 @@ export const SortGuard: FunctionalComponent<SortGuardProps> = (
       <div
         part="placeholder"
         aria-hidden
-        class="rounded h-6 my-2 w-44 bg-neutral animate-pulse"
+        class="bg-neutral my-2 h-6 w-44 animate-pulse rounded"
       ></div>
     );
   }
diff --git a/packages/atomic/src/components/common/sort/label.tsx b/packages/atomic/src/components/common/sort/label.tsx
index a47cf1abfcd..182eabbc910 100644
--- a/packages/atomic/src/components/common/sort/label.tsx
+++ b/packages/atomic/src/components/common/sort/label.tsx
@@ -9,7 +9,7 @@ interface SortLabelProps {
 export const SortLabel: FunctionalComponent<SortLabelProps> = ({id, i18n}) => {
   return (
     <label
-      class="m-2 font-bold text-sm cursor-pointer"
+      class="m-2 cursor-pointer text-sm font-bold"
       part="label"
       htmlFor={id}
     >
diff --git a/packages/atomic/src/components/common/sort/select.tsx b/packages/atomic/src/components/common/sort/select.tsx
index 4a71397069f..5ddb9a9ce73 100644
--- a/packages/atomic/src/components/common/sort/select.tsx
+++ b/packages/atomic/src/components/common/sort/select.tsx
@@ -24,7 +24,7 @@ export const SortSelect: FunctionalComponent<SortSelectProps> = (
       </select>
       <div
         part="select-separator"
-        class="w-10 absolute pointer-events-none top-px bottom-px right-0 border-l border-neutral flex justify-center items-center"
+        class="border-neutral pointer-events-none absolute bottom-px right-0 top-px flex w-10 items-center justify-center border-l"
       >
         <atomic-icon class="w-2.5" icon={ArrowBottomIcon}></atomic-icon>
       </div>
diff --git a/packages/atomic/src/components/common/suggestions/query-suggestions.tsx b/packages/atomic/src/components/common/suggestions/query-suggestions.tsx
index 26405f49755..cb4f83d5499 100644
--- a/packages/atomic/src/components/common/suggestions/query-suggestions.tsx
+++ b/packages/atomic/src/components/common/suggestions/query-suggestions.tsx
@@ -47,7 +47,7 @@ export const QuerySuggestionIcon: FunctionalComponent<
     <atomic-icon
       part="query-suggestion-icon"
       icon={icon}
-      class="w-4 h-4 mr-2 shrink-0"
+      class="mr-2 h-4 w-4 shrink-0"
     ></atomic-icon>
   );
 };
@@ -64,14 +64,14 @@ export const QuerySuggestionText: FunctionalComponent<
     return (
       <span
         part="query-suggestion-text"
-        class="break-all line-clamp-2"
+        class="line-clamp-2 break-all"
         innerHTML={suggestion.highlightedValue}
       ></span>
     );
   }
 
   return (
-    <span part="query-suggestion-text" class="break-all line-clamp-2">
+    <span part="query-suggestion-text" class="line-clamp-2 break-all">
       {suggestion.rawValue}
     </span>
   );
diff --git a/packages/atomic/src/components/common/suggestions/recent-queries.tsx b/packages/atomic/src/components/common/suggestions/recent-queries.tsx
index ba301fc0adf..a6d5ac2e0c2 100644
--- a/packages/atomic/src/components/common/suggestions/recent-queries.tsx
+++ b/packages/atomic/src/components/common/suggestions/recent-queries.tsx
@@ -57,7 +57,7 @@ export const RecentQueryIcon: FunctionalComponent<RecentQueryIconProps> = ({
     <atomic-icon
       part="recent-query-icon"
       icon={icon}
-      class="w-4 h-4 mr-2 shrink-0"
+      class="mr-2 h-4 w-4 shrink-0"
     ></atomic-icon>
   );
 };
@@ -73,7 +73,7 @@ export const RecentQueryText: FunctionalComponent<RecentQueryTextProps> = ({
 }) => {
   if (query === '') {
     return (
-      <span part="recent-query-text" class="break-all line-clamp-2">
+      <span part="recent-query-text" class="line-clamp-2 break-all">
         {value}
       </span>
     );
@@ -81,7 +81,7 @@ export const RecentQueryText: FunctionalComponent<RecentQueryTextProps> = ({
   return (
     <span
       part="recent-query-text"
-      class="break-all line-clamp-2"
+      class="line-clamp-2 break-all"
       innerHTML={HighlightUtils.highlightString({
         content: value,
         openingDelimiter:
@@ -106,7 +106,7 @@ export const RecentQueryClear: FunctionalComponent<RecentQueryClearProps> = ({
   i18n,
 }) => {
   return (
-    <div part="recent-query-title-content" class="flex justify-between w-full">
+    <div part="recent-query-title-content" class="flex w-full justify-between">
       <span class="font-bold" part="recent-query-title">
         {i18n.t('recent-searches')}
       </span>
diff --git a/packages/atomic/src/components/common/tab-manager/tab-button.tsx b/packages/atomic/src/components/common/tab-manager/tab-button.tsx
index 6a3ce526592..eb3c53b48f3 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-button.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-button.tsx
@@ -16,7 +16,7 @@ export const TabButton: FunctionalComponent<TabButtonProps> = (props) => {
     <div part="button-container" class={activeTabClass}>
       <Button
         style="text-transparent"
-        class={`px-6 pb-1 w-full text-xl ${activeTabTextClass}`}
+        class={`w-full px-6 pb-1 text-xl ${activeTabTextClass}`}
         text={props.label}
         part="button"
         onClick={props.handleClick}
diff --git a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx b/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
index 28a62cf75a6..68ac2145dd9 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
@@ -11,9 +11,9 @@ export const TabDropdown: FunctionalComponent<TabDropdownProps> = (
   children
 ) => {
   return (
-    <div class="hidden pb-1 border-b dropdown-area">
+    <div class="dropdown-area hidden border-b pb-1">
       <select
-        class="py-2 text-xl font-bold cursor-pointer btn-text-primary"
+        class="btn-text-primary cursor-pointer py-2 text-xl font-bold"
         onChange={(e) =>
           props.onTabChange((e.target as HTMLSelectElement).value)
         }
diff --git a/packages/atomic/src/components/common/tabs/tab-bar.tsx b/packages/atomic/src/components/common/tabs/tab-bar.tsx
index 5d0b828f992..b64c82ddb03 100644
--- a/packages/atomic/src/components/common/tabs/tab-bar.tsx
+++ b/packages/atomic/src/components/common/tabs/tab-bar.tsx
@@ -146,7 +146,7 @@ export class TabBar {
       <Button
         part="popover-tab"
         style="text-transparent"
-        class="font-semibold px-4 py-2 rounded truncate"
+        class="truncate rounded px-4 py-2 font-semibold"
         ariaLabel={tab.label}
         onClick={() => {
           tab.select();
diff --git a/packages/atomic/src/components/common/tabs/tab-popover.tsx b/packages/atomic/src/components/common/tabs/tab-popover.tsx
index d162023004e..ae71129c39c 100644
--- a/packages/atomic/src/components/common/tabs/tab-popover.tsx
+++ b/packages/atomic/src/components/common/tabs/tab-popover.tsx
@@ -98,14 +98,14 @@ export class TabPopover implements InitializableComponent {
           title={label}
           part="value-label"
           class={
-            'truncate mr-1.5 group-hover:text-primary-light group-focus:text-primary'
+            'group-hover:text-primary-light group-focus:text-primary mr-1.5 truncate'
           }
         >
           {label}
         </span>
         <atomic-icon
           part="arrow-icon"
-          class={`w-2 ml-auto group-hover:text-primary-light group-focus:text-primary ${
+          class={`group-hover:text-primary-light group-focus:text-primary ml-auto w-2 ${
             this.isOpen ? 'rotate-180' : ''
           }`}
           icon={ArrowBottomIcon}
@@ -118,7 +118,7 @@ export class TabPopover implements InitializableComponent {
     return (
       <div
         part="backdrop"
-        class="fixed left-0 top-0 right-0 bottom-0 z-[9998] bg-transparent cursor-pointer"
+        class="fixed bottom-0 left-0 right-0 top-0 z-[9998] cursor-pointer bg-transparent"
         onClick={() => this.togglePopover()}
       ></div>
     );
@@ -132,7 +132,7 @@ export class TabPopover implements InitializableComponent {
           id={this.popoverId}
           ref={(el) => (this.popupRef = el!)}
           part="overflow-tabs"
-          class={`absolute py-2 bg-background border-neutral border rounded-lg shadow-lg ${
+          class={`bg-background border-neutral absolute rounded-lg border py-2 shadow-lg ${
             this.isOpen ? 'flex' : 'hidden'
           }`}
         >
diff --git a/packages/atomic/src/components/insight/atomic-insight-full-search-button/atomic-insight-full-search-button.pcss b/packages/atomic/src/components/insight/atomic-insight-full-search-button/atomic-insight-full-search-button.pcss
index e4191292d67..7a7a05d7bd7 100644
--- a/packages/atomic/src/components/insight/atomic-insight-full-search-button/atomic-insight-full-search-button.pcss
+++ b/packages/atomic/src/components/insight/atomic-insight-full-search-button/atomic-insight-full-search-button.pcss
@@ -4,7 +4,7 @@
   --full-search-background-color: var(--atomic-neutral-dark);
   --full-search-secondary-background-color: #333536;
   &::part(full-search-button) {
-    @apply h-[27px] w-[27px] border-none rounded-none;
+    @apply h-[27px] w-[27px] rounded-none border-none;
     background-color: var(--full-search-background-color);
     clip-path: polygon(0 0, 100% 100%, 100% 0);
   }
@@ -15,6 +15,6 @@
   }
 
   &::part(full-search-icon) {
-    @apply h-[9px] w-[9px] absolute top-[4px] left-[15px];
+    @apply absolute left-[15px] top-[4px] h-[9px] w-[9px];
   }
 }
diff --git a/packages/atomic/src/components/insight/atomic-insight-query-summary/atomic-insight-query-summary.tsx b/packages/atomic/src/components/insight/atomic-insight-query-summary/atomic-insight-query-summary.tsx
index 31de7ba4ffc..274fee6cb6a 100644
--- a/packages/atomic/src/components/insight/atomic-insight-query-summary/atomic-insight-query-summary.tsx
+++ b/packages/atomic/src/components/insight/atomic-insight-query-summary/atomic-insight-query-summary.tsx
@@ -89,7 +89,7 @@ export class AtomicQuerySummary
     }
 
     return (
-      <div class="bg-[#F1F2FF] text-[#54698D] px-6 py-4 italic">
+      <div class="bg-[#F1F2FF] px-6 py-4 italic text-[#54698D]">
         {this.bindings.i18n.t('insight-related-cases')}
       </div>
     );
diff --git a/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx b/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx
index 2b4bacf5016..f6e3f6e1d00 100644
--- a/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx
+++ b/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx
@@ -107,7 +107,7 @@ export class AtomicInsightRefineModal
 
   private renderHeader() {
     return (
-      <div class="w-full flex justify-between mb-3">
+      <div class="mb-3 flex w-full justify-between">
         {this.breadcrumbManagerState.hasBreadcrumbs && (
           <Button
             onClick={() => this.breadcrumbManager.deselectAll()}
@@ -126,7 +126,7 @@ export class AtomicInsightRefineModal
     }
 
     return (
-      <aside slot="body" class="flex flex-col w-full adjust-for-scroll-bar">
+      <aside slot="body" class="adjust-for-scroll-bar flex w-full flex-col">
         {this.renderHeader()}
         <slot name="facets"></slot>
       </aside>
diff --git a/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss b/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss
index 641af85f051..f2707d8b8e0 100644
--- a/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss
+++ b/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss
@@ -1,7 +1,7 @@
 @import '../../../global/global.pcss';
 
 atomic-insight-result-action-bar {
-  @apply flex absolute invisible right-6 top-[-1rem];
+  @apply invisible absolute right-6 top-[-1rem] flex;
 
   > atomic-insight-result-action:not(:last-child) {
     button {
@@ -13,7 +13,7 @@ atomic-insight-result-action-bar {
   }
   > atomic-insight-result-action:not(:first-child) {
     button {
-      @apply rounded-tl-none rounded-bl-none;
+      @apply rounded-bl-none rounded-tl-none;
     }
   }
 }
diff --git a/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.pcss b/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.pcss
index b65545b9c90..e3f5e1b5e33 100644
--- a/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.pcss
+++ b/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.pcss
@@ -19,12 +19,12 @@
 }
 
 [part='submit-button'] {
-  @apply w-10 flex justify-center items-center;
+  @apply flex w-10 items-center justify-center;
 }
 
 .loading::after {
   content: '';
-  @apply absolute w-5/6 h-5/6 bg-background rounded-full;
+  @apply bg-background absolute h-5/6 w-5/6 rounded-full;
 }
 
 [part='clear-button-wrapper'] {
@@ -32,17 +32,17 @@
 }
 
 [part='clear-icon'] {
-  @apply w-3 h-3;
+  @apply h-3 w-3;
 }
 
 [part='textarea-expander'] {
   &::after {
-    @apply px-4 p-2;
+    @apply p-2 px-4;
   }
 }
 
 [part='textarea-expander'] {
   [part='textarea'] {
-    @apply px-4 p-2;
+    @apply p-2 px-4;
   }
 }
diff --git a/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx b/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx
index bd0c1e6aef0..e869bc7325e 100644
--- a/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx
+++ b/packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.tsx
@@ -264,7 +264,7 @@ export class AtomicInsightSearchBox {
       <div
         id={`${this.id}-popup`}
         part="suggestions-wrapper"
-        class={`flex w-full z-10 absolute left-0 top-full rounded-md bg-background border border-neutral ${
+        class={`bg-background border-neutral absolute left-0 top-full z-10 flex w-full rounded-md border ${
           this.suggestionManager.hasSuggestions && this.isExpanded
             ? ''
             : 'hidden'
@@ -345,7 +345,7 @@ export class AtomicInsightSearchBox {
         <atomic-icon
           part="submit-icon"
           icon={SearchSlimIcon}
-          class="w-4 h-4 my-auto mr-0 ml-4"
+          class="my-auto ml-4 mr-0 h-4 w-4"
         />
         <SearchTextArea
           textAreaRef={this.textAreaRef}
diff --git a/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.pcss b/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.pcss
index de0ca2399eb..c77a6883ff6 100644
--- a/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.pcss
+++ b/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.pcss
@@ -2,7 +2,7 @@
 
 .active {
   &::after {
-    @apply block absolute rounded w-full bg-primary bottom-0 h-1;
+    @apply bg-primary absolute bottom-0 block h-1 w-full rounded;
     content: '';
   }
 }
diff --git a/packages/atomic/src/components/insight/result-lists/styles/list-display.pcss b/packages/atomic/src/components/insight/result-lists/styles/list-display.pcss
index 77dcd50b764..f622439401a 100644
--- a/packages/atomic/src/components/insight/result-lists/styles/list-display.pcss
+++ b/packages/atomic/src/components/insight/result-lists/styles/list-display.pcss
@@ -21,7 +21,7 @@
     @mixin atomic-list-with-dividers;
 
     .result-component[part~='outline']::before {
-      @apply my-0 mx-6;
+      @apply mx-6 my-0;
     }
   }
 
diff --git a/packages/atomic/src/components/ipx/atomic-ipx-body/atomic-ipx-body.pcss b/packages/atomic/src/components/ipx/atomic-ipx-body/atomic-ipx-body.pcss
index 8f5efe637f8..c78e5c5dfbd 100644
--- a/packages/atomic/src/components/ipx/atomic-ipx-body/atomic-ipx-body.pcss
+++ b/packages/atomic/src/components/ipx/atomic-ipx-body/atomic-ipx-body.pcss
@@ -7,14 +7,14 @@
 
   &::part(container) {
     @apply rounded;
-    @apply overflow-hidden flex flex-col justify-between bg-background box-border;
+    @apply bg-background box-border flex flex-col justify-between overflow-hidden;
     grid-area: modal;
     height: inherit;
     box-shadow: rgb(0 0 0 / 50%) 0 0 0.5rem;
   }
 
   &::part(header-wrapper) {
-    @apply px-6 pt-4 w-full grid bg-neutral-light;
+    @apply bg-neutral-light grid w-full px-6 pt-4;
     padding: 1.5rem 1.5rem 0 1.5rem;
   }
 
diff --git a/packages/atomic/src/components/ipx/atomic-ipx-body/atomic-ipx-body.tsx b/packages/atomic/src/components/ipx/atomic-ipx-body/atomic-ipx-body.tsx
index a5d9084bacf..ed8ea974b87 100644
--- a/packages/atomic/src/components/ipx/atomic-ipx-body/atomic-ipx-body.tsx
+++ b/packages/atomic/src/components/ipx/atomic-ipx-body/atomic-ipx-body.tsx
@@ -88,7 +88,7 @@ export class AtomicIPXBody implements InitializableComponent<AnyBindings> {
         <hr part="header-ruler" class="border-neutral"></hr>
         <div
           part="body-wrapper"
-          class="overflow-auto grow flex flex-col w-full scrollbar"
+          class="scrollbar flex w-full grow flex-col overflow-auto"
         >
           <div part="body" class="w-full">
             <slot name="body"></slot>
@@ -97,7 +97,7 @@ export class AtomicIPXBody implements InitializableComponent<AnyBindings> {
         {this.displayFooterSlot && (
           <footer
             part="footer-wrapper"
-            class="border-neutral border-t bg-background z-10 flex flex-col items-center w-full"
+            class="border-neutral bg-background z-10 flex w-full flex-col items-center border-t"
           >
             <div part="footer">
               <slot name="footer"></slot>
diff --git a/packages/atomic/src/components/ipx/atomic-ipx-button/atomic-ipx-button.pcss b/packages/atomic/src/components/ipx/atomic-ipx-button/atomic-ipx-button.pcss
index b1b1b687a7d..838233d4658 100644
--- a/packages/atomic/src/components/ipx/atomic-ipx-button/atomic-ipx-button.pcss
+++ b/packages/atomic/src/components/ipx/atomic-ipx-button/atomic-ipx-button.pcss
@@ -5,13 +5,13 @@
  */
 :host {
   &::part(ipx-button) {
-    @apply btn-primary fixed bottom-1 right-12 block px-3 whitespace-nowrap;
+    @apply btn-primary fixed bottom-1 right-12 block whitespace-nowrap px-3;
     height: var(--atomic-ipx-button-height, 2.75rem);
     background-color: var(--atomic-primary);
   }
 
   &::part(button-icon) {
-    @apply p-0 inline-block mr-2 w-4 h-4 align-middle relative;
+    @apply relative mr-2 inline-block h-4 w-4 p-0 align-middle;
     font-size: 100%;
   }
 
diff --git a/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx b/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx
index 5cdd900d158..1583d7aadf3 100644
--- a/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx
+++ b/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx
@@ -83,7 +83,7 @@ export class AtomicIPXRefineModal implements InitializableComponent {
 
   private renderHeader() {
     return (
-      <div class="w-full flex justify-between mb-3">
+      <div class="mb-3 flex w-full justify-between">
         {this.breadcrumbManagerState.hasBreadcrumbs && (
           <Button
             onClick={() => this.breadcrumbManager.deselectAll()}
@@ -102,7 +102,7 @@ export class AtomicIPXRefineModal implements InitializableComponent {
     }
 
     return (
-      <aside slot="body" class="flex flex-col w-full adjust-for-scroll-bar">
+      <aside slot="body" class="adjust-for-scroll-bar flex w-full flex-col">
         {this.renderHeader()}
         <slot name="facets"></slot>
       </aside>
diff --git a/packages/atomic/src/components/ipx/atomic-ipx-refine-toggle/atomic-ipx-refine-toggle.pcss b/packages/atomic/src/components/ipx/atomic-ipx-refine-toggle/atomic-ipx-refine-toggle.pcss
index ad72ea2ead4..8b00aeb3a30 100644
--- a/packages/atomic/src/components/ipx/atomic-ipx-refine-toggle/atomic-ipx-refine-toggle.pcss
+++ b/packages/atomic/src/components/ipx/atomic-ipx-refine-toggle/atomic-ipx-refine-toggle.pcss
@@ -5,9 +5,9 @@
 }
 
 [part='ipx-refine-toggle-badge'] {
-  @apply w-5 h-5 leading-5 text-xs;
+  @apply h-5 w-5 text-xs leading-5;
 }
 
 [part='ipx-refine-toggle-icon'] {
-  @apply w-5 h-5;
+  @apply h-5 w-5;
 }
diff --git a/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.pcss b/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.pcss
index de0ca2399eb..c77a6883ff6 100644
--- a/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.pcss
+++ b/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.pcss
@@ -2,7 +2,7 @@
 
 .active {
   &::after {
-    @apply block absolute rounded w-full bg-primary bottom-0 h-1;
+    @apply bg-primary absolute bottom-0 block h-1 w-full rounded;
     content: '';
   }
 }
diff --git a/packages/atomic/src/components/search/atomic-notification/atomic-notifications.tsx b/packages/atomic/src/components/search/atomic-notification/atomic-notifications.tsx
index f9f51d93faf..ac2ae0023da 100644
--- a/packages/atomic/src/components/search/atomic-notification/atomic-notifications.tsx
+++ b/packages/atomic/src/components/search/atomic-notification/atomic-notifications.tsx
@@ -72,14 +72,14 @@ export class AtomicNotifyTrigger implements InitializableComponent {
     return (
       <div
         part="notification"
-        class="shadow-lg bg-background border border-neutral-dark rounded-md p-6 flex items-center"
+        class="bg-background border-neutral-dark flex items-center rounded-md border p-6 shadow-lg"
       >
         <atomic-icon
           icon={this.icon ?? InfoIcon}
           part="icon"
-          class="w-7 h-7 mr-6 text-neutral-dark"
+          class="text-neutral-dark mr-6 h-7 w-7"
         />
-        <span part="text" class="leading-5 text-base text-on-background">
+        <span part="text" class="text-on-background text-base leading-5">
           {text}
         </span>
       </div>
diff --git a/packages/atomic/src/components/search/atomic-relevance-inspector/atomic-relevance-inspector.tsx b/packages/atomic/src/components/search/atomic-relevance-inspector/atomic-relevance-inspector.tsx
index b73b58820ce..6ddbe65c124 100644
--- a/packages/atomic/src/components/search/atomic-relevance-inspector/atomic-relevance-inspector.tsx
+++ b/packages/atomic/src/components/search/atomic-relevance-inspector/atomic-relevance-inspector.tsx
@@ -35,10 +35,10 @@ export class AtomicRelevanceInspector {
         <p slot="body">
           The Relevance Inspector will open in the Coveo Administration Console.
         </p>
-        <div slot="footer" class="w-full flex justify-end items-center">
+        <div slot="footer" class="flex w-full items-center justify-end">
           <Button
             style="outline-primary"
-            class="p-2 mr-2"
+            class="mr-2 p-2"
             onClick={() => this.closeRelevanceInspector?.emit()}
           >
             Ignore
diff --git a/packages/atomic/src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.tsx b/packages/atomic/src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.tsx
index 155acc8a7fc..0a851a783ea 100644
--- a/packages/atomic/src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.tsx
+++ b/packages/atomic/src/components/search/atomic-result-table-placeholder/atomic-result-table-placeholder.tsx
@@ -32,19 +32,19 @@ export class AtomicResultTablePlaceholder {
           <tr>
             <th>
               <div
-                class={`h-8 mt-2 ${placeholderClasses}`}
+                class={`mt-2 h-8 ${placeholderClasses}`}
                 style={{width: '14.5rem'}}
               ></div>
             </th>
             <th>
               <div
-                class={`h-8 mt-2 ${placeholderClasses}`}
+                class={`mt-2 h-8 ${placeholderClasses}`}
                 style={{width: '9.75rem'}}
               ></div>
             </th>
             <th>
               <div
-                class={`h-8 mt-2 ${placeholderClasses}`}
+                class={`mt-2 h-8 ${placeholderClasses}`}
                 style={{width: '6.5rem'}}
               ></div>
             </th>
@@ -55,11 +55,11 @@ export class AtomicResultTablePlaceholder {
             <tr>
               <td>
                 <div
-                  class={`h-8 mb-6 ${placeholderClasses}`}
+                  class={`mb-6 h-8 ${placeholderClasses}`}
                   style={{width: '22.875rem'}}
                 ></div>
                 <div
-                  class={`h-5 mb-2 ${placeholderClasses}`}
+                  class={`mb-2 h-5 ${placeholderClasses}`}
                   style={{width: '23.75rem'}}
                 ></div>
                 <div
@@ -69,13 +69,13 @@ export class AtomicResultTablePlaceholder {
               </td>
               <td>
                 <div
-                  class={`h-5 mt-1.5 ${placeholderClasses}`}
+                  class={`mt-1.5 h-5 ${placeholderClasses}`}
                   style={{width: '11rem'}}
                 ></div>
               </td>
               <td>
                 <div
-                  class={`h-5 mt-1.5 ${placeholderClasses}`}
+                  class={`mt-1.5 h-5 ${placeholderClasses}`}
                   style={{width: '4.875rem'}}
                 ></div>
               </td>
diff --git a/packages/atomic/src/components/search/atomic-results-per-page/atomic-results-per-page.pcss b/packages/atomic/src/components/search/atomic-results-per-page/atomic-results-per-page.pcss
index ba9ae1fb155..d8f29ba58f2 100644
--- a/packages/atomic/src/components/search/atomic-results-per-page/atomic-results-per-page.pcss
+++ b/packages/atomic/src/components/search/atomic-results-per-page/atomic-results-per-page.pcss
@@ -1,5 +1,5 @@
 @import '../../../global/global.pcss';
 
 .btn-page {
-  @apply w-10 h-10;
+  @apply h-10 w-10;
 }
diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss
index 0e749594523..66f67164b88 100644
--- a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss
+++ b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss
@@ -6,7 +6,7 @@
 }
 
 [part~='instant-results-show-all'] {
-  @apply py-1 justify-center;
+  @apply justify-center py-1;
   border-top: 1px solid var(--atomic-neutral);
   margin-top: auto;
   box-sizing: content-box;
diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
index 6f73929168a..154410738de 100644
--- a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
+++ b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
@@ -574,7 +574,7 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
             ? 'suggestions-double-list'
             : 'suggestions-single-list'
         }`}
-        class={`flex w-full z-10 absolute left-0 top-full rounded-md bg-background border border-neutral ${
+        class={`bg-background border-neutral absolute left-0 top-full z-10 flex w-full rounded-md border ${
           this.shouldShowSuggestions ? '' : 'hidden'
         }`}
         role="application"
@@ -649,7 +649,7 @@ export class AtomicSearchBox implements InitializableComponent<Bindings> {
       <textarea
         aria-hidden
         part="textarea-spacer"
-        class="invisible text-lg py-3.5 px-4 w-full"
+        class="invisible w-full px-4 py-3.5 text-lg"
         rows={1}
       ></textarea>
     );
diff --git a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.pcss b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.pcss
index ceeb35f0691..b7a0b473a13 100644
--- a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.pcss
+++ b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.pcss
@@ -11,9 +11,9 @@
 
 [part~='all-categories-button'],
 [part~='parent-button'] {
-  @apply w-full py-2.5 pr-2 pl-7 text-left relative flex items-center;
+  @apply relative flex w-full items-center py-2.5 pl-7 pr-2 text-left;
 }
 
 [part~='back-arrow'] {
-  @apply h-5 w-5 absolute left-1;
+  @apply absolute left-1 h-5 w-5;
 }
diff --git a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
index 588a4fd4d72..8fd09d948bd 100644
--- a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx
@@ -487,7 +487,7 @@ export class AtomicColorFacet implements InitializableComponent {
           >
             <div
               part={`value-${partValueWithDisplayValue} value-${partValueWithAPIValue} default-color-value`}
-              class="w-full h-12 mb-2 rounded-md value-box-color bg-neutral-dark"
+              class="value-box-color bg-neutral-dark mb-2 h-12 w-full rounded-md"
             ></div>
             <FacetValueLabelHighlight
               displayValue={displayValue}
diff --git a/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx b/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx
index 3f5c11c1d83..fb77cfa8877 100644
--- a/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx
@@ -138,16 +138,16 @@ export class AtomicPopover implements InitializableComponent {
         ariaExpanded={`${this.isOpen}`}
         ariaLabel={ariaLabel}
         ariaControls={this.popoverId}
-        class={`rounded flex box-border h-full items-center min-w-[6rem] max-w-[15rem] p-2.5 group hover:border-primary-light focus-visible:border-primary-light ${
+        class={`hover:border-primary-light focus-visible:border-primary-light group box-border flex h-full min-w-[6rem] max-w-[15rem] items-center rounded p-2.5 ${
           this.isOpen
-            ? 'border-primary ring ring-ring-primary text-primary z-[9999]'
+            ? 'border-primary ring-ring-primary text-primary z-[9999] ring'
             : ''
         }`}
       >
         <span
           title={label}
           part="value-label"
-          class={`truncate mr-1.5 ${
+          class={`mr-1.5 truncate ${
             this.isOpen
               ? ''
               : 'group-hover:text-primary-light group-focus:text-primary'
@@ -157,7 +157,7 @@ export class AtomicPopover implements InitializableComponent {
         </span>
         <span
           part="value-count"
-          class={`truncate mr-1.5 text-sm group-hover:text-primary-light group-focus:text-primary ${
+          class={`group-hover:text-primary-light group-focus:text-primary mr-1.5 truncate text-sm ${
             hasActiveValues ? '' : 'hidden'
           } ${this.isOpen ? 'text-primary' : 'text-neutral-dark'}`}
         >
@@ -167,7 +167,7 @@ export class AtomicPopover implements InitializableComponent {
         </span>
         <atomic-icon
           part="arrow-icon"
-          class={`w-2 ml-auto group-hover:text-primary-light group-focus:text-primary ${
+          class={`group-hover:text-primary-light group-focus:text-primary ml-auto w-2 ${
             this.isOpen ? 'rotate-180' : ''
           } `}
           icon={ArrowBottomIcon}
@@ -180,7 +180,7 @@ export class AtomicPopover implements InitializableComponent {
     return (
       <div
         part="backdrop"
-        class="fixed left-0 top-0 right-0 bottom-0 z-[9998] bg-transparent cursor-pointer"
+        class="fixed bottom-0 left-0 right-0 top-0 z-[9998] cursor-pointer bg-transparent"
         onClick={() => this.togglePopover()}
       ></div>
     );
@@ -212,7 +212,7 @@ export class AtomicPopover implements InitializableComponent {
         <div
           part="placeholder"
           aria-hidden
-          class="h-8 w-32 bg-neutral animate-pulse rounded"
+          class="bg-neutral h-8 w-32 animate-pulse rounded"
         ></div>
       );
     }
diff --git a/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx b/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
index 3033cf40052..f15880bb917 100644
--- a/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-rating-range-facet/atomic-rating-range-facet.tsx
@@ -353,7 +353,7 @@ export class AtomicRatingRangeFacet implements InitializableComponent {
     return (
       <span
         part="value-label"
-        class={`ml-1 flex items-center truncate group-focus:text-primary group-hover:text-primary ${
+        class={`group-focus:text-primary group-hover:text-primary ml-1 flex items-center truncate ${
           facetValue.state === 'selected' ? 'font-bold' : ''
         }`}
       >
diff --git a/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx b/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx
index 8df1a5a0e59..d7de81e4151 100644
--- a/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx
@@ -132,7 +132,7 @@ export class AtomicSegmentedFacetScrollable implements InitializableComponent {
         <Button
           part={`${direction}-arrow-button`}
           style="square-neutral"
-          class={`flex shrink-0 basis-8 justify-center items-center rounded absolute z-1 h-10 w-10 top-0 bottom-0 ${
+          class={`z-1 absolute bottom-0 top-0 flex h-10 w-10 shrink-0 basis-8 items-center justify-center rounded ${
             direction === 'left' ? 'left-0' : 'right-0'
           }`}
           ariaHidden="true"
@@ -148,7 +148,7 @@ export class AtomicSegmentedFacetScrollable implements InitializableComponent {
         </Button>
         <div
           part={`${direction}-fade`}
-          class={`w-20 h-10 absolute top-0 z-0 pointer-events-none from-background-60 ${
+          class={`from-background-60 pointer-events-none absolute top-0 z-0 h-10 w-20 ${
             direction === 'left'
               ? 'left-0 bg-gradient-to-r'
               : 'right-0 bg-gradient-to-l'
@@ -164,7 +164,7 @@ export class AtomicSegmentedFacetScrollable implements InitializableComponent {
     }
 
     return (
-      <div part="scrollable-container" class="flex relative">
+      <div part="scrollable-container" class="relative flex">
         {this.renderArrow('left')}
         <div
           part="horizontal-scroll"
diff --git a/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx b/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
index 103c56e04a4..59beb71c393 100644
--- a/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
@@ -305,7 +305,7 @@ export class AtomicSegmentedFacet implements InitializableComponent {
         <div
           part="placeholder"
           aria-hidden
-          class="w-48 h-8 rounded bg-neutral animate-pulse"
+          class="bg-neutral h-8 w-48 animate-pulse rounded"
         ></div>
       );
     }
@@ -317,7 +317,7 @@ export class AtomicSegmentedFacet implements InitializableComponent {
     return (
       <div
         part="segmented-container"
-        class="flex items-center h-10 whitespace-nowrap"
+        class="flex h-10 items-center whitespace-nowrap"
       >
         {this.renderLabel()}
         {this.renderValues()}
diff --git a/packages/atomic/src/components/search/facets/color-facet-checkbox/color-facet-checkbox.pcss b/packages/atomic/src/components/search/facets/color-facet-checkbox/color-facet-checkbox.pcss
index 4ec67caef39..b865a5c7c6b 100644
--- a/packages/atomic/src/components/search/facets/color-facet-checkbox/color-facet-checkbox.pcss
+++ b/packages/atomic/src/components/search/facets/color-facet-checkbox/color-facet-checkbox.pcss
@@ -2,5 +2,5 @@
 
 .value-checkbox:focus-visible,
 .value-checkbox:hover {
-  @apply ring-1 ring-primary-light ring-offset-2;
+  @apply ring-primary-light ring-1 ring-offset-2;
 }
diff --git a/packages/atomic/src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx b/packages/atomic/src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx
index 41ca09c8fc1..cbf7d28f39d 100644
--- a/packages/atomic/src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx
+++ b/packages/atomic/src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx
@@ -22,7 +22,7 @@ export const FacetSegmentedValue: FunctionalComponent<FacetValueProps> = (
         style="square-neutral"
         part={`value-box${props.isSelected ? ' value-box-selected' : ''}`}
         onClick={() => props.onClick()}
-        class={`value-box flex box-border h-full items-center p-2 group ${
+        class={`value-box group box-border flex h-full items-center p-2 ${
           props.isSelected
             ? 'selected border-primary shadow-inner-primary'
             : 'hover:border-primary-light focus-visible:border-primary-light'
@@ -44,7 +44,7 @@ export const FacetSegmentedValue: FunctionalComponent<FacetValueProps> = (
         <span
           title={count}
           part="value-count"
-          class={`value-box-count truncate pl-1 w-auto mt-0 text-sm ${
+          class={`value-box-count mt-0 w-auto truncate pl-1 text-sm ${
             props.isSelected
               ? 'text-primary'
               : 'text-neutral-dark group-hover:text-primary-light group-focus:text-primary'
diff --git a/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.pcss b/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.pcss
index 6ab2a6e6798..17ec24f287d 100644
--- a/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.pcss
+++ b/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.pcss
@@ -16,7 +16,7 @@
   }
 
   &::part(body-wrapper) {
-    @apply p-0 overflow-hidden h-full;
+    @apply h-full overflow-hidden p-0;
   }
 
   &::part(body) {
diff --git a/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.tsx b/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.tsx
index e71fffefaaa..af5e39e284e 100644
--- a/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.tsx
+++ b/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.tsx
@@ -137,7 +137,7 @@ export class AtomicQuickviewModal implements InitializableComponent {
       );
     }
     return (
-      <div slot="header" class="w-full flex justify-between items-center">
+      <div slot="header" class="flex w-full items-center justify-between">
         {headerContent}
       </div>
     );
@@ -145,7 +145,7 @@ export class AtomicQuickviewModal implements InitializableComponent {
 
   private renderBody() {
     return (
-      <div slot="body" class="grid grid-cols-[min-content_auto] h-full">
+      <div slot="body" class="grid h-full grid-cols-[min-content_auto]">
         <div
           class="h-full overflow-y-auto"
           style={{backgroundColor: 'var(--atomic-neutral-light)'}}
@@ -161,7 +161,7 @@ export class AtomicQuickviewModal implements InitializableComponent {
             onMinimize={(minimize) => (this.minimizeSidebar = minimize)}
           />
         </div>
-        <div class="overflow-auto relative">
+        <div class="relative overflow-auto">
           <QuickviewIframe
             logger={this.logger}
             src={this.quickviewSrc}
diff --git a/packages/atomic/src/components/search/result-template-components/atomic-quickview-sidebar/atomic-quickview-sidebar.tsx b/packages/atomic/src/components/search/result-template-components/atomic-quickview-sidebar/atomic-quickview-sidebar.tsx
index 56c8b150ce9..0d8bb8fb096 100644
--- a/packages/atomic/src/components/search/result-template-components/atomic-quickview-sidebar/atomic-quickview-sidebar.tsx
+++ b/packages/atomic/src/components/search/result-template-components/atomic-quickview-sidebar/atomic-quickview-sidebar.tsx
@@ -37,7 +37,7 @@ export const QuickviewSidebar: FunctionalComponent<QuickviewSidebarProps> = (
   );
 
   return (
-    <div class="p-4 border-r border-neutral h-full">
+    <div class="border-neutral h-full border-r p-4">
       {minimized && minimizeButton}
       <div class="flex items-center justify-between">
         <div class="flex items-center">
@@ -94,7 +94,7 @@ const HighlightKeywordsCheckbox: FunctionalComponent<
     ></Checkbox>
     {!minimized && (
       <label
-        class="font-bold cursor-pointer whitespace-nowrap"
+        class="cursor-pointer whitespace-nowrap font-bold"
         htmlFor="atomic-quickview-sidebar-highlight-keywords"
       >
         {i18n.t('keywords-highlight')}
@@ -122,22 +122,22 @@ const Keywords: FunctionalComponent<
         return (
           <div
             key={keyword.text}
-            class="flex items-center justify-between gap-x-2 my-4 w-100"
+            class="w-100 my-4 flex items-center justify-between gap-x-2"
           >
             <div
-              class={`flex grow items-center bg-background border border-neutral rounded-lg overflow-x-auto ${
+              class={`bg-background border-neutral flex grow items-center overflow-x-auto rounded-lg border ${
                 !wordIsEnabled ? 'pointer-events-none opacity-50' : ''
               }`}
             >
               <div
-                class="flex items-center grow p-4 border-r"
+                class="flex grow items-center border-r p-4"
                 aria-hidden="true"
               >
                 <div
-                  class="w-5 h-5 flex-none mr-2"
+                  class="mr-2 h-5 w-5 flex-none"
                   style={{backgroundColor: keyword.color}}
                 ></div>
-                <div class="grow mr-2 whitespace-nowrap">{keyword.text}</div>
+                <div class="mr-2 grow whitespace-nowrap">{keyword.text}</div>
                 <div class="flex-none">
                   (
                   {new Intl.NumberFormat(i18n.language, {
diff --git a/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx b/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx
index ed4de9084fa..cb91b5aa9f6 100644
--- a/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx
+++ b/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx
@@ -154,7 +154,7 @@ export class AtomicQuickview implements InitializableComponent {
         >
           <atomic-icon
             part="icon"
-            class="w-5 flex justify-center"
+            class="flex w-5 justify-center"
             icon={QuickviewIcon}
           ></atomic-icon>
         </Button>
diff --git a/packages/atomic/src/components/search/result-template-components/atomic-result-badge/atomic-result-badge.tsx b/packages/atomic/src/components/search/result-template-components/atomic-result-badge/atomic-result-badge.tsx
index f46dbb4c659..000241e3ca7 100644
--- a/packages/atomic/src/components/search/result-template-components/atomic-result-badge/atomic-result-badge.tsx
+++ b/packages/atomic/src/components/search/result-template-components/atomic-result-badge/atomic-result-badge.tsx
@@ -74,7 +74,7 @@ export class AtomicResultBadge {
       <atomic-icon
         part="result-badge-icon"
         icon={this.icon!}
-        class="w-3 h-3 fill-current"
+        class="h-3 w-3 fill-current"
       ></atomic-icon>
     );
   }
@@ -97,7 +97,7 @@ export class AtomicResultBadge {
     return (
       <div
         part="result-badge-element"
-        class="inline-flex place-items-center space-x-1.5 h-full px-3 bg-neutral-light text-neutral-dark text-xs rounded-full"
+        class="bg-neutral-light text-neutral-dark inline-flex h-full place-items-center space-x-1.5 rounded-full px-3 text-xs"
       >
         {this.icon && this.renderIcon()}
         {this.renderText()}
diff --git a/packages/atomic/src/components/search/result-template-components/quickview-iframe/quickview-iframe.tsx b/packages/atomic/src/components/search/result-template-components/quickview-iframe/quickview-iframe.tsx
index 7349797ee82..1c08bc0f95b 100644
--- a/packages/atomic/src/components/search/result-template-components/quickview-iframe/quickview-iframe.tsx
+++ b/packages/atomic/src/components/search/result-template-components/quickview-iframe/quickview-iframe.tsx
@@ -62,7 +62,7 @@ export const QuickviewIframe: FunctionalComponent<{
   return (
     <iframe
       src="about:blank"
-      class="w-full h-full"
+      class="h-full w-full"
       sandbox={sandbox}
       ref={async (el) => {
         const iframeRef = el as HTMLIFrameElement;
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
index ff67ad2d605..aa80388777c 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
@@ -77,7 +77,7 @@ export class AtomicTabManager {
   public render() {
     return (
       <div class="mb-2 overflow-x-auto">
-        <div class="flex flex-row w-full mb-2 border-b tabs-area">
+        <div class="tabs-area mb-2 flex w-full flex-row border-b">
           {this.tabs.map((tab) => (
             <TabButton
               isActive={tab.tabController.state.isActive}
diff --git a/packages/atomic/src/global/global.pcss b/packages/atomic/src/global/global.pcss
index f7f00968650..16dfc9692d8 100644
--- a/packages/atomic/src/global/global.pcss
+++ b/packages/atomic/src/global/global.pcss
@@ -15,7 +15,7 @@
   button,
   input,
   select {
-    @apply font-sans font-normal text-base;
+    @apply font-sans text-base font-normal;
   }
 
   :host(.atomic-hidden) {
@@ -25,11 +25,11 @@
 
 @layer components {
   .link {
-    @apply text-primary hover:text-primary-light hover:underline focus-visible:text-primary-light focus-visible:underline;
+    @apply text-primary hover:text-primary-light focus-visible:text-primary-light hover:underline focus-visible:underline;
   }
 
   .input-primary {
-    @apply border border-neutral bg-background rounded hover:border-primary-light focus-visible:border-primary no-outline focus-visible:ring-2 focus-visible:ring-ring-primary;
+    @apply border-neutral bg-background hover:border-primary-light focus-visible:border-primary no-outline focus-visible:ring-ring-primary rounded border focus-visible:ring-2;
   }
 
   .btn-radio {
@@ -40,23 +40,23 @@
   }
 
   .btn-primary {
-    @apply rounded bg-primary text-on-primary hover:bg-primary-light focus-visible:bg-primary-light no-outline focus-visible:ring-2 focus-visible:ring-ring-primary disabled:cursor-not-allowed disabled:bg-disabled;
+    @apply bg-primary text-on-primary hover:bg-primary-light focus-visible:bg-primary-light no-outline focus-visible:ring-ring-primary disabled:bg-disabled rounded focus-visible:ring-2 disabled:cursor-not-allowed;
   }
 
   .btn-outline-primary {
-    @apply rounded border border-neutral hover:border-primary-light focus-visible:border-primary bg-background text-primary hover:text-primary-light focus-visible:text-primary focus-visible:ring-2 focus-visible:ring-ring-primary no-outline disabled:border-neutral disabled:text-neutral disabled:cursor-not-allowed;
+    @apply border-neutral hover:border-primary-light focus-visible:border-primary bg-background text-primary hover:text-primary-light focus-visible:text-primary focus-visible:ring-ring-primary no-outline disabled:border-neutral disabled:text-neutral rounded border focus-visible:ring-2 disabled:cursor-not-allowed;
   }
 
   .btn-text-primary {
-    @apply rounded bg-background text-primary hover:bg-neutral-light focus-visible:bg-neutral-light no-outline;
+    @apply bg-background text-primary hover:bg-neutral-light focus-visible:bg-neutral-light no-outline rounded;
   }
 
   .btn-outline-neutral {
-    @apply rounded border border-neutral hover:border-primary focus-visible:border-primary bg-background text-on-background hover:text-primary focus-visible:text-primary focus-visible:ring-2 focus-visible:ring-ring-primary no-outline disabled:text-on-background disabled:border-neutral disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply border-neutral hover:border-primary focus-visible:border-primary bg-background text-on-background hover:text-primary focus-visible:text-primary focus-visible:ring-ring-primary no-outline disabled:text-on-background disabled:border-neutral rounded border focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   .btn-outline-error {
-    @apply rounded border border-neutral hover:border-error focus-visible:border-error bg-background text-on-background hover:text-error focus-visible:text-error focus-visible:ring-2 focus-visible:ring-ring-primary no-outline disabled:text-on-background disabled:border-neutral disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply border-neutral hover:border-error focus-visible:border-error bg-background text-on-background hover:text-error focus-visible:text-error focus-visible:ring-ring-primary no-outline disabled:text-on-background disabled:border-neutral rounded border focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   .btn-outline-bg-neutral {
@@ -68,7 +68,7 @@
   }
 
   .btn-text-neutral {
-    @apply rounded bg-background hover:bg-neutral-light focus-visible:bg-neutral-light no-outline text-on-background focus-visible:text-primary hover:text-primary;
+    @apply bg-background hover:bg-neutral-light focus-visible:bg-neutral-light no-outline text-on-background focus-visible:text-primary hover:text-primary rounded;
   }
 
   .btn-text-transparent {
@@ -76,7 +76,7 @@
   }
 
   .btn-square-neutral {
-    @apply border border-neutral bg-background text-on-background hover:bg-neutral-light focus-visible:bg-neutral-light no-outline;
+    @apply border-neutral bg-background text-on-background hover:bg-neutral-light focus-visible:bg-neutral-light no-outline border;
   }
 
   .btn-pill {
@@ -84,10 +84,10 @@
   }
 
   .btn-page {
-    @apply grid place-items-center text-lg border-0 hover:border focus-visible:border;
+    @apply grid place-items-center border-0 text-lg hover:border focus-visible:border;
 
     &.selected {
-      @apply font-bold border-2 border-primary;
+      @apply border-primary border-2 font-bold;
     }
   }
 }
diff --git a/packages/atomic/src/pages/examples/commerce-website/cart.html b/packages/atomic/src/pages/examples/commerce-website/cart.html
index 44d67e9c147..2c5185bf747 100644
--- a/packages/atomic/src/pages/examples/commerce-website/cart.html
+++ b/packages/atomic/src/pages/examples/commerce-website/cart.html
@@ -54,7 +54,7 @@ <h1>Cart</h1>
                       <atomic-product-image field="ec_thumbnails"></atomic-product-image>
                     </atomic-product-section-visual>
                     <atomic-product-section-metadata>
-                      <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+                      <atomic-product-text field="ec_brand" class="text-neutral-dark block"></atomic-product-text>
                       <atomic-product-rating field="ec_rating"></atomic-product-rating>
                     </atomic-product-section-metadata>
                     <atomic-product-section-emphasized>
diff --git a/packages/atomic/src/pages/examples/commerce-website/homepage.html b/packages/atomic/src/pages/examples/commerce-website/homepage.html
index 78705971b56..1c7ef5ed9f0 100644
--- a/packages/atomic/src/pages/examples/commerce-website/homepage.html
+++ b/packages/atomic/src/pages/examples/commerce-website/homepage.html
@@ -55,7 +55,7 @@ <h1>HOMEPAGE</h1>
                     </atomic-product-section-visual>
                     <atomic-product-section-metadata>
                       <atomic-product-field-condition if-defined="ec_brand">
-                        <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+                        <atomic-product-text field="ec_brand" class="text-neutral-dark block"></atomic-product-text>
                       </atomic-product-field-condition>
                       <atomic-product-field-condition if-defined="ec_brand">
                         <atomic-product-rating field="ec_rating"></atomic-product-rating>
diff --git a/packages/atomic/src/pages/examples/commerce-website/listing-pants.html b/packages/atomic/src/pages/examples/commerce-website/listing-pants.html
index 6da23cc2a8d..b11092c8962 100644
--- a/packages/atomic/src/pages/examples/commerce-website/listing-pants.html
+++ b/packages/atomic/src/pages/examples/commerce-website/listing-pants.html
@@ -51,7 +51,7 @@ <h1>Pants</h1>
                     <atomic-product-children></atomic-product-children>
                   </atomic-product-section-children>
                   <atomic-product-section-metadata>
-                    <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+                    <atomic-product-text field="ec_brand" class="text-neutral-dark block"></atomic-product-text>
                     <atomic-product-rating field="ec_rating"></atomic-product-rating>
                   </atomic-product-section-metadata>
                   <atomic-product-section-emphasized>
diff --git a/packages/atomic/src/pages/examples/commerce-website/listing-surf-accessories.html b/packages/atomic/src/pages/examples/commerce-website/listing-surf-accessories.html
index f93e9beed6e..0a3d4917b41 100644
--- a/packages/atomic/src/pages/examples/commerce-website/listing-surf-accessories.html
+++ b/packages/atomic/src/pages/examples/commerce-website/listing-surf-accessories.html
@@ -51,7 +51,7 @@ <h1>Surf accessories</h1>
                     <atomic-product-children></atomic-product-children>
                   </atomic-product-section-children>
                   <atomic-product-section-metadata>
-                    <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+                    <atomic-product-text field="ec_brand" class="text-neutral-dark block"></atomic-product-text>
                     <atomic-product-rating field="ec_rating"></atomic-product-rating>
                   </atomic-product-section-metadata>
                   <atomic-product-section-emphasized>
diff --git a/packages/atomic/src/pages/examples/commerce-website/listing-towels.html b/packages/atomic/src/pages/examples/commerce-website/listing-towels.html
index 1f69b97292b..05390d8f402 100644
--- a/packages/atomic/src/pages/examples/commerce-website/listing-towels.html
+++ b/packages/atomic/src/pages/examples/commerce-website/listing-towels.html
@@ -51,7 +51,7 @@ <h1>Towels</h1>
                     <atomic-product-children></atomic-product-children>
                   </atomic-product-section-children>
                   <atomic-product-section-metadata>
-                    <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+                    <atomic-product-text field="ec_brand" class="text-neutral-dark block"></atomic-product-text>
                     <atomic-product-rating field="ec_rating"></atomic-product-rating>
                   </atomic-product-section-metadata>
                   <atomic-product-section-emphasized>
diff --git a/packages/atomic/src/pages/examples/commerce-website/search.html b/packages/atomic/src/pages/examples/commerce-website/search.html
index cc1066aebe2..3420e6fd93d 100644
--- a/packages/atomic/src/pages/examples/commerce-website/search.html
+++ b/packages/atomic/src/pages/examples/commerce-website/search.html
@@ -45,7 +45,7 @@ <h1>Search page</h1>
                       </atomic-product-section-visual>
                       <atomic-product-section-metadata>
                         <atomic-product-field-condition if-defined="ec_brand">
-                          <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+                          <atomic-product-text field="ec_brand" class="text-neutral-dark block"></atomic-product-text>
                         </atomic-product-field-condition>
                         <atomic-product-field-condition if-defined="ec_rating">
                           <atomic-product-rating field="ec_rating"></atomic-product-rating>
@@ -87,7 +87,7 @@ <h1>Search page</h1>
                       </atomic-product-section-visual>
                       <atomic-product-section-metadata>
                         <atomic-product-field-condition if-defined="ec_brand">
-                          <atomic-product-text field="ec_brand" class="block text-neutral-dark"></atomic-product-text>
+                          <atomic-product-text field="ec_brand" class="text-neutral-dark block"></atomic-product-text>
                         </atomic-product-field-condition>
                         <atomic-product-field-condition if-defined="ec_rating">
                           <atomic-product-rating field="ec_rating"></atomic-product-rating>
@@ -97,7 +97,7 @@ <h1>Search page</h1>
                         <atomic-product-price currency="USD"></atomic-product-price>
                       </atomic-product-section-emphasized>
                       <atomic-product-section-description>
-                        <atomic-product-text field="excerpt" class="block text-neutral-dark"></atomic-product-text>
+                        <atomic-product-text field="excerpt" class="text-neutral-dark block"></atomic-product-text>
                       </atomic-product-section-description>
                       <atomic-product-section-children>
                         <atomic-product-children></atomic-product-children>
diff --git a/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx b/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx
index cf8aa8abdbd..82eb5f25cdf 100644
--- a/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx
+++ b/packages/samples/atomic-react/src/pages/CommerceSearchPage.tsx
@@ -119,7 +119,7 @@ function MyTemplate() {
       <AtomicProductSectionMetadata>
         <AtomicProductText
           field="ec_brand"
-          class="block text-neutral-dark"
+          class="text-neutral-dark block"
         ></AtomicProductText>
         <AtomicProductRating field="ec_rating"></AtomicProductRating>
       </AtomicProductSectionMetadata>

From 87ef80c648225ce21b002282060958cef9556fc8 Mon Sep 17 00:00:00 2001
From: Felix Perron-Brault <fpbrault@coveo.com>
Date: Tue, 6 Aug 2024 09:14:19 -0400
Subject: [PATCH 2/4] test(atomic): add tests for atomic-tab-manager (#4216)

This PR adds tests for the atomic-tab-manager component. It includes
tests for facet visibility based on the active tab. Tests for visibility
of other components will be added in their respective PRs.

https://coveord.atlassian.net/browse/CDX-1579

---------

Co-authored-by: GitHub Actions Bot <>
Co-authored-by: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com>
---
 .../atomic-angular.module.ts                  |   2 +
 .../src/lib/stencil-generated/components.ts   |  22 ++
 .../stencil-generated/search/index.ts         |   1 +
 packages/atomic/src/components.d.ts           |  12 ++
 .../common/tab-manager/tab-button.tsx         |  11 +-
 .../common/tab-manager/tab-dropdown.tsx       |   6 +-
 .../atomic-tab-manager.new.stories.tsx        | 170 +++++++++++++++
 .../atomic-tab-manager.pcss                   |   4 +-
 .../atomic-tab-manager/atomic-tab-manager.tsx |  11 +-
 .../e2e/atomic-tab-manager.e2e.ts             | 197 ++++++++++++++++++
 .../tabs/atomic-tab-manager/e2e/fixture.ts    |  23 ++
 .../atomic-tab-manager/e2e/page-object.ts     |  48 +++++
 packages/atomic/src/utils/tab-utils.ts        |  13 +-
 13 files changed, 504 insertions(+), 16 deletions(-)
 create mode 100644 packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
 create mode 100644 packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
 create mode 100644 packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts
 create mode 100644 packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts

diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
index 642538c8ccb..64a2bbc46c5 100644
--- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
+++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
@@ -103,6 +103,7 @@ AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
 AtomicSortDropdown,
 AtomicSortExpression,
+AtomicTabManager,
 AtomicTableElement,
 AtomicText,
 AtomicTimeframe,
@@ -213,6 +214,7 @@ AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
 AtomicSortDropdown,
 AtomicSortExpression,
+AtomicTabManager,
 AtomicTableElement,
 AtomicText,
 AtomicTimeframe,
diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
index 7b01808e15b..b9f59d11f27 100644
--- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
+++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
@@ -2223,6 +2223,28 @@ export class AtomicSortExpression {
 export declare interface AtomicSortExpression extends Components.AtomicSortExpression {}
 
 
+@ProxyCmp({
+  inputs: ['clearFiltersOnTabChange']
+})
+@Component({
+  selector: 'atomic-tab-manager',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['clearFiltersOnTabChange'],
+})
+export class AtomicTabManager {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicTabManager extends Components.AtomicTabManager {}
+
+
 @ProxyCmp({
   inputs: ['label']
 })
diff --git a/packages/atomic-react/src/components/stencil-generated/search/index.ts b/packages/atomic-react/src/components/stencil-generated/search/index.ts
index 50765440f10..1e9311bb84f 100644
--- a/packages/atomic-react/src/components/stencil-generated/search/index.ts
+++ b/packages/atomic-react/src/components/stencil-generated/search/index.ts
@@ -90,6 +90,7 @@ export const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/createReactComponent
 export const AtomicSmartSnippetSuggestions = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippetSuggestions, HTMLAtomicSmartSnippetSuggestionsElement>('atomic-smart-snippet-suggestions');
 export const AtomicSortDropdown = /*@__PURE__*/createReactComponent<JSX.AtomicSortDropdown, HTMLAtomicSortDropdownElement>('atomic-sort-dropdown');
 export const AtomicSortExpression = /*@__PURE__*/createReactComponent<JSX.AtomicSortExpression, HTMLAtomicSortExpressionElement>('atomic-sort-expression');
+export const AtomicTabManager = /*@__PURE__*/createReactComponent<JSX.AtomicTabManager, HTMLAtomicTabManagerElement>('atomic-tab-manager');
 export const AtomicTableElement = /*@__PURE__*/createReactComponent<JSX.AtomicTableElement, HTMLAtomicTableElementElement>('atomic-table-element');
 export const AtomicText = /*@__PURE__*/createReactComponent<JSX.AtomicText, HTMLAtomicTextElement>('atomic-text');
 export const AtomicTimeframe = /*@__PURE__*/createReactComponent<JSX.AtomicTimeframe, HTMLAtomicTimeframeElement>('atomic-timeframe');
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
index ff0c7ef5c5d..a151a53f748 100644
--- a/packages/atomic/src/components.d.ts
+++ b/packages/atomic/src/components.d.ts
@@ -3352,6 +3352,9 @@ export namespace Components {
          */
         "name": string;
     }
+    /**
+     * @alpha 
+     */
     interface AtomicTabManager {
         /**
           * Whether to clear the filters when the active tab changes.
@@ -5482,6 +5485,9 @@ declare global {
         prototype: HTMLAtomicTabElement;
         new (): HTMLAtomicTabElement;
     };
+    /**
+     * @alpha 
+     */
     interface HTMLAtomicTabManagerElement extends Components.AtomicTabManager, HTMLStencilElement {
     }
     var HTMLAtomicTabManagerElement: {
@@ -8867,6 +8873,9 @@ declare namespace LocalJSX {
          */
         "name": string;
     }
+    /**
+     * @alpha 
+     */
     interface AtomicTabManager {
         /**
           * Whether to clear the filters when the active tab changes.
@@ -9901,6 +9910,9 @@ declare module "@stencil/core" {
              */
             "atomic-sort-expression": LocalJSX.AtomicSortExpression & JSXBase.HTMLAttributes<HTMLAtomicSortExpressionElement>;
             "atomic-tab": LocalJSX.AtomicTab & JSXBase.HTMLAttributes<HTMLAtomicTabElement>;
+            /**
+             * @alpha 
+             */
             "atomic-tab-manager": LocalJSX.AtomicTabManager & JSXBase.HTMLAttributes<HTMLAtomicTabManagerElement>;
             /**
              * The `atomic-table-element` element defines a table column in a result list.
diff --git a/packages/atomic/src/components/common/tab-manager/tab-button.tsx b/packages/atomic/src/components/common/tab-manager/tab-button.tsx
index eb3c53b48f3..04e8c64adaf 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-button.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-button.tsx
@@ -13,14 +13,19 @@ export const TabButton: FunctionalComponent<TabButtonProps> = (props) => {
     : '';
   const activeTabTextClass = props.isActive ? '' : 'text-neutral-dark';
   return (
-    <div part="button-container" class={activeTabClass}>
+    <li
+      aria-current={props.isActive ? 'true' : 'false'}
+      aria-label={'tab for ' + props.label}
+      part="button-container"
+      class={activeTabClass}
+    >
       <Button
         style="text-transparent"
         class={`w-full px-6 pb-1 text-xl ${activeTabTextClass}`}
         text={props.label}
-        part="button"
+        part="tab-button"
         onClick={props.handleClick}
       ></Button>
-    </div>
+    </li>
   );
 };
diff --git a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx b/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
index 68ac2145dd9..1ff2e970e38 100644
--- a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
+++ b/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx
@@ -11,8 +11,12 @@ export const TabDropdown: FunctionalComponent<TabDropdownProps> = (
   children
 ) => {
   return (
-    <div class="dropdown-area hidden border-b pb-1">
+    <div
+      class="tab-dropdown-area hidden border-b pb-1"
+      aria-label="tab-dropdown-area"
+    >
       <select
+        aria-label="tab-dropdown"
         class="btn-text-primary cursor-pointer py-2 text-xl font-bold"
         onChange={(e) =>
           props.onTabChange((e.target as HTMLSelectElement).value)
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
new file mode 100644
index 00000000000..56b103be2b6
--- /dev/null
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx
@@ -0,0 +1,170 @@
+import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import {wrapInSearchInterface} from '@coveo/atomic/storybookUtils/search-interface-wrapper';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit/static-html.js';
+
+const {decorator, play} = wrapInSearchInterface();
+
+const meta: Meta = {
+  component: 'atomic-tab-manager',
+  title: 'Atomic/Tabs',
+  id: 'atomic-tab-manager',
+
+  render: renderComponent,
+  decorators: [decorator],
+  parameters,
+  play,
+  args: {
+    'slots-default': `
+      <atomic-tab name="all" label="All" tab></atomic-tab>
+      <atomic-tab name="article" label="Articles"></atomic-tab>
+      <atomic-tab name="documentation" label="Documentation"></atomic-tab>
+    `,
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-tab-manager',
+  decorators: [
+    (story) => html`
+      ${story()}
+      <div style="display: flex; justify-content: flex-start;">
+        <atomic-facet field="objecttype" label="Object type"></atomic-facet>
+        <atomic-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          field="filetype"
+          label="File type"
+        ></atomic-facet>
+        <atomic-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          field="source"
+          label="Source"
+        ></atomic-facet>
+      </div>
+      <div style="display: flex; justify-content: flex-start;">
+        <atomic-category-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          field="geographicalhierarchy"
+          label="World Atlas"
+          with-search
+        ></atomic-category-facet>
+        <atomic-category-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          field="geographicalhierarchy"
+          label="World Atlas"
+        ></atomic-category-facet>
+        <atomic-color-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          field="filetype"
+          label="Files"
+          number-of-values="6"
+          sort-criteria="occurrences"
+        ></atomic-color-facet>
+        <atomic-color-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          field="filetype"
+          label="Files"
+          number-of-values="6"
+          sort-criteria="occurrences"
+        ></atomic-color-facet>
+      </div>
+      <div style="display: flex; justify-content: flex-start;">
+        <atomic-rating-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          field="snrating"
+          label="Rating"
+          number-of-intervals="5"
+        ></atomic-rating-facet>
+        <atomic-rating-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          field="snrating"
+          label="Rating"
+          number-of-intervals="5"
+        ></atomic-rating-facet>
+        <atomic-rating-range-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          facet-id="snrating_range"
+          field="snrating"
+          label="Rating Range (auto)"
+          number-of-intervals="5"
+        ></atomic-rating-range-facet>
+        <atomic-rating-range-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          facet-id="snrating_range_2"
+          field="snrating"
+          label="Rating Range (auto)"
+          number-of-intervals="5"
+        ></atomic-rating-range-facet>
+      </div>
+      <div style="display: flex; justify-content: flex-start; padding:50px;">
+        <atomic-segmented-facet-scrollable>
+          <atomic-segmented-facet
+            aria-label="included-facet"
+            tabs-included='["article"]'
+            field="inat_kingdom"
+            label="Kingdom"
+          ></atomic-segmented-facet>
+        </atomic-segmented-facet-scrollable>
+        <atomic-segmented-facet-scrollable>
+          <atomic-segmented-facet
+            aria-label="excluded-facet"
+            tabs-excluded='["article"]'
+            field="inat_kingdom"
+            label="Kingdom"
+          ></atomic-segmented-facet>
+        </atomic-segmented-facet-scrollable>
+      </div>
+      <div style="display: flex; justify-content: flex-start;">
+        <atomic-timeframe-facet
+          aria-label="included-facet"
+          tabs-included='["article"]'
+          label="Timeframe"
+          with-date-picker
+        >
+          <atomic-timeframe unit="hour"></atomic-timeframe>
+          <atomic-timeframe unit="day"></atomic-timeframe>
+          <atomic-timeframe unit="week"></atomic-timeframe>
+          <atomic-timeframe unit="month"></atomic-timeframe>
+          <atomic-timeframe unit="quarter"></atomic-timeframe>
+          <atomic-timeframe unit="year"></atomic-timeframe>
+          <atomic-timeframe
+            unit="year"
+            amount="10"
+            period="next"
+          ></atomic-timeframe
+        ></atomic-timeframe-facet>
+        <atomic-timeframe-facet
+          aria-label="excluded-facet"
+          tabs-excluded='["article"]'
+          label="Timeframe"
+          with-date-picker
+        >
+          <atomic-timeframe unit="hour"></atomic-timeframe>
+          <atomic-timeframe unit="day"></atomic-timeframe>
+          <atomic-timeframe unit="week"></atomic-timeframe>
+          <atomic-timeframe unit="month"></atomic-timeframe>
+          <atomic-timeframe unit="quarter"></atomic-timeframe>
+          <atomic-timeframe unit="year"></atomic-timeframe>
+          <atomic-timeframe
+            unit="year"
+            amount="10"
+            period="next"
+          ></atomic-timeframe
+        ></atomic-timeframe-facet>
+      </div>
+    `,
+  ],
+};
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss
index 1a2301a809a..c0d397fe0e2 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss
@@ -1,11 +1,11 @@
 @import '../../../../global/global.pcss';
 
 @media (max-width: 768px) {
-  .dropdown-area {
+  .tab-dropdown-area {
     display: block;
   }
 
-  .tabs-area {
+  .tab-area {
     display: none;
   }
 }
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
index aa80388777c..07e5e878843 100644
--- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
@@ -16,10 +16,11 @@ import {TabDropdownOption} from '../../../common/tab-manager/tab-dropdown-option
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
- * @internal
+ * @alpha
  *
  * @part button-container - The container for the tab button.
  * @part button - The tab button.
+ * @slot default
  */
 @Component({
   tag: 'atomic-tab-manager',
@@ -77,7 +78,11 @@ export class AtomicTabManager {
   public render() {
     return (
       <div class="mb-2 overflow-x-auto">
-        <div class="tabs-area mb-2 flex w-full flex-row border-b">
+        <ul
+          role="list"
+          aria-label="tab-area"
+          class="tab-area mb-2 flex w-full flex-row border-b"
+        >
           {this.tabs.map((tab) => (
             <TabButton
               isActive={tab.tabController.state.isActive}
@@ -89,7 +94,7 @@ export class AtomicTabManager {
               }}
             ></TabButton>
           ))}
-        </div>
+        </ul>
         <TabDropdown
           tabs={this.tabs}
           activeTab={this.tabManagerState.activeTab}
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
new file mode 100644
index 00000000000..d603fdefee4
--- /dev/null
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts
@@ -0,0 +1,197 @@
+import {test, expect} from './fixture';
+
+test.beforeEach(async ({tabManager}) => {
+  await tabManager.load();
+  await tabManager.hydrated.waitFor();
+});
+
+test.describe('when viewport is large enough to display all tabs', () => {
+  test('should be A11y compliant', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations).toEqual([]);
+  });
+
+  test('should display tabs area', async ({tabManager}) => {
+    await expect(tabManager.tabArea).toBeVisible();
+  });
+
+  test('should not display tabs dropdown', async ({tabManager}) => {
+    await expect(tabManager.tabDropdown).not.toBeVisible();
+  });
+
+  test('should display tab buttons for each atomic-tab elements', async ({
+    tabManager,
+  }) => {
+    await expect(tabManager.tabDropdown).not.toBeVisible();
+
+    expect(await tabManager.tabButtons()).toHaveText([
+      'All',
+      'Articles',
+      'Documentation',
+    ]);
+  });
+
+  test.describe('when clicking on tab button', () => {
+    test.beforeEach(async ({tabManager}) => {
+      await tabManager.tabButtons('Articles').click();
+    });
+
+    test('should change active tab', async ({tabManager}) => {
+      await expect(tabManager.activeTab).toHaveText('Articles');
+    });
+
+    test.describe('should change other component visibility', async () => {
+      test('facets', async ({tabManager}) => {
+        await tabManager.excludedFacet.last().waitFor({state: 'hidden'});
+        const includedFacets = await tabManager.includedFacet.all();
+        for (let i = 0; i < includedFacets.length; i++) {
+          await expect(includedFacets[i]).toBeVisible();
+        }
+
+        const excludedFacets = await tabManager.excludedFacet.all();
+        for (let i = 0; i < excludedFacets.length; i++) {
+          await expect(excludedFacets[i]).not.toBeVisible();
+        }
+      });
+    });
+
+    test.describe('when selecting previous tab', () => {
+      test.beforeEach(async ({tabManager}) => {
+        await tabManager.tabButtons('All').click();
+      });
+
+      test.describe('should change other component visibility', async () => {
+        test('facets', async ({tabManager}) => {
+          await tabManager.includedFacet.last().waitFor({state: 'hidden'});
+
+          const excludedFacets = await tabManager.excludedFacet.all();
+          for (let i = 0; i < excludedFacets.length; i++) {
+            await expect(excludedFacets[i]).toBeVisible();
+          }
+
+          const includedFacets = await tabManager.includedFacet.all();
+          for (let i = 0; i < includedFacets.length; i++) {
+            await expect(includedFacets[i]).not.toBeVisible();
+          }
+        });
+      });
+    });
+
+    test.describe('when resizing viewport', () => {
+      test.beforeEach(async ({page}) => {
+        await page.setViewportSize({width: 300, height: 500});
+      });
+
+      test('should display tabs dropdown', async ({tabManager}) => {
+        await expect(tabManager.tabDropdown).toBeVisible();
+      });
+
+      test('should hide tabs area', async ({tabManager}) => {
+        await expect(tabManager.tabArea).not.toBeVisible();
+      });
+
+      test('should have the active tab selected in the dropdown', async ({
+        tabManager,
+      }) => {
+        await expect(tabManager.tabDropdown).toHaveValue('article');
+      });
+    });
+  });
+});
+
+test.describe('when viewport is too small to display all buttons', () => {
+  test.beforeEach(async ({page}) => {
+    await page.setViewportSize({width: 300, height: 1000});
+  });
+
+  test('should be A11y compliant', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations).toEqual([]);
+  });
+
+  test('should not display tabs area', async ({tabManager}) => {
+    await expect(tabManager.tabArea).not.toBeVisible();
+  });
+
+  test('should display tabs dropdown', async ({tabManager}) => {
+    await expect(tabManager.tabDropdown).toBeVisible();
+  });
+
+  test('should display tab dropdown options for each atomic-tab elements', async ({
+    tabManager,
+  }) => {
+    await expect(tabManager.tabDropdownOptions()).toHaveText([
+      'All',
+      'Articles',
+      'Documentation',
+    ]);
+  });
+
+  test.describe('when selecting a dropdown option', () => {
+    test.beforeEach(async ({tabManager}) => {
+      await tabManager.tabDropdown.selectOption('article');
+    });
+
+    test('should change active tab', async ({tabManager}) => {
+      await expect(tabManager.tabDropdown).toHaveValue('article');
+    });
+
+    test.describe('should change other component visibility', async () => {
+      test('facets', async ({tabManager}) => {
+        await tabManager.excludedFacet.last().waitFor({state: 'hidden'});
+
+        const includedFacets = await tabManager.includedFacet.all();
+        for (let i = 0; i < includedFacets.length; i++) {
+          await expect(includedFacets[i]).toBeVisible();
+        }
+
+        const excludedFacets = await tabManager.excludedFacet.all();
+        for (let i = 0; i < excludedFacets.length; i++) {
+          await expect(excludedFacets[i]).not.toBeVisible();
+        }
+      });
+    });
+
+    test.describe('when selecting previous dropdown option', () => {
+      test.beforeEach(async ({tabManager}) => {
+        await tabManager.tabDropdown.selectOption('all');
+      });
+
+      test.describe('should change other component visibility', async () => {
+        test('facets', async ({tabManager}) => {
+          await tabManager.includedFacet.last().waitFor({state: 'hidden'});
+
+          const excludedFacets = await tabManager.excludedFacet.all();
+          for (let i = 0; i < excludedFacets.length; i++) {
+            await expect(excludedFacets[i]).toBeVisible();
+          }
+
+          const includedFacets = await tabManager.includedFacet.all();
+          for (let i = 0; i < includedFacets.length; i++) {
+            await expect(includedFacets[i]).not.toBeVisible();
+          }
+        });
+      });
+    });
+
+    test.describe('when resizing viewport', () => {
+      test.beforeEach(async ({page}) => {
+        await page.setViewportSize({width: 1000, height: 500});
+      });
+
+      test('should hide tabs dropdown', async ({tabManager}) => {
+        await expect(tabManager.tabDropdown).not.toBeVisible();
+      });
+
+      test('should display tabs area', async ({tabManager}) => {
+        await expect(tabManager.tabArea).toBeVisible();
+      });
+
+      test('should have the active tab button selected', async ({
+        tabManager,
+      }) => {
+        await expect(tabManager.activeTab).toHaveText('Articles');
+      });
+    });
+  });
+});
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts
new file mode 100644
index 00000000000..5c1eac529e2
--- /dev/null
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts
@@ -0,0 +1,23 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../../playwright-utils/base-fixture';
+import {FacetsPageObject} from '../../../../commerce/facets/atomic-commerce-facets/e2e/page-object';
+import {TabManagerPageObject} from './page-object';
+
+interface TestFixture {
+  facets: FacetsPageObject;
+  tabManager: TabManagerPageObject;
+}
+
+export const test = base.extend<TestFixture & AxeFixture>({
+  makeAxeBuilder,
+  tabManager: async ({page}, use) => {
+    await use(new TabManagerPageObject(page));
+  },
+  facets: async ({page}, use) => {
+    await use(new FacetsPageObject(page));
+  },
+});
+export {expect} from '@playwright/test';
diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
new file mode 100644
index 00000000000..7ebff75f43b
--- /dev/null
+++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts
@@ -0,0 +1,48 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class TabManagerPageObject extends BasePageObject<'atomic-tab-manager'> {
+  constructor(page: Page) {
+    super(page, 'atomic-tab-manager');
+  }
+
+  get tabDropdown() {
+    return this.page.getByLabel('tab-dropdown-area').getByRole('combobox');
+  }
+
+  get tabArea() {
+    return this.page.getByLabel('tab-area');
+  }
+
+  get activeTab() {
+    return this.page.locator('atomic-tab-manager [aria-current="true"]');
+  }
+
+  get excludedFacet() {
+    return this.page.getByLabel(/^excluded-facet$/);
+  }
+
+  get includedFacet() {
+    return this.page.getByLabel(/^included-facet$/);
+  }
+
+  get smartSnippet() {
+    return this.page.locator('atomic-smart-snippet [part="smart-snippet"]');
+  }
+
+  tabButtons(value?: string) {
+    const baseLocator = this.page.getByLabel(/tab for .*/);
+    return value ? baseLocator.filter({hasText: value}) : baseLocator;
+  }
+
+  tabDropdownOptions(value?: string) {
+    const baseLocator = this.page
+      .getByLabel('tab-dropdown-area')
+      .getByRole('option');
+    return value ? baseLocator.filter({hasText: value}) : baseLocator;
+  }
+
+  atomicTabElements() {
+    return this.page.locator('atomic-tab');
+  }
+}
diff --git a/packages/atomic/src/utils/tab-utils.ts b/packages/atomic/src/utils/tab-utils.ts
index 21c900ac2d5..5ae59a6bd97 100644
--- a/packages/atomic/src/utils/tab-utils.ts
+++ b/packages/atomic/src/utils/tab-utils.ts
@@ -11,14 +11,13 @@ export function shouldDisplayOnCurrentTab(
   excludeTabs: string[],
   activeTab: string
 ) {
-  if (!activeTab) {
-    return true;
+  if (excludeTabs.includes(activeTab)) {
+    return false;
   }
 
-  const isIncluded =
-    includeTabs.length === 0 || includeTabs.includes(activeTab);
-  const isNotExcluded =
-    excludeTabs.length === 0 || !excludeTabs.includes(activeTab);
+  if (includeTabs.length === 0 || includeTabs.includes(activeTab)) {
+    return true;
+  }
 
-  return isIncluded && isNotExcluded;
+  return !activeTab;
 }

From e3b77762f6d6a2434860cc60218a4b56e3b542e5 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:05:05 -0400
Subject: [PATCH 3/4] chore(deps): update actions/upload-artifact digest to
 89ef406 j:kit-282 (#4252)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
|
[actions/upload-artifact](https://togithub.com/actions/upload-artifact)
| action | digest | `0b2256b` -> `89ef406` |

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on Monday" (UTC),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View the
[repository job log](https://developer.mend.io/github/coveo/ui-kit).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40NDAuNyIsInVwZGF0ZWRJblZlciI6IjM3LjQ0MC43IiwidGFyZ2V0QnJhbmNoIjoibWFzdGVyIiwibGFiZWxzIjpbImRlcGVuZGVuY2llcyJdfQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .github/actions/merge-playwright-reports/action.yml       | 2 +-
 .github/actions/playwright-atomic-hosted-pages/action.yml | 2 +-
 .github/actions/playwright-atomic/action.yml              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/actions/merge-playwright-reports/action.yml b/.github/actions/merge-playwright-reports/action.yml
index 3e081b6ba70..57bffa4012a 100644
--- a/.github/actions/merge-playwright-reports/action.yml
+++ b/.github/actions/merge-playwright-reports/action.yml
@@ -15,7 +15,7 @@ runs:
       shell: bash
 
     - name: Upload HTML report
-      uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+      uses: actions/upload-artifact@89ef406dd8d7e03cfd12d9e0a4a378f454709029 # v4
       with:
         name: atomic-playwright-report
         path: packages/atomic/playwright-report
diff --git a/.github/actions/playwright-atomic-hosted-pages/action.yml b/.github/actions/playwright-atomic-hosted-pages/action.yml
index 03a9ab42960..0fde5a2f7b1 100644
--- a/.github/actions/playwright-atomic-hosted-pages/action.yml
+++ b/.github/actions/playwright-atomic-hosted-pages/action.yml
@@ -11,7 +11,7 @@ runs:
       run: npx playwright test
       working-directory: packages/atomic-hosted-page
       shell: bash
-    - uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+    - uses: actions/upload-artifact@89ef406dd8d7e03cfd12d9e0a4a378f454709029 # v4
       if: always()
       with:
         name: atomic-hosted-page-playwright-report
diff --git a/.github/actions/playwright-atomic/action.yml b/.github/actions/playwright-atomic/action.yml
index e17341fb3db..c6e4fc4e479 100644
--- a/.github/actions/playwright-atomic/action.yml
+++ b/.github/actions/playwright-atomic/action.yml
@@ -18,7 +18,7 @@ runs:
       run: npx playwright test --shard=${{ inputs.shardIndex }}/${{ inputs.shardTotal }}
       working-directory: packages/atomic
       shell: bash
-    - uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+    - uses: actions/upload-artifact@89ef406dd8d7e03cfd12d9e0a4a378f454709029 # v4
       if: always()
       with:
         name: blob-report-${{ matrix.shardIndex }}

From bc2f42a6a2d10d97cb3dda54ad15c22e3db34a3e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:06:12 -0400
Subject: [PATCH 4/4] fix(deps): update dependency react-router-dom to v6.26.0
 j:kit-282 (#4255)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [react-router-dom](https://togithub.com/remix-run/react-router)
([source](https://togithub.com/remix-run/react-router/tree/HEAD/packages/react-router-dom))
| [`6.25.1` ->
`6.26.0`](https://renovatebot.com/diffs/npm/react-router-dom/6.25.1/6.26.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-router-dom/6.26.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-router-dom/6.26.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-router-dom/6.25.1/6.26.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-router-dom/6.25.1/6.26.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>remix-run/react-router (react-router-dom)</summary>

###
[`v6.26.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#6260)

[Compare
Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.25.1...react-router-dom@6.26.0)

##### Minor Changes

- Add a new `replace(url, init?)` alternative to `redirect(url, init?)`
that performs a `history.replaceState` instead of a `history.pushState`
on client-side navigation redirects
([#&#8203;11811](https://togithub.com/remix-run/react-router/pull/11811))

##### Patch Changes

- Fix initial hydration behavior when using `future.v7_partialHydration`
along with `unstable_patchRoutesOnMiss`
([#&#8203;11838](https://togithub.com/remix-run/react-router/pull/11838))
- During initial hydration, `router.state.matches` will now include any
partial matches so that we can render ancestor `HydrateFallback`
components
-   Updated dependencies:
    -   `@remix-run/router@1.19.0`
    -   `react-router@6.26.0`

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "before 4am on Monday" (UTC),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View the
[repository job log](https://developer.mend.io/github/coveo/ui-kit).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40NDAuNyIsInVwZGF0ZWRJblZlciI6IjM3LjQ0MC43IiwidGFyZ2V0QnJhbmNoIjoibWFzdGVyIiwibGFiZWxzIjpbImRlcGVuZGVuY2llcyJdfQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json                            | 26 ++++++++++----------
 packages/samples/headless-react/package.json |  2 +-
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f7dac3070c0..1416049a9d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11409,9 +11409,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz",
-      "integrity": "sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
+      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -48258,12 +48258,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.25.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
-      "integrity": "sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.18.0"
+        "@remix-run/router": "1.19.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -48273,13 +48273,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.25.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.25.1.tgz",
-      "integrity": "sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.18.0",
-        "react-router": "6.25.1"
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -63894,7 +63894,7 @@
         "jest-watch-typeahead": "2.2.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "react-router-dom": "6.25.1",
+        "react-router-dom": "6.26.0",
         "react-scripts": "5.0.1",
         "typescript": "5.4.5",
         "web-vitals": "3.5.2"
diff --git a/packages/samples/headless-react/package.json b/packages/samples/headless-react/package.json
index c69e14f8c52..e3645aaa40d 100644
--- a/packages/samples/headless-react/package.json
+++ b/packages/samples/headless-react/package.json
@@ -22,7 +22,7 @@
     "jest-watch-typeahead": "2.2.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router-dom": "6.25.1",
+    "react-router-dom": "6.26.0",
     "react-scripts": "5.0.1",
     "typescript": "5.4.5",
     "web-vitals": "3.5.2"