From b3cc3f528f71b0877a406c65cadfbecda7aca756 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Antonio=20Caba=C3=B1eros?= <joseacabaneros@gmail.com>
Date: Fri, 30 Aug 2024 10:29:37 +0200
Subject: [PATCH] fix(layout): avoid shared CSS classes between layouts with
 scoped (#1605)

---
 .../src/components/animations/cross-fade.vue  |   2 +-
 .../animations/staggered-fade-and-slide.vue   |   7 +-
 .../src/components/auto-progress-bar.vue      |   2 +-
 .../fixed-header-and-asides-layout.vue        | 188 ++++----
 .../layouts/multi-column-max-width-layout.vue | 427 +++++++++---------
 .../layouts/single-column-layout.vue          | 112 ++---
 .../utilities/dev-mode.css                    |  12 +
 .../utilities/dev-mode.scss                   |  14 -
 packages/x-components/src/views/ResultApp.vue |  40 +-
 .../accessibility/wai-base-event-button.vue   |   2 +-
 packages/x-components/src/views/home/Home.vue |   4 +-
 .../x-components/src/views/home/result.vue    |   6 +-
 .../components/search-input-placeholder.vue   |  10 +-
 13 files changed, 398 insertions(+), 428 deletions(-)
 create mode 100644 packages/x-components/src/design-system-deprecated/utilities/dev-mode.css
 delete mode 100644 packages/x-components/src/design-system-deprecated/utilities/dev-mode.scss

diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
index 06b6a3940e..d53a2b3dc3 100644
--- a/packages/x-components/src/components/animations/cross-fade.vue
+++ b/packages/x-components/src/components/animations/cross-fade.vue
@@ -41,7 +41,7 @@
 
   .x-cross-fade--leave-to,
   .x-cross-fade--enter-from {
-    opacity: 0;
+    opacity: 0 !important;
   }
 </style>
 
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 4f187c6fe5..fd46700548 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -107,7 +107,8 @@
       return {
         name,
         onEnter,
-        onAfterEnter
+        onAfterEnter,
+        transitionDurationInMs: `${transitionDuration}ms`
       };
     }
   });
@@ -117,12 +118,12 @@
   /* 1. Declare transitions */
   .x-staggered-fade-and-slide-enter-active,
   .x-staggered-fade-and-slide-leave-active {
-    transition: 250ms ease-out;
+    transition: v-bind(transitionDurationInMs) ease-out;
     transition-property: opacity, transform;
   }
 
   .x-staggered-fade-and-slide-move {
-    transition: transform 250ms ease-out;
+    transition: transform v-bind(transitionDurationInMs) ease-out;
   }
 
   /* 2. Declare enter, from and leave to state */
diff --git a/packages/x-components/src/components/auto-progress-bar.vue b/packages/x-components/src/components/auto-progress-bar.vue
index 094c7c13e3..1548feb8ee 100644
--- a/packages/x-components/src/components/auto-progress-bar.vue
+++ b/packages/x-components/src/components/auto-progress-bar.vue
@@ -54,7 +54,7 @@
   });
 </script>
 
-<style lang="css">
+<style lang="css" scoped>
   .x-progress-bar {
     display: inline-block;
     overflow: hidden;
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index 1a95b42642..c9bee85d8c 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -135,8 +135,8 @@
   });
 </script>
 
-<style lang="scss">
-  @import '../../design-system-deprecated/utilities/dev-mode';
+<style lang="css" scoped>
+  @import url('../../design-system-deprecated/utilities/dev-mode.css');
 
   .x-layout {
     /* custom properties */
@@ -171,114 +171,110 @@
       [max-width-end]
       var(--x-size-margin-layout)
       [page-end];
+  }
 
