@taiga-ui/kit 4.4.0 → 4.4.1-canary.8f6706b

package/styles/components/badge.less

@@ -29,14 +29,14 @@ tui-badge,
     background: #959595;
     color: var(--tui-background-base);
     padding: var(--t-padding);
-    height: var(--t-size);
-    min-width: var(--t-size);
-    width: fit-content;
+    block-size: var(--t-size);
+    min-inline-size: var(--t-size);
+    inline-size: fit-content;
     font: var(--tui-font-text-s);
 
     &[tuiStatus]::before {
-        width: 0.375rem;
-        height: 0.375rem;
+        inline-size: 0.375rem;
+        block-size: 0.375rem;
         margin-inline-end: -0.25rem;
     }
 
@@ -83,8 +83,8 @@ tui-badge,
         --t-margin: -0.125rem;
 
         &[tuiStatus]::before {
-            width: 0.25rem;
-            height: 0.25rem;
+            inline-size: 0.25rem;
+            block-size: 0.25rem;
             margin-inline-end: -0.125rem;
         }
     }
@@ -104,8 +104,8 @@ tui-badge,
         font: var(--tui-font-text-m);
 
         &[tuiStatus]::before {
-            width: 0.5rem;
-            height: 0.5rem;
+            inline-size: 0.5rem;
+            block-size: 0.5rem;
             margin-inline-end: -0.125rem;
         }
     }
