@taiga-ui/core 5.0.0-canary.7f0a2ac → 5.0.0-canary.8b0b9ac

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "5.0.0-canary.7f0a2ac",
+  "version": "5.0.0-canary.8b0b9ac",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -38,6 +38,10 @@
       "types": "./directives/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-directives.mjs"
     },
+    "./pipes": {
+      "types": "./pipes/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-pipes.mjs"
+    },
     "./portals": {
       "types": "./portals/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-portals.mjs"
@@ -46,10 +50,6 @@
       "types": "./services/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-services.mjs"
     },
-    "./pipes": {
-      "types": "./pipes/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-pipes.mjs"
-    },
     "./tokens": {
       "types": "./tokens/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-tokens.mjs"
@@ -78,14 +78,14 @@
       "types": "./components/data-list/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-data-list.mjs"
     },
-    "./components/expand": {
-      "types": "./components/expand/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-components-expand.mjs"
-    },
     "./components/error": {
       "types": "./components/error/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-error.mjs"
     },
+    "./components/expand": {
+      "types": "./components/expand/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-components-expand.mjs"
+    },
     "./components/icon": {
       "types": "./components/icon/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-icon.mjs"
@@ -138,14 +138,14 @@
       "types": "./directives/button-x/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-directives-button-x.mjs"
     },
-    "./directives/group": {
-      "types": "./directives/group/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-directives-group.mjs"
-    },
     "./directives/date-format": {
       "types": "./directives/date-format/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-directives-date-format.mjs"
     },
+    "./directives/group": {
+      "types": "./directives/group/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-directives-group.mjs"
+    },
     "./directives/icons": {
       "types": "./directives/icons/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-directives-icons.mjs"
@@ -158,6 +158,10 @@
       "types": "./directives/number-format/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-directives-number-format.mjs"
     },
+    "./pipes/format-number": {
+      "types": "./pipes/format-number/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-pipes-format-number.mjs"
+    },
     "./portals/alert": {
       "types": "./portals/alert/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-portals-alert.mjs"
@@ -182,10 +186,6 @@
       "types": "./portals/popup/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-portals-popup.mjs"
     },
-    "./pipes/format-number": {
-      "types": "./pipes/format-number/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-pipes-format-number.mjs"
-    },
     "./utils/dom": {
       "types": "./utils/dom/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-utils-dom.mjs"

package/styles/components/button.less

@@ -125,6 +125,7 @@
 [tuiIconButton]:where(*&) {
     gap: 0;
     inline-size: var(--t-size);
+    min-inline-size: var(--t-size);
     font-size: 0 !important;
     padding: 0;
 

package/styles/components/icon.less

@@ -30,7 +30,7 @@ tui-icon:where(*&) {
     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

@@ -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/link.less

@@ -45,7 +45,7 @@
         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;
     }
 

package/styles/components/textfield.less

@@ -10,6 +10,7 @@ tui-textfield:where(*&) {
     --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:where(*&) {
     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:where(*&) {
     }
 
     &[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:where(*&) {
         --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:where(*&) {
         line-height: 1rem;
 
         &[data-icon-start] {
-            --t-start: 1.75rem;
+            --t-start: 1.875rem;
         }
 
         &[data-icon-end] {
@@ -142,15 +147,15 @@ tui-textfield:where(*&) {
         }
 
         &::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:where(*&) {
         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:where(*&) {
         &[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:where(*&) {
         display: flex;
         block-size: var(--t-height);
         align-items: center;
-        gap: inherit;
+        gap: 0.25rem;
         margin-inline-start: auto;
         isolation: isolate;
         border-radius: inherit;

package/styles/theme/appearance/floating.less

@@ -3,7 +3,7 @@
 [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 {
@@ -11,11 +11,11 @@
     }
 
     .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/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;