-    &__header {
-      /* layout */
-      position: sticky;
-      top: -0.5px;
-      z-index: 2;
-      grid-row: header;
-      grid-column: page;
-      max-height: var(--x-size-max-height-layout-header, auto);
-      padding: 0 var(--x-size-margin-layout);
-
-      /* color */
-      background: var(--x-color-background-layout-header, transparent);
-      border-color: var(--x-size-border-color-layout-header, transparent);
-
-      /* border */
-      border-width: var(--x-size-border-width-layout-header, 0);
-      border-style: solid;
-    }
-
-    &__sub-header {
-      /* layout */
-      grid-row: sub-header;
-      grid-column: page;
-      padding: 0 var(--x-size-margin-layout);
+  .x-layout__header {
+    /* layout */
+    position: sticky;
+    top: -0.5px;
+    z-index: 2;
+    grid-row: header;
+    grid-column: page;
+    max-height: var(--x-size-max-height-layout-header, auto);
+    padding: 0 var(--x-size-margin-layout);
+
+    /* color */
+    background: var(--x-color-background-layout-header, transparent);
+    border-color: var(--x-size-border-color-layout-header, transparent);
+
+    /* border */
+    border-width: var(--x-size-border-width-layout-header, 0);
+    border-style: solid;
+  }
 
-      /* color */
-      background: var(--x-color-background-layout-sub-header, transparent);
-      border-color: var(--x-size-border-color-layout-sub-header, transparent);
+  .x-layout__sub-header {
+    /* layout */
+    grid-row: sub-header;
+    grid-column: page;
+    padding: 0 var(--x-size-margin-layout);
 
-      /* border */
-      border-width: var(--x-size-border-width-layout-sub-header, 0);
-      border-style: solid;
-    }
+    /* color */
+    background: var(--x-color-background-layout-sub-header, transparent);
+    border-color: var(--x-size-border-color-layout-sub-header, transparent);
 
-    &__toolbar {
-      /* layout */
-      grid-row: toolbar;
-      grid-column: max-width;
-    }
-
-    &__main {
-      /* layout */
-      grid-row: main;
-      grid-column: max-width;
-    }
+    /* border */
+    border-width: var(--x-size-border-width-layout-sub-header, 0);
+    border-style: solid;
+  }
 
+  .x-layout__toolbar {
     /* layout */
-    :deep(.x-layout__aside.x-modal) {
-      z-index: 3;
-      flex-flow: row nowrap;
-    }
+    grid-row: toolbar;
+    grid-column: max-width;
+  }
 
+  .x-layout__main {
     /* layout */
-    :deep(.x-layout__aside--right.x-modal) {
-      justify-content: flex-end;
-    }
+    grid-row: main;
+    grid-column: max-width;
+  }
 
-    /* others */
-    :deep(.x-layout__aside) {
-      pointer-events: none;
+  /* layout */
+  .x-layout :deep(.x-layout__aside.x-modal) {
+    z-index: 3;
+    flex-flow: row nowrap;
+  }
 
-      > *:not(.slot-helper) {
-        pointer-events: all;
-      }
-    }
+  /* layout */
+  .x-layout :deep(.x-layout__aside--right.x-modal) {
+    justify-content: flex-end;
+  }
 
-    &__scroll-to-top {
-      position: fixed;
-      z-index: 1;
-      bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);
-      right: var(--x-size-margin-right-layout-scroll-to-top, 16px);
-    }
+  /* others */
+  .x-layout :deep(.x-layout__aside) {
+    pointer-events: none;
+  }
+  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {
+    pointer-events: all;
+  }
 
-    &__header-backdrop {
-      /* layout */
-      grid-row: page;
-      grid-column: page;
-      position: sticky;
-      top: -0.5px;
-      z-index: 1;
-      height: var(--x-size-height-layout-backdrop, 40vh);
-      width: 100%;
-      pointer-events: none;
-
-      /* color */
-      background-color: var(
-        --x-color-background-layout-header-backdrop,
-        var(--x-color-base-neutral-100, white)
-      );
-      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
-
-      /* transition */
-      opacity: 0;
-      transition: opacity 0.2s ease-out;
-
-      &--is-visible {
-        opacity: 1;
-      }
-    }
+  .x-layout__scroll-to-top {
+    position: fixed;
+    z-index: 1;
+    bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);
+    right: var(--x-size-margin-right-layout-scroll-to-top, 16px);
   }
 
