@taiga-ui/core 3.45.0-canary.efb52ab → 3.46.0

package/bundles/taiga-ui-core-components-root.umd.js

@@ -368,7 +368,7 @@
         return TuiRootComponent;
     }());
     TuiRootComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiRootComponent, deps: [{ token: tokens.TUI_ANIMATIONS_DURATION }, { token: i3.TUI_DIALOGS }, { token: i3.TUI_IS_MOBILE }, { token: tokens.TUI_IS_MOBILE_RES }, { token: i3.TUI_IS_IOS }, { token: i3.TUI_IS_ANDROID }, { token: i5.DOCUMENT }, { token: tokens.TUI_THEME }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiRootComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.45.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration.ms": "duration", "class._ios": "isIOS", "class._android": "isAndroid" } }, providers: [providers.TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0__namespace, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-root-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-root-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<!--TODO: 4.0 rename to tuiOverDropdowns-->\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiSkeletonVibe{to{opacity:.5}}html,.tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar,html::-webkit-scrollbar-thumb,.tui-zero-scrollbar::-webkit-scrollbar-thumb{background:transparent;width:0;height:0}body{font:var(--tui-font-text-s);color:var(--tui-text-01);background:var(--tui-base-01);margin:0}tui-root{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}tui-root>.t-root-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-root-content{position:relative;z-index:0;height:100%}.t-overscroll-none{overscroll-behavior:none}\n"], components: [{ type: i1__namespace.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2__namespace.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3__namespace.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3__namespace.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3__namespace.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4__namespace.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.Default, encapsulation: i0__namespace.ViewEncapsulation.None });
