fix(core): Group fix overlayed border in collapsed mode

projects/core/directives/group/group.directive.ts

@@ -33,7 +33,9 @@ class TuiGroupStyles {}
         '[attr.data-size]': 'size',
         '[style.--t-group-radius]': 'rounded ? null : 0',
         '[style.--t-group-margin.rem]': 'collapsed ? null : 0.125',
-        '[style.--t-group-clip]': 'collapsed ? null : 0',
+        '[style.--t-group-mask]': 'collapsed ? null : "none"',
+        '[style.--t-group-mask-start]': 'collapsed ? null : "none"',
+        '[style.--t-group-mask-end]': 'collapsed ? null : "none"',
     },
 })
 export class TuiGroup {

projects/core/styles/components/group.less

@@ -26,12 +26,22 @@
 
     --t-group-radius: var(--tui-radius-l);
     --t-group-margin: -1px;
-    --t-group-clip: inset(-1rem 1px -1rem -1rem);
+    --t-group-mask: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.5) 1px,
+        #000 2px,
+        #000 calc(100% - 2px),
+        rgba(0, 0, 0, 0.5)
+    );
+    --t-group-mask-end: linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, #000 2px);
+    --t-group-mask-start: linear-gradient(to right, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
 
     & > * {
         z-index: 1;
         flex: 1 1 0;
         min-inline-size: 0;
+        mask: var(--t-group-mask);
+        mask-clip: no-clip;
 
         &:disabled,
         &._disabled {
@@ -42,58 +52,62 @@
         &[data-mode~='invalid'] {
             z-index: 2;
 
-            --t-group-clip: none;
+            --t-group-mask: none;
         }
 
         &:has(:invalid:not([data-mode])),
         &:has([data-mode~='invalid']) {
             z-index: 2;
 
-            --t-group-clip: none;
+            --t-group-mask: none;
         }
 
         &:focus-within {
             z-index: 3;
 
-            --t-group-clip: none;
+            --t-group-mask: none;
         }
 
         &:has([data-focus='true']) {
             z-index: 3;
 
-            --t-group-clip: none;
+            --t-group-mask: none;
         }
 
         &:checked:not([data-mode]),
         &[data-mode~='checked'] {
             z-index: 4;
 
-            --t-group-clip: none;
+            --t-group-mask: none;
         }
 
         &:has([tuiBlock]:checked) {
             z-index: 4;
 
-            --t-group-clip: none;
+            --t-group-mask: none;
         }
 
         &:not(:last-child) {
             margin-inline-end: var(--t-group-margin);
-            clip-path: var(--t-group-clip);
         }
 
         &:nth-child(n) {
             border-radius: 0;
         }
 
         &:first-child {
-            border-top-left-radius: var(--t-group-radius);
-            border-bottom-left-radius: var(--t-group-radius);
+            border-radius: var(--t-group-radius) 0 0 var(--t-group-radius);
+            mask-image: var(--t-group-mask-start);
         }
 
         &:last-child {
-            border-top-right-radius: var(--t-group-radius);
-            border-bottom-right-radius: var(--t-group-radius);
+            border-radius: 0 var(--t-group-radius) var(--t-group-radius) 0;
+            mask-image: var(--t-group-mask-end);
+        }
+
+        &:only-child {
+            border-radius: var(--t-group-radius);
+            mask: none;
         }
     }
 
@@ -106,7 +120,15 @@
         display: inline-flex;
         flex-direction: column;
 
-        --t-group-clip: inset(-1rem -1rem 1px -1rem);
+        --t-group-mask: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0.5) 1px,
+            #000 2px,
+            #000 calc(100% - 2px),
+            rgba(0, 0, 0, 0.5)
+        );
+        --t-group-mask-start: linear-gradient(to bottom, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
+        --t-group-mask-end: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, #000 2px);
 
         & > * {
             min-block-size: auto;

projects/core/styles/theme/appearance/outline.less

@@ -66,7 +66,7 @@
 
     &::before,
     &::after {
-        .transition(color);
+        .transition(~'color, transform');
 
         color: var(--tui-text-tertiary);
     }

projects/demo/src/modules/components/navigation/examples/3/index.html

@@ -1,6 +1,7 @@
 <header tuiNavigationHeader>
     <div
         tuiGroup
+        [collapsed]="true"
         [style.margin]="'auto'"
     >
         <label

projects/kit/components/files/files/files.component.ts

@@ -21,7 +21,7 @@ import {TUI_HIDE_TEXT, TUI_SHOW_ALL_TEXT} from '@taiga-ui/kit/tokens';
 @Component({
     standalone: true,
     selector: 'tui-files',
-    imports: [CommonModule, TuiButton, TuiExpandComponent],
+    imports: [CommonModule, TuiButton, TuiExpandComponent, TuiGroup],
     templateUrl: './files.template.html',
     styleUrls: ['./files.styles.less'],
     encapsulation: ViewEncapsulation.None,

projects/kit/components/files/files/files.styles.less

@@ -23,17 +23,19 @@ tui-files {
         z-index: 3;
         inline-size: 100%;
         background: var(--tui-background-base);
+        mask: none !important;
 
         &_collapsed {
             box-shadow: var(--tui-shadow-popup);
             margin-top: -1.5rem;
         }
     }
 
-    .t-extra-items tui-file,
-    .t-extra-items a[tuiFile] {
-        border-radius: 0;
-        margin-top: 0;
-        margin-bottom: -0.0625rem;
+    .t-extra-items {
+        inline-size: 100%;
+
+        > * {
+            border-radius: 0 !important;
+        }
     }
 }

projects/kit/components/files/files/files.template.html

@@ -10,7 +10,10 @@
     *ngIf="hasExtraItems"
     [expanded]="expanded"
 >
-    <div class="t-extra-items">
+    <div
+        tuiGroup
+        class="t-extra-items"
+    >
         <ng-container *ngFor="let item of items; let index = index">
             <ng-container
                 *ngIf="max && index >= max"

projects/kit/directives/chevron/chevron.style.less

@@ -2,9 +2,8 @@
 
 [tuiChevron][tuiIcons]::after,
 tui-icon[tuiChevron]::after {
-    .transition(transform);
+    .transition(~'transform, color');
 
-    display: inline-block;
     cursor: pointer;
 }