@taiga-ui/core 4.52.0-canary.d626d20 → 4.52.0-canary.e07790b

package/styles/components/button.less

@@ -52,7 +52,6 @@
 
         font: var(--tui-font-text-s);
 
-        tui-svg,
         tui-icon,
         &::before {
             font-size: 1rem;
@@ -68,7 +67,6 @@
 
         font: var(--tui-font-text-s);
 
-        tui-svg,
         tui-icon,
         &:not([tuiIconButton][data-appearance='icon']):not([tuiIconButton][data-appearance='link'])::before {
             font-size: 1rem;
@@ -140,7 +138,7 @@
         margin: 0;
     }
 
-    &&[style*='--t-icon-start:']::after {
+    &&[data-icon-start]::after {
         display: none;
     }
 }

package/styles/components/icon.less

@@ -9,18 +9,20 @@
  *
  * @vars
  * --t-icon — depending on the data-icon, it can serve as either a mask (`svg`),
-  a background (`image`), or content (`font`) for the icon.
+  a background (`img`), or content (`font`) for the icon.
  * --t-icon-bg — mask for the background
  *
  * @example
- * <tui-icon data-icon="svg" style="--t-icon: url('icon.svg')"></tui-icon>
+ * <tui-icon tuiIcons style="--t-icon: url('icon.svg')"></tui-icon>
  *
  * @see-also
  * Icons
  */
 tui-icon {
+    --tui-icon-size: 1em;
+
     position: relative;
-    display: inline-block;
+    display: inline-flex;
     inline-size: 1em;
     block-size: 1em;
     font-size: 1.5rem;
@@ -28,7 +30,7 @@ tui-icon {
     border: 0 solid transparent;
     vertical-align: middle;
     box-sizing: border-box;
-    mask: var(--t-icon-bg) no-repeat center/contain;
+    mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width, 0.125rem)) 100%;
 
     @media @tui-mouse {
         &[data-appearance='icon']:hover {
@@ -36,27 +38,35 @@ tui-icon {
         }
     }
 
-    &::after,
-    &[tuiIcons]::after {
-        .fullsize();
+    &[data-icon-end] {
+        &::before {
+            mask-image:
+                var(--t-icon-start),
+                radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
+            mask-composite: intersect;
+        }
 
-        content: '';
-        display: block;
-        mask: var(--t-icon) no-repeat center/contain;
-        background: currentColor;
-    }
+        &[data-icon-start='img'],
+        &[data-icon-start='font'] {
+            &::before {
+                mask: radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
+            }
+        }
 
-    &[data-icon='image']::after {
-        mask: none;
-        background: var(--t-icon) no-repeat center/contain;
+        &::after {
+            .fullsize();
+        }
     }
 
-    &[data-icon='font']::after {
-        content: var(--t-icon);
-        mask: none;
-        background: none;
-        font: 1em/1 var(--tui-font-icon, inherit);
-        text-align: center;
-        text-transform: none;
+    &[data-icon-start] {
+        &::before {
+            .fullsize();
+        }
+
+        &::after {
+            transform: translate(36%, 36%);
+
+            --tui-icon-size: 0.5715em;
+        }
     }
 }

package/styles/components/icons.less

@@ -7,12 +7,12 @@
  *
  * @vars
  * --t-icon-start — depending on the data-icon-start, it can serve as either a mask (`svg`),
-  a background (`image`), or content (`font`) for the ::before element
+  a background (`img`), or content (`font`) for the ::before element
  * --t-icon-end — depending on the data-icon-end, it can serve as either a mask (`svg`),
-  a background (`image`), or content (`font`) for the ::after element
+  a background (`img`), or content (`font`) for the ::after element
  *
  * @example
- * <button tuiIcons data-icon-start="svg" style="--t-icon-start: url('icon.svg')"></button>
+ * <button tuiIcons style="--t-icon-start: url('icon.svg')"></button>
  *
  * @see-also
  * Button, Icon, Link
@@ -27,30 +27,34 @@
         inline-size: 1em;
         block-size: 1em;
         line-height: 1em;
-        font-size: 1.5rem;
+        font-size: var(--tui-icon-size, 1.5rem);
         flex-shrink: 0;
         box-sizing: content-box;
         background: currentColor;
     }
 
     &::before {
-        display: var(--t-icon-start, none);
-        mask: var(--t-icon-start) no-repeat center/contain padding-box;
+        display: var(--t-icon-start);
+        mask:
+            var(--t-icon-start) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
+                ~'min(1em, 100%)',
+            100% padding-box;
     }
 
     &::after {
-        display: var(--t-icon-end, none);
-        mask: var(--t-icon-end) no-repeat center/contain padding-box;
+        display: var(--t-icon-end);
+        mask: var(--t-icon-end) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width, 0.125rem))
+            ~'min(1em, 100%)' padding-box;
     }
 