-  :deep(.x-layout__aside) {
-    .x-modal__content {
-      background-color: transparent;
-      height: 100%;
-      width: var(--x-size-width-layout-aside, 300px);
-    }
+  .x-layout__header-backdrop {
+    /* layout */
+    grid-row: page;
+    grid-column: page;
+    position: sticky;
+    top: -0.5px;
+    z-index: 1;
+    height: var(--x-size-height-layout-backdrop, 40vh);
+    width: 100%;
+    pointer-events: none;
+
+    /* color */
+    background-color: var(
+      --x-color-background-layout-header-backdrop,
+      var(--x-color-base-neutral-100, white)
+    );
+    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+
+    /* transition */
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+  }
+  .x-layout__header-backdrop--is-visible {
+    opacity: 1;
+  }
+
+  .x-layout :deep(.x-layout__aside .x-modal__content) {
+    background-color: transparent;
+    height: 100%;
+    width: var(--x-size-width-layout-aside, 300px);
   }
 </style>
 
diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index 62fe313ee5..bb53627668 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
@@ -128,7 +128,7 @@
   });
 </script>
 
-<style lang="scss">
+<style lang="css">
   :root {
     /* layout */
     --x-size-min-margin-layout-columns: var(--x-size-base-06);
@@ -164,8 +164,8 @@
   }
 </style>
 
-<style lang="scss">
-  @import '../../design-system-deprecated/utilities/dev-mode';
+<style lang="css" scoped>
+  @import url('../../design-system-deprecated/utilities/dev-mode.css');
 
   .x-layout {
     /* custom properties */
@@ -203,244 +203,235 @@
       [scroll-to-top-start]
       auto
       [main-end scroll-to-top-end page-end];
+  }
 
-    &__header {
-      /* layout */
-      grid-column: page;
-      grid-row: header;
-      display: grid;
-      column-gap: var(--x-size-gap-default);
-
-      grid-template-columns:
-        [header-start]
-        var(--x-size-margin-layout-columns)
-        [start-content-start]
-        1fr
-        [start-content-end middle-content-start]
-        repeat(var(--x-number-columns-header-middle), 1fr)
-        [middle-content-end end-content-start]
-        1fr
-        [end-content-end]
-        var(--x-size-margin-layout-columns)
-        [header-end];
-
-      /* size */
-      padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);
-      padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);
-      margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);
-      margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);
-
-      /* color */
-      background-color: var(--x-color-background-layout-columns-header, transparent);
-      border-color: var(--x-color-border-layout-columns-header, transparent);
-
-      /* border */
-      border-style: solid;
-      border-width: var(--x-size-border-width-layout-columns-header, 0);
-    }
+  .x-layout__header {
+    /* layout */
+    grid-column: page;
+    grid-row: header;
+    display: grid;
+    column-gap: var(--x-size-gap-default);
 
-    &__header-start {
-      /* layout */
-      grid-column: start-content;
+    grid-template-columns:
+      [header-start]
+      var(--x-size-margin-layout-columns)
+      [start-content-start]
+      1fr
+      [start-content-end middle-content-start]
+      repeat(var(--x-number-columns-header-middle), 1fr)
+      [middle-content-end end-content-start]
+      1fr
+      [end-content-end]
+      var(--x-size-margin-layout-columns)
+      [header-end];
 
-      &.x-list {
-        /* space */
-        flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-header-start, flex start);
-        align-items: var(--x-size-align-layout-columns-header-start, flex start);
-      }
-    }
+    /* size */
+    padding-block-start: var(--x-size-padding-top-layout-columns-header, 0);
+    padding-block-end: var(--x-size-padding-bottom-layout-columns-header, 0);
+    margin-block-start: var(--x-size-margin-top-layout-columns-header, 0);
+    margin-block-end: var(--x-size-margin-bottom-layout-columns-header, 0);
 
