@taiga-ui/styles 5.0.0-canary.bf29cbb → 5.0.0-canary.c4ce5ac

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
@@ -147,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,
@@ -158,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

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

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

package/components/compass.less

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

package/components/icon.less

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

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

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));
         }
     }
 
@@ -78,18 +78,18 @@
     }
 
     &::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,4 +1,4 @@
-@import '@taiga-ui/styles/utils.less';
+@import '../utils.less';
 
 tui-textfield:where(*&) {
     .scrollbar-hidden();

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/hitbox.less

@@ -1,4 +1,4 @@
-@import '../variables/media';
+@import '../variables/media.less';
 
 .tui-hitbox(@size) {
     @media @tui-mobile {

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.0.0-canary.bf29cbb",
+    "version": "5.0.0-canary.c4ce5ac",
     "description": "Framework-agnostic package with styles for Taiga UI",
     "license": "Apache-2.0",
     "exports": {
         "./*": "./*"
     },
     "peerDependencies": {
-        "@taiga-ui/design-tokens": "~0.285.0"
+        "@taiga-ui/design-tokens": "~0.286.0"
     }
 }