@taiga-ui/core 4.52.0-canary.763e67d → 4.52.0-canary.7c53ccc

package/styles/components/title.less

@@ -26,32 +26,32 @@
     text-align: start;
     gap: 0.25rem;
     margin: 0;
-    font: var(--tui-font-text-ui-m);
+    font: var(--tui-font-ui-m);
 
     &[data-size='s'] {
         gap: 0.125rem;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-xs);
+            font: var(--tui-font-body-xs);
         }
     }
 
     &[data-size='m'] {
         gap: 0.125rem;
-        font: var(--tui-font-heading-5);
+        font: var(--tui-font-heading-h5);
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-m);
+            font: var(--tui-font-body-m);
         }
     }
 
     &[data-size='l'] {
         gap: 0.5rem;
-        font: var(--tui-font-heading-3);
+        font: var(--tui-font-heading-h3);
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-m);
+            font: var(--tui-font-body-m);
         }
     }
 
@@ -67,7 +67,7 @@
 }
 
 [tuiSubtitle] {
-    font: var(--tui-font-text-ui-s);
+    font: var(--tui-font-ui-s);
     margin: 0;
 }
 

package/styles/mixins/date-picker.less

@@ -4,7 +4,7 @@
     .t-row {
         display: flex;
         justify-content: flex-start;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
 
         &:first-child {
             justify-content: flex-end;

package/styles/mixins/picker.less

@@ -4,7 +4,7 @@
 .picker(@itemSize) {
     :host {
         display: block;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
     }
 
     .t-row {

package/styles/mixins/picker.scss

@@ -4,7 +4,7 @@
 @mixin picker($itemSize) {
     :host {
         display: block;
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
     }
 
     .t-row {

package/styles/mixins/slider.less

@@ -15,9 +15,9 @@
     --t-offset: calc(@thumb / 2);
 
     display: flex;
-    font: var(--tui-font-text-s);
-    margin-inline-start: var(--t-offset);
-    margin-inline-end: var(--t-offset);
+    font: var(--tui-font-body-s);
+    color: var(--tui-text-secondary);
+    margin: 0.25rem var(--t-offset) 0;
 
     & > * {
         position: relative;
@@ -25,21 +25,15 @@
         text-align: center;
 
         &:first-child {
-            left: calc(-1 * var(--t-offset));
             inset-inline-start: calc(-1 * var(--t-offset));
             flex: 1;
             text-align: start;
         }
 
         &:last-child {
-            right: calc(-1 * var(--t-offset));
+            inset-inline-end: calc(-1 * var(--t-offset));
             flex: 1;
             text-align: end;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: calc(-1 * var(--t-offset));
-            }
         }
     }
 

package/styles/mixins/slider.scss

@@ -17,9 +17,9 @@ $track-inset: (
     --t-offset: calc($thumb / 2);
 
     display: flex;
-    font: var(--tui-font-text-s);
-    margin-inline-start: var(--t-offset);
-    margin-inline-end: var(--t-offset);
+    font: var(--tui-font-body-s);
+    color: var(--tui-text-secondary);
+    margin: 0.25rem var(--t-offset) 0;
 
     & > * {
         position: relative;
@@ -27,44 +27,46 @@ $track-inset: (
         text-align: center;
 
         &:first-child {
-            left: calc(-1 * var(--t-offset));
             inset-inline-start: calc(-1 * var(--t-offset));
             flex: 1;
             text-align: start;
         }
 
         &:last-child {
-            right: calc(-1 * var(--t-offset));
+            inset-inline-end: calc(-1 * var(--t-offset));
             flex: 1;
             text-align: end;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: calc(-1 * var(--t-offset));
-            }
         }
     }
 
-    /* TODO(v5): delete */
-    tui-input-slider + & {
-        margin-inline-start: calc(var(--tui-radius-m) / 2 + var(--t-offset));
+    tui-range + & {
+        --t-offset: $thumb;
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield + & {
-        --t-offset: calc(var(--tui-radius-m) / 2 + $thumb / 2);
+    tui-textfield[data-size='l'] + & {
+        --t-offset: calc(map-get($track-inset, 'l') + $thumb / 2);
     }
 
     /* TODO: add :has([tuiInputSlider]) */
-    tui-textfield[data-size='l'] + & {
-        --t-offset: calc(var(--tui-radius-l) / 2 + $thumb / 2);
+    tui-textfield[data-size='m'] + & {
+        --t-offset: calc(map-get($track-inset, 'm') + $thumb / 2);
     }
 
-    tui-range + & {
-        --t-offset: $thumb;
+    /* TODO: add :has([tuiInputSlider]) */
+    tui-textfield[data-size='s'] + & {
+        --t-offset: calc(map-get($track-inset, 's') + $thumb / 2);
+    }
+
+    tui-input-range[data-size='l'] + & {
+        --t-offset: calc(map-get($track-inset, 'l') + $thumb);
+    }
+
+    tui-input-range[data-size='m'] + & {
+        --t-offset: calc(map-get($track-inset, 'm') + $thumb);
     }
 
-    tui-input-range + & {
-        --t-offset: calc(map-get($track-inset, $input-size) + $thumb);
+    tui-input-range[data-size='s'] + & {
+        --t-offset: calc(map-get($track-inset, 's') + $thumb);
     }
 }

package/styles/theme/appearance/table.less

@@ -1,23 +1,19 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='table'] {
-    block-size: auto;
+    min-block-size: calc(100% + 1px);
     border-radius: 0 !important;
     background: transparent;
     color: var(--tui-text-primary);
     border: none;
     outline: none;
-    border-block-end: calc(var(--t-row-height) - var(--t-height)) solid transparent;
+    margin: -1px -1px 0;
+    overflow: hidden;
 
-    &:is(tui-textfield[multi]),
-    &:is(tui-input-card-group) {
-        min-block-size: 100%;
-        border-block-end: 0;
-    }
-
-    &:is(textarea) {
-        block-size: 100%;
-        border-block-end: 0;
+    &:not(tui-textfield[multi], tui-input-card-group) [tuiInput]:not(textarea) {
+        block-size: var(--t-height);
+        border-block-end: 100rem solid transparent;
+        box-sizing: content-box;
     }
 
     &::before,
@@ -39,8 +35,7 @@
     }
 
     .appearance-focus({
-        outline-offset: -1px;
-        outline: 0.125rem solid var(--tui-border-focus);
+        border-image: conic-gradient(var(--tui-border-focus) 0 0) 1 / 0.125rem / 0 0 1px;
     });
 
     .appearance-invalid({
@@ -67,8 +62,7 @@
 
         .appearance-focus({
             background-color: transparent;
-            outline-offset: 0;
-            outline: 0.0625rem solid var(--tui-status-negative);
+            border-image: conic-gradient(var(--tui-status-negative) 0 0) 1 / 1px / 0 0 1px;
         });
     });
 }

package/styles/theme/appearance/textfield.less

@@ -1,39 +1,32 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='textfield'] {
-    .transition(~'box-shadow, background-color, outline-color, border-color');
+    .transition(~'box-shadow, background-color, outline-color, border-color, color');
 
     --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
 
     background-color: var(--tui-background-base);
-    color: var(--tui-text-primary);
+    color: var(--tui-text-tertiary);
     box-shadow: var(--t-shadow);
     outline: 1px solid var(--tui-border-normal);
     outline-offset: -1px;
     border-width: 0;
 
-    // TODO: Remove tuiWrapper hack in v5
-    &:not([tuiWrapper])::before,
-    &:not([tuiWrapper])::after {
-        transition-property: color, transform;
-        color: var(--tui-text-tertiary);
+    &:is(input, textarea, select) {
+        color: var(--tui-text-primary) !important;
     }
 
-    .appearance-hover({
-        --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+    &::before,
+    &::after {
+        transition-property: transform;
+    }
 
-        &:not([tuiWrapper]):before,
-        &:not([tuiWrapper]):after {
+    &:not([data-mode~='readonly']) {
+        .appearance-hover({
+            --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
             color: var(--tui-text-secondary);
-        }
-    });
-
-    .appearance-active({
-        &:not([tuiWrapper]):before,
-        &:not([tuiWrapper]):after {
-            color: var(--tui-text-primary);
-        }
-    });
+        });
+    }
 
     .appearance-focus({
         box-shadow: none;
@@ -45,25 +38,35 @@
         box-shadow: none;
     });
 
-    &[data-mode~='invalid'][data-mode~='invalid'],
-    &:invalid:not([data-mode]),
-    &.tui-invalid:not([data-mode]) {
+    .appearance-invalid({
         outline-color: var(--tui-status-negative);
-    }
+    });
 
     &[data-mode~='readonly'],
-    input&:read-only:not([data-mode]) {
+    &[data-state='disabled'],
+    &:disabled,
+    &._disabled {
         background: transparent !important;
         box-shadow: none !important;
         outline-color: var(--tui-border-normal) !important;
     }
 
-    &[chrome-autofilled], /* Chrome on IOS */
-    &:-webkit-autofill {
+    [tuiInput][chrome-autofilled], /* Chrome on IOS */
+    [tuiInput]:-webkit-autofill,
+    &[tuiInput][chrome-autofilled], /* Chrome on IOS */
+    &[tuiInput]:-webkit-autofill {
         -webkit-text-fill-color: var(--tui-text-primary) !important;
         caret-color: var(--tui-text-primary) !important;
         box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
         transition: background-color 600000s 0s;
+        clip-path: inset(0.125rem round calc(var(--tui-radius-m) - 0.125rem));
+    }
+
+    &[data-size='l'] [tuiInput][chrome-autofilled], /* Chrome on IOS */
+    &[data-size='l'] [tuiInput]:-webkit-autofill,
+    &[data-size='l'][tuiInput][chrome-autofilled], /* Chrome on IOS */
+    &[data-size='l'][tuiInput]:-webkit-autofill {
+        clip-path: inset(0.125rem round calc(var(--tui-radius-l) - 0.125rem));
     }
 }
 

package/styles/theme/variables.less

@@ -1,27 +1,26 @@
 &:root,
 &:host {
     // Fonts
-    --tui-font-heading: 'Manrope', system-ui, sans-serif;
-    --tui-font-text: 'Manrope', system-ui, sans-serif;
+    --tui-font-family-text: 'Manrope', system-ui, sans-serif;
+    --tui-font-family-display: 'Manrope', system-ui, sans-serif;
     --tui-font-offset: ~'0rem';
     // Heading
-    --tui-font-heading-1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56) var(--tui-font-heading);
-    --tui-font-heading-2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-font-heading);
-    --tui-font-heading-3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-font-heading);
-    --tui-font-heading-4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-font-heading);
-    --tui-font-heading-5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-font-heading);
-    --tui-font-heading-6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-font-heading);
+    --tui-font-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56) var(--tui-font-family-display);
+    --tui-font-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-font-family-display);
+    --tui-font-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-font-family-display);
+    --tui-font-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-font-family-display);
+    --tui-font-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-font-family-display);
+    --tui-font-heading-h6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-font-family-display);
     // Body
-    --tui-font-text-xl: normal calc(var(--tui-font-offset) + 1.1875rem) / calc(28 / 19) var(--tui-font-text);
-    --tui-font-text-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-font-text);
-    --tui-font-text-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-font-text);
-    --tui-font-text-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(20 / 13) var(--tui-font-text);
-    --tui-font-text-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-text);
+    --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-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-family-text);
     // Reduced
