@taiga-ui/core 5.0.0-canary.856b30d → 5.0.0-canary.8b0b9ac

package/styles/components/appearance.less

@@ -19,7 +19,7 @@
  * @see-also
  * Button
  */
-[tuiAppearance] {
+[tuiAppearance]:where(*&) {
     .transition(all);
 
     position: relative;
@@ -30,6 +30,7 @@
 
     &::before,
     &::after {
+        transition-property: none;
         transition-duration: inherit;
         transition-timing-function: ease-in-out;
     }

package/styles/components/button.less

@@ -16,8 +16,8 @@
  * @see-also
  * Icons, Appearance, Link
  */
-[tuiButton],
-[tuiIconButton] {
+[tuiButton]:where(*&),
+[tuiIconButton]:where(*&) {
     --t-size: var(--tui-height-l);
     --t-radius: var(--tui-radius-l);
     --t-gap: 0.25rem;
@@ -122,9 +122,10 @@
     }
 }
 
-[tuiIconButton] {
+[tuiIconButton]:where(*&) {
     gap: 0;
     inline-size: var(--t-size);
+    min-inline-size: var(--t-size);
     font-size: 0 !important;
     padding: 0;
 

package/styles/components/group.less

@@ -19,7 +19,7 @@
  * @see-also
  * Button, Block, Textfield
  */
-[tuiGroup] {
+[tuiGroup]:where(*&) {
     position: relative;
     display: flex;
     transform: translate3d(0, 0, 0);

package/styles/components/icon.less

@@ -18,7 +18,7 @@
  * @see-also
  * Icons
  */
-tui-icon {
+tui-icon:where(*&) {
     --tui-icon-size: 1em;
 
     position: relative;
@@ -30,7 +30,7 @@ tui-icon {
     border: 0 solid transparent;
     vertical-align: middle;
     box-sizing: border-box;
-    mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width, 0.125rem)) 100%;
+    mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width)) 100%;
     zoom: ~'calc(100% * (min(max(var(--tui-font-offset) - 10px, 0px), 1px) / 0.8px))';
 
     @media @tui-mouse {

package/styles/components/icons.less

@@ -17,7 +17,7 @@
  * @see-also
  * Button, Icon, Link
  */
-[tuiIcons] {
+[tuiIcons]:where(*&) {
     --t-icon-start: none;
     --t-icon-end: none;
 
@@ -37,14 +37,14 @@
     &::before {
         display: var(--t-icon-start);
         mask:
-            var(--t-icon-start) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
+            var(--t-icon-start) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width))
                 ~'min(1em, 100%)',
             100% padding-box;
     }
 
     &::after {
         display: var(--t-icon-end);
-        mask: var(--t-icon-end) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
+        mask: var(--t-icon-end) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width))
             ~'min(1em, 100%)' padding-box;
     }
 

package/styles/components/label.less

@@ -14,7 +14,7 @@
  * @see-also
  * Checkbox, Radio, Title
  */
-[tuiLabel] {
+[tuiLabel]:where(*&) {
     display: flex;
     gap: 0.25rem;
     flex-direction: column;

package/styles/components/link.less

@@ -13,7 +13,7 @@
  * @see-also
  * Icons, Appearance, Button
  */
-[tuiLink] {
+[tuiLink]:where(*&) {
     .transition(~'color, text-decoration, opacity');
 
     padding: 0;
@@ -45,12 +45,13 @@
         font-size: 0;
         line-height: 0;
         box-sizing: border-box;
-        mask-size: calc(100% + 10 * var(--tui-stroke-width, 0.125rem)) 100%;
+        mask-size: calc(100% + 10 * var(--tui-stroke-width)) 100%;
         transition: none;
     }
 
     &[tuiChevron]::after {
         display: inline-block;
+        vertical-align: initial;
     }
 
     .appearance-hover({

package/styles/components/notification.less

@@ -21,11 +21,11 @@
  * @see-also
  * Icons, Appearance
  */
-[tuiNotification] {
+[tuiNotification]:where(*&) {
     .button-clear();
 
     position: relative;
-    display: block;
+    display: flow-root;
     max-block-size: 100%;
     color: var(--tui-text-primary);
     padding: 1rem;

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;
@@ -21,7 +22,6 @@ tui-textfield {
     font: var(--tui-font-ui-m);
     line-height: 1.25rem;
     box-sizing: border-box;
-    gap: 0 0.25rem;
     isolation: isolate;
 
     &[tuiAppearance] {
@@ -39,27 +39,29 @@ tui-textfield {
     }
 
     &[data-icon-start] {
-        --t-start: 2.25rem;
+        --t-start: 2.5rem;
     }
 
     &[data-icon-end] {
-        --t-end: 2.25rem;
+        --t-end: 1.75rem;
     }
 
     &[tuiIcons] {
         &::before {
             z-index: 1;
             block-size: var(--t-height);
-            margin-inline-end: 0.5rem;
+            inline-size: 1.5rem;
+            margin-inline-end: 1rem;
             pointer-events: none;
         }
 
         &::after {
             position: relative;
             block-size: var(--t-height);
+            inline-size: calc(1.5rem + 2 * var(--t-padding));
             cursor: pointer;
-            border-inline: var(--t-padding) solid transparent;
-            margin: 0 calc(-1 * var(--t-padding));
+            margin-inline-start: calc(0.25rem - var(--t-padding));
+            margin-inline-end: calc(-1 * var(--t-padding));
         }
     }
 
@@ -95,31 +97,34 @@ 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;
+            margin-inline: -0.25rem 0.25rem;
         }
 
         &::after {
-            margin-inline-start: calc(0.625rem - var(--t-padding));
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
+            inline-size: calc(0.75rem + 2 * var(--t-padding));
+            margin-inline: 0 -0.5rem;
             font-size: 1rem;
         }
 
         & > .t-content {
-            margin-inline-end: -0.375rem;
+            gap: 0;
+
+            > *:last-child {
+                margin-inline-end: -0.25rem;
+            }
         }
     }
 
@@ -134,7 +139,7 @@ tui-textfield {
         line-height: 1rem;
 
         &[data-icon-start] {
-            --t-start: 1.75rem;
+            --t-start: 1.875rem;
         }
 
         &[data-icon-end] {
@@ -142,15 +147,15 @@ tui-textfield {
         }
 
         &::before {
-            margin-inline: -0.125rem 0.125rem;
+            margin-inline: -0.125rem 0.5rem;
         }
 
         &::after {
-            margin-inline-start: calc(0.25rem - var(--t-padding));
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
+            inline-size: calc(1.25rem + 2 * var(--t-padding));
+            margin-inline-start: calc(0.5rem - var(--t-padding));
         }
 
-        & > .t-content {
+        & > .t-content > *:last-child {
             margin-inline-end: -0.125rem;
         }
     }
@@ -209,9 +214,10 @@ tui-textfield {
         border-radius: inherit;
         border-width: 0;
         overscroll-behavior: none;
-        // StackBlitz changes "0rem" to "0" breaking calc
-        padding-inline-start: calc(var(--t-start, ~'0rem') + var(--t-padding));
-        padding-inline-end: calc(var(--t-end, ~'0rem') + var(--t-side, ~'0rem') + var(--t-padding));
+        padding-inline-start: calc(var(--t-start) + var(--t-padding));
+        padding-inline-end: calc(var(--t-end) + var(--t-side) + var(--t-padding));
+        white-space: nowrap;
+        overflow: hidden;
 
         &:is(input, textarea):read-only ~ .t-filler {
             display: none;
@@ -225,12 +231,11 @@ tui-textfield {
         &[inputmode='none'] {
             caret-color: transparent;
         }
-    }
 
-    & > .t-template {
-        display: flex;
-        block-size: 100%;
-        align-items: center;
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            appearance: none;
+        }
     }
 
     &._with-template [tuiInput]:first-of-type {
@@ -300,7 +305,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 +347,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

@@ -3,14 +3,19 @@
 [tuiAppearance][data-appearance='floating'] {
     background: var(--tui-background-elevation-2);
     color: var(--tui-text-primary);
-    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+    box-shadow: var(--tui-shadow-small);
+
+    &::before,
+    &::after {
+        transition-property: color;
+    }
 
     .appearance-hover({
-        box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14);
+        box-shadow: var(--tui-shadow-small-hover);
     });
 
     .appearance-active({
         background: var(--tui-background-base-alt);
-        box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+        box-shadow: var(--tui-shadow-small);
     });
 }

package/styles/theme/variables.less

@@ -1,3 +1,6 @@
+@import (inline, once) '@taiga-ui/design-tokens/palette/animation.css';
+@import (inline, once) '@taiga-ui/design-tokens/palette/shadow.css';
+
 &:root,
 &:host {
     // Fonts
@@ -14,12 +17,12 @@
     // Body
     --tui-font-body-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-font-family-text);
     --tui-font-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-font-family-text);
-    --tui-font-body-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(20 / 13) var(--tui-font-family-text);
+    --tui-font-body-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(20 / 14) var(--tui-font-family-text);
     --tui-font-body-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-family-text);
     // Reduced
     --tui-font-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-font-family-text);
     --tui-font-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-font-family-text);
-    --tui-font-ui-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(16 / 13) var(--tui-font-family-text);
+    --tui-font-ui-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(16 / 14) var(--tui-font-family-text);
     --tui-font-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-family-text);
     // Radii
     --tui-radius-xs: 0.25rem;
@@ -37,6 +40,7 @@
     --tui-padding-m: 0.75rem;
     --tui-padding-l: 1rem;
     // Misc
+    --tui-stroke-width: 0.125rem;
     --tui-duration: 0.3s;
     --tui-disabled-opacity: 0.56;
 }

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/utils/miscellaneous/font-scaling.d.ts

@@ -1,3 +1,3 @@
-import { InjectionToken, type Provider, type WritableSignal } from '@angular/core';
-export declare const TUI_FONT_OFFSET: InjectionToken<WritableSignal<number>>;
+import { InjectionToken, type Provider, type Signal } from '@angular/core';
+export declare const TUI_FONT_OFFSET: InjectionToken<Signal<number>>;
 export declare function tuiEnableFontScaling(): Provider;

package/tokens/theme.d.ts

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