-    &__header-middle {
-      /* layout */
-      grid-column: middle-content;
+    /* color */
+    background-color: var(--x-color-background-layout-columns-header, transparent);
+    border-color: var(--x-color-border-layout-columns-header, transparent);
 
-      &.x-list {
-        /* space */
-        flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-header-middle, center);
-        align-items: var(--x-size-align-layout-columns-header-middle, flex start);
-      }
-    }
+    /* border */
+    border-style: solid;
+    border-width: var(--x-size-border-width-layout-columns-header, 0);
+  }
 
-    &__header-end {
-      /* layout */
-      grid-column: end-content;
+  .x-layout__header-start {
+    /* layout */
+    grid-column: start-content;
+  }
+  .x-layout__header-start.x-list {
+    /* space */
+    flex-flow: var(--x-flow-layout-columns-header-start, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-header-start, flex start);
+    align-items: var(--x-size-align-layout-columns-header-start, flex start);
+  }
 
-      &.x-list {
-        flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);
-        align-items: var(--x-size-align-layout-columns-header-end, flex-start);
-      }
-    }
+  .x-layout__header-middle {
+    /* layout */
+    grid-column: middle-content;
+  }
+  .x-layout__header-middle.x-list {
+    /* space */
+    flex-flow: var(--x-flow-layout-columns-header-middle, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-header-middle, center);
+    align-items: var(--x-size-align-layout-columns-header-middle, flex start);
+  }
 
-    &__sub-header {
-      /* layout */
-      grid-column: page;
-      grid-row: sub-header;
-      display: grid;
-      column-gap: var(--x-size-gap-default);
-
-      grid-template-columns:
-        [sub-header-start]
-        var(--x-size-margin-layout-columns)
-        1fr
-        [sub-header-content-start]
-        repeat(var(--x-number-columns-sub-header-content), 1fr)
-        [sub-header-content-end]
-        1fr
-        var(--x-size-margin-layout-columns)
-        [sub-header-end];
-
-      /* size */
-      padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);
-      padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;
-      margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);
-      margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);
-
-      /* color */
-      background-color: var(--x-color-background-layout-columns-sub-header, transparent);
-      border-color: var(--x-color-border-layout-columns-sub-header, transparent);
-
-      /* border */
-      border-style: solid;
-      border-width: var(--x-size-border-width-layout-columns-sub-header, 0);
-    }
+  .x-layout__header-end {
+    /* layout */
+    grid-column: end-content;
+  }
+  .x-layout__header-end.x-list {
+    flex-flow: var(--x-flow-layout-columns-header-end, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-header-end, flex-end);
+    align-items: var(--x-size-align-layout-columns-header-end, flex-start);
+  }
 
-    &__sub-header-content {
-      /* layout */
-      grid-column: sub-header-content;
+  .x-layout__sub-header {
+    /* layout */
+    grid-column: page;
+    grid-row: sub-header;
+    display: grid;
+    column-gap: var(--x-size-gap-default);
 
-      &.x-list {
-        flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);
-        align-items: var(--x-size-align-layout-columns-sub-header, flex-start);
-      }
-    }
+    grid-template-columns:
+      [sub-header-start]
+      var(--x-size-margin-layout-columns)
+      1fr
+      [sub-header-content-start]
+      repeat(var(--x-number-columns-sub-header-content), 1fr)
+      [sub-header-content-end]
+      1fr
+      var(--x-size-margin-layout-columns)
+      [sub-header-end];
 