-    --tui-font-text-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-font-text);
-    --tui-font-text-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-font-text);
-    --tui-font-text-ui-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(16 / 13) var(--tui-font-text);
-    --tui-font-text-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-text);
+    --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-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-family-text);
     // Radii
     --tui-radius-xs: 0.25rem;
     --tui-radius-s: 0.5rem;

package/styles/variables/media.less

@@ -1,26 +1,21 @@
-/*
-Every max-width of breakpoint is equal:
-next min-width - 60% from 1px (1/16 * 0.6 = 0.0375)
-*/
-
 @tui-media-retina: ~'(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
-@tui-media-retina-mobile: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 37.4625em), (min-resolution: 192dpi) and (max-width: 37.4625em)';
-@tui-media-retina-tablet: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 63.9625em), (min-resolution: 192dpi) and (max-width: 63.9625em)';
-@tui-media-retina-desktop: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 84.9625em), (min-resolution: 192dpi) and (max-width: 84.9625em)';
+@tui-media-retina-mobile: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 599.4px), (min-resolution: 192dpi) and (max-width: 599.4px)';
+@tui-media-retina-tablet: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023.4px), (min-resolution: 192dpi) and (max-width: 1023.4px)';
+@tui-media-retina-desktop: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 1359.4px), (min-resolution: 192dpi) and (max-width: 1359.4px)';
 