+    TuiRootComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.46.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration.ms": "duration", "class._ios": "isIOS", "class._android": "isAndroid" } }, providers: [providers.TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0__namespace, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-root-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-root-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<!--TODO: 4.0 rename to tuiOverDropdowns-->\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiSkeletonVibe{to{opacity:.5}}html,.tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar,html::-webkit-scrollbar-thumb,.tui-zero-scrollbar::-webkit-scrollbar-thumb{background:transparent;width:0;height:0}body{font:var(--tui-font-text-s);color:var(--tui-text-01);background:var(--tui-base-01);margin:0}tui-root{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}tui-root>.t-root-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-root-content{position:relative;z-index:0;height:100%}.t-overscroll-none{overscroll-behavior:none}\n"], components: [{ type: i1__namespace.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2__namespace.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3__namespace.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3__namespace.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3__namespace.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4__namespace.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.Default, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiRootComponent, decorators: [{
                 type: i0.Component,
                 args: [{

package/constants/cache-basting-payload.d.ts

@@ -1 +1 @@
-export declare const TUI_CACHE_BUSTING_PAYLOAD: "?v=3.45.0";
+export declare const TUI_CACHE_BUSTING_PAYLOAD: "?v=3.46.0";

package/esm2015/components/root/root.component.js

@@ -27,7 +27,7 @@ export class TuiRootComponent {
     }
 }
 TuiRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiRootComponent, deps: [{ token: TUI_ANIMATIONS_DURATION }, { token: TUI_DIALOGS }, { token: TUI_IS_MOBILE }, { token: TUI_IS_MOBILE_RES }, { token: TUI_IS_IOS }, { token: TUI_IS_ANDROID }, { token: DOCUMENT }, { token: TUI_THEME }], target: i0.ɵɵFactoryTarget.Component });
-TuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.45.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration.ms": "duration", "class._ios": "isIOS", "class._android": "isAndroid" } }, providers: [TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-root-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-root-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<!--TODO: 4.0 rename to tuiOverDropdowns-->\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiSkeletonVibe{to{opacity:.5}}html,.tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar,html::-webkit-scrollbar-thumb,.tui-zero-scrollbar::-webkit-scrollbar-thumb{background:transparent;width:0;height:0}body{font:var(--tui-font-text-s);color:var(--tui-text-01);background:var(--tui-base-01);margin:0}tui-root{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}tui-root>.t-root-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-root-content{position:relative;z-index:0;height:100%}.t-overscroll-none{overscroll-behavior:none}\n"], components: [{ type: i1.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+TuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.46.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration.ms": "duration", "class._ios": "isIOS", "class._android": "isAndroid" } }, providers: [TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-root-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-root-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<!--TODO: 4.0 rename to tuiOverDropdowns-->\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiSkeletonVibe{to{opacity:.5}}html,.tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar,html::-webkit-scrollbar-thumb,.tui-zero-scrollbar::-webkit-scrollbar-thumb{background:transparent;width:0;height:0}body{font:var(--tui-font-text-s);color:var(--tui-text-01);background:var(--tui-base-01);margin:0}tui-root{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}tui-root>.t-root-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-root-content{position:relative;z-index:0;height:100%}.t-overscroll-none{overscroll-behavior:none}\n"], components: [{ type: i1.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiRootComponent, decorators: [{
             type: Component,
             args: [{

package/fesm2015/taiga-ui-core-components-root.js

@@ -32,7 +32,7 @@ class TuiRootComponent {
     }
 }
 TuiRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiRootComponent, deps: [{ token: TUI_ANIMATIONS_DURATION }, { token: TUI_DIALOGS }, { token: TUI_IS_MOBILE }, { token: TUI_IS_MOBILE_RES }, { token: TUI_IS_IOS }, { token: TUI_IS_ANDROID }, { token: DOCUMENT }, { token: TUI_THEME }], target: i0.ɵɵFactoryTarget.Component });
-TuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.45.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration.ms": "duration", "class._ios": "isIOS", "class._android": "isAndroid" } }, providers: [TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-root-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-root-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<!--TODO: 4.0 rename to tuiOverDropdowns-->\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiSkeletonVibe{to{opacity:.5}}html,.tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar,html::-webkit-scrollbar-thumb,.tui-zero-scrollbar::-webkit-scrollbar-thumb{background:transparent;width:0;height:0}body{font:var(--tui-font-text-s);color:var(--tui-text-01);background:var(--tui-base-01);margin:0}tui-root{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}tui-root>.t-root-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-root-content{position:relative;z-index:0;height:100%}.t-overscroll-none{overscroll-behavior:none}\n"], components: [{ type: i1.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+TuiRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiRootComponent, selector: "tui-root", host: { attributes: { "data-tui-version": "3.46.0" }, listeners: { "$.class._mobile": "isMobileRes$" }, properties: { "style.--tui-duration.ms": "duration", "class._ios": "isIOS", "class._android": "isAndroid" } }, providers: [TUI_IS_MOBILE_RES_PROVIDER], ngImport: i0, template: "<tui-scroll-controls\n    *ngIf=\"scrollbars$ | async\"\n    class=\"t-root-scrollbar\"\n></tui-scroll-controls>\n<tui-svg-defs-host></tui-svg-defs-host>\n<tui-dropdown-host>\n    <div class=\"t-root-content\">\n        <ng-content></ng-content>\n    </div>\n    <ng-content select=\"tuiOverContent\"></ng-content>\n    <tui-dialog-host></tui-dialog-host>\n    <ng-content select=\"tuiOverDialogs\"></ng-content>\n    <tui-alert-host></tui-alert-host>\n    <ng-content select=\"tuiOverAlerts\"></ng-content>\n</tui-dropdown-host>\n<!--TODO: 4.0 rename to tuiOverDropdowns-->\n<ng-content select=\"tuiOverPortals\"></ng-content>\n<tui-hints-host></tui-hints-host>\n<ng-content select=\"tuiOverHints\"></ng-content>\n", styles: ["@keyframes tuiPresent{to{content:\"1\"}}@keyframes tuiSkeletonVibe{to{opacity:.5}}html,.tui-zero-scrollbar{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,.tui-zero-scrollbar::-webkit-scrollbar,html::-webkit-scrollbar-thumb,.tui-zero-scrollbar::-webkit-scrollbar-thumb{background:transparent;width:0;height:0}body{font:var(--tui-font-text-s);color:var(--tui-text-01);background:var(--tui-base-01);margin:0}tui-root{position:relative;display:block;flex:1;-webkit-tap-highlight-color:transparent}tui-root>.t-root-scrollbar{position:fixed;top:0;left:0;bottom:0;right:0;margin:0}.t-root-content{position:relative;z-index:0;height:100%}.t-overscroll-none{overscroll-behavior:none}\n"], components: [{ type: i1.TuiScrollControlsComponent, selector: "tui-scroll-controls" }, { type: i2.TuiSvgDefsHostComponent, selector: "tui-svg-defs-host" }, { type: i3.TuiDropdownHostComponent, selector: "tui-dropdown-host" }, { type: i3.TuiDialogHostComponent, selector: "tui-dialog-host" }, { type: i3.TuiAlertHostComponent, selector: "tui-alert-host" }, { type: i4.TuiHintsHostComponent, selector: "tui-hints-host" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiRootComponent, decorators: [{
             type: Component,
             args: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/core",
-  "version": "3.45.0-canary.efb52ab",
+  "version": "3.46.0",
   "description": "Core library for creating Angular components and applications using Taiga UI",
   "keywords": [
     "angular",
@@ -15,7 +15,7 @@
   "repository": "https://github.com/taiga-family/taiga-ui",
   "license": "Apache-2.0",
   "dependencies": {
-    "@taiga-ui/i18n": "^3.45.0",
+    "@taiga-ui/i18n": "^3.46.0",
     "tslib": ">=2.0.0"
   },
   "peerDependencies": {
@@ -27,8 +27,8 @@
     "@angular/router": ">=12.0.0",
     "@ng-web-apis/common": ">=3.0.0",
     "@ng-web-apis/mutation-observer": ">=3.0.0",
-    "@taiga-ui/cdk": ">=3.45.0",
-    "@taiga-ui/i18n": ">=3.45.0",
+    "@taiga-ui/cdk": ">=3.46.0",
+    "@taiga-ui/i18n": ">=3.46.0",
     "@tinkoff/ng-event-plugins": ">=3.1.0",
     "@tinkoff/ng-polymorpheus": ">=4.0.0",
     "rxjs": ">=6.0.0"

package/styles/theme/wrapper/floating.less

@@ -0,0 +1,18 @@
+@import '../../taiga-ui-local.less';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='floating'] {
+    .transition(~'background, box-shadow');
+    background: #fff;
+    color: rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+
+    .wrapper-hover({
+        box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14);
+    });
+
+    .wrapper-active({
+        background: #f6f7f8;
+        box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
+    });
+}

package/styles/theme/wrapper/glass.less

@@ -0,0 +1,30 @@
+@import '../../taiga-ui-local.less';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='glass'] {
+    background: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    backdrop-filter: blur(1rem);
+
+    --tui-focus: rgba(255, 255, 255, 0.64);
+
+    .wrapper-hover({
+        background: rgba(0, 0, 0, 0.48);
+    });
+
+    .wrapper-active({
+        background: rgba(0, 0, 0, 0.6);
+    });
+
+    &[data-mode='onDark'] {
+        background: rgba(255, 255, 255, 0.3);
+
+        .wrapper-hover({
+            background: rgba(255, 255, 255, 0.4);
+        });
+
+        .wrapper-active({
+            background: rgba(255, 255, 255, 0.5);
+        });
+    }
+}

package/styles/theme/wrapper/opposite.less

@@ -0,0 +1,32 @@
+@import '../../taiga-ui-local.less';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='opposite'] {
+    background: #000;
+    color: #fff;
+
+    --tui-focus: rgba(255, 255, 255, 0.64);
+
+    .wrapper-hover({
+        background: #333;
+    });
+
+    .wrapper-active({
+        background: #5c636b;
+    });
+
+    &[data-mode='onDark'] {
+        color: rgba(0, 0, 0, 0.8);
+        background: #fff;
+
+        --tui-focus: rgba(51, 51, 51, 0.48);
+
+        .wrapper-hover({
+            background: #f3F4f6;
+        });
+
+        .wrapper-active({
+            background: #eaecee;
+        });
+    }
+}

package/styles/theme/wrapper.less

@@ -2,11 +2,14 @@
 @import 'wrapper/outline.less';
 @import 'wrapper/primary.less';
 @import 'wrapper/accent.less';
+@import 'wrapper/floating.less';
+@import 'wrapper/glass.less';
 @import 'wrapper/secondary.less';
 @import 'wrapper/secondary-destructive.less';
 @import 'wrapper/table.less';
 @import 'wrapper/textfield.less';
 @import 'wrapper/whiteblock.less';
 @import 'wrapper/none.less';
+@import 'wrapper/opposite.less';
 @import 'wrapper/base.less';
 @import 'wrapper/mono.less';