-    &__toolbar {
-      /* layout */
-      grid-column: page;
-      grid-row: toolbar;
-      display: grid;
-      column-gap: var(--x-size-gap-default);
-
-      grid-template-columns:
-        [toolbar-start]
-        var(--x-size-margin-layout-columns)
-        [toolbar-aside-start]
-        1fr
-        [toolbar-aside-end toolbar-body-start]
-        repeat(var(--x-number-columns-toolbar-body), 1fr)
-        [toolbar-body-end]
-        var(--x-size-margin-layout-columns)
-        [toolbar-end];
-
-      /* size */
-      padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);
-      padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);
-      margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);
-      margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);
-
-      /* color */
-      background-color: var(--x-color-background-layout-columns-toolbar, transparent);
-      border-color: var(--x-color-border-layout-columns-toolbar, transparent);
-
-      /* border */
-      border-style: solid;
-      border-width: var(--x-size-border-width-layout-columns-toolbar, 0);
-    }
+    /* size */
+    padding-block-start: var(--x-size-padding-top-layout-columns-sub-header, 0);
+    padding-block-end: var(--x-size-padding-bottom-layout-columns-sub-header), 0;
+    margin-block-start: var(--x-size-margin-top-layout-columns-sub-header, 0);
+    margin-block-end: var(--x-size-margin-bottom-layout-columns-sub-header, 0);
 
-    &__toolbar-aside {
-      /* layout */
-      grid-column: toolbar-aside;
+    /* color */
+    background-color: var(--x-color-background-layout-columns-sub-header, transparent);
+    border-color: var(--x-color-border-layout-columns-sub-header, transparent);
 
-      &.x-list {
-        flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);
-        align-items: var(--x-size-align-layout-columns-toolbar-aside, center);
-      }
-    }
+    /* border */
+    border-style: solid;
+    border-width: var(--x-size-border-width-layout-columns-sub-header, 0);
+  }
 
-    &__toolbar-body {
-      /* layout */
-      grid-column: toolbar-body;
+  .x-layout__sub-header-content {
+    /* layout */
+    grid-column: sub-header-content;
+  }
+  .x-layout__sub-header-content.x-list {
+    flex-flow: var(--x-flow-layout-columns-sub-header, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-sub-header, flex-start);
+    align-items: var(--x-size-align-layout-columns-sub-header, flex-start);
+  }
 
-      &.x-list {
-        flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);
-        justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);
-        align-items: var(--x-size-align-layout-columns-toolbar-body, center);
-      }
-    }
+  .x-layout__toolbar {
+    /* layout */
+    grid-column: page;
+    grid-row: toolbar;
+    display: grid;
+    column-gap: var(--x-size-gap-default);
 
-    &__main {
-      /* layout */
-      grid-column: page;
-      grid-row: main;
-      min-height: 0;
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: stretch;
-      padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));
-
-      /* size */
-      padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);
-      padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);
-      margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);
-      margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);
-
-      /* color */
-      background-color: var(--x-color-background-layout-columns-main, transparent);
-      border-color: var(--x-color-border-layout-columns-main, transparent);
-
-      /* border */
-      border-style: solid;
-      border-width: var(--x-size-border-width-layout-columns-main, 0);
-    }
+    grid-template-columns:
+      [toolbar-start]
+      var(--x-size-margin-layout-columns)
+      [toolbar-aside-start]
+      1fr
+      [toolbar-aside-end toolbar-body-start]
+      repeat(var(--x-number-columns-toolbar-body), 1fr)
+      [toolbar-body-end]
+      var(--x-size-margin-layout-columns)
+      [toolbar-end];
+
+    /* size */
+    padding-block-start: var(--x-size-padding-top-layout-columns-toolbar, 0);
+    padding-block-end: var(--x-size-padding-bottom-layout-columns-toolbar, 0);
+    margin-block-start: var(--x-size-margin-top-layout-columns-toolbar, 0);
+    margin-block-end: var(--x-size-margin-bottom-layout-columns-toolbar, 0);
 
-    &__collapse-aside {
-      width: calc(
-        (
-            100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -
-              var(--x-size-margin-layout-columns)
-          ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)
-      );
-    }
+    /* color */
+    background-color: var(--x-color-background-layout-columns-toolbar, transparent);
+    border-color: var(--x-color-border-layout-columns-toolbar, transparent);
 
-    &__aside-scroll {
-      height: 100%;
-      margin-right: var(--x-size-gap-default);
-    }
+    /* border */
+    border-style: solid;
+    border-width: var(--x-size-border-width-layout-columns-toolbar, 0);
+  }
 
