chore: remove platform from colors and bump navigation styles specifi…

…city (#9253)

.cspell.json

@@ -30,7 +30,8 @@
         "contentalign",
         "inputpassword",
         "inputcopy",
-        "docsearch"
+        "docsearch",
+        "Wachovia"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [

package.json

@@ -2,7 +2,7 @@
     "name": "@taiga-ui/components",
     "version": "4.8.1",
     "private": true,
-    "description": "Taiga UI by TBank is a set of components, services, directives and other tools to build high quality UI using modern Angular framework",
+    "description": "Taiga UI is a set of components, services, directives and other tools to build high quality UI using modern Angular framework",
     "keywords": [
         "angular",
         "kit",

projects/addon-mobile/components/tab-bar/tab-bar.style.less

@@ -5,7 +5,6 @@
 
     position: relative;
     display: flex;
-    align-items: flex-start;
     font:
         normal 0.625rem/0.75rem -apple-system,
         BlinkMacSystemFont,

projects/cdk/utils/miscellaneous/test/is-valid-url.spec.ts

@@ -3,7 +3,7 @@ import {tuiIsValidUrl} from '@taiga-ui/cdk';
 describe('tuiIsValidUrl', () => {
     it('valid url', () => {
         expect(tuiIsValidUrl('https://taiga-ui.dev')).toBe(true);
-        expect(tuiIsValidUrl('https://tbank-group.com/')).toBe(true);
+        expect(tuiIsValidUrl('https://taiga-group.com/')).toBe(true);
         expect(tuiIsValidUrl('www.jsowl.com')).toBe(true);
         expect(tuiIsValidUrl('https://burgers.example.com/?burger=%s')).toBe(true);
         expect(tuiIsValidUrl('taiga-ui.dev')).toBe(true);

projects/core/components/textfield/select.template.html

@@ -10,6 +10,7 @@
     <option
         *ngFor="let item of [value]"
         selected
+        [value]="item"
     >
         {{ item }}
     </option>

projects/demo/src/modules/app/app.const.ts

@@ -2,6 +2,7 @@ export const SEE_ALSO_GROUPS: ReadonlyArray<readonly string[]> = [
     ['Tooltip', 'Hint', 'HintManual', 'HintPointer'],
     ['LineChart', 'LineDaysChart'],
     ['PrimitiveTextfield', 'Input', 'Textarea'],
+    ['Icon', 'Icons — Lucide', 'Icons — Material', 'Icons — FontAwesome'],
     [
         'InputDate',
         'InputDateRange',

projects/demo/src/modules/app/app.routes.ts

@@ -192,7 +192,7 @@ export const ROUTES: Routes = [
     route({
         path: DemoRoute.IconsLucide,
         loadComponent: async () => import('../icons/icons'),
-        title: 'Icons',
+        title: 'Icons — Lucide',
     }),
     route({
         path: DemoRoute.IconsMaterial,

projects/demo/src/modules/app/landing/index.html

@@ -188,10 +188,4 @@ <h2 class="opensource">It’s open source</h2>
         [class.scroll_hidden]="current === 2"
         (click)="onClick()"
     ></button>
-    <img
-        alt="by TBank"
-        src="assets/images/by.svg"
-        tuiLoading="lazy"
-        class="by"
-    />
 </footer>

projects/demo/src/modules/app/logo/logo.template.html

@@ -12,9 +12,3 @@
         Taiga UI
     </span>
 </a>
-
-<img
-    alt="by TBank"
-    src="assets/images/by.svg"
-    class="t-by"
-/>

projects/demo/src/modules/components/input-card-group/examples/2/index.ts

@@ -25,7 +25,7 @@ import {TuiButton, TuiDataList, TuiIcon, TuiTextfield, TuiTitle} from '@taiga-ui
 })
 export default class Example {
     protected readonly items = [
-        {card: '4321***1234', expire: '12/21', name: 'Salary', bank: 'Tbank'},
+        {card: '4321***1234', expire: '12/21', name: 'Salary', bank: 'Wachovia Bank'},
         {
             card: '8765***5678',
             expire: '03/42',

projects/demo/src/modules/icons/icons/index.html

@@ -4,7 +4,7 @@
     type="icons"
 >
     <ng-template pageTab="Overview">
-        Open source theme for Taiga UI
+        Open source theme for Taiga UI uses
         <a
             href="https://lucide.dev/"
             rel="noreferrer"

projects/demo/src/modules/info/related/index.html

@@ -1,7 +1,7 @@
 <tui-doc-page header="Taiga UI family">
     <div class="grid-container grid">
         <a
-            href="https://medium.com/its-tinkoff/taiga-ui-more-than-ui-kit-8867a52a63c6"
+            href="http://bit.ly/3XBdHs4"
             rel="noreferrer"
             target="_blank"
             tuiSurface="elevated"

projects/demo/src/modules/markup/colors/examples/table/index.html

@@ -2,7 +2,7 @@
     *ngFor="let color of colors"
     class="color"
 >
-    <ng-container *ngIf="getValue(color, tuiPlatform, darkMode()) as value">
+    <ng-container *ngIf="getValue(color, platform.tuiPlatform, darkMode()) as value">
         <td>
             <h3 class="name">
                 <tui-doc-copy

projects/demo/src/modules/markup/colors/examples/table/index.ts

@@ -4,7 +4,7 @@ import {Component, inject, Input} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {WA_WINDOW} from '@ng-web-apis/common';
 import {TuiDocCopy} from '@taiga-ui/addon-doc';
-import {TUI_PLATFORM, tuiInjectElement, tuiPure} from '@taiga-ui/cdk';
+import {tuiInjectElement, TuiPlatform, tuiPure} from '@taiga-ui/cdk';
 import {TUI_DARK_MODE} from '@taiga-ui/core';
 
 @Component({
@@ -19,13 +19,11 @@ export class TableColors {
     private readonly win = inject(WA_WINDOW);
     private readonly styles = this.win.getComputedStyle(tuiInjectElement());
     protected readonly darkMode = inject(TUI_DARK_MODE);
+    protected readonly platform = inject(TuiPlatform);
 
     @Input()
     public colors: readonly string[] = [];
 
-    @Input({required: true})
-    public tuiPlatform = inject(TUI_PLATFORM, {skipSelf: true});
-
     @tuiPure
     protected getValue(variable: string, _p: string, _d: boolean): string {
         return this.styles.getPropertyValue(variable);

projects/demo/src/modules/markup/colors/index.html

@@ -1,97 +1,38 @@
-<tui-doc-page
-    header="Colors"
-    [tuiPlatform]="platform"
->
-    <p
-        tuiGroup
-        class="mobile-colors-switch"
-        [collapsed]="true"
-        [style.width]="'fit-content'"
-    >
-        <label
-            appearance=""
-            iconStart="@tui.monitor"
-            tuiBlock
-        >
-            Web
-            <input
-                appearance="whiteblock"
-                name="platform"
-                tuiBlock
-                type="radio"
-                value="web"
-                [(ngModel)]="platform"
-            />
-        </label>
-        <label
-            appearance=""
-            iconStart="@tui.smartphone"
-            tuiBlock
-        >
-            Mobile
-            <input
-                appearance="whiteblock"
-                name="platform"
-                tuiBlock
-                type="radio"
-                value="android"
-                [(ngModel)]="platform"
-            />
-        </label>
-    </p>
+<tui-doc-page header="Colors">
     <ng-template pageTab="Text">
-        <table
-            [colors]="text"
-            [tuiPlatform]="platform"
-        ></table>
+        <table [colors]="text"></table>
         <table
             [attr.tuiTheme]="darkMode() ? 'light' : 'dark'"
             [colors]="text"
-            [tuiPlatform]="platform"
         ></table>
     </ng-template>
 
     <ng-template pageTab="Backgrounds">
-        <table
-            [colors]="backgrounds"
-            [tuiPlatform]="platform"
-        ></table>
+        <table [colors]="backgrounds"></table>
         <table
             [attr.tuiTheme]="darkMode() ? 'light' : 'dark'"
             [colors]="backgrounds"
-            [tuiPlatform]="platform"
         ></table>
     </ng-template>
 
     <ng-template pageTab="Statuses">
-        <table
-            [colors]="statuses"
-            [tuiPlatform]="platform"
-        ></table>
+        <table [colors]="statuses"></table>
         <table
             [attr.tuiTheme]="darkMode() ? 'light' : 'dark'"
             [colors]="statuses"
-            [tuiPlatform]="platform"
         ></table>
     </ng-template>
 
     <ng-template pageTab="Others">
-        <table
-            [colors]="others"
-            [tuiPlatform]="platform"
-        ></table>
+        <table [colors]="others"></table>
         <table
             [attr.tuiTheme]="darkMode() ? 'light' : 'dark'"
             [colors]="others"
-            [tuiPlatform]="platform"
         ></table>
     </ng-template>
 
     <ng-template pageTab="Charts">
-        <table
-            [colors]="charts"
-            [tuiPlatform]="platform"
-        ></table>
+        <table [colors]="charts"></table>
     </ng-template>
 
     <ng-template pageTab="Setup">

projects/demo/src/modules/markup/colors/index.ts

@@ -1,19 +1,15 @@
 import {Component, inject} from '@angular/core';
-import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
-import {TuiPlatform} from '@taiga-ui/cdk';
-import {TUI_DARK_MODE, TuiGroup} from '@taiga-ui/core';
-import {TuiBlock} from '@taiga-ui/kit';
+import {TUI_DARK_MODE} from '@taiga-ui/core';
 
 import {BACKGROUNDS, CHARTS, OTHERS, STATUSES, TEXT} from './constants';
 import {TableColors} from './examples/table';
 
 @Component({
     standalone: true,
-    imports: [FormsModule, TableColors, TuiBlock, TuiDemo, TuiGroup, TuiPlatform],
+    imports: [TableColors, TuiDemo],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     changeDetection,
 })
 export default class Page {
@@ -28,6 +24,4 @@ export default class Page {
     protected readonly statuses = STATUSES;
     protected readonly others = OTHERS;
     protected readonly charts = CHARTS;
-
-    protected platform: 'android' | 'web' = 'web';
 }

projects/demo/used-icons.ts

@@ -98,6 +98,4 @@ export const TUI_USED_ICONS = [
     '@tui.chevron-up',
     '@tui.play',
     '@tui.pause',
-    '@tui.monitor',
-    '@tui.smartphone',
 ] as const;

projects/kit/directives/button-group/button-group.style.less

@@ -26,6 +26,15 @@
         color: var(--tui-text-action);
         text-align: center;
         text-decoration: none;
+        clip-path: inset(0);
+
+        &:first-child {
+            clip-path: inset(0 0 0 -10rem);
+        }
+
+        &:last-child {
+            clip-path: inset(0 -10rem 0 0);
+        }
 
         &:active {
             background: var(--tui-background-neutral-1);

projects/layout/components/card/card.styles.less

@@ -10,6 +10,7 @@
     flex-shrink: 0;
     text-decoration: none;
     overscroll-behavior: contain;
+    overflow: hidden;
 
     &[tuiTitle],
     [tuiTitle]:not([tuiCell] *):not([tuiLabel] *) {

projects/layout/components/cell/cell.styles.less

@@ -166,7 +166,8 @@
     }
 
     &:hover [tuiCellActions] button,
-    &:hover [tuiCellActions] a {
+    &:hover [tuiCellActions] a,
+    &:hover [tuiCellActions] label {
         opacity: 1;
     }
 
@@ -178,7 +179,8 @@
 
 @media (hover: hover) and (pointer: fine) {
     a[tuiCell]:not([tuiSurface]):hover,
-    button[tuiCell]:not([tuiSurface]):hover {
+    button[tuiCell]:not([tuiSurface]):hover,
+    label[tuiCell]:not([tuiSurface]):hover {
         background: var(--tui-background-neutral-1);
         cursor: pointer;
     }

projects/layout/components/navigation/header.style.less

@@ -1,6 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-header[tuiNavigationHeader] {
+header[tuiNavigationHeader][tuiNavigationHeader] {
     --tui-text-action: var(--tui-text-primary);
     --tui-text-action-hover: var(--tui-text-primary);
 

projects/legacy/styles/mixins/textfield.less

@@ -298,7 +298,7 @@
 
         &_left {
             :host[data-size='s'] & {
-                margin-inline-start: -0.375rem;
+                margin: 0 0.125rem 0 -0.375rem;
             }
 
             :host[data-size='m'] & {

projects/legacy/styles/mixins/textfield.scss

@@ -288,7 +288,7 @@ $line-height-l: 1.25rem;
 
         &_left {
             :host[data-size='s'] & {
-                margin-inline-start: -0.375rem;
+                margin: 0 0.125rem 0 -0.375rem;
             }
 
             :host[data-size='m'] & {