-@tui-mobile: ~'screen and (max-width: 47.9625em)';
-@tui-mobile-min: ~'screen and (min-width: 22.5em)';
-@tui-mobile-interval: ~'(min-width: 22.5em) and (max-width: 47.9625em)';
+@tui-mobile: ~'screen and (max-width: 767.4px)';
+@tui-mobile-min: ~'screen and (min-width: 360px)';
+@tui-mobile-interval: ~'(min-width: 360px) and (max-width: 767.4px)';
 
-@tui-tablet: ~'screen and (max-width: 63.9625em)';
-@tui-tablet-min: ~'screen and (min-width: 48em)';
-@tui-tablet-interval: ~'(min-width: 48em) and (max-width: 63.9625em)';
+@tui-tablet: ~'screen and (max-width: 1023.4px)';
+@tui-tablet-min: ~'screen and (min-width: 768px)';
+@tui-tablet-interval: ~'(min-width: 768px) and (max-width: 1023.4px)';
 
-@tui-desktop: ~'screen and (max-width: 79.9625em)';
-@tui-desktop-min: ~'screen and (min-width: 64em)';
-@tui-desktop-interval: ~'(min-width: 64em) and (max-width: 79.9625em)';
+@tui-desktop: ~'screen and (max-width: 1279.4px)';
+@tui-desktop-min: ~'screen and (min-width: 1024px)';
+@tui-desktop-interval: ~'(min-width: 1024px) and (max-width: 1279.4px)';
 