-    &__body-scroll {
-      flex: 1 1 auto;
-      width: 0;
-      padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);
+  .x-layout__toolbar-aside {
+    /* layout */
+    grid-column: toolbar-aside;
+  }
+  .x-layout__toolbar-aside.x-list {
+    flex-flow: var(--x-flow-layout-columns-toolbar-aside, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-toolbar-aside, flex-start);
+    align-items: var(--x-size-align-layout-columns-toolbar-aside, center);
+  }
 
-      &.x-scroll {
-        overflow-y: scroll;
-      }
-    }
+  .x-layout__toolbar-body {
+    /* layout */
+    grid-column: toolbar-body;
+  }
+  .x-layout__toolbar-body.x-list {
+    flex-flow: var(--x-flow-layout-columns-toolbar-body, row nowrap);
+    justify-content: var(--x-size-justify-layout-columns-toolbar-body, flex-end);
+    align-items: var(--x-size-align-layout-columns-toolbar-body, center);
+  }
 
-    &__scroll-to-top {
-      /* layout */
-      grid-area: scroll-to-top;
-      justify-content: flex-end;
-      width: 100%;
-      display: flex;
-      z-index: 1;
-      pointer-events: none;
-    }
+  .x-layout__main {
+    /* layout */
+    grid-column: page;
+    grid-row: main;
+    min-height: 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: stretch;
+    padding-left: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default));
+
+    /* size */
+    padding-block-start: var(--x-size-padding-top-layout-columns-main, 0);
+    padding-block-end: var(--x-size-padding-bottom-layout-columns-main, 0);
+    margin-block-start: var(--x-size-margin-top-layout-columns-main, 0);
+    margin-block-end: var(--x-size-margin-bottom-layout-columns-main, 0);
 
-    &__scroll-to-top-content {
-      flex: 1 0 auto;
-      padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);
-      padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);
+    /* color */
+    background-color: var(--x-color-background-layout-columns-main, transparent);
+    border-color: var(--x-color-border-layout-columns-main, transparent);
 
-      :deep(> *) {
-        pointer-events: all;
-      }
-    }
+    /* border */
+    border-style: solid;
+    border-width: var(--x-size-border-width-layout-columns-main, 0);
+  }
+
+  .x-layout__collapse-aside {
+    width: calc(
+      (
+          100% - var(--x-size-gap-default) * (var(--x-number-columns-layout-columns, 5)) -
+            var(--x-size-margin-layout-columns)
+        ) / var(--x-number-columns-layout-columns, 5) + var(--x-size-gap-default)
+    );
+  }
+
+  .x-layout__aside-scroll {
+    height: 100%;
+    margin-right: var(--x-size-gap-default);
+  }
+
+  .x-layout__body-scroll {
+    flex: 1 1 auto;
+    width: 0;
+    padding-right: calc(var(--x-size-margin-layout-columns) + var(--x-size-gap-default) - 16px);
+  }
+  .x-layout__body-scroll.x-scroll {
+    overflow-y: scroll;
+  }
+
+  .x-layout__scroll-to-top {
+    /* layout */
+    grid-area: scroll-to-top;
+    justify-content: flex-end;
+    width: 100%;
+    display: flex;
+    z-index: 1;
+    pointer-events: none;
+  }
+  .x-layout__scroll-to-top-content {
+    flex: 1 0 auto;
+    padding-block-end: var(--x-size-margin-bottom-layout-columns-scroll-to-top, 10px);
+    padding-inline-start: var(--x-size-margin-left-layout-columns-scroll-to-top, 10px);
+  }
+  .x-layout__scroll-to-top-content > * {
+    pointer-events: all;
   }
 </style>
 
diff --git a/packages/x-components/src/components/layouts/single-column-layout.vue b/packages/x-components/src/components/layouts/single-column-layout.vue
index 8f465b4518..7a077638e8 100644
--- a/packages/x-components/src/components/layouts/single-column-layout.vue
+++ b/packages/x-components/src/components/layouts/single-column-layout.vue
@@ -110,8 +110,8 @@
   });
 </script>
 
