diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.style.less b/projects/addon-commerce/components/input-card-group/input-card-group.style.less index ebe090335c7b..b9d34433fb15 100644 --- a/projects/addon-commerce/components/input-card-group/input-card-group.style.less +++ b/projects/addon-commerce/components/input-card-group/input-card-group.style.less @@ -64,7 +64,7 @@ padding: 1.25rem var(--tui-padding-l) 0; box-sizing: border-box; - font: var(--tui-font-text-s); + font: var(--tui-font-text-m); line-height: 2.25rem; color: var(--tui-text-primary); white-space: nowrap; @@ -107,13 +107,20 @@ outline: none; background: transparent; box-sizing: border-box; - font: var(--tui-font-text-s); + font: var(--tui-font-text-m); color: var(--tui-text-primary); &::placeholder { color: var(--tui-text-tertiary); } + &:-webkit-autofill { + -webkit-text-fill-color: var(--tui-text-primary) !important; + caret-color: var(--tui-text-primary) !important; + border-color: var(--tui-service-autofill-background) !important; + box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important; + } + &&&_card { // @note: (&&&_) it's increasing css cascade priority &:not(.t-input_hidden), diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.template.html b/projects/addon-commerce/components/input-card-group/input-card-group.template.html index 0ac89b3c8109..7d358df3d673 100644 --- a/projects/addon-commerce/components/input-card-group/input-card-group.template.html +++ b/projects/addon-commerce/components/input-card-group/input-card-group.template.html @@ -65,6 +65,7 @@ #inputExpire automation-id="tui-input-card-group__expire" inputmode="numeric" + maxlength="5" placeholder="00/00" translate="no" class="t-input" diff --git a/projects/addon-commerce/components/input-expire/input-expire.directive.ts b/projects/addon-commerce/components/input-expire/input-expire.directive.ts index d0d1470535ca..570a77fe4070 100644 --- a/projects/addon-commerce/components/input-expire/input-expire.directive.ts +++ b/projects/addon-commerce/components/input-expire/input-expire.directive.ts @@ -12,6 +12,8 @@ import {tuiMaskito} from '@taiga-ui/kit/utils'; inputmode: 'numeric', placeholder: '00/00', translate: 'no', + maxlength: '5', + '[attr.name]': 'autocomplete ? "ccexpiryyear" : null', '[autocomplete]': 'autocomplete ? "cc-exp" : "off"', }, }) diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less index e3ba7b4a3c7b..6195ce1ec59f 100644 --- a/projects/core/styles/components/textfield.less +++ b/projects/core/styles/components/textfield.less @@ -185,6 +185,7 @@ tui-textfield { } } + &:-webkit-autofill, &:not(._empty):not(:placeholder-shown) { & ~ label { font-size: 0.83em; diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less index 664edd20652e..8c178b029aaa 100644 --- a/projects/core/styles/theme/appearance/textfield.less +++ b/projects/core/styles/theme/appearance/textfield.less @@ -38,7 +38,8 @@ &:-webkit-autofill { -webkit-text-fill-color: var(--tui-text-primary) !important; - border-color: var(--tui-service-autofill-background); + caret-color: var(--tui-text-primary) !important; + border-color: var(--tui-service-autofill-background) !important; box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important; } } @@ -46,6 +47,7 @@ [tuiTheme='dark'] [tuiAppearance][data-appearance='textfield'], [tuiTheme='dark'][tuiAppearance][data-appearance='textfield'] { background-color: var(--tui-background-neutral-1); + color-scheme: dark; .appearance-hover({ background-color: var(--tui-background-neutral-1-hover); diff --git a/projects/demo/src/modules/components/input-card/examples/1/index.html b/projects/demo/src/modules/components/input-card/examples/1/index.html index 5147c657562a..5668af0f3c57 100644 --- a/projects/demo/src/modules/components/input-card/examples/1/index.html +++ b/projects/demo/src/modules/components/input-card/examples/1/index.html @@ -11,7 +11,7 @@
- + extends TuiControl { @ViewChildren(NgControl) private readonly controls: QueryList = EMPTY_QUERY; + private readonly id = inject(TuiIdService).generate(); + protected validator = computed(() => this.invalid() ? ERROR : Validators.nullValidator, ); @@ -71,7 +74,7 @@ export class TuiRadioList extends TuiControl { String($implicit); protected get name(): string { - return this.control.name?.toString() || ''; + return `${this.control.name}-${this.id}`; } protected onFocusOut(): void {