-@tui-desktop-lg-min: ~'screen and (min-width: 80em)';
+@tui-desktop-lg-min: ~'screen and (min-width: 1280px)';
 
 @tui-touch: ~'(hover: none) and (pointer: coarse)';
 @tui-stylus: ~'(hover: none) and (pointer: fine)';

package/styles/variables/media.scss

@@ -1,21 +1,21 @@
 $tui-media-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
-$tui-media-retina-mobile: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 37.4625em), (min-resolution: 192dpi) and (max-width: 37.4625em)';
-$tui-media-retina-tablet: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 63.9625em), (min-resolution: 192dpi) and (max-width: 63.9625em)';
-$tui-media-retina-desktop: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 84.9625em), (min-resolution: 192dpi) and (max-width: 84.9625em)';
+$tui-media-retina-mobile: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 599.4px), (min-resolution: 192dpi) and (max-width: 599.4px)';
+$tui-media-retina-tablet: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023.4px), (min-resolution: 192dpi) and (max-width: 1023.4px)';
+$tui-media-retina-desktop: '(-webkit-min-device-pixel-ratio: 2) and (max-width: 1359.4px), (min-resolution: 192dpi) and (max-width: 1359.4px)';
 
-$tui-mobile: 'screen and (max-width: 47.9625em)';
-$tui-mobile-min: 'screen and (min-width: 22.5em)';
-$tui-mobile-interval: '(min-width: 22.5em) and (max-width: 47.9625em)';
+$tui-mobile: 'screen and (max-width: 767.4px)';
+$tui-mobile-min: 'screen and (min-width: 360px)';
+$tui-mobile-interval: '(min-width: 360px) and (max-width: 767.4px)';
 
-$tui-tablet: 'screen and (max-width: 63.9625em)';
-$tui-tablet-min: 'screen and (min-width: 48em)';
-$tui-tablet-interval: '(min-width: 48em) and (max-width: 63.9625em)';
+$tui-tablet: 'screen and (max-width: 1023.4px)';
+$tui-tablet-min: 'screen and (min-width: 768px)';
+$tui-tablet-interval: '(min-width: 768px) and (max-width: 1023.4px)';
 
-$tui-desktop: 'screen and (max-width: 79.9625em)';
-$tui-desktop-min: 'screen and (min-width: 64em)';
-$tui-desktop-interval: '(min-width: 64em) and (max-width: 79.9625em)';
+$tui-desktop: 'screen and (max-width: 1279.4px)';
+$tui-desktop-min: 'screen and (min-width: 1024px)';
+$tui-desktop-interval: '(min-width: 1024px) and (max-width: 1279.4px)';
 
-$tui-desktop-lg-min: 'screen and (min-width: 80em)';
+$tui-desktop-lg-min: 'screen and (min-width: 1280px)';
 
 $tui-touch: '(hover: none) and (pointer: coarse)';
 $tui-stylus: '(hover: none) and (pointer: fine)';

package/tokens/breakpoint.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken, type Signal } from '@angular/core';
+import { type TuiMedia } from './media';
+export type TuiBreakpointMediaKey = keyof Omit<TuiMedia, 'tablet'>;
+export declare const TUI_BREAKPOINT: InjectionToken<Signal<"desktopLarge" | "desktopSmall" | "mobile">>;

package/tokens/index.d.ts

@@ -1,6 +1,7 @@
 export * from './animations-speed';
 export * from './assets-path';
 export * from './auxiliary';
+export * from './breakpoint';
 export * from './common-icons';
 export * from './dark-mode';
 export * from './date-format';

package/services/breakpoint.service.d.ts

@@ -1,16 +0,0 @@
-import { type TuiMedia } from '@taiga-ui/core/tokens';
-import { Observable } from 'rxjs';
-import * as i0 from "@angular/core";
-export type TuiBreakpointMediaKey = keyof Omit<TuiMedia, 'tablet'>;
-/**
- * Service to provide the current breakpoint based on Taiga UI's media queries
- */
-export declare class TuiBreakpointService extends Observable<TuiBreakpointMediaKey | null> {
-    private readonly media;
-    private readonly sorted;
-    private readonly invert;
-    private readonly stream$;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<TuiBreakpointService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<TuiBreakpointService>;
-}