feat(experimental): Surface add new directive

projects/addon-charts/components/axes/axes.style.less

@@ -12,13 +12,14 @@
 }
 
 .t-grid {
-    .createStackingContext();
+    position: relative;
     display: flex;
     flex: 1;
     justify-content: space-around;
     align-items: flex-end;
     border-width: 1px;
     border-color: var(--tui-base-03);
+    isolation: isolate;
 
     :host[data-mode='onDark'] & {
         border-color: rgba(255, 255, 255, 0.48);

projects/addon-doc/components/main/main.style.less

@@ -75,7 +75,7 @@ a:focus code {
 }
 
 .tui-doc-page {
-    .createStackingContext();
+    isolation: isolate;
     padding-top: 4rem;
 }
 

projects/addon-mobile/components/sheet-dialog/sheet-dialog.style.less

@@ -96,7 +96,8 @@
 }
 
 .t-content {
-    .createStackingContext();
+    position: relative;
+    isolation: isolate;
 
     &:nth-child(3) {
         margin-top: 1rem;

projects/core/components/button/button.style.less

@@ -144,9 +144,9 @@
 }
 
 .t-wrapper {
-    .createStackingContext();
     box-sizing: border-box;
     cursor: pointer;
+    isolation: isolate;
 
     :host[data-size='xs'] & {
         padding: 0 var(--tui-padding, @padding-xs);

projects/core/components/group/group.style.less

@@ -1,8 +1,9 @@
 @import '../../styles/taiga-ui-local';
 
 .tui-group {
-    .createStackingContext();
+    position: relative;
     display: flex;
+    isolation: isolate;
 
     & > * {
         flex: 1 1 0;

projects/core/components/root/root.style.less

@@ -38,8 +38,8 @@ tui-root > .t-root-scrollbar {
 }
 
 .t-root-content {
-    .createStackingContext();
     height: 100%;
+    isolation: isolate;
 }
 
 // TODO: Required by Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1845264

projects/core/components/scrollbar/scrollbar.style.less

@@ -1,9 +1,9 @@
 @import '../../styles/taiga-ui-local.less';
 
 :host {
-    .createStackingContext();
     position: relative;
     display: flex;
+    isolation: isolate;
     overflow: auto;
 
     &:not(._legacy) {
@@ -27,7 +27,7 @@
 }
 
 .t-content {
-    .createStackingContext();
+    isolation: isolate;
     flex: 1;
     flex-basis: auto;
     width: 100%;

projects/core/components/svg/test/svg-options.component.spec.ts

@@ -223,7 +223,7 @@ describe(`SVG options`, () => {
                             const myCustomPrefix = `icons8::`;
 
                             return String(src).startsWith(myCustomPrefix)
-                                ? `assets/icons8/${String(src).replace(
+                                ? `assets/icons/${String(src).replace(
                                       myCustomPrefix,
                                       ``,
                                   )}.svg`
@@ -239,8 +239,8 @@ describe(`SVG options`, () => {
             fixture?.detectChanges();
 
             expect(testComponent?.svgComponent.isInnerHTML).toBe(true);
-            expect(testComponent?.svgComponent.src).toBe(`assets/icons8/android.svg`);
-            expect(testComponent?.svgComponent.use).toBe(`#assets/icons8/android.svg`);
+            expect(testComponent?.svgComponent.src).toBe(`assets/icons/android.svg`);
+            expect(testComponent?.svgComponent.use).toBe(`#assets/icons/android.svg`);
         });
 
         it(`tuiIconTdsSuperIcon and TUI_SVG_SRC_PROCESSOR should be ignored`, () => {
@@ -308,7 +308,7 @@ describe(`SVG options`, () => {
                     tuiSvgOptionsProvider({path: `assets/default-path-to-icons/`}),
                     tuiSvgSrcInterceptors((src: TuiSafeHtml) =>
                         String(src).startsWith(`icons8::`)
-                            ? `assets/icons8/${String(src).replace(`icons8::`, ``)}.svg`
+                            ? `assets/icons/${String(src).replace(`icons8::`, ``)}.svg`
                             : src,
                     ),
                     tuiSvgSrcInterceptors((src: TuiSafeHtml) =>
@@ -333,7 +333,7 @@ describe(`SVG options`, () => {
             fixture?.detectChanges();
 
             expect(testComponent?.svgComponent.isInnerHTML).toBe(true);
-            expect(testComponent?.svgComponent.src).toBe(`assets/icons8/android.svg`);
+            expect(testComponent?.svgComponent.src).toBe(`assets/icons/android.svg`);
         });
 
         it(`tuiIconTdsSuperToken`, () => {

projects/core/directives/dropdown/dropdown.style.less

@@ -1,7 +1,6 @@
 @import '../../styles/taiga-ui-local.less';
 
 :host {
-    .createStackingContext();
     .shadow(2);
     position: absolute;
     display: flex;
@@ -12,6 +11,7 @@
     box-sizing: border-box;
     /* stylelint-disable-next-line */
     max-width: calc(100% - 8px); // Comes from JS so in pixels
+    isolation: isolate;
     pointer-events: auto; // if custom portal host has pointer events none
 
     &.ng-animating {

projects/core/styles/mixins/mixins.less

@@ -246,7 +246,7 @@
 }
 
 // transition
-.transition(@param, @speed: var(--tui-duration, 300ms)) {
+.transition(@param: all, @speed: var(--tui-duration, 300ms)) {
     transition-property: @param;
     transition-duration: @speed;
     transition-timing-function: ease-in-out;
@@ -312,6 +312,7 @@
     }
 }
 
+// @deprecated use isolation: isolate instead
 .createStackingContext() {
     position: relative;
     z-index: 0;

projects/core/styles/mixins/mixins.scss

@@ -295,6 +295,7 @@
     }
 }
 
+// @deprecated use isolation: isolate instead
 @mixin createStackingContext() {
     position: relative;
     z-index: 0;

projects/core/styles/mixins/picker.less

@@ -5,10 +5,11 @@
     }
 
     .t-row {
-        .createStackingContext();
+        position: relative;
         display: flex;
         justify-content: space-between;
         height: 2.25rem;
+        isolation: isolate;
     }
 
     .t-item {

projects/core/styles/mixins/picker.scss

@@ -5,10 +5,11 @@
     }
 
     .t-row {
-        @include createStackingContext();
+        position: relative;
         display: flex;
         justify-content: space-between;
         height: 2.25rem;
+        isolation: isolate;
     }
 
     .t-item {