@taiga-ui/styles 5.0.0-canary.690ebfb → 5.0.0-canary.770d87d

package/components/appearance.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Appearance

package/components/avatar.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Avatar
@@ -45,6 +45,10 @@
     font-weight: bold;
     opacity: 0.999; // Kick in hardware rendering layer to avoid artifacts on the edges
 
+    .interactive({
+        cursor: pointer;
+    });
+
     &::before {
         inline-size: auto;
         block-size: auto;
@@ -143,7 +147,8 @@
 
     &._badge {
         mask: radial-gradient(
-            circle at calc(100% - var(--t-corner-offset)) calc(100% - var(--t-corner-offset)),
+            circle at ~'calc(max(var(--tui-inline), 0) * 100% - var(--tui-inline) * var(--t-corner-offset))'
+                calc(100% - var(--t-corner-offset)),
             black 0.23rem,
             transparent 0.25rem,
             transparent 0.375rem,
@@ -154,14 +159,14 @@
         &::after {
             content: '';
             position: absolute;
-            top: calc(100% - var(--t-corner-offset));
-            left: calc(100% - var(--t-corner-offset));
             display: block;
+            inset-block-start: calc(100% - var(--t-corner-offset));
+            inset-inline-start: calc(100% - var(--t-corner-offset));
             inline-size: 0.55rem;
             block-size: 0.55rem;
             border-radius: 100%;
             background: var(--t-badge);
-            transform: translate3d(-50%, -50%, 0);
+            transform: translate3d(calc(var(--tui-inline) * -50%), -50%, 0);
         }
     }
 

package/components/badge.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Badge
@@ -75,7 +75,6 @@
         --t-margin: -0.125rem;
 
         font: var(--tui-typography-ui-2xs);
-        line-height: 0.875rem;
 
         &[tuiStatus]::before {
             inline-size: 0.25rem;

package/components/block.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Block

package/components/button.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Button
@@ -120,6 +120,11 @@
             max-block-size: calc(var(--t-line-height) * 2);
         }
     }
+
+    &:is(a):not([href]) {
+        opacity: var(--tui-disabled-opacity);
+        pointer-events: none;
+    }
 }
 
 [tuiIconButton]:where(*&) {

package/components/checkbox.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Checkbox

package/components/chip.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Chip

package/components/comment.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Comment
@@ -16,12 +16,11 @@
 [tuiComment]:where(*&) {
     position: relative;
     display: inline-flex;
-    font: var(--tui-typography-body-m);
+    font: var(--tui-typography-ui-m);
     color: #fff;
     padding: 0.5rem 0.75rem;
     min-inline-size: 2.5rem;
     border-radius: 1rem;
-    line-height: 1.125rem;
     background: var(--tui-background-accent-2);
     align-items: center;
     justify-content: center;

package/components/compass.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Compass
@@ -30,8 +30,8 @@ tui-compass:where(*&) {
     &::before {
         content: '';
         position: absolute;
-        top: 0;
-        left: 0.125rem;
+        inset-block-start: 0;
+        inset-inline-start: 0.125rem;
         mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 8.99993C4 8 8 8 12 8.99993C9.91509 5.73239 8.5 3 6 0C3.5 3 2 5.5 0 8.99993Z"/></svg>');
         transform: rotate(var(--t-degrees)) translateY(-0.625rem) translateZ(-1rem);
         inline-size: 0.75rem;

package/components/icon.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Icon
@@ -31,7 +31,7 @@ tui-icon:where(*&) {
     vertical-align: middle;
     box-sizing: border-box;
     mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width)) 100%;
-    zoom: ~'calc(100% * (min(max(var(--tui-typography-offset) - 10px, 0px), 1px) / 0.8px))';
+    zoom: ~'calc(100% * (clamp(0px, var(--tui-font-offset) - 10px, 1px) / 0.8px))';
 
     @media @tui-mouse {
         &[data-appearance='icon']:hover {
@@ -39,6 +39,11 @@ tui-icon:where(*&) {
         }
     }
 
+    &[tuiIcons]::before,
+    &[tuiIcons]::after {
+        zoom: 1;
+    }
+
     &[data-icon-end] {
         &::before {
             mask-image:
@@ -71,11 +76,6 @@ tui-icon:where(*&) {
         }
     }
 
-    &[data-icon-start='img']::before,
-    &[data-icon-end='img']::after {
-        zoom: 1;
-    }
-
     &[data-icon-start='font']::before,
     &[data-icon-end='font']::after {
         zoom: 0.667;

package/components/icons.less

@@ -31,7 +31,7 @@
         flex-shrink: 0;
         box-sizing: content-box;
         background: currentColor;
-        zoom: ~'calc(100% * (min(max(var(--tui-typography-offset) - 10px, 0px), 1px) / 0.8px))';
+        zoom: ~'calc(100% * (clamp(0px, var(--tui-font-offset) - 10px, 1px) / 0.8px))';
     }
 
     &::before {
@@ -63,7 +63,7 @@
         display: grid;
         mask: none;
         background: none;
-        font: 1.5em / 1 var(--tui-typography-icon, inherit);
+        font: 1.5em / 1 var(--tui-font-icon, inherit);
         text-align: center;
         place-content: center;
         text-transform: none;

package/components/label.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Label

package/components/like.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Like

package/components/link.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Link

package/components/message.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Message

package/components/notification.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Notification
@@ -28,9 +28,8 @@
     display: flow-root;
     max-block-size: 100%;
     color: var(--tui-text-primary);
-    padding: 1rem;
+    padding: var(--tui-padding-l);
     font: var(--tui-typography-body-m);
-    line-height: 1.5rem;
     border-radius: var(--tui-radius-l);
     box-sizing: border-box;
     text-align: start;
@@ -70,9 +69,8 @@
     }
 
     &[data-size='s'] {
-        padding: 0.375rem 0.625rem;
+        padding: 0.375rem var(--tui-padding-s);
         font: var(--tui-typography-body-s);
-        line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
         &[data-icon-start] {
@@ -114,9 +112,8 @@
     }
 
     &[data-size='m'] {
-        padding: 0.75rem;
+        padding: var(--tui-padding-m);
         font: var(--tui-typography-body-s);
-        line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
         &[data-icon-start] {

package/components/pin.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Pin
@@ -16,7 +16,11 @@
 [tuiPin]:where(*&) {
     --t-size: 2rem;
 
-    .transition(~'width, height, border, margin');
+    @bubble-width: 1.875rem;
+    @bubble-shift: translate(calc(var(--tui-inline) * -@bubble-width), -@bubble-width);
+    @ground-shift: translate(calc(var(--tui-inline) * -50%), -50%);
+
+    .transition(~'inline-size, block-size, border, margin');
     .button-clear();
 
     position: relative;
@@ -35,7 +39,7 @@
     background: var(--tui-background-accent-2);
     box-shadow: 0 0 0 0.125rem var(--tui-background-elevation-2);
     border: 0 solid var(--tui-background-accent-2);
-    transform: translate(-50%, -50%);
+    transform: @ground-shift;
 
     .interactive({
         cursor: pointer;
@@ -64,7 +68,7 @@
     }
 
     > tui-icon {
-        .transition(~'width, height');
+        .transition(~'inline-size, block-size');
 
         font-size: 1.25rem;
         align-self: center;
@@ -87,12 +91,12 @@
         }
 
         &::before {
-            transform: scale(0.99) translate(-1.875rem, -1.875rem);
+            transform: scale(0.99) @bubble-shift;
             opacity: 1;
         }
 
         &::after {
-            top: 4.5rem;
+            inset-block-start: 4.5rem;
             opacity: 1;
         }
     }
@@ -115,12 +119,12 @@
         }
 
         &::before {
-            transform: scale(0.99) translate(-1.875rem, -1.875rem);
+            transform: scale(0.99) @bubble-shift;
             opacity: 1;
         }
 
         &::after {
-            top: 4.5rem;
+            inset-block-start: 4.5rem;
             opacity: 1;
         }
     }
@@ -130,35 +134,33 @@
 
         content: '';
         position: absolute;
-        top: 50%;
-        left: 50%;
-        right: -0.25rem;
-        bottom: -0.625rem;
+        inset-block: 50% -0.625rem;
+        inset-inline: 50% -0.25rem;
         box-sizing: border-box;
-        border-width: 2.2rem 2rem;
+        border-width: 2.2rem @bubble-width;
         border-style: solid;
         border-color: inherit;
         opacity: 0;
-        transform: scale(0.57) translate(-1.875rem, -1.875rem);
-        transform-origin: top left;
+        transform: scale(0.57) @bubble-shift;
+        transform-origin: top var(--tui-inline-start);
         pointer-events: none;
         mask: url('data:image/svg+xml,<svg width="60" height="66" viewBox="0 0 60 66" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z" /></svg>')
             no-repeat;
     }
 
     &::after {
-        .transition(~'top, opacity');
+        .transition(~'inset-block-start, opacity');
 
         content: '';
         position: absolute;
-        top: 50%;
-        left: 50%;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
         border: 0.1875rem solid currentColor;
         border-color: inherit;
         border-radius: 100%;
         box-sizing: border-box;
         box-shadow: inherit;
-        transform: translate(-50%, -50%);
+        transform: @ground-shift;
         opacity: 0;
     }
 }

package/components/progress-bar.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name ProgressBar

package/components/radio.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Radio

package/components/switch.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 /**
  * @name Switch
@@ -38,19 +38,19 @@
 
         &::before {
             inline-size: 1rem;
-            transform: translateX(-1rem);
+            transform: translateX(calc(var(--tui-inline) * -1rem));
             font-size: 0.75rem;
         }
 
         &::after {
             inline-size: 1rem;
-            box-shadow: -2.625rem 0 0 0.5rem var(--tui-background-base);
+            box-shadow: calc(var(--tui-inline) * -2.625rem) 0 0 0.5rem var(--tui-background-base);
             outline-width: 0.167rem;
             transform: scale(0.375);
         }
 
         &:checked::after {
-            transform: scale(0.375) translateX(2.625rem);
+            transform: scale(0.375) translateX(calc(var(--tui-inline) * 2.625rem));
         }
     }
 
@@ -60,7 +60,7 @@
         }
 
         &::after {
-            transform: scale(0.33333) translateX(4.5rem);
+            transform: scale(0.33333) translateX(calc(var(--tui-inline) * 4.5rem));
         }
     }
 
@@ -74,21 +74,22 @@
         block-size: 100%;
         inline-size: 1.5rem;
         transition-property: transform;
+        zoom: 1;
     }
 
     &::before {
-        left: 0.125rem;
+        inset-inline-start: 0.125rem;
         font-size: 1rem;
-        transform: translateX(-1.5rem);
+        transform: translateX(calc(var(--tui-inline) * -1.5rem));
     }
 
     &::after {
-        right: 0;
         display: block;
+        inset-inline-end: 0;
         border-radius: 100%;
         background: none;
         transform: scale(0.33333);
-        box-shadow: -4.5rem 0 0 0.75rem var(--tui-background-base);
+        box-shadow: calc(var(--tui-inline) * -4.5rem) 0 0 0.75rem var(--tui-background-base);
         outline: 0.375rem solid var(--tui-background-neutral-2-pressed);
     }
 

package/components/textfield.less

@@ -1,13 +1,14 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 tui-textfield:where(*&) {
     .scrollbar-hidden();
     .transition(color);
 
-    --t-height: var(--tui-height-l);
+    --t-height: calc(var(--tui-height-l) + 2.5 * var(--t-label) * var(--tui-font-offset));
     --t-padding: var(--tui-padding-l);
+    --t-label: 0;
     --t-label-y: -0.75rem;
-    --t-label-font: var(--tui-typography-body-s);
+    --t-label-font: var(--tui-typography-ui-s);
     --t-end: ~'0px';
     --t-start: ~'0px';
     --t-side: ~'0px';
@@ -22,7 +23,6 @@ tui-textfield:where(*&) {
     padding: 0 var(--t-padding);
     border-radius: var(--tui-radius-l);
     font: var(--tui-typography-ui-m);
-    line-height: 1.25rem;
     box-sizing: border-box;
     isolation: isolate;
 
@@ -101,7 +101,6 @@ tui-textfield:where(*&) {
 
         border-radius: var(--tui-radius-m);
         font: var(--tui-typography-ui-s);
-        line-height: 1rem;
 
         &[data-icon-start] {
             --t-start: 1.5rem;
@@ -132,15 +131,14 @@ tui-textfield:where(*&) {
     }
 
     &[data-size='m'] {
-        --t-height: var(--tui-height-m);
+        --t-height: calc(var(--tui-height-m) + 2.5 * var(--t-label) * var(--tui-font-offset));
         --t-padding: var(--tui-padding-m);
-        --t-label-font: var(--tui-typography-body-xs);
+        --t-label-font: var(--tui-typography-ui-xs);
         --t-label-y: -0.5625rem;
         --t-max: 0.125rem;
 
         border-radius: var(--tui-radius-m);
         font: var(--tui-typography-ui-s);
-        line-height: 1rem;
 
         &[data-icon-start] {
             --t-start: 2.125rem;
@@ -164,10 +162,6 @@ tui-textfield:where(*&) {
         }
     }
 
-    &[data-size='l'] {
-        --t-label: -0.7rem;
-    }
-
     &:is(._disabled, [data-state='disabled']) {
         pointer-events: none;
         opacity: var(--tui-disabled-opacity);
@@ -182,9 +176,12 @@ tui-textfield:where(*&) {
     }
 
     &._with-label {
+        --t-label: 1;
+
         & > .t-template,
         .t-filler,
         [tuiInput] {
+            inset-block-end: 0;
             padding-block-start: calc(var(--t-height) / 3);
             padding-block-end: 0;
         }
@@ -204,10 +201,9 @@ tui-textfield:where(*&) {
     .t-filler,
     [tuiInput] {
         position: absolute;
-        inset-block-start: 0;
         inset-inline: 0;
         inline-size: auto;
-        block-size: 100%;
+        block-size: var(--t-height);
         appearance: none;
         background: none;
         font: inherit;
@@ -253,8 +249,7 @@ tui-textfield:where(*&) {
         [tuiLabel],
         &:not(tui-textfield) ~ [tuiLabel] {
             font: var(--t-label-font);
-            line-height: var(--t-height);
-            transform: translateY(var(--t-label-y));
+            transform: translateY(calc(var(--t-label-y) - var(--tui-font-offset) / 2));
         }
     }
 
@@ -265,12 +260,18 @@ tui-textfield:where(*&) {
 
         position: relative;
         display: block;
+        max-inline-size: calc(100% - var(--t-start));
         flex: 1;
         align-self: flex-start;
-        font-size: inherit;
+        font: inherit;
         user-select: none;
-        line-height: var(--t-height);
+        padding: calc(var(--t-height) / 2 - 0.625em) 0;
+        line-height: 1.25 !important;
         transition-duration: inherit;
+
+        + .t-content {
+            margin-inline-start: 0;
+        }
     }
 
     [tuiLabel],
@@ -354,8 +355,7 @@ tui-textfield:where(*&) {
             [tuiLabel] {
                 color: var(--tui-text-primary) !important;
                 font: var(--t-label-font);
-                line-height: var(--t-height);
-                transform: translateY(var(--t-label-y));
+                transform: translateY(calc(var(--t-label-y) - var(--tui-font-offset) / 2));
             }
         });
     }

package/components/toast.less

@@ -1,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 [tuiToast]:where(*&) {
     .transition(transform);
@@ -20,13 +20,15 @@
     max-inline-size: ~'min(calc(100vw - 2rem), 25rem)';
     border: inherit;
     text-decoration: none;
+    white-space: pre-line;
+    text-align: start;
     overflow: hidden;
 
     .interactive({
         cursor: pointer;
     });
 
-    > *,
+    > *:not(tui-shrink-wrap),
     &::after,
     &::before {
         max-inline-size: 50%;

package/mixins/date-picker.less

@@ -92,7 +92,7 @@
             }
 
             &:not(:last-child)::before {
-                right: -1rem;
+                inset-inline-end: -1rem;
             }
 
             &::after {
@@ -109,7 +109,7 @@
             }
 
             &:not(:first-child)::before {
-                left: -1rem;
+                inset-inline-start: -1rem;
             }
 
             &::after {