-    &[data-icon-start='image']::before {
+    &[data-icon-start='img']::before {
         mask: none;
-        background: var(--t-icon-start) no-repeat center/contain padding-box;
+        background: var(--t-icon-start) no-repeat center / 1em padding-box;
     }
 
-    &[data-icon-end='image']::after {
+    &[data-icon-end='img']::after {
         mask: none;
-        background: var(--t-icon-end) no-repeat center/contain padding-box;
+        background: var(--t-icon-end) no-repeat center / 1em padding-box;
     }
 
     &[data-icon-start='font']::before,

package/styles/components/link.less

@@ -14,9 +14,6 @@
  * Icons, Appearance, Button
  */
 [tuiLink] {
-    // TODO: Remove in v5
-    --tui-text-tertiary: var(--tui-text-secondary);
-
     .transition(~'color, text-decoration, opacity');
 
     padding: 0;
@@ -24,19 +21,15 @@
     border: none;
     cursor: pointer;
     font: inherit;
-    color: var(--tui-text-primary);
+    color: inherit;
+    border-radius: 0.125rem;
+    outline-width: 1px;
+    outline-offset: -1px;
     text-decoration: none dashed currentColor;
     text-underline-offset: 0.2em;
-    text-decoration-thickness: 0.7px;
+    text-decoration-thickness: 1px;
     text-decoration-color: color-mix(in lch, currentColor, transparent);
 
-    // TODO: Remove in v5
-    @media @tui-mouse {
-        &:hover {
-            --tui-text-secondary: var(--tui-text-primary);
-        }
-    }
-
     &::before {
         margin-inline-end: 0.25rem;
     }
@@ -53,18 +46,14 @@
         font-size: 0;
         line-height: 0;
         box-sizing: border-box;
+        mask-size: calc(100% + 10 * var(--tui-stroke-width, 0.125rem)) 100%;
+        transition: none;
     }
 
     &[tuiChevron]::after {
         display: inline-block;
     }
 
-    .appearance-focus({
-        outline: none;
-        background: var(--tui-service-selection-background);
-        background: color-mix(in lch, currentColor 12%, transparent);
-    });
-
     .appearance-hover({
         text-decoration-color: currentColor;
     });
@@ -73,13 +62,8 @@
         text-decoration-color: currentColor;
     });
 
-    @media @tui-mouse {
-        &[data-appearance='']:hover {
-            opacity: 0.7;
-        }
-    }
-
-    &[data-appearance='']:active {
-        opacity: 0.7;
+    &[data-appearance=''] {
+        text-decoration-line: underline;
+        text-decoration-style: solid;
     }
 }

package/styles/components/notification.less

@@ -42,11 +42,11 @@ tui-notification,
     --t-start: 0;
     --t-end: 0;
 
-    &[style*='--t-icon-start:'] {
+    &[data-icon-start] {
         --t-start: 2rem;
     }
 
-    &[style*='--t-icon-end:'] {
+    &[data-icon-end] {
         --t-end: 1.5rem;
     }
 
@@ -78,7 +78,7 @@ tui-notification,
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.5rem;
         }
 
@@ -133,7 +133,7 @@ tui-notification,
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.625rem;
         }
 

package/styles/components/textfield.less