@@ -121,15 +121,15 @@ tui-badge,
 
 img[tuiBadge] {
     padding: 0;
-    width: var(--t-size);
+    inline-size: var(--t-size);
 }
 
 tui-icon[tuiBadge] {
     --t-margin: 0 !important;
 
     mask: none;
-    height: var(--t-size);
-    width: var(--t-size);
+    block-size: var(--t-size);
+    inline-size: var(--t-size);
 
     &[data-size='s']::after {
         mask-size: 0.625rem;

package/styles/components/block.less

@@ -28,7 +28,7 @@
     gap: 0.75rem;
     color: var(--tui-text-primary);
     border-radius: var(--t-radius);
-    min-height: var(--t-height);
+    min-block-size: var(--t-height);
     margin: 0;
     box-sizing: border-box;
     cursor: pointer;
@@ -90,7 +90,7 @@
     input[tuiBlock] {
         .fullsize();
 
-        min-height: 0;
+        min-block-size: 0;
         pointer-events: none;
         border-radius: inherit;
     }

package/styles/components/checkbox.less

@@ -24,8 +24,8 @@
     --t-size: 1.5rem;
     --t-radius: var(--tui-radius-s);
 
-    width: var(--t-size);
-    height: var(--t-size);
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
     border-radius: var(--t-radius);
     cursor: pointer;
     margin: 0;

package/styles/components/chip.less

@@ -29,8 +29,8 @@ tui-chip,
     font: var(--tui-font-text-s);
     border-radius: var(--tui-radius-m);
     padding: var(--t-padding);
-    height: var(--t-size);
-    width: fit-content;
+    block-size: var(--t-size);
+    inline-size: fit-content;
 
     .interactive({
         cursor: pointer;
@@ -87,7 +87,7 @@ tui-chip,
 
     & > img,
     tui-avatar {
-        width: 1.5rem;
+        inline-size: 1.5rem;
         margin-inline-start: -0.375rem;
     }
 

package/styles/components/comment.less

@@ -30,8 +30,8 @@
         position: absolute;
         bottom: 100%;
         left: 50%;
-        width: 1.5625rem;
-        height: 0.5625rem;
+        inline-size: 1.5625rem;
+        block-size: 0.5625rem;
         background: inherit;
         transform: translate(-50%);
         mask: url("data:image/svg+xml,%3Csvg width='25' height='9' viewBox='0 0 25 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.23309 6.67813L7.56191 3.83178C9.4546 1.5185 10.4009 0.361853 11.5998 0.10488C12.0834 0.00123882 12.5834 0.00123882 13.0669 0.10488C14.2658 0.361853 15.2121 1.5185 17.1048 3.83178L19.4337 6.67813C20.636 8.14771 22.4346 9 24.3334 9H0.333374C2.23217 9 4.0307 8.14772 5.23309 6.67813Z' fill='black'/%3E%3C/svg%3E%0A")

package/styles/components/compass.less

@@ -21,8 +21,8 @@ tui-compass {
     display: inline-block;
     color: var(--tui-background-accent-1);
     border-radius: 50%;
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
     border: 0.1875rem solid var(--tui-background-base);
     box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.3);
     transform-style: preserve-3d; // z-index doesn't work on pseudo-element
@@ -34,8 +34,8 @@ tui-compass {
         left: 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);
-        width: 0.75rem;
-        height: 1rem;
+        inline-size: 0.75rem;
+        block-size: 1rem;
         background: currentColor;
     }
 

package/styles/components/pin.less

@@ -22,8 +22,8 @@ tui-pin,
 
     position: relative;
     display: flex;
-    width: var(--t-size);
-    height: var(--t-size);
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
     align-items: stretch;
     flex-direction: column;
     justify-content: center;
@@ -58,7 +58,7 @@ tui-pin,
     }
 
     > img {
-        max-height: 100%;
+        max-block-size: 100%;
         box-sizing: border-box;
         border-radius: 100%;
         background: var(--tui-background-base);
@@ -68,8 +68,8 @@ tui-pin,
     > tui-svg {
         .transition(~'width, height');
 
-        width: 1.25rem;
-        height: 1.25rem;
+        inline-size: 1.25rem;
+        block-size: 1.25rem;
         align-self: center;
     }
 
@@ -87,8 +87,8 @@ tui-pin,
 
         > tui-icon,
         > tui-svg {
-            width: 2.125rem;
-            height: 2.125rem;
+            inline-size: 2.125rem;
+            block-size: 2.125rem;
         }
 
         &::before {
@@ -117,8 +117,8 @@ tui-pin,
 
         > tui-icon,
         > tui-svg {
-            width: 2.125rem;
-            height: 2.125rem;
+            inline-size: 2.125rem;
+            block-size: 2.125rem;
         }
 
         &::before {

package/styles/components/progress-bar.less

@@ -59,8 +59,8 @@
     --t-height: 0.75rem;
 
     display: block;
-    width: 100%;
-    height: var(--t-height);
+    inline-size: 100%;
+    block-size: var(--t-height);
     color: var(--tui-background-accent-1);
     background: @track-color;
     clip-path: inset(0 0.5px round var(--tui-radius-m)); // 0.5px is a hack to prevent jagged edges on low dpi screens

package/styles/components/radio.less

@@ -21,8 +21,8 @@
 
     .transition(~'background, box-shadow');
 
-    width: var(--t-size);
-    height: var(--t-size);
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
     cursor: pointer;
     margin: 0;
     flex-shrink: 0;

package/styles/components/status.less

@@ -22,8 +22,8 @@
     &::before {
         content: '';
         display: var(--t-status, none);
-        width: 0.5rem;
-        height: 0.5rem;
+        inline-size: 0.5rem;
+        block-size: 0.5rem;
         border-radius: 100%;
         background: var(--t-status);
     }

package/styles/components/switch.less

@@ -22,8 +22,8 @@
 [tuiSwitch] {
     .transition(~'background, box-shadow');
 
-    width: 3rem;
-    height: 1.5rem;
+    inline-size: 3rem;
+    block-size: 1.5rem;
     border-radius: 2rem;
     overflow: hidden;
     cursor: pointer;
@@ -32,17 +32,17 @@
     color: #fff !important;
 
     &[data-size='s'] {
-        height: 1rem;
-        width: 2rem;
+        block-size: 1rem;
+        inline-size: 2rem;
 
         &::before {
-            width: 1rem;
+            inline-size: 1rem;
             transform: translateX(-1rem);
             mask-size: 0.75rem;
         }
 
         &::after {
-            width: 1rem;
+            inline-size: 1rem;
             box-shadow: -2.625rem 0 0 0.5rem currentColor;
             outline-width: 0.167rem;
             transform: scale(0.375);
@@ -73,8 +73,8 @@
 
         content: '';
         position: absolute;
-        height: 100%;
-        width: 1.5rem;
+        block-size: 100%;
+        inline-size: 1.5rem;
     }
 
     &::before {