@taiga-ui/core 5.0.0-canary.b5906eb → 5.0.0-canary.ba4fa64

package/styles/components/textfield.less

@@ -1,6 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
-tui-textfield {
+tui-textfield:where(*&) {
     .scrollbar-hidden();
     .transition(color);
 
@@ -10,6 +10,7 @@ tui-textfield {
     --t-label-font: var(--tui-font-body-s);
     --t-end: ~'0rem';
     --t-start: ~'0rem';
+    --t-side: ~'0rem';
 
     position: relative;
     display: flex;
@@ -24,6 +25,12 @@ tui-textfield {
     gap: 0 0.25rem;
     isolation: isolate;
 
+    // TODO: Remove in next PR
+    &[data-size='s'],
+    &:has([tuiInputPin]) {
+        gap: 0;
+    }
+
     &[tuiAppearance] {
         outline: none;
 
@@ -95,31 +102,29 @@ tui-textfield {
         --t-padding: var(--tui-padding-s);
 
         border-radius: var(--tui-radius-m);
-        gap: 0;
         font: var(--tui-font-ui-s);
         line-height: 1rem;
 
         &[data-icon-start] {
-            --t-start: 1.25rem;
+            --t-start: 1.5rem;
         }
 
         &[data-icon-end] {
-            --t-end: 1.25rem;
+            --t-end: 1.5rem;
         }
 
         &::before {
-            margin-inline: -0.125rem 0.5rem;
             font-size: 1rem;
         }
 
         &::after {
-            margin-inline-start: calc(0.625rem - var(--t-padding));
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
+            margin-inline-start: calc(0.5rem - var(--t-padding));
             font-size: 1rem;
         }
 
         & > .t-content {
-            margin-inline-end: -0.375rem;
+            gap: 0;
+            margin-inline-end: -0.25rem;
         }
     }
 
@@ -225,6 +230,11 @@ tui-textfield {
         &[inputmode='none'] {
             caret-color: transparent;
         }
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            appearance: none;
+        }
     }
 
     & > .t-template {
@@ -300,7 +310,7 @@ tui-textfield {
         display: flex;
         block-size: var(--t-height);
         align-items: center;
-        gap: inherit;
+        gap: 0.25rem;
         margin-inline-start: auto;
         isolation: isolate;
         border-radius: inherit;
@@ -342,11 +352,6 @@ tui-textfield {
 
     &:not([data-mode~='readonly']) {
         .appearance-focus({
-            [tuiInput]::placeholder,
-            [tuiInput]._empty {
-                color: var(--tui-text-tertiary);
-            }
-
             [tuiLabel] {
                 color: var(--tui-text-primary) !important;
                 font: var(--t-label-font);

package/styles/components/title.less

@@ -18,7 +18,7 @@
  * @see-also
  * Label
  */
-[tuiTitle] {
+[tuiTitle]:where(*&) {
     position: relative;
     display: flex;
     min-inline-size: 0;
@@ -64,14 +64,14 @@
         margin: 0;
         font: inherit;
     }
-}
 
-[tuiSubtitle] {
-    font: var(--tui-font-ui-s);
-    margin: 0;
+    [tuiSubtitle] {
+        font: var(--tui-font-ui-s);
+        margin: 0;
+    }
 }
 
-[tuiButton] [tuiTitle] {
+[tuiButton]:where(*&) [tuiTitle] {
     margin-inline-end: auto;
 
     [tuiSubtitle] {

package/styles/mixins/slider.less

@@ -1,18 +1,15 @@
-@thumb-diameters: {
-    @s: 0.5rem;
-    @m: 0.75rem;
-};
-
 @track-inset: {
     @s: 0.625rem;
     @m: 0.75rem;
     @l: 1rem;
 };
 
-.tui-slider-ticks-labels(@thumb-size: m) {
-    @thumb: @thumb-diameters[@@thumb-size];
+@thumb-diameter: var(--tui-thumb-size, 0.75rem);
+@thumb-radius: calc(@thumb-diameter / 2);
+@track-thickness: max(calc(@thumb-radius - 0.25rem), 0.125rem);
 
-    --t-offset: calc(@thumb / 2);
+.tui-slider-ticks-labels() {
+    --t-offset: @thumb-radius;
 
     display: flex;
     font: var(--tui-font-body-s);
@@ -38,33 +35,33 @@
     }
 
     tui-range + & {
-        --t-offset: @thumb;
+        --t-offset: @thumb-diameter;
     }
 
     /* TODO: add :has([tuiInputSlider]) */
     tui-textfield[data-size='l'] + & {
-        --t-offset: calc(@track-inset[@l] + @thumb / 2);
+        --t-offset: calc(@track-inset[@l] + @thumb-radius);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
     tui-textfield[data-size='m'] + & {
-        --t-offset: calc(@track-inset[@m] + @thumb / 2);
+        --t-offset: calc(@track-inset[@m] + @thumb-radius);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
     tui-textfield[data-size='s'] + & {
-        --t-offset: calc(@track-inset[@s] + @thumb / 2);
+        --t-offset: calc(@track-inset[@s] + @thumb-radius);
     }
 
     tui-input-range[data-size='l'] + & {
-        --t-offset: calc(@track-inset[@l] + @thumb);
+        --t-offset: calc(@track-inset[@l] + @thumb-diameter);
     }
 
     tui-input-range[data-size='m'] + & {
-        --t-offset: calc(@track-inset[@m] + @thumb);
+        --t-offset: calc(@track-inset[@m] + @thumb-diameter);
     }
 
     tui-input-range[data-size='s'] + & {
-        --t-offset: calc(@track-inset[@s] + @thumb);
+        --t-offset: calc(@track-inset[@s] + @thumb-diameter);
     }
 }

package/styles/mixins/slider.scss

@@ -1,20 +1,15 @@
-$thumb-diameters: (
-    's': 0.5rem,
-    'm': 0.75rem,
-    'l': 0.75rem,
-);
-
 $track-inset: (
     's': 0.625rem,
     'm': 0.75rem,
     'l': 1rem,
 );
 
-// TODO(v5): use `l` by default (default size for new textfields)
-@mixin tui-slider-ticks-labels($input-size: m) {
-    $thumb: map-get($thumb-diameters, $input-size);
+$thumb-diameter: var(--tui-thumb-size, 0.75rem);
+$thumb-radius: calc($thumb-diameter / 2);
+$track-thickness: max(calc($thumb-radius - 0.25rem), 0.125rem);
 
-    --t-offset: calc($thumb / 2);
+@mixin tui-slider-ticks-labels() {
+    --t-offset: $thumb-radius;
 
     display: flex;
     font: var(--tui-font-body-s);
@@ -40,33 +35,33 @@ $track-inset: (
     }
 
     tui-range + & {
-        --t-offset: $thumb;
+        --t-offset: $thumb-diameter;
     }
 
     /* TODO: add :has([tuiInputSlider]) */
     tui-textfield[data-size='l'] + & {
-        --t-offset: calc(map-get($track-inset, 'l') + $thumb / 2);
+        --t-offset: calc(map-get($track-inset, 'l') + $thumb-radius);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
     tui-textfield[data-size='m'] + & {
-        --t-offset: calc(map-get($track-inset, 'm') + $thumb / 2);
+        --t-offset: calc(map-get($track-inset, 'm') + $thumb-radius);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
     tui-textfield[data-size='s'] + & {
-        --t-offset: calc(map-get($track-inset, 's') + $thumb / 2);
+        --t-offset: calc(map-get($track-inset, 's') + $thumb-radius);
     }
 
     tui-input-range[data-size='l'] + & {
-        --t-offset: calc(map-get($track-inset, 'l') + $thumb);
+        --t-offset: calc(map-get($track-inset, 'l') + $thumb-diameter);
     }
 
     tui-input-range[data-size='m'] + & {
-        --t-offset: calc(map-get($track-inset, 'm') + $thumb);
+        --t-offset: calc(map-get($track-inset, 'm') + $thumb-diameter);
     }
 
     tui-input-range[data-size='s'] + & {
-        --t-offset: calc(map-get($track-inset, 's') + $thumb);
+        --t-offset: calc(map-get($track-inset, 's') + $thumb-diameter);
     }
 }

package/styles/theme/appearance/action.less

@@ -1,17 +1,3 @@
-/* TODO @deprecated remove in v5 */
-[tuiAppearance][data-appearance='link'] {
-    color: var(--tui-text-action);
-    background: transparent;
-
-    .appearance-hover({
-        color: var(--tui-text-action-hover);
-    });
-
-    .appearance-active({
-        color: var(--tui-text-action-hover);
-    });
-}
-
 [tuiAppearance][data-appearance='action'] {
     color: var(--tui-text-action);
     background: transparent;

package/styles/theme/appearance/floating.less

@@ -5,6 +5,11 @@
     color: var(--tui-text-primary);
     box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
 
+    &::before,
+    &::after {
+        transition-property: color;
+    }
+
     .appearance-hover({
         box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14);
     });

package/tokens/i18n.d.ts

@@ -7,6 +7,10 @@ export declare const TUI_MONTHS: InjectionToken<import("@angular/core").Signal<r
  * i18n 'close' word
  */
 export declare const TUI_CLOSE_WORD: InjectionToken<import("@angular/core").Signal<string>>;
+/**
+ * i18n 'back' word
+ */
+export declare const TUI_BACK_WORD: InjectionToken<import("@angular/core").Signal<string>>;
 /**
  * i18n 'clear' word
  */

package/tokens/index.d.ts

@@ -13,6 +13,5 @@ export * from './media';
 export * from './number-format';
 export * from './reduced-motion';
 export * from './selection-stream';
-export * from './theme';
 export * from './validation-errors';
 export * from './viewport';

package/tokens/theme.d.ts

@@ -1,2 +0,0 @@
-import { InjectionToken } from '@angular/core';
-export declare const TUI_THEME: InjectionToken<string>;