@taiga-ui/core 4.11.0 → 4.13.0

package/styles/mixins/appearance.less

@@ -1,44 +1,71 @@
 @import 'mixins.less';
 
-.appearance-hover(@ruleset) {
+.appearance-hover(@content) {
     .interactive({
         @media (hover: hover) {
             &:hover:not(:disabled):not([data-state]) {
-                @ruleset();
+                @content();
             }
         }
     });
 
     &[data-state='hover'] {
-        @ruleset();
+        @content();
+    }
+
+    /* @deprecated TODO remove in v5 */
+    @media (hover: hover) {
+        &[tuiWrapper]:hover:not(._no-hover),
+        &[tuiWrapper][data-state='hover'] {
+            @content();
+        }
     }
 }
 
-.appearance-active(@ruleset) {
+.appearance-active(@content) {
     .interactive({
         &:active:not(:disabled):not([data-state]) {
-            @ruleset();
+            @content();
         }
     });
 
     &[data-state='active'] {
-        @ruleset();
+        @content();
+    }
+
+    /* @deprecated TODO remove in v5 */
+    &[tuiWrapper]:active:not(._no-active),
+    &[tuiWrapper][data-state='active'],
+    &[tuiWrapper][data-state='active']:hover {
+        @content();
     }
 }
 
-.appearance-disabled(@ruleset) {
+.appearance-disabled(@content) {
     &:disabled:not([data-state]),
     &[data-state='disabled'] {
-        @ruleset();
+        @content();
+    }
+
+    /* @deprecated TODO remove in v5 */
+    &[tuiWrapper]:disabled:not([data-state]),
+    &[tuiWrapper][data-state='disabled'] {
+        @content();
     }
 }
 
-.appearance-focus(@ruleset) {
+.appearance-focus(@content) {
     &:focus-visible:not([data-focus='false']) {
-        @ruleset();
+        @content();
     }
 
     &[data-focus='true'] {
-        @ruleset();
+        @content();
+    }
+
+    /* @deprecated TODO remove in v5 */
+    &[tuiWrapper]:not(._focused):has(:focus-visible),
+    &[tuiWrapper]._focused {
+        @content();
     }
 }

package/styles/mixins/appearance.scss

@@ -12,6 +12,14 @@
     &[data-state='hover'] {
         @content;
     }
+
+    /* @deprecated TODO remove in v5 */
+    @media (hover: hover) {
+        &[tuiWrapper]:hover:not(._no-hover),
+        &[tuiWrapper][data-state='hover'] {
+            @content;
+        }
+    }
 }
 
 @mixin appearance-active {
@@ -24,6 +32,13 @@
     &[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 {
@@ -31,6 +46,12 @@
     &[data-state='disabled'] {
         @content;
     }
+
+    /* @deprecated TODO remove in v5 */
+    &[tuiWrapper]:disabled:not([data-state]),
+    &[tuiWrapper][data-state='disabled'] {
+        @content;
+    }
 }
 
 @mixin appearance-focus {
@@ -41,4 +62,10 @@
     &[data-focus='true'] {
         @content;
     }
+
+    /* @deprecated TODO remove in v5 */
+    &[tuiWrapper]:not(._focused):has(:focus-visible),
+    &[tuiWrapper]._focused {
+        @content;
+    }
 }

package/styles/mixins/mixins.less

@@ -132,9 +132,11 @@
 
 // prevent scrolling to focused element on IOS
 .tui-prevent-ios-scroll() {
-    &:focus {
-        animation: tuiPreventIOSScroll 0.001s;
-    }
+    .ios-only({
+        &:focus {
+            animation: tuiPreventIOSScroll 0.001s;
+        }
+    });
 
     @keyframes tuiPreventIOSScroll {
         0% {

package/styles/mixins/wrapper.less

@@ -43,12 +43,14 @@
 }
 
 .wrapper-focus(@ruleset) {
-    // TODO: Join rules together once all browsers support focus-visible
-    // Specificity artificially increased to match `:hover:not()` level
     &:focus-visible:focus-visible {
         @ruleset();
     }
 
+    &:has(:focus-visible) {
+        @ruleset();
+    }
+
     &._focused._focused {
         @ruleset();
     }

package/styles/theme/appearance/action.less

@@ -0,0 +1,48 @@
+/* TODO @deprecated remove in v5 */
+[tuiAppearance][data-appearance='link'] {
+    color: var(--tui-text-action);
+
+    .appearance-hover({
+        color: var(--tui-text-action-hover);
+    });
+
+    .appearance-active({
+        color: var(--tui-text-action-hover);
+    });
+}
+
+[tuiAppearance][data-appearance='action'] {
+    color: var(--tui-text-action);
+
+    .appearance-hover({
+        color: var(--tui-text-action-hover);
+    });
+
+    .appearance-active({
+        color: var(--tui-text-action-hover);
+    });
+}
+
+[tuiAppearance][data-appearance='action-destructive'] {
+    color: var(--tui-text-negative);
+
+    .appearance-hover({
+        color: var(--tui-text-negative-hover);
+    });
+
+    .appearance-active({
+        color: var(--tui-text-negative-hover);
+    });
+}
+
+[tuiAppearance][data-appearance='action-grayscale'] {
+    color: var(--tui-text-secondary);
+
+    .appearance-hover({
+        color: var(--tui-text-primary);
+    });
+
+    .appearance-active({
+        color: var(--tui-text-primary);
+    });
+}

package/styles/theme/appearance/flat.less

@@ -0,0 +1,23 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='flat'],
+[tuiAppearance][data-appearance='flat-destructive'],
+[tuiAppearance][data-appearance='flat-grayscale'] {
+    color: var(--tui-text-action);
+
+    .appearance-hover({
+        background: var(--tui-background-neutral-1-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-background-neutral-1-pressed);
+    });
+}
+
+[tuiAppearance][data-appearance='flat-destructive'] {
+    color: var(--tui-text-negative);
+}
+
+[tuiAppearance][data-appearance='flat-grayscale'] {
+    color: var(--tui-text-primary);
+}

package/styles/theme/appearance/floating.less

@@ -1,8 +1,8 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='floating'] {
-    background: #fff;
-    color: rgba(0, 0, 0, 0.8);
+    background: var(--tui-background-elevation-2);
+    color: var(--tui-text-primary);
     box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
 
     .appearance-hover({
@@ -10,7 +10,7 @@
     });
 
     .appearance-active({
-        background: #f6f7f8;
+        background: var(--tui-background-base-alt);
         box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
     });
 }

package/styles/theme/appearance/opposite.less

@@ -1,7 +1,8 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
+/* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: rgba(255, 255, 255, 0.64);
+    --tui-border-focus: #979797;
 
     background: var(--tui-background-accent-opposite);
     color: var(--tui-background-base);
@@ -14,8 +15,3 @@
         background: var(--tui-background-accent-opposite-pressed);
     });
 }
-
-[tuiTheme='dark'] [tuiAppearance][data-appearance='opposite'],
-[tuiTheme='dark'][tuiAppearance][data-appearance='opposite'] {
-    --tui-border-focus: rgba(51, 51, 51, 0.48);
-}

package/styles/theme/appearance/outline.less

@@ -1,6 +1,9 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='outline'],
+[tuiAppearance][data-appearance='outline-destructive'],
+[tuiAppearance][data-appearance='outline-grayscale'],
+/* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='whiteblock'] {
     --t-bs: var(--tui-border-normal);
 
@@ -44,6 +47,41 @@
     });
 }
 
+[tuiAppearance][data-appearance='outline-grayscale'],
+/* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='whiteblock'] {
     color: var(--tui-text-primary);
 }
+
+[tuiAppearance][data-appearance='outline-destructive'] {
+    color: var(--tui-text-negative);
+}
+
+[tuiAppearance][data-appearance='icon'],
+[tuiAppearance][data-appearance='outline-grayscale'],
+[tuiAppearance][data-appearance='floating'],
+/* TODO @deprecated remove in v5 */
+[tuiAppearance][data-appearance='whiteblock'] {
+    color: var(--tui-text-primary);
+
+    &::before,
+    &::after {
+        .transition(color);
+
+        color: var(--tui-text-tertiary);
+    }
+
+    .appearance-hover({
+        &:before,
+        &:after {
+            color: var(--tui-text-secondary);
+        }
+    });
+
+    .appearance-active({
+        &:before,
+        &:after {
+            color: var(--tui-text-primary);
+        }
+    });
+}

package/styles/theme/appearance/primary.less

@@ -19,3 +19,33 @@
         --t-bg: var(--tui-background-accent-1-pressed);
     });
 }
+
+[tuiAppearance][data-appearance='primary-destructive'] {
+    .transition(filter);
+
+    color: #fff;
+    background: var(--tui-status-negative);
+
+    .appearance-hover({
+        filter: saturate(1) brightness(1.3);
+    });
+
+    .appearance-active({
+        filter: saturate(0.8) brightness(1);
+    });
+}
+
+[tuiAppearance][data-appearance='primary-grayscale'] {
+    --tui-border-focus: #979797;
+
+    background: var(--tui-background-accent-opposite);
+    color: var(--tui-background-base);
+
+    .appearance-hover({
+        background: var(--tui-background-accent-opposite-hover);
+    });
+
+    .appearance-active({
+        background: var(--tui-background-accent-opposite-pressed);
+    });
+}

package/styles/theme/appearance/secondary.less

@@ -1,7 +1,9 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 [tuiAppearance][data-appearance='secondary'],
-[tuiAppearance][data-appearance='flat'],
+[tuiAppearance][data-appearance='secondary-destructive'],
+[tuiAppearance][data-appearance='secondary-grayscale'],
+/* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='destructive'] {
     background: var(--tui-background-neutral-1);
     color: var(--tui-text-action);
@@ -62,29 +64,16 @@
     }
 }
 
-[tuiAppearance][data-appearance='flat'],
-[tuiAppearance][data-appearance='flat']:invalid:not([data-mode]),
-[tuiAppearance][data-appearance='flat'][data-mode~='invalid'] {
-    background: transparent;
-}
-
-[tuiAppearance][data-appearance='flat']:checked:not([data-mode]),
-[tuiAppearance][data-appearance='flat'][data-mode~='checked'] {
-    background: var(--tui-background-neutral-1);
-
-    .appearance-hover({
-        background: var(--tui-background-neutral-1-hover);
-    });
-
-    .appearance-active({
-        background: var(--tui-background-neutral-1-pressed);
-    });
-}
-
+[tuiAppearance][data-appearance='secondary-destructive'],
+/* TODO @deprecated remove in v5 */
 [tuiAppearance][data-appearance='destructive'] {
     color: var(--tui-text-negative);
 }
 
+[tuiAppearance][data-appearance='secondary-grayscale'] {
+    color: var(--tui-text-primary);
+}
+
 // Overriding to darker colors for small items
 input[type='checkbox'][data-appearance='secondary'],
 input[type='radio'][data-appearance='secondary'] {

package/styles/theme/appearance/status.less

@@ -1,7 +1,9 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
-[tuiAppearance][data-appearance='error'],
-[tuiAppearance][data-appearance='success'],
+[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
+[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
+[tuiAppearance][data-appearance='negative'],
+[tuiAppearance][data-appearance='positive'],
 [tuiAppearance][data-appearance='warning'],
 [tuiAppearance][data-appearance='info'],
 [tuiAppearance][data-appearance='neutral'] {
@@ -13,7 +15,8 @@
     }
 }
 
-[tuiAppearance][data-appearance='error'] {
+[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
+[tuiAppearance][data-appearance='negative'] {
     --t-bg: var(--tui-status-negative-pale);
 
     &::before,
@@ -35,7 +38,8 @@
     }
 }
 
-[tuiAppearance][data-appearance='success'] {
+[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
+[tuiAppearance][data-appearance='positive'] {
     --t-bg: var(--tui-status-positive-pale);
 
     &::before,

package/styles/theme/appearance.less

@@ -1,8 +1,8 @@
 @import 'appearance/accent.less';
+@import 'appearance/action.less';
+@import 'appearance/flat.less';
 @import 'appearance/floating.less';
 @import 'appearance/glass.less';
-@import 'appearance/icon.less';
-@import 'appearance/link.less';
 @import 'appearance/opposite.less';
 @import 'appearance/outline.less';
 @import 'appearance/primary.less';

package/styles/theme/wrapper.less

@@ -14,36 +14,10 @@
     appearance: none;
     border-radius: inherit;
 
-    &::after {
-        .transition(~'box-shadow, color');
-        .fullsize(absolute, inset);
-
-        content: '';
-        border-radius: inherit;
-        border: 1px solid currentColor;
-        pointer-events: none;
-        color: transparent;
-    }
-
-    .wrapper-focus({
-        &:after {
-            border-width: 2px;
-            color: var(--tui-border-focus);
-        }
-    });
-
     .wrapper-disabled({
         pointer-events: none;
         opacity: var(--tui-disabled-opacity);
     });
-
-    // Temporary hide focus in Safari until we figure out a better approach
-    .safari-only({
-        :focus-visible &,
-        &:focus-visible {
-            --tui-border-focus: transparent !important;
-        }
-    });
 }
 
 [tuiWrapper][data-appearance='textfield'] {
@@ -51,11 +25,17 @@
 
     background: var(--tui-background-base);
     color: var(--tui-text-primary);
+    outline: none !important;
     box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
 
     &::after {
         .transition(color);
+        .fullsize(absolute, inset);
 
+        content: '';
+        border-radius: inherit;
+        border: 1px solid currentColor;
+        pointer-events: none;
         color: var(--tui-border-normal);
     }
 
@@ -67,7 +47,8 @@
         box-shadow: none;
 
         &:after {
-            --tui-border-focus: var(--tui-background-accent-1);
+            border-width: 2px;
+            color: var(--tui-background-accent-1);
         }
     });
 
@@ -87,7 +68,6 @@
     .wrapper-invalid({
         &:after {
             color: var(--tui-text-negative);
-            --tui-border-focus: var(--tui-status-negative);
         }
     });
 }
@@ -110,10 +90,12 @@
     border-radius: 0;
     background: transparent;
     color: var(--tui-text-primary);
+    outline: none !important;
 
     /* stylelint-disable meowtec/no-px */
     &::before,
     &[data-appearance='table']::after {
+        content: '';
         position: fixed;
         top: -0.03125rem;
         left: -1px;
@@ -125,7 +107,6 @@
     &::before {
         .transition(background);
 
-        content: '';
         z-index: -1;
         background-repeat: no-repeat;
         background-position: top right;
@@ -133,7 +114,9 @@
     }
 
     &[data-appearance='table']::after {
-        border-width: 1px;
+        border: 1px solid currentColor;
+        border-radius: inherit;
+        pointer-events: none;
         color: var(--tui-border-normal);
     }
 
@@ -194,40 +177,18 @@ table [tuiWrapper][data-appearance='table'] {
 }
 
 [tuiWrapper][data-appearance='icon'] {
-    .transition(opacity);
-
-    color: var(--tui-text-primary);
-    opacity: 0.5;
+    color: var(--tui-text-tertiary);
 
     [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) {
-        opacity: 0.65;
+        color: var(--tui-text-secondary);
     }
 
     .wrapper-hover({
-        opacity: 0.65;
+        color: var(--tui-text-secondary);
     });
 
     .wrapper-active({
-        opacity: 1;
-    });
-
-    .wrapper-disabled({
-        opacity: calc(0.5 * var(--tui-disabled-opacity));
-    });
-}
-
-[tuiTheme='dark'] [tuiWrapper][data-appearance='icon'],
-[tuiTheme='dark'][tuiWrapper][data-appearance='icon'] {
-    [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) {
-        opacity: 1;
-    }
-
-    .wrapper-focus({
-        --tui-border-focus: var(--tui-background-base);
-    });
-
-    .wrapper-hover({
-        opacity: 1;
+        color: var(--tui-text-primary);
     });
 }
 
@@ -235,18 +196,15 @@ tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance='i
 tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
 tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance='icon'] {
     color: var(--tui-text-secondary);
-}
 
-[tuiTheme='dark'] tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
-[tuiTheme='dark'] tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
-[tuiTheme='dark'] tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance='icon'],
-tui-primitive-textfield:hover:not(._disabled)[tuiTheme='dark'] [tuiAppearance][data-appearance='icon'],
-tui-textarea:hover:not(._disabled)[tuiTheme='dark'] [tuiAppearance][data-appearance='icon'],
-tui-input-tag:hover:not(._disabled)[tuiTheme='dark'] [tuiAppearance][data-appearance='icon'] {
-    color: var(--tui-text-primary);
+    .wrapper-active({
+        color: var(--tui-text-primary);
+    });
 }
 
 [tuiWrapper][data-appearance='none'] {
+    outline: none;
+
     &::after {
         border: none;
     }

package/tokens/i18n.d.ts

@@ -6,6 +6,10 @@ export declare const TUI_MONTHS: import("@angular/core").InjectionToken<import("
  * i18n 'close' word
  */
 export declare const TUI_CLOSE_WORD: import("@angular/core").InjectionToken<import("rxjs").Observable<string>>;
+/**
+ * i18n 'clear' word
+ */
+export declare const TUI_CLEAR_WORD: import("@angular/core").InjectionToken<import("rxjs").Observable<string>>;
 /**
  * i18n 'Nothing found' message
  */

package/utils/miscellaneous/to-animation-options.d.ts

@@ -1,4 +1,4 @@
 import type { AnimationOptions } from '@angular/animations';
 export declare const TUI_ANIMATIONS_DEFAULT_DURATION = 300;
-export declare function tuiToAnimationOptions(speed: number): AnimationOptions;
+export declare function tuiToAnimationOptions(speed: number, easing?: string): AnimationOptions;
 export declare function tuiGetDuration(speed: number): number;

package/styles/theme/appearance/icon.less

@@ -1,38 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiAppearance][data-appearance='icon'] {
-    color: var(--tui-text-tertiary);
-
-    .appearance-hover({
-        color: var(--tui-text-secondary);
-    });
-
-    .appearance-active({
-        color: var(--tui-text-primary);
-    });
-}
-
-// Icons with the directive
-[tuiAppearance][data-appearance='whiteblock'],
-[tuiAppearance][data-appearance='floating'] {
-    &::before,
-    &::after {
-        .transition(color);
-
-        color: var(--tui-text-tertiary);
-    }
-
-    .appearance-hover({
-        &:before,
-        &:after {
-            color: var(--tui-text-secondary);
-        }
-    });
-
-    .appearance-active({
-        &:before,
-        &:after {
-            color: var(--tui-text-primary);
-        }
-    });
-}