@taiga-ui/core 4.68.0 → 5.0.0-canary.0c88239

package/portals/hint/hint.directive.d.ts

@@ -0,0 +1,24 @@
+import { type OnChanges, type OnDestroy } from '@angular/core';
+import { type TuiRectAccessor, type TuiVehicle } from '@taiga-ui/core/classes';
+import { PolymorpheusComponent, type PolymorpheusContent } from '@taiga-ui/polymorpheus';
+import * as i0 from "@angular/core";
+import * as i1 from "./hint-driver.directive";
+import * as i2 from "./hint-hover.directive";
+import * as i3 from "./hint-position.directive";
+export declare class TuiHintDirective<C> implements OnDestroy, OnChanges, TuiRectAccessor, TuiVehicle {
+    private readonly service;
+    private ref?;
+    readonly content: import("@angular/core").InputSignal<PolymorpheusContent<C>>;
+    readonly context: import("@angular/core").InputSignal<C | undefined>;
+    readonly appearance: import("@angular/core").InputSignal<string>;
+    readonly visible: import("@angular/core").OutputEmitterRef<boolean>;
+    component: PolymorpheusComponent<any>;
+    readonly el: HTMLElement;
+    readonly type = "hint";
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    getClientRect(): DOMRect;
+    toggle(show: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiHintDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiHintDirective<any>, "[tuiHint]:not(ng-container):not(ng-template)", never, { "content": { "alias": "tuiHint"; "required": false; "isSignal": true; }; "context": { "alias": "tuiHintContext"; "required": false; "isSignal": true; }; "appearance": { "alias": "tuiHintAppearance"; "required": false; "isSignal": true; }; }, { "visible": "tuiHintVisible"; }, never, never, true, [{ directive: typeof i1.TuiHintDriver; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiHintHover; inputs: { "tuiHintHideDelay": "tuiHintHideDelay"; "tuiHintShowDelay": "tuiHintShowDelay"; }; outputs: {}; }, { directive: typeof i3.TuiHintPosition; inputs: { "tuiHintDirection": "tuiHintDirection"; "tuiHintOffset": "tuiHintOffset"; }; outputs: { "tuiHintDirectionChange": "tuiHintDirectionChange"; }; }]>;
+}

package/{directives → portals}/hint/index.d.ts

@@ -2,7 +2,6 @@ export * from './hint';
 export * from './hint.component';
 export * from './hint.directive';
 export * from './hint.providers';
-export * from './hint.service';
 export * from './hint-describe.directive';
 export * from './hint-driver.directive';
 export * from './hint-host.directive';
@@ -13,4 +12,3 @@ export * from './hint-overflow.directive';
 export * from './hint-pointer.directive';
 export * from './hint-position.directive';
 export * from './hint-unstyled.component';
-export * from './hints.component';

package/portals/index.d.ts

@@ -0,0 +1,6 @@
+export * from '@taiga-ui/core/portals/alert';
+export * from '@taiga-ui/core/portals/dialog';
+export * from '@taiga-ui/core/portals/dropdown';
+export * from '@taiga-ui/core/portals/hint';
+export * from '@taiga-ui/core/portals/modal';
+export * from '@taiga-ui/core/portals/popup';

package/portals/modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modal.component';
+export * from './modal.service';

package/portals/modal/modal.component.d.ts

@@ -0,0 +1,17 @@
+import { type OnDestroy, type OnInit } from '@angular/core';
+import { type TuiPortalContext } from '@taiga-ui/cdk/portals';
+import { type PolymorpheusContent } from '@taiga-ui/polymorpheus';
+import * as i0 from "@angular/core";
+import * as i1 from "@taiga-ui/cdk/directives/active-zone";
+import * as i2 from "@taiga-ui/cdk/directives/focus-trap";
+import * as i3 from "@taiga-ui/core/components/scrollbar";
+export declare class TuiModalComponent<T> implements OnDestroy, OnInit {
+    private readonly current;
+    private readonly parent;
+    readonly context: TuiPortalContext<T>;
+    readonly component: import("@angular/core").WritableSignal<PolymorpheusContent<TuiPortalContext<T>>>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiModalComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiModalComponent<any>, "tui-modal", never, {}, {}, never, never, true, [{ directive: typeof i1.TuiActiveZone; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiFocusTrap; inputs: {}; outputs: {}; }, { directive: typeof i3.TuiScrollRef; inputs: {}; outputs: {}; }]>;
+}

package/portals/modal/modal.service.d.ts

@@ -0,0 +1,13 @@
+import { type Type } from '@angular/core';
+import { TuiPortal } from '@taiga-ui/cdk/portals';
+import { PolymorpheusComponent } from '@taiga-ui/polymorpheus';
+import { TuiModalComponent } from './modal.component';
+import * as i0 from "@angular/core";
+export declare abstract class TuiModalService<T, K = void> extends TuiPortal<T, K> {
+    protected abstract readonly content: Type<unknown>;
+    protected readonly component: typeof TuiModalComponent;
+    constructor();
+    protected add(component: PolymorpheusComponent<TuiModalComponent<T>>): () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiModalService<any, any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TuiModalService<any, any>>;
+}

package/portals/popup/popup.directive.d.ts

@@ -0,0 +1,12 @@
+import { type OnChanges, type OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TuiPopup implements OnChanges, OnDestroy {
+    private readonly template;
+    private readonly service;
+    private ref?;
+    readonly show: import("@angular/core").InputSignal<boolean>;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiPopup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiPopup, "ng-template[tuiPopup]", never, { "show": { "alias": "tuiPopup"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/{directives → portals}/popup/popup.service.d.ts

@@ -1,4 +1,4 @@
-import { TuiPortalService } from '@taiga-ui/cdk/classes';
+import { TuiPortalService } from '@taiga-ui/cdk/portals';
 import * as i0 from "@angular/core";
 export declare class TuiPopupService extends TuiPortalService {
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiPopupService, never>;

package/{directives → portals}/popup/popups.component.d.ts

@@ -1,6 +1,6 @@
-import { TuiPortals } from '@taiga-ui/cdk/classes';
+import { TuiPortals } from '@taiga-ui/cdk/portals';
 import * as i0 from "@angular/core";
 export declare class TuiPopups extends TuiPortals {
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiPopups, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiPopups, "tui-popups", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiPopups, "tui-popups", never, {}, {}, never, ["*"], true, never>;
 }

package/services/index.d.ts

@@ -1,5 +1,2 @@
-export * from './breakpoint.service';
-export * from './dark-theme.service';
-export * from './format-date.service';
 export * from './position.service';
 export * from './visual-viewport.service';

package/styles/components/appearance.less

@@ -19,7 +19,7 @@
  * @see-also
  * Button
  */
-[tuiAppearance] {
+[tuiAppearance]:where(*&) {
     .transition(all);
 
     position: relative;
@@ -30,6 +30,7 @@
 
     &::before,
     &::after {
+        transition-property: none;
         transition-duration: inherit;
         transition-timing-function: ease-in-out;
     }
@@ -41,5 +42,10 @@
     .appearance-disabled({
         cursor: initial;
         opacity: var(--tui-disabled-opacity);
+
+        &::before,
+        &::after {
+            cursor: initial;
+        }
     });
 }

package/styles/components/button.less

@@ -16,8 +16,8 @@
  * @see-also
  * Icons, Appearance, Link
  */
-[tuiButton],
-[tuiIconButton] {
+[tuiButton]:where(*&),
+[tuiIconButton]:where(*&) {
     --t-size: var(--tui-height-l);
     --t-radius: var(--tui-radius-l);
     --t-gap: 0.25rem;
@@ -32,7 +32,7 @@
     padding: var(--t-padding);
     user-select: none;
     cursor: pointer;
-    font: var(--tui-font-text-m);
+    font: var(--tui-font-body-m);
     font-weight: bold;
 
     > .t-loader {
@@ -50,11 +50,11 @@
         --t-padding: 0 0.375rem;
         --t-margin: -0.125rem;
 
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
 
-        tui-svg,
         tui-icon,
-        &::before {
+        &::before,
+        &::after {
             font-size: 1rem;
         }
     }
@@ -66,11 +66,11 @@
         --t-padding: 0 0.625rem;
         --t-margin: -0.125rem;
 
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
 
-        tui-svg,
         tui-icon,
-        &:not([tuiIconButton][data-appearance='icon']):not([tuiIconButton][data-appearance='link'])::before {
+        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance='link'])::before,
+        &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance='link'])::after {
             font-size: 1rem;
         }
     }
@@ -82,12 +82,8 @@
         --t-padding: 0 1rem;
         --t-margin: -0.375rem;
 
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
         font-weight: bold;
-
-        &::after {
-            margin-inline-end: -0.125rem;
-        }
     }
 
     &._loading {
@@ -106,10 +102,6 @@
         }
     }
 
-    &[tuiIcons]::after {
-        font-size: 1rem;
-    }
-
     &[tuiButtonVertical] {
         // StackBlitz changes "0rem" to "0" breaking calc
         --t-margin: ~'0rem' !important;
@@ -122,7 +114,7 @@
         gap: 0.375rem;
         min-inline-size: 5rem;
         white-space: pre-line;
-        font: var(--tui-font-text-ui-s);
+        font: var(--tui-font-ui-s);
 
         & > * {
             max-block-size: calc(var(--t-line-height) * 2);
@@ -130,17 +122,13 @@
     }
 }
 
-[tuiIconButton] {
+[tuiIconButton]:where(*&) {
     gap: 0;
     inline-size: var(--t-size);
     font-size: 0 !important;
     padding: 0;
 
-    &[data-size='l']::after {
-        margin: 0;
-    }
-
-    &&[style*='--t-icon-start:']::after {
+    &&[data-icon-start]::after {
         display: none;
     }
 }

package/styles/components/group.less

@@ -19,7 +19,7 @@
  * @see-also
  * Button, Block, Textfield
  */
-[tuiGroup] {
+[tuiGroup]:where(*&) {
     position: relative;
     display: flex;
     transform: translate3d(0, 0, 0);

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:where(*&) {
+    --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,8 @@ 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%;
+    zoom: ~'calc(100% * (min(max(var(--tui-font-offset) - 10px, 0px), 1px) / 0.8px))';
 
     @media @tui-mouse {
         &[data-appearance='icon']:hover {
@@ -36,27 +39,45 @@ 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;
+        }
+
+        &[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);
+            }
+        }
 
-        content: '';
-        display: block;
-        mask: var(--t-icon) no-repeat center/contain;
-        background: currentColor;
+        &::after {
+            .fullsize();
+        }
+    }
+
+    &[data-icon-start] {
+        &::before {
+            .fullsize();
+        }
+
+        &::after {
+            transform: translate(36%, 36%);
+
+            --tui-icon-size: 0.5715em;
+        }
     }
 
-    &[data-icon='image']::after {
-        mask: none;
-        background: var(--t-icon) no-repeat center/contain;
+    &[data-icon-start='img']::before,
+    &[data-icon-end='img']::after {
+        zoom: 1;
     }
 
-    &[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='font']::before,
+    &[data-icon-end='font']::after {
+        zoom: 0.667;
     }
 }

package/styles/components/icons.less

@@ -7,17 +7,17 @@
  *
  * @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
  */
-[tuiIcons] {
+[tuiIcons]:where(*&) {
     --t-icon-start: none;
     --t-icon-end: none;
 
@@ -27,30 +27,35 @@
         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;
+        zoom: ~'calc(100% * (min(max(var(--tui-font-offset) - 10px, 0px), 1px) / 0.8px))';
     }
 
     &::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,
@@ -58,7 +63,7 @@
         display: grid;
         mask: none;
         background: none;
-        font: 1.3em/1 var(--tui-font-icon, inherit);
+        font: 1.5em / 1 var(--tui-font-icon, inherit);
         text-align: center;
         place-content: center;
         text-transform: none;

package/styles/components/label.less

@@ -14,26 +14,17 @@
  * @see-also
  * Checkbox, Radio, Title
  */
-[tuiLabel] {
+[tuiLabel]:where(*&) {
     display: flex;
     gap: 0.25rem;
     flex-direction: column;
-    font: var(--tui-font-text-s);
+    font: var(--tui-font-body-s);
     color: var(--tui-text-primary);
 
     &:not([data-orientation='vertical']) {
         flex-direction: row;
         inline-size: fit-content;
-        font: var(--tui-font-text-m);
-    }
-
-    // TODO: Remove after legacy inputs are dropped
-    &:has(tui-textfield),
-    &:has(tui-primitive-textfield),
-    &:has(tui-textarea) {
-        flex-direction: column !important;
-        inline-size: auto !important;
-        font: var(--tui-font-text-s) !important;
+        font: var(--tui-font-body-m);
     }
 
     input[type='checkbox'],
@@ -47,7 +38,7 @@
     }
 
     small {
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
     }
 
     [tuiTitle] {

package/styles/components/link.less

@@ -13,10 +13,7 @@
  * @see-also
  * Icons, Appearance, Button
  */
-[tuiLink] {
-    // TODO: Remove in v5
-    --tui-text-tertiary: var(--tui-text-secondary);
-
+[tuiLink]:where(*&) {
     .transition(~'color, text-decoration, opacity');
 
     padding: 0;
@@ -24,19 +21,14 @@
     border: none;
     cursor: pointer;
     font: inherit;
-    color: var(--tui-text-primary);
-    text-decoration: none dashed currentColor;
+    color: inherit;
+    border-radius: 0.125rem;
+    outline-width: 1px;
+    outline-offset: -1px;
     text-underline-offset: 0.2em;
-    text-decoration-thickness: 0.7px;
+    text-decoration: none dashed currentColor 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,19 +45,15 @@
         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;
+        vertical-align: initial;
     }
 
-    .appearance-focus({
-        outline: none;
-        background: var(--tui-service-selection-background);
-        background: color-mix(in lch, currentColor 12%, transparent);
-    });
-
     .appearance-hover({
         text-decoration-color: currentColor;
     });
@@ -74,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;
     }
 }