@@ -6,8 +6,8 @@ tui-textfield {
 
     --t-height: var(--tui-height-l);
     --t-padding: var(--tui-padding-l);
-    --t-label: -0.7em;
-    --t-label-size: 0.83em;
+    --t-label-y: -0.75rem;
+    --t-label-font: var(--tui-font-text-s);
     --t-end: ~'0rem';
     --t-start: ~'0rem';
 
@@ -30,11 +30,11 @@ tui-textfield {
         color: var(--tui-text-tertiary);
     }
 
-    &[style*='--t-icon-start:'] {
+    &[data-icon-start] {
         --t-start: 2.25rem;
     }
 
-    &[style*='--t-icon-end:'] {
+    &[data-icon-end] {
         --t-end: 2.25rem;
     }
 
@@ -42,8 +42,7 @@ tui-textfield {
         position: relative;
         block-size: auto;
         align-self: stretch;
-        border-inline-start: var(--t-padding) solid transparent;
-        border-inline-end: var(--t-padding) solid transparent;
+        border-inline: var(--t-padding) solid transparent;
         margin: 0 calc(-1 * var(--t-padding));
     }
 
@@ -80,8 +79,7 @@ tui-textfield {
         font: inherit;
         resize: none;
         outline: none;
-        padding-block-start: 1.125rem;
-        padding-block-end: 1.125rem;
+        padding-block: 1.125rem;
         color: var(--tui-text-primary);
 
         &[inputmode='none'] {
@@ -98,31 +96,28 @@ tui-textfield {
         font: var(--tui-font-text-ui-s);
         line-height: 1rem;
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.25rem;
         }
 
-        &[style*='--t-icon-end:'] {
+        &[data-icon-end] {
             --t-end: 1.25rem;
         }
 
         &::before {
-            margin-inline-end: 0.5rem;
-            margin-inline-start: -0.125rem;
+            margin-inline: -0.125rem 0.5rem;
             font-size: 1rem;
         }
 
         &::after {
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
-            margin-inline-start: calc(0.625rem - var(--t-padding));
+            margin-inline: calc(0.625rem - var(--t-padding)) calc(-0.125rem - var(--t-padding));
             font-size: 1rem;
         }
 
         input,
         select,
         textarea {
-            padding-block-start: 0.5rem;
-            padding-block-end: 0.5rem;
+            padding-block: 0.5rem;
         }
 
         & > .t-content {
@@ -133,34 +128,33 @@ tui-textfield {
     &[data-size='m'] {
         --t-height: var(--tui-height-m);
         --t-padding: var(--tui-padding-m);
+        --t-label-font: var(--tui-font-text-xs);
+        --t-label-y: -0.5625rem;
 
         border-radius: var(--tui-radius-m);
         font: var(--tui-font-text-ui-s);
         line-height: 1rem;
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.75rem;
         }
 
-        &[style*='--t-icon-end:'] {
+        &[data-icon-end] {
             --t-end: 1.75rem;
         }
 
         &::before {
-            margin-inline-start: -0.125rem;
-            margin-inline-end: 0.125rem;
+            margin-inline: -0.125rem 0.125rem;
         }
 
         &::after {
-            margin-inline-start: calc(0.25rem - var(--t-padding));
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
+            margin-inline: calc(0.25rem - var(--t-padding)) calc(-0.125rem - var(--t-padding));
         }
 
         input,
         select,
         textarea {
-            padding-block-start: 0.875rem;
-            padding-block-end: 0.875rem;
+            padding-block: 0.875rem;
         }
 
         & > .t-content {
@@ -209,36 +203,12 @@ tui-textfield {
         opacity: var(--tui-disabled-opacity);
     }
 
-    &:has(label:not(:empty)) {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            padding-block-start: calc(var(--t-height) / 3);
-            padding-block-end: 0;
-        }
-    }
-
-    &:not([data-focus='true']):has(label:not(:empty)) {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            &::placeholder,
-            &._empty {
-                color: transparent;
-            }
-        }
-    }
-
-    // TODO: Fallback until Safari 15.4
     &._with-label {
         & > .t-template,
         input:not([type='range']),
         select:defined,
         textarea:defined {
-            padding-block-start: calc(var(--t-height) / 3);
-            padding-block-end: 0;
+            padding-block: calc(var(--t-height) / 3) 0;
         }
     }
 
@@ -266,8 +236,12 @@ tui-textfield {
         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) + var(--t-padding));
+        padding-inline: calc(var(--t-start, ~'0rem') + var(--t-padding))
+            calc(var(--t-end, ~'0rem') + var(--t-side) + var(--t-padding));
+
+        &:disabled {
+            animation: tuiPresent 1s infinite;
+        }
     }
 
     & > .t-template {
@@ -288,7 +262,6 @@ tui-textfield {
         pointer-events: auto;
         background: none;
 
-        // TODO: Remove :not when we drop old select tuiTextfield in v5
         &:not(select):read-only ~ .t-filler {
             display: none;
         }
@@ -307,8 +280,9 @@ tui-textfield {
         &:-webkit-autofill,
         &:not(._empty):not(:placeholder-shown) {
             & ~ label {
-                font-size: var(--t-label-size);
-                transform: translateY(var(--t-label));
+                font: var(--t-label-font);
+                line-height: var(--t-height);
+                transform: translateY(var(--t-label-y));
             }
 
             &:not(:disabled)[data-mode~='invalid'] ~ label,
@@ -330,19 +304,12 @@ tui-textfield {
 
                 & ~ label {
                     color: var(--tui-text-primary) !important;
-                    font-size: var(--t-label-size);
-                    transform: translateY(var(--t-label));
+                    font: var(--t-label-font);
+                    line-height: var(--t-height);
+                    transform: translateY(var(--t-label-y));
                 }
             });
         }
-
-        // @deprecated remove in v5
-        .ios-only({
-            &._ios-fix {
-                position: fixed;
-                left: 1000rem;
-            }
-        });
     }
 
     // Increasing specificity to override all other styles
@@ -420,7 +387,7 @@ tui-textfield {
     }
 
     & > .t-filler:defined {
-        pointer-events: none;
+        pointer-events: none !important;
         color: var(--tui-text-tertiary);
         opacity: 1;
     }

package/styles/mixins/appearance.less

@@ -3,7 +3,7 @@
 .appearance-hover(@content) {
     .interactive({
         @media @tui-mouse {
-            &:hover:not(:disabled):not([data-state]) {
+            &:hover:not([data-state]) {
                 @content();
             }
         }
@@ -12,19 +12,11 @@
     &[data-state='hover'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    @media @tui-mouse {
-        &[tuiWrapper]:hover:not(._no-hover),
-        &[tuiWrapper][data-state='hover'] {
-            @content();
-        }
-    }
 }
 
 .appearance-active(@content) {
     .interactive({
-        &:active:not(:disabled):not([data-state]) {
+        &:active:not([data-state]) {
             @content();
         }
     });
@@ -32,13 +24,6 @@
     &[data-state='active'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:active:not(._no-active),
-    &[tuiWrapper][data-state='active'],
-    &[tuiWrapper][data-state='active']:hover {
-        @content();
-    }
 }
 
 .appearance-disabled(@content) {
@@ -46,12 +31,6 @@
     &[data-state='disabled'] {
         @content();
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:disabled:not([data-state]),
-    &[tuiWrapper][data-state='disabled'] {
-        @content();
-    }
 }
 
 .appearance-focus(@content) {
@@ -62,10 +41,15 @@
     &[data-focus='true'] {
         @content();
     }
+}
 
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:not(._focused):has(:focus-visible),
-    &[tuiWrapper]._focused {
+.appearance-invalid(@content) {
+    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
+            [data-mode~='readonly'],
+            [data-mode~='valid'],
+            [data-state='disabled'],
+            :disabled
+        ) {
         @content();
     }
 }

package/styles/mixins/appearance.scss

@@ -13,14 +13,6 @@
     &[data-state='hover'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    @media ($tui-mouse) {
-        &[tuiWrapper]:hover:not(._no-hover),
-        &[tuiWrapper][data-state='hover'] {
-            @content;
-        }
-    }
 }
 
 @mixin appearance-active {
@@ -33,13 +25,6 @@
     &[data-state='active'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:active:not(._no-active),
-    &[tuiWrapper][data-state='active'],
-    &[tuiWrapper][data-state='active']:hover {
-        @content;
-    }
 }
 
 @mixin appearance-disabled {
@@ -47,12 +32,6 @@
     &[data-state='disabled'] {
         @content;
     }
-
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:disabled:not([data-state]),
-    &[tuiWrapper][data-state='disabled'] {
-        @content;
-    }
 }
 
 @mixin appearance-focus {
@@ -63,10 +42,15 @@
     &[data-focus='true'] {
         @content;
     }
+}
 
-    /* @deprecated TODO remove in v5 */
-    &[tuiWrapper]:not(._focused):has(:focus-visible),
-    &[tuiWrapper]._focused {
+@mixin appearance-invalid {
+    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
+            [data-mode~='readonly'],
+            [data-mode~='valid'],
+            [data-state='disabled'],
+            :disabled
+        ) {
         @content;
     }
 }

package/styles/mixins/mixins.less

@@ -1,11 +1,6 @@
 @import 'browsers.less';
 
 .interactive(@ruleset) {
-    // TODO remove after dropping Safari 13 support
-    &:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
-        @ruleset();
-    }
-
     &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
         @ruleset();
     }
@@ -75,9 +70,8 @@
     gap: calc(var(--t-gap, ~'0rem') - 2 * var(--t-margin, 0rem));
 
     > img,
-    > tui-svg,
     > tui-icon,
-    > tui-avatar,
+    > [tuiAvatar],
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],

package/styles/mixins/mixins.scss

@@ -1,11 +1,6 @@
 @import 'browsers.scss';
 
 @mixin interactive {
-    // TODO remove after dropping Safari 13 support
-    &:matches(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
-        @content;
-    }
-
     &:is(a, button, select, textarea, input, label, .tui-interactive):not(:disabled) {
         @content;
     }
@@ -72,9 +67,8 @@
     gap: calc(var(--t-gap) - 2 * var(--t-margin));
 
     > img,
-    > tui-svg,
     > tui-icon,
-    > tui-avatar,
+    > [tuiAvatar],
     > tui-badge,
     > [tuiBadge],
     > [tuiRadio],