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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "5.0.0-canary.b9c0378",
+  "version": "5.0.0-canary.ba4fa64",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -30,14 +30,14 @@
       "types": "./classes/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-classes.mjs"
     },
-    "./directives": {
-      "types": "./directives/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-directives.mjs"
-    },
     "./components": {
       "types": "./components/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components.mjs"
     },
+    "./directives": {
+      "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"
@@ -62,45 +62,17 @@
       "types": "./utils/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-utils.mjs"
     },
-    "./directives/appearance": {
-      "types": "./directives/appearance/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-directives-appearance.mjs"
-    },
-    "./directives/button-x": {
-      "types": "./directives/button-x/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-directives-button-x.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"
-    },
-    "./directives/items-handlers": {
-      "types": "./directives/items-handlers/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-directives-items-handlers.mjs"
-    },
-    "./directives/number-format": {
-      "types": "./directives/number-format/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-directives-number-format.mjs"
-    },
-    "./components/button": {
-      "types": "./components/button/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-components-button.mjs"
+    "./components/cell": {
+      "types": "./components/cell/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-components-cell.mjs"
     },
     "./components/calendar": {
       "types": "./components/calendar/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-calendar.mjs"
     },
-    "./components/cell": {
-      "types": "./components/cell/index.d.ts",
-      "default": "./fesm2022/taiga-ui-core-components-cell.mjs"
+    "./components/button": {
+      "types": "./components/button/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-components-button.mjs"
     },
     "./components/data-list": {
       "types": "./components/data-list/index.d.ts",
@@ -158,6 +130,34 @@
       "types": "./components/title/index.d.ts",
       "default": "./fesm2022/taiga-ui-core-components-title.mjs"
     },
+    "./directives/appearance": {
+      "types": "./directives/appearance/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-directives-appearance.mjs"
+    },
+    "./directives/button-x": {
+      "types": "./directives/button-x/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-directives-button-x.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"
+    },
+    "./directives/items-handlers": {
+      "types": "./directives/items-handlers/index.d.ts",
+      "default": "./fesm2022/taiga-ui-core-directives-items-handlers.mjs"
+    },
+    "./directives/number-format": {
+      "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"
@@ -208,9 +208,9 @@
     "@ng-web-apis/common": "^5.0.3",
     "@ng-web-apis/mutation-observer": "^5.0.3",
     "@ng-web-apis/platform": "^5.0.3",
-    "@taiga-ui/cdk": "^5.0.0-rc.1",
+    "@taiga-ui/cdk": "^5.0.0-rc.2",
     "@taiga-ui/event-plugins": "^5.0.0",
-    "@taiga-ui/i18n": "^5.0.0-rc.1",
+    "@taiga-ui/i18n": "^5.0.0-rc.2",
     "@taiga-ui/polymorpheus": "^5.0.0",
     "rxjs": ">=7.0.0"
   },

package/styles/components/appearance.less

@@ -19,7 +19,7 @@
  * @see-also
  * Button
  */
-[tuiAppearance] {
+[tuiAppearance]:where(*&) {
     .transition(all);
 
     position: relative;

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,7 +122,7 @@
     }
 }
 
-[tuiIconButton] {
+[tuiIconButton]:where(*&) {
     gap: 0;
     inline-size: var(--t-size);
     font-size: 0 !important;

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;

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;
 

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;
@@ -51,6 +51,7 @@
 
     &[tuiChevron]::after {
         display: inline-block;
+        vertical-align: initial;
     }
 
     .appearance-hover({

package/styles/components/notification.less

@@ -21,7 +21,7 @@
  * @see-also
  * Icons, Appearance
  */
-[tuiNotification] {
+[tuiNotification]:where(*&) {
     .button-clear();
 
     position: relative;

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] {