-<style lang="scss">
-  @import '../../design-system-deprecated/utilities/dev-mode';
+<style lang="css" scoped>
+  @import url('../../design-system-deprecated/utilities/dev-mode.css');
 
   .x-layout {
     display: grid;
@@ -135,77 +135,63 @@
       [footer-end page-end];
 
     grid-template-columns: 1fr;
+  }
 
-    > * {
-      grid-column: 1/-1;
-      min-width: 0;
-      min-height: 0;
-      display: flex;
-    }
-
-    &__header {
-      grid-row: header;
-      z-index: 1;
-    }
-
-    &__sub-header {
-      grid-row: sub-header;
-      z-index: 1;
-    }
-
-    &__toolbar {
-      grid-row: toolbar;
-      z-index: 1;
-    }
+  .x-layout > * {
+    grid-column: 1/-1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+  }
 
-    &__predictive {
-      grid-row-start: header-end;
-      grid-row-end: page-end;
-      flex-flow: column nowrap;
-      z-index: 2;
-    }
+  .x-layout__header {
+    grid-row: header;
+    z-index: 1;
+  }
 
-    &__main {
-      grid-row: main;
-      flex-flow: column nowrap;
-    }
+  .x-layout__sub-header {
+    grid-row: sub-header;
+    z-index: 1;
+  }
 
-    &__floating {
-      grid-row: floating;
-      z-index: 1;
-    }
+  .x-layout__toolbar {
+    grid-row: toolbar;
+    z-index: 1;
+  }
 
-    &__footer {
-      grid-row: footer;
-    }
+  .x-layout__predictive {
+    grid-row-start: header-end;
+    grid-row-end: page-end;
+    flex-flow: column nowrap;
+    z-index: 2;
+  }
 
-    :deep(.x-layout__aside) {
-      grid-row: page;
-      z-index: 3;
+  .x-layout__main {
+    grid-row: main;
+    flex-flow: column nowrap;
+  }
 
-      .x-modal__content {
-        width: 100%;
-        height: 100%;
-        margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);
-      }
-    }
+  .x-layout__floating {
+    grid-row: floating;
+    z-index: 1;
+  }
 
-    &__predictive :deep(),
-    &__floating :deep(),
-    :deep(.slot-helper) {
-      pointer-events: none;
+  .x-layout__footer {
+    grid-row: footer;
+  }
 
-      > * {
-        pointer-events: all;
-      }
+  .x-layout__aside {
+    grid-row: page;
+    z-index: 3;
+  }
 
-      > .x-list {
-        pointer-events: none;
+  .x-layout :deep(.x-layout__aside .x-modal__content) {
+    width: 100%;
+    height: 100%;
+    margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);
+  }
 
-        > * {
-          pointer-events: all;
-        }
-      }
-    }
+  .x-layout :deep(.x-layout__aside > *:not(.slot-helper)) {
+    pointer-events: all;
   }
 </style>
diff --git a/packages/x-components/src/design-system-deprecated/utilities/dev-mode.css b/packages/x-components/src/design-system-deprecated/utilities/dev-mode.css
new file mode 100644
index 0000000000..8b4b9f0eb9
--- /dev/null
+++ b/packages/x-components/src/design-system-deprecated/utilities/dev-mode.css
@@ -0,0 +1,12 @@
+.dev-mode .slot-helper {
+  font-family: inherit;
+  color: grey;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  border: dashed 1px grey;
+  border-radius: 10px;
+}
diff --git a/packages/x-components/src/design-system-deprecated/utilities/dev-mode.scss b/packages/x-components/src/design-system-deprecated/utilities/dev-mode.scss
deleted file mode 100644
index 46871cd3ae..0000000000
--- a/packages/x-components/src/design-system-deprecated/utilities/dev-mode.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.dev-mode {
-  .slot-helper {
-    font-family: inherit;
-    color: grey;
-    box-sizing: border-box;
-    display: flex;
-    height: 100%;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-    border: dashed 1px grey;
-    border-radius: 10px;
-  }
-}
diff --git a/packages/x-components/src/views/ResultApp.vue b/packages/x-components/src/views/ResultApp.vue
index 14ba6f8bfc..37ea764ea6 100644
--- a/packages/x-components/src/views/ResultApp.vue
+++ b/packages/x-components/src/views/ResultApp.vue
@@ -98,7 +98,7 @@
   });
 </script>
 
