chore: fix

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

@@ -12,8 +12,20 @@
     outline-offset: -1px;
     border: none;
 
+    &::before,
+    &::after {
+        .transition(color);
+
+        color: var(--tui-text-tertiary);
+    }
+
     .appearance-hover({
         --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+
+        &:before,
+        &:after {
+            color: var(--tui-text-secondary);
+        }
     });
 
     .appearance-focus({

projects/experimental/components/input-phone-international/input-phone-international.component.ts

@@ -27,9 +27,10 @@ import {
     TuiAutoFocus,
     tuiAutoFocusOptionsProvider,
 } from '@taiga-ui/cdk/directives/auto-focus';
-import {TUI_IS_IOS, tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';
+import {tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';
 import {tuiInjectElement, tuiIsInputEvent} from '@taiga-ui/cdk/utils/dom';
 import {tuiDirectiveBinding} from '@taiga-ui/cdk/utils/miscellaneous';
+import {TUI_TEXTFIELD_OPTIONS, TuiButton} from '@taiga-ui/core';
 import {TuiDataList, TuiOption} from '@taiga-ui/core/components/data-list';
 import {TuiIcon} from '@taiga-ui/core/components/icon';
 import {
@@ -75,6 +76,7 @@ const NOT_FORM_CONTROL_SYMBOLS = /[^+\d]/g;
         TuiTextfield,
         TuiTextfieldContent,
         TuiTitle,
+        TuiButton,
     ],
     templateUrl: './input-phone-international.template.html',
     styleUrls: ['./input-phone-international.style.less'],
@@ -93,6 +95,7 @@ const NOT_FORM_CONTROL_SYMBOLS = /[^+\d]/g;
         '[value]': 'value() || el.value',
         '(blur)': 'onTouched()',
         '(input)': 'onInput()',
+        '(click)': 'open.set(false)',
         '(beforeinput.capture)': 'onPaste($event)',
     },
 })
@@ -101,7 +104,6 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
     protected readonly list: QueryList<ElementRef<HTMLButtonElement>> = EMPTY_QUERY;
 
     protected readonly el = tuiInjectElement<HTMLInputElement>();
-    protected readonly isIos = inject(TUI_IS_IOS);
     protected readonly icons = inject(TUI_COMMON_ICONS);
     protected readonly options = inject(TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS);
     protected readonly countries = signal(this.options.countries);
@@ -112,6 +114,7 @@ export class TuiInputPhoneInternational extends TuiControl<string> {
     protected readonly open = tuiDropdownOpen();
     protected readonly dropdown = tuiDropdown(null);
     protected readonly search = signal<string>('');
+    protected readonly size = inject(TUI_TEXTFIELD_OPTIONS).size;
 
     protected readonly mask = tuiMaskito(
         computed(() => this.computeMask(this.code(), this.metadata())),

projects/experimental/components/input-phone-international/input-phone-international.style.less

@@ -1,103 +1,67 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-tui-textfield[data-size] {
-    [tuiInputPhoneInternational] {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-    }
-
-    .t-ipi-select {
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-        padding: 0;
-
-        &_readonly {
-            pointer-events: none;
-        }
+[tuiInputPhoneInternational][tuiInputPhoneInternational] {
+    left: var(--t-offset);
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    inline-size: calc(100% - var(--t-offset));
+
+    & + label {
+        padding-left: var(--t-offset);
     }
 }
 
 tui-textfield[data-size='s'] {
-    [tuiInputPhoneInternational] {
-        left: 4.125rem;
-        inline-size: calc(100% - 4.125rem);
+    --t-offset: 4.125rem;
 
-        & + label {
-            padding-left: 4.125rem;
-        }
-    }
-
-    .t-ipi-select {
-        inline-size: 4rem;
-    }
-
-    .t-ipi-value {
-        left: 0.75rem;
-        gap: 0.125rem;
+    .t-ipi-flag {
+        margin: 0 0.1875rem;
     }
 }
 
 tui-textfield[data-size='m'] {
-    [tuiInputPhoneInternational] {
-        left: 5.125rem;
-        inline-size: calc(100% - 5.125rem);
-
-        & + label {
-            padding-left: 5.125rem;
-        }
-    }
-
-    .t-ipi-select {
-        inline-size: 5rem;
-    }
+    --t-offset: 4.875rem;
 
-    .t-ipi-value {
-        left: 0.75rem;
+    .t-ipi-flag {
+        margin: 0 -0.1875rem;
     }
 }
 
 tui-textfield[data-size='l'] {
-    [tuiInputPhoneInternational] {
-        left: 5.75rem;
-        inline-size: calc(100% - 5.75rem);
+    --t-offset: 5.25rem;
 
-        & + label {
-            padding-left: 5.75rem;
-        }
-    }
-
-    .t-ipi-select {
-        inline-size: 5.625rem;
-    }
-
-    .t-ipi-value {
-        left: 1rem;
+    .t-ipi-flag {
+        margin: 0 -0.1875rem;
     }
 }
 
-.t-ipi-value {
+.t-ipi-select {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
+    left: 0;
+    border-radius: inherit;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+
+    &_readonly {
+        pointer-events: none;
+    }
 }
 
 .t-ipi-flag {
     inline-size: 1.75rem;
     block-size: 1.75rem;
     border-radius: 100%;
+
+    &_small {
+        inline-size: 1.25rem;
+        block-size: 1.25rem;
+    }
 }
 
 .t-ipi-code {
     color: var(--tui-text-secondary);
 }
 
-.t-ipi-chevron {
-    font-size: 1rem;
-}
-
 .t-ipi-search {
     position: sticky;
     top: 0;

projects/experimental/components/input-phone-international/input-phone-international.template.html

@@ -1,45 +1,41 @@
 <ng-container *tuiTextfieldContent>
-    <select
-        ngModel=""
+    <button
+        appearance="textfield"
         tabindex="-1"
-        tuiTextfield
+        tuiButton
+        tuiChevron
         class="t-ipi-select"
-        [attr.data-focus]="open()"
         [attr.data-mode]="mode()"
         [class.t-ipi-select_readonly]="readOnly()"
         [disabled]="disabled()"
-        [focused]="false"
-        [ngModelOptions]="{standalone: true}"
+        [size]="size()"
+        [tuiAppearanceFocus]="open()"
         (mousedown.prevent)="interactive() && open.set(!open())"
-    ></select>
-    <div class="t-ipi-value">
+    >
         <img
             class="t-ipi-flag"
             [alt]="names()?.[code()]"
+            [class.t-ipi-flag_small]="size() === 's'"
             [src]="code() | tuiFlag"
         />
-        <tui-icon
-            tuiChevron
-            class="t-ipi-chevron"
-        />
-    </div>
+    </button>
 </ng-container>
 <ng-container *tuiTextfieldDropdown>
     <div
         *ngIf="countrySearch"
         class="t-ipi-search"
     >
         <tui-textfield
-            tuiTextfieldSize="m"
             [iconStart]="icons.search"
+            [tuiTextfieldSize]="size() === 's' ? 's' : 'm'"
         >
             <input
+                tuiAutoFocus
                 tuiTextfield
                 [focused]="true"
                 [ngModel]="search()"
                 [ngModelOptions]="{standalone: true}"
                 [placeholder]="label()"
-                [tuiAutoFocus]="!isIos"
                 (keydown.arrowDown)="list.get(0)?.nativeElement?.focus()"
                 (ngModelChange)="search.set($event)"
             />
@@ -49,14 +45,15 @@
     <tui-data-list class="t-ipi-options">
         <button
             *ngFor="let item of filtered()"
-            tuiCell
             tuiOption
             type="button"
+            [tuiCell]="size()"
             (click)="onItemClick(item.iso)"
         >
             <img
                 alt=""
                 class="t-ipi-flag"
+                [class.t-ipi-flag_small]="size() === 's'"
                 [src]="item.iso | tuiFlag"
             />
             <span tuiTitle>{{ item.name }}</span>