-<style lang="scss">
+<style lang="css">
   .x-components-images {
     position: absolute;
     top: 1500px;
@@ -109,29 +109,29 @@
   .x-base-grid {
     column-gap: 10px;
     row-gap: 10px;
+  }
 
-    &__item {
-      border: 1px solid black;
-      padding: 20px;
-      text-align: center;
-    }
+  .x-base-grid__item {
+    border: 1px solid black;
+    padding: 20px;
+    text-align: center;
+  }
 
-    &__next-queries {
-      border-color: red;
-      border-radius: 50px;
-    }
+  .x-base-grid__next-queries {
+    border-color: red;
+    border-radius: 50px;
+  }
 
-    &__x-result {
-      border-color: deepskyblue;
-    }
+  .x-base-grid__result {
+    border-color: deepskyblue;
+  }
 
-    &__banner {
-      border-color: blueviolet;
-      grid-column: -1/1;
-    }
+  .x-base-grid__banner {
+    border-color: blueviolet;
+    grid-column: -1/1;
+  }
 
-    &__promoted {
-      border-color: orange;
-    }
+  .x-base-grid__promoted {
+    border-color: orange;
   }
 </style>
diff --git a/packages/x-components/src/views/accessibility/wai-base-event-button.vue b/packages/x-components/src/views/accessibility/wai-base-event-button.vue
index 8654b43156..37afc4eb6d 100644
--- a/packages/x-components/src/views/accessibility/wai-base-event-button.vue
+++ b/packages/x-components/src/views/accessibility/wai-base-event-button.vue
@@ -27,7 +27,7 @@
 
       <div>
         <h1>BaseResultAddToCart</h1>
-        <BaseResultAddToCart result="">
+        <BaseResultAddToCart :result="{ id: 1, modelName: 'Result' }">
           <img src="https://picsum.photos/seed/200/50/50" alt="Add to cart" />
         </BaseResultAddToCart>
       </div>
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index e3f30b6fba..d01d2ad9bb 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -690,9 +690,9 @@
 </script>
 
 <style lang="css">
-  .x-modal :deep(.x-modal__content) {
+  .x-modal .x-modal__content {
     overflow: hidden;
-    // Following is needed for closing the modal in base-events-modal.feature
+    /* Following is needed for closing the modal in base-events-modal.feature */
     width: calc(100% - 20px);
     height: calc(100% - 20px);
     margin: 10px;
diff --git a/packages/x-components/src/views/home/result.vue b/packages/x-components/src/views/home/result.vue
index 6063ebdef4..dba9bcfa95 100644
--- a/packages/x-components/src/views/home/result.vue
+++ b/packages/x-components/src/views/home/result.vue
@@ -1,11 +1,7 @@
 <template>
   <article class="x-result" style="max-width: 300px; overflow: hidden">
     <BaseResultLink :result="result">
-      <BaseResultImage
-        :result="result"
-        class="x-result__picture x-picture-zoom"
-        :loadAnimation="crossFade"
-      >
+      <BaseResultImage :result="result" :loadAnimation="crossFade">
         <template #placeholder>
           <div style="padding-top: 100%; background-color: lightgray"></div>
         </template>
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
index 4ccb71ef4f..5579be2128 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
@@ -229,6 +229,12 @@
   });
 </script>
 
+<style lang="css">
+  .x-search-input-placeholder-container {
+    position: relative;
+  }
+</style>
+
 <style lang="css" scoped>
   .x-search-input-placeholder {
     position: absolute;
@@ -237,10 +243,6 @@
     align-items: center;
     pointer-events: none;
   }
-
-  .x-search-input-placeholder-container {
-    position: relative;
-  }
 </style>
 
 <docs lang="mdx">