@rt-tools/ui-kit-v2 0.1.0 → 0.3.0

package/fesm2022/rt-tools-ui-kit-v2.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, InjectionToken, inject, Injector, RendererFactory2, Injectable, computed, numberAttribute, ElementRef, Directive, booleanAttribute, output, HostBinding, makeEnvironmentProviders, provideAppInitializer, DestroyRef, effect, ViewContainerRef, viewChild, forwardRef, Renderer2, afterNextRender, untracked, Pipe, HostListener, contentChild, TemplateRef, afterRenderEffect, linkedSignal, isSignal, LOCALE_ID, contentChildren, ViewChild, model } from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, InjectionToken, inject, Injector, RendererFactory2, Injectable, computed, numberAttribute, ElementRef, Directive, booleanAttribute, output, HostBinding, makeEnvironmentProviders, provideAppInitializer, DestroyRef, ViewContainerRef, viewChild, forwardRef, Renderer2, afterNextRender, untracked, effect, Pipe, HostListener, contentChild, TemplateRef, afterRenderEffect, linkedSignal, isSignal, LOCALE_ID, contentChildren, ViewChild, model } from '@angular/core';
 import { BlockDirective, ElemDirective, ModDirective, PlatformService, StorageService, IDBStorageService, WINDOW } from '@rt-tools/core';
 import * as i1$1 from '@angular/cdk/overlay';
 import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
@@ -53,13 +53,13 @@ class RtAsideComponent {
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtAsideComponent, isStandalone: true, selector: "rt-aside", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, contentLayout: { classPropertyName: "contentLayout", publicName: "contentLayout", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-aside" }, ngImport: i0, template: "<div\n    rtBlock=\"rt-aside\"\n    qa-dataid=\"aside\"\n    role=\"complementary\"\n    [rtMod]=\"{ size: size(), content: contentLayout() }\"\n    [style.--rt-aside-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content select=\"rt-aside-header\" />\n\n    <div rtElem=\"content\" qa-dataid=\"aside-content\">\n        <ng-content />\n    </div>\n\n    <ng-content select=\"rt-aside-footer\" />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:root{--rt-aside-width-sm: 400px;--rt-aside-width-md: 540px;--rt-aside-width-lg: 720px;--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: rgb(0 0 0 / 45%);--rt-aside-backdrop-blur: 5px;--rt-aside-inset: var(--rt-space-lg);--rt-aside-content-gap: var(--rt-space-md)}.rt-aside{display:flex;width:var(--rt-aside-width, var(--rt-aside-width-md));min-width:0;max-width:100%;height:100%;flex-direction:column;padding:0;border:none;background:var(--rt-color-bg-surface);color:var(--rt-color-text-primary)}.rt-aside>rt-aside-header,.rt-aside>rt-aside-footer{min-width:0;flex-shrink:0}.rt-aside__content{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;padding:var(--rt-aside-inset);gap:var(--rt-aside-content-gap);overflow-y:auto;overscroll-behavior:contain}.rt-aside--size--sm{width:var(--rt-aside-width, var(--rt-aside-width-sm))}.rt-aside--size--md{width:var(--rt-aside-width, var(--rt-aside-width-md))}.rt-aside--size--lg{width:var(--rt-aside-width, var(--rt-aside-width-lg))}.rt-aside--content--tabs .rt-aside__content{overflow:hidden;padding-block-end:0}.rt-aside--content--tabs rt-tabs{min-height:0;flex:1 1 auto;margin-inline:calc(-1 * var(--rt-aside-inset))}.rt-aside--content--tabs .rt-tabs__header{padding-inline:var(--rt-aside-inset)}.rt-aside--content--tabs .rt-tabs__content{padding-bottom:var(--rt-aside-inset);padding-inline:var(--rt-aside-inset)}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);opacity:0;pointer-events:none;transition:opacity var(--rt-aside-animation-duration) ease}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}.rt-aside,.rt-aside--size--sm,.rt-aside--size--md,.rt-aside--size--lg{width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtAsideComponent, isStandalone: true, selector: "rt-aside", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, contentLayout: { classPropertyName: "contentLayout", publicName: "contentLayout", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-aside" }, ngImport: i0, template: "<div\n    rtBlock=\"rt-aside\"\n    qa-dataid=\"aside\"\n    role=\"complementary\"\n    [rtMod]=\"{ size: size(), content: contentLayout() }\"\n    [style.--rt-aside-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content select=\"rt-aside-header\" />\n\n    <div rtElem=\"content\" qa-dataid=\"aside-content\">\n        <ng-content />\n    </div>\n\n    <ng-content select=\"rt-aside-footer\" />\n</div>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: rgb(0 0 0 / 45%);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);opacity:0;pointer-events:none;transition:opacity var(--rt-aside-animation-duration) ease}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}:root{--rt-aside-width-sm: 400px;--rt-aside-width-md: 540px;--rt-aside-width-lg: 720px;--rt-aside-inset: var(--rt-space-lg);--rt-aside-content-gap: var(--rt-space-md)}rt-aside{display:contents}rt-aside .rt-aside{display:flex;width:var(--rt-aside-width, var(--rt-aside-width-md));min-width:0;max-width:100%;height:100%;flex-direction:column;padding:0;border:none;background:var(--rt-color-bg-surface);color:var(--rt-color-text-primary)}rt-aside .rt-aside>rt-aside-header,rt-aside .rt-aside>rt-aside-footer{min-width:0;flex-shrink:0}rt-aside .rt-aside__content{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;padding:var(--rt-aside-inset);gap:var(--rt-aside-content-gap);overflow-y:auto;overscroll-behavior:contain}rt-aside .rt-aside--size--sm{width:var(--rt-aside-width, var(--rt-aside-width-sm))}rt-aside .rt-aside--size--md{width:var(--rt-aside-width, var(--rt-aside-width-md))}rt-aside .rt-aside--size--lg{width:var(--rt-aside-width, var(--rt-aside-width-lg))}rt-aside .rt-aside--content--tabs .rt-aside__content{overflow:hidden;padding-block-end:0}rt-aside .rt-aside--content--tabs rt-tabs{min-height:0;flex:1 1 auto;margin-inline:calc(-1 * var(--rt-aside-inset))}rt-aside .rt-aside--content--tabs .rt-tabs__header{padding-inline:var(--rt-aside-inset)}rt-aside .rt-aside--content--tabs .rt-tabs__content{padding-bottom:var(--rt-aside-inset);padding-inline:var(--rt-aside-inset)}@media(width<=768px){rt-aside .rt-aside,rt-aside .rt-aside--size--sm,rt-aside .rt-aside--size--md,rt-aside .rt-aside--size--lg{width:100dvw;max-width:100dvw}}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtAsideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rt-aside', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [BlockDirective, ElemDirective, ModDirective], host: {
                         class: BEM_BLOCK$1j,
-                    }, template: "<div\n    rtBlock=\"rt-aside\"\n    qa-dataid=\"aside\"\n    role=\"complementary\"\n    [rtMod]=\"{ size: size(), content: contentLayout() }\"\n    [style.--rt-aside-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content select=\"rt-aside-header\" />\n\n    <div rtElem=\"content\" qa-dataid=\"aside-content\">\n        <ng-content />\n    </div>\n\n    <ng-content select=\"rt-aside-footer\" />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:root{--rt-aside-width-sm: 400px;--rt-aside-width-md: 540px;--rt-aside-width-lg: 720px;--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: rgb(0 0 0 / 45%);--rt-aside-backdrop-blur: 5px;--rt-aside-inset: var(--rt-space-lg);--rt-aside-content-gap: var(--rt-space-md)}.rt-aside{display:flex;width:var(--rt-aside-width, var(--rt-aside-width-md));min-width:0;max-width:100%;height:100%;flex-direction:column;padding:0;border:none;background:var(--rt-color-bg-surface);color:var(--rt-color-text-primary)}.rt-aside>rt-aside-header,.rt-aside>rt-aside-footer{min-width:0;flex-shrink:0}.rt-aside__content{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;padding:var(--rt-aside-inset);gap:var(--rt-aside-content-gap);overflow-y:auto;overscroll-behavior:contain}.rt-aside--size--sm{width:var(--rt-aside-width, var(--rt-aside-width-sm))}.rt-aside--size--md{width:var(--rt-aside-width, var(--rt-aside-width-md))}.rt-aside--size--lg{width:var(--rt-aside-width, var(--rt-aside-width-lg))}.rt-aside--content--tabs .rt-aside__content{overflow:hidden;padding-block-end:0}.rt-aside--content--tabs rt-tabs{min-height:0;flex:1 1 auto;margin-inline:calc(-1 * var(--rt-aside-inset))}.rt-aside--content--tabs .rt-tabs__header{padding-inline:var(--rt-aside-inset)}.rt-aside--content--tabs .rt-tabs__content{padding-bottom:var(--rt-aside-inset);padding-inline:var(--rt-aside-inset)}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);opacity:0;pointer-events:none;transition:opacity var(--rt-aside-animation-duration) ease}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}.rt-aside,.rt-aside--size--sm,.rt-aside--size--md,.rt-aside--size--lg{width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}\n"] }]
+                    }, template: "<div\n    rtBlock=\"rt-aside\"\n    qa-dataid=\"aside\"\n    role=\"complementary\"\n    [rtMod]=\"{ size: size(), content: contentLayout() }\"\n    [style.--rt-aside-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content select=\"rt-aside-header\" />\n\n    <div rtElem=\"content\" qa-dataid=\"aside-content\">\n        <ng-content />\n    </div>\n\n    <ng-content select=\"rt-aside-footer\" />\n</div>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: rgb(0 0 0 / 45%);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);opacity:0;pointer-events:none;transition:opacity var(--rt-aside-animation-duration) ease}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}:root{--rt-aside-width-sm: 400px;--rt-aside-width-md: 540px;--rt-aside-width-lg: 720px;--rt-aside-inset: var(--rt-space-lg);--rt-aside-content-gap: var(--rt-space-md)}rt-aside{display:contents}rt-aside .rt-aside{display:flex;width:var(--rt-aside-width, var(--rt-aside-width-md));min-width:0;max-width:100%;height:100%;flex-direction:column;padding:0;border:none;background:var(--rt-color-bg-surface);color:var(--rt-color-text-primary)}rt-aside .rt-aside>rt-aside-header,rt-aside .rt-aside>rt-aside-footer{min-width:0;flex-shrink:0}rt-aside .rt-aside__content{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;padding:var(--rt-aside-inset);gap:var(--rt-aside-content-gap);overflow-y:auto;overscroll-behavior:contain}rt-aside .rt-aside--size--sm{width:var(--rt-aside-width, var(--rt-aside-width-sm))}rt-aside .rt-aside--size--md{width:var(--rt-aside-width, var(--rt-aside-width-md))}rt-aside .rt-aside--size--lg{width:var(--rt-aside-width, var(--rt-aside-width-lg))}rt-aside .rt-aside--content--tabs .rt-aside__content{overflow:hidden;padding-block-end:0}rt-aside .rt-aside--content--tabs rt-tabs{min-height:0;flex:1 1 auto;margin-inline:calc(-1 * var(--rt-aside-inset))}rt-aside .rt-aside--content--tabs .rt-tabs__header{padding-inline:var(--rt-aside-inset)}rt-aside .rt-aside--content--tabs .rt-tabs__content{padding-bottom:var(--rt-aside-inset);padding-inline:var(--rt-aside-inset)}@media(width<=768px){rt-aside .rt-aside,rt-aside .rt-aside--size--sm,rt-aside .rt-aside--size--md,rt-aside .rt-aside--size--lg{width:100dvw;max-width:100dvw}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], contentLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLayout", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /** Длительность slide-out анимации; синхронизирована с `--rt-aside-animation-duration` в SCSS. */
@@ -738,6 +738,7 @@ const SIZES = Object.freeze({
     md: 20,
     lg: 24,
     xl: 32,
+    '2xl': 40,
 });
 const COLORS = Object.freeze({
     current: 'currentColor',
@@ -989,6 +990,8 @@ class RtIconButtonComponent {
                 sm: 'sm',
                 md: 'md',
                 lg: 'lg',
+                xl: 'xl',
+                '2xl': '2xl',
             };
             return this.iconSize() ?? map[this.size()];
         }, /* @ts-ignore */
@@ -1069,13 +1072,13 @@ class RtIconButtonComponent {
         this.clicked.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtIconButtonComponent, isStandalone: true, selector: "rt-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { classAttribute: "rt-icon-button" }, ngImport: i0, template: "<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [size]=\"resolvedIconSize()\" />\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;--rt-icon-button-size: 36px}:host .rt-icon-button{position:relative;display:inline-flex;width:var(--rt-icon-button-size);height:var(--rt-icon-button-size);align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--rt-icon-button-color, var(--rt-color-text-primary));cursor:pointer;transition:background-color var(--rt-duration-fast) ease}:host .rt-icon-button--sm{--rt-icon-button-size: 28px}:host .rt-icon-button--md{--rt-icon-button-size: 36px}:host .rt-icon-button--lg{--rt-icon-button-size: 44px}:host .rt-icon-button--circle{border-radius:var(--rt-radius-full)}:host .rt-icon-button--square{border-radius:var(--rt-radius-md)}:host .rt-icon-button--ghost:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--ghost.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--primary{background-color:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}:host .rt-icon-button--primary:hover:not(:disabled){background-color:var(--rt-color-action-primary-hover)}:host .rt-icon-button--secondary{background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-primary)}:host .rt-icon-button--secondary:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--danger{color:var(--rt-color-state-danger)}:host .rt-icon-button--danger:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--danger.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--success{color:var(--rt-color-state-success)}:host .rt-icon-button--success:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--success.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--warning{color:var(--rt-color-state-warning)}:host .rt-icon-button--warning:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--warning.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button:disabled{cursor:not-allowed;opacity:.5}:host .rt-icon-button:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}:host .rt-icon-button__spinner{--rt-icon-button-spin-duration: 1s;animation:rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite}:host .rt-icon-button__indicator{position:absolute;width:8px;height:8px;border-radius:var(--rt-radius-full);background:var(--rt-color-state-danger);inset-block-start:-2px;inset-inline-end:-2px;pointer-events:none}@keyframes rt-icon-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtIconButtonComponent, isStandalone: true, selector: "rt-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { classAttribute: "rt-icon-button" }, ngImport: i0, template: "<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [size]=\"resolvedIconSize()\" />\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n", styles: ["@charset \"UTF-8\";rt-icon-button{display:inline-flex;--rt-icon-button-size: 36px}rt-icon-button .rt-icon-button{position:relative;display:inline-flex;width:var(--rt-icon-button-size);height:var(--rt-icon-button-size);align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--rt-icon-button-color, var(--rt-color-text-primary));cursor:pointer;transition:background-color var(--rt-duration-fast) ease}rt-icon-button .rt-icon-button--sm{--rt-icon-button-size: 28px}rt-icon-button .rt-icon-button--md{--rt-icon-button-size: 36px}rt-icon-button .rt-icon-button--lg{--rt-icon-button-size: 44px}rt-icon-button .rt-icon-button--xl{--rt-icon-button-size: 52px}rt-icon-button .rt-icon-button--2xl{--rt-icon-button-size: 60px}rt-icon-button .rt-icon-button--circle{border-radius:var(--rt-radius-full)}rt-icon-button .rt-icon-button--square{border-radius:var(--rt-radius-md)}rt-icon-button .rt-icon-button--ghost:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--ghost.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--primary{background-color:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}rt-icon-button .rt-icon-button--primary:hover:not(:disabled){background-color:var(--rt-color-action-primary-hover)}rt-icon-button .rt-icon-button--secondary{background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-primary)}rt-icon-button .rt-icon-button--secondary:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--danger{color:var(--rt-color-state-danger)}rt-icon-button .rt-icon-button--danger:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--danger.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--success{color:var(--rt-color-state-success)}rt-icon-button .rt-icon-button--success:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--success.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--warning{color:var(--rt-color-state-warning)}rt-icon-button .rt-icon-button--warning:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--warning.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button:disabled{cursor:not-allowed;opacity:.5}rt-icon-button .rt-icon-button:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}rt-icon-button .rt-icon-button__spinner{--rt-icon-button-spin-duration: 1s;animation:rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite}rt-icon-button .rt-icon-button__indicator{position:absolute;width:8px;height:8px;border-radius:var(--rt-radius-full);background:var(--rt-color-state-danger);inset-block-start:-2px;inset-inline-end:-2px;pointer-events:none}@keyframes rt-icon-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: 
                 // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement"], exportAs: ["rtTooltip"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement"], exportAs: ["rtTooltip"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtIconComponent,
                         RtTooltipDirective,
@@ -1084,7 +1087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ModDirective,
                     ], host: {
                         class: BEM_BLOCK$1g,
-                    }, template: "<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [size]=\"resolvedIconSize()\" />\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;--rt-icon-button-size: 36px}:host .rt-icon-button{position:relative;display:inline-flex;width:var(--rt-icon-button-size);height:var(--rt-icon-button-size);align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--rt-icon-button-color, var(--rt-color-text-primary));cursor:pointer;transition:background-color var(--rt-duration-fast) ease}:host .rt-icon-button--sm{--rt-icon-button-size: 28px}:host .rt-icon-button--md{--rt-icon-button-size: 36px}:host .rt-icon-button--lg{--rt-icon-button-size: 44px}:host .rt-icon-button--circle{border-radius:var(--rt-radius-full)}:host .rt-icon-button--square{border-radius:var(--rt-radius-md)}:host .rt-icon-button--ghost:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--ghost.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--primary{background-color:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}:host .rt-icon-button--primary:hover:not(:disabled){background-color:var(--rt-color-action-primary-hover)}:host .rt-icon-button--secondary{background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-primary)}:host .rt-icon-button--secondary:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--danger{color:var(--rt-color-state-danger)}:host .rt-icon-button--danger:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--danger.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--success{color:var(--rt-color-state-success)}:host .rt-icon-button--success:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--success.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--warning{color:var(--rt-color-state-warning)}:host .rt-icon-button--warning:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button--warning.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}:host .rt-icon-button:disabled{cursor:not-allowed;opacity:.5}:host .rt-icon-button:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}:host .rt-icon-button__spinner{--rt-icon-button-spin-duration: 1s;animation:rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite}:host .rt-icon-button__indicator{position:absolute;width:8px;height:8px;border-radius:var(--rt-radius-full);background:var(--rt-color-state-danger);inset-block-start:-2px;inset-inline-end:-2px;pointer-events:none}@keyframes rt-icon-button-spin{to{transform:rotate(360deg)}}\n"] }]
+                    }, template: "<button\n    rtBlock=\"rt-icon-button\"\n    qa-dataid=\"icon-button-control\"\n    [rtTooltip]=\"tooltip()\"\n    [rtMod]=\"bemMods()\"\n    [type]=\"type()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-pressed]=\"active() ? 'true' : null\"\n    [attr.tabindex]=\"tabIndex()\"\n    (click)=\"onClick($event)\">\n    @if (loading()) {\n        <rt-icon rtElem=\"spinner\" name=\"spinner\" color=\"current\" [size]=\"resolvedIconSize()\" />\n    } @else {\n        <rt-icon rtElem=\"icon\" [color]=\"iconColor()\" [name]=\"icon()\" [size]=\"resolvedIconSize()\" />\n    }\n    @if (indicator()) {\n        <span rtElem=\"indicator\" aria-hidden=\"true\"></span>\n    }\n</button>\n", styles: ["@charset \"UTF-8\";rt-icon-button{display:inline-flex;--rt-icon-button-size: 36px}rt-icon-button .rt-icon-button{position:relative;display:inline-flex;width:var(--rt-icon-button-size);height:var(--rt-icon-button-size);align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--rt-icon-button-color, var(--rt-color-text-primary));cursor:pointer;transition:background-color var(--rt-duration-fast) ease}rt-icon-button .rt-icon-button--sm{--rt-icon-button-size: 28px}rt-icon-button .rt-icon-button--md{--rt-icon-button-size: 36px}rt-icon-button .rt-icon-button--lg{--rt-icon-button-size: 44px}rt-icon-button .rt-icon-button--xl{--rt-icon-button-size: 52px}rt-icon-button .rt-icon-button--2xl{--rt-icon-button-size: 60px}rt-icon-button .rt-icon-button--circle{border-radius:var(--rt-radius-full)}rt-icon-button .rt-icon-button--square{border-radius:var(--rt-radius-md)}rt-icon-button .rt-icon-button--ghost:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--ghost.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--primary{background-color:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}rt-icon-button .rt-icon-button--primary:hover:not(:disabled){background-color:var(--rt-color-action-primary-hover)}rt-icon-button .rt-icon-button--secondary{background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-primary)}rt-icon-button .rt-icon-button--secondary:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--danger{color:var(--rt-color-state-danger)}rt-icon-button .rt-icon-button--danger:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--danger.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--success{color:var(--rt-color-state-success)}rt-icon-button .rt-icon-button--success:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--success.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--warning{color:var(--rt-color-state-warning)}rt-icon-button .rt-icon-button--warning:hover:not(:disabled){background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button--warning.rt-icon-button--active{background-color:var(--rt-icon-button-color-bg-hover)}rt-icon-button .rt-icon-button:disabled{cursor:not-allowed;opacity:.5}rt-icon-button .rt-icon-button:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}rt-icon-button .rt-icon-button__spinner{--rt-icon-button-spin-duration: 1s;animation:rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite}rt-icon-button .rt-icon-button__indicator{position:absolute;width:8px;height:8px;border-radius:var(--rt-radius-full);background:var(--rt-color-state-danger);inset-block-start:-2px;inset-inline-end:-2px;pointer-events:none}@keyframes rt-icon-button-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 const BEM_BLOCK$1f = 'rt-skeleton';
@@ -1120,7 +1123,13 @@ class RtSkeletonComponent {
         ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         this.height = input(this.#sizeMap.sm, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-        this.borderRadius = input('xl', /* @ts-ignore */
+        /**
+         * Скругление. `null` — «не задано»: прямоугольник берёт `xl`, квадрат —
+         * `sm` (пилюля из квадрата не квадрат). Умолчанием нельзя было держать сам
+         * `xl`: тогда явный `xl` неотличим от невыставленного, и квадрату
+         * приходилось прибивать `sm` жёстко — вход у него молча пропадал.
+         */
+        this.borderRadius = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
         this.animation = input(true, { ...(ngDevMode ? { debugName: "animation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
@@ -1168,15 +1177,16 @@ class RtSkeletonComponent {
         }
     }
     get hostBorderRadius() {
-        switch (this.shape()) {
-            case 'circle':
-                return '50%';
-            case 'square':
-                return this.#radiusMap.sm;
-            case 'rectangle':
-            default:
-                return this.#radiusMap[this.borderRadius()];
+        // Круг задаётся именно скруглением, поэтому вход к нему не применяется:
+        // любое другое значение перестало бы быть кругом.
+        if (this.shape() === 'circle') {
+            return '50%';
         }
+        const requested = this.borderRadius();
+        if (requested !== null) {
+            return this.#radiusMap[requested];
+        }
+        return this.shape() === 'square' ? this.#radiusMap.sm : this.#radiusMap.xl;
     }
     #getSizeValue() {
         return this.#sizeMap[this.size()];
@@ -1244,19 +1254,20 @@ class RtSkeletonWrapperComponent {
         ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
         this.size = input('md', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.borderRadius = input('xl', /* @ts-ignore */
+        /** Как у `rt-skeleton`: `null` — «по фигуре», а не «без скругления». */
+        this.borderRadius = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
         this.animation = input(true, { ...(ngDevMode ? { debugName: "animation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isLoading = input(false, { ...(ngDevMode ? { debugName: "isLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSkeletonWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtSkeletonWrapperComponent, isStandalone: true, selector: "rt-skeleton-wrapper", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-skeleton-wrapper" }, ngImport: i0, template: "@if (isLoading()) {\n    <rt-skeleton\n        qa-dataid=\"skeleton-wrapper-placeholder\"\n        [width]=\"width()\"\n        [height]=\"height()\"\n        [shape]=\"shape()\"\n        [size]=\"size()\"\n        [borderRadius]=\"borderRadius()\"\n        [animation]=\"animation()\" />\n} @else {\n    <ng-content />\n}\n", styles: [":host{display:inline-flex;width:100%}\n"], dependencies: [{ kind: "component", type: RtSkeletonComponent, selector: "rt-skeleton", inputs: ["shape", "size", "width", "height", "borderRadius", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtSkeletonWrapperComponent, isStandalone: true, selector: "rt-skeleton-wrapper", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-skeleton-wrapper" }, ngImport: i0, template: "@if (isLoading()) {\n    <rt-skeleton\n        qa-dataid=\"skeleton-wrapper-placeholder\"\n        [width]=\"width()\"\n        [height]=\"height()\"\n        [shape]=\"shape()\"\n        [size]=\"size()\"\n        [borderRadius]=\"borderRadius()\"\n        [animation]=\"animation()\" />\n} @else {\n    <ng-content />\n}\n", styles: ["@charset \"UTF-8\";.rt-skeleton-wrapper{display:inline-flex;width:100%}\n"], dependencies: [{ kind: "component", type: RtSkeletonComponent, selector: "rt-skeleton", inputs: ["shape", "size", "width", "height", "borderRadius", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSkeletonWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rt-skeleton-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtSkeletonComponent], host: {
                         class: BEM_BLOCK$1e,
-                    }, template: "@if (isLoading()) {\n    <rt-skeleton\n        qa-dataid=\"skeleton-wrapper-placeholder\"\n        [width]=\"width()\"\n        [height]=\"height()\"\n        [shape]=\"shape()\"\n        [size]=\"size()\"\n        [borderRadius]=\"borderRadius()\"\n        [animation]=\"animation()\" />\n} @else {\n    <ng-content />\n}\n", styles: [":host{display:inline-flex;width:100%}\n"] }]
+                    }, template: "@if (isLoading()) {\n    <rt-skeleton\n        qa-dataid=\"skeleton-wrapper-placeholder\"\n        [width]=\"width()\"\n        [height]=\"height()\"\n        [shape]=\"shape()\"\n        [size]=\"size()\"\n        [borderRadius]=\"borderRadius()\"\n        [animation]=\"animation()\" />\n} @else {\n    <ng-content />\n}\n", styles: ["@charset \"UTF-8\";.rt-skeleton-wrapper{display:inline-flex;width:100%}\n"] }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }] } });
 
 /**
@@ -1426,13 +1437,13 @@ class RtTagComponent {
         this.closed.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtTagComponent, isStandalone: true, selector: "rt-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "rt-tag" }, ngImport: i0, template: "<span\n    rtBlock=\"rt-tag\"\n    qa-dataid=\"tag\"\n    [attr.data-severity]=\"severity()\"\n    [rtMod]=\"{\n        severity: severity(),\n        shape: shape(),\n        appearance: appearance(),\n        radius: radius(),\n        closable: closable(),\n    }\">\n    @if (icon(); as iconName) {\n        <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"iconName\" />\n    }\n    <span rtElem=\"text\" qa-dataid=\"tag-text\">{{ value() }}</span>\n    @if (iconEnd(); as iconEndName) {\n        <rt-icon rtElem=\"icon-end\" size=\"sm\" [name]=\"iconEndName\" />\n    }\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"tag-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            shape=\"circle\"\n            [ariaLabel]=\"'rtKit.uiRemove' | transloco\"\n            (clicked)=\"onClose($event)\" />\n    }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}:host .rt-tag{display:inline-flex;align-items:center;padding:var(--rt-space-1) var(--rt-space-2);border-radius:var(--rt-radius-md);background:var(--rt-neutral-100);color:var(--rt-neutral-700);font-size:var(--rt-text-sm);gap:var(--rt-space-1);line-height:var(--rt-leading-tight)}:host .rt-tag--shape--pill{border-radius:var(--rt-radius-full)}:host .rt-tag--shape--square{border-radius:var(--rt-radius-sm)}:host .rt-tag--radius--none{border-radius:var(--rt-radius-none)}:host .rt-tag--radius--sm{border-radius:var(--rt-radius-sm)}:host .rt-tag--radius--md{border-radius:var(--rt-radius-md)}:host .rt-tag--radius--lg{border-radius:var(--rt-radius-lg)}:host .rt-tag--radius--full{border-radius:var(--rt-radius-full)}:host .rt-tag--severity--info{background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info)}:host .rt-tag--severity--success{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}:host .rt-tag--severity--warning{background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning)}:host .rt-tag--severity--danger{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}:host .rt-tag--severity--secondary,:host .rt-tag--severity--neutral{background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary)}:host .rt-tag--appearance--outlined{border:var(--rt-border-width-thin) solid currentcolor;background:transparent}:host .rt-tag__icon{flex-shrink:0}:host .rt-tag__icon-end{flex-shrink:0}:host .rt-tag__text{line-height:var(--rt-leading-none)}:host .rt-tag__close{margin-inline-start:var(--rt-space-0-5)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtTagComponent, isStandalone: true, selector: "rt-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "rt-tag" }, ngImport: i0, template: "<span\n    rtBlock=\"rt-tag\"\n    qa-dataid=\"tag\"\n    [attr.data-severity]=\"severity()\"\n    [rtMod]=\"{\n        severity: severity(),\n        shape: shape(),\n        appearance: appearance(),\n        radius: radius(),\n        closable: closable(),\n    }\">\n    @if (icon(); as iconName) {\n        <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"iconName\" />\n    }\n    <span rtElem=\"text\" qa-dataid=\"tag-text\">{{ value() }}</span>\n    @if (iconEnd(); as iconEndName) {\n        <rt-icon rtElem=\"icon-end\" size=\"sm\" [name]=\"iconEndName\" />\n    }\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"tag-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            shape=\"circle\"\n            [ariaLabel]=\"'rtKit.uiRemove' | transloco\"\n            (clicked)=\"onClose($event)\" />\n    }\n</span>\n", styles: ["@charset \"UTF-8\";rt-tag{display:inline-flex}rt-tag .rt-tag{display:inline-flex;align-items:center;padding:var(--rt-space-1) var(--rt-space-2);border-radius:var(--rt-radius-md);background:var(--rt-neutral-100);color:var(--rt-neutral-700);font-size:var(--rt-text-sm);gap:var(--rt-space-1);line-height:var(--rt-leading-tight)}rt-tag .rt-tag--shape--pill{border-radius:var(--rt-radius-full)}rt-tag .rt-tag--shape--square{border-radius:var(--rt-radius-sm)}rt-tag .rt-tag--radius--none{border-radius:var(--rt-radius-none)}rt-tag .rt-tag--radius--sm{border-radius:var(--rt-radius-sm)}rt-tag .rt-tag--radius--md{border-radius:var(--rt-radius-md)}rt-tag .rt-tag--radius--lg{border-radius:var(--rt-radius-lg)}rt-tag .rt-tag--radius--full{border-radius:var(--rt-radius-full)}rt-tag .rt-tag--severity--info{background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info)}rt-tag .rt-tag--severity--success{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-tag .rt-tag--severity--warning{background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning)}rt-tag .rt-tag--severity--danger{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-tag .rt-tag--severity--secondary,rt-tag .rt-tag--severity--neutral{background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary)}rt-tag .rt-tag--appearance--outlined{border:var(--rt-border-width-thin) solid currentcolor;background:transparent}rt-tag .rt-tag__icon{flex-shrink:0}rt-tag .rt-tag__icon-end{flex-shrink:0}rt-tag .rt-tag__text{line-height:var(--rt-leading-none)}rt-tag .rt-tag__close{margin-inline-start:var(--rt-space-0-5)}\n"], dependencies: [{ kind: "component", type: 
                 // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-tag', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-tag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtIconComponent,
                         RtIconButtonComponent,
@@ -1442,7 +1453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         TranslocoPipe,
                     ], host: {
                         class: BEM_BLOCK$1d,
-                    }, template: "<span\n    rtBlock=\"rt-tag\"\n    qa-dataid=\"tag\"\n    [attr.data-severity]=\"severity()\"\n    [rtMod]=\"{\n        severity: severity(),\n        shape: shape(),\n        appearance: appearance(),\n        radius: radius(),\n        closable: closable(),\n    }\">\n    @if (icon(); as iconName) {\n        <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"iconName\" />\n    }\n    <span rtElem=\"text\" qa-dataid=\"tag-text\">{{ value() }}</span>\n    @if (iconEnd(); as iconEndName) {\n        <rt-icon rtElem=\"icon-end\" size=\"sm\" [name]=\"iconEndName\" />\n    }\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"tag-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            shape=\"circle\"\n            [ariaLabel]=\"'rtKit.uiRemove' | transloco\"\n            (clicked)=\"onClose($event)\" />\n    }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}:host .rt-tag{display:inline-flex;align-items:center;padding:var(--rt-space-1) var(--rt-space-2);border-radius:var(--rt-radius-md);background:var(--rt-neutral-100);color:var(--rt-neutral-700);font-size:var(--rt-text-sm);gap:var(--rt-space-1);line-height:var(--rt-leading-tight)}:host .rt-tag--shape--pill{border-radius:var(--rt-radius-full)}:host .rt-tag--shape--square{border-radius:var(--rt-radius-sm)}:host .rt-tag--radius--none{border-radius:var(--rt-radius-none)}:host .rt-tag--radius--sm{border-radius:var(--rt-radius-sm)}:host .rt-tag--radius--md{border-radius:var(--rt-radius-md)}:host .rt-tag--radius--lg{border-radius:var(--rt-radius-lg)}:host .rt-tag--radius--full{border-radius:var(--rt-radius-full)}:host .rt-tag--severity--info{background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info)}:host .rt-tag--severity--success{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}:host .rt-tag--severity--warning{background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning)}:host .rt-tag--severity--danger{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}:host .rt-tag--severity--secondary,:host .rt-tag--severity--neutral{background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary)}:host .rt-tag--appearance--outlined{border:var(--rt-border-width-thin) solid currentcolor;background:transparent}:host .rt-tag__icon{flex-shrink:0}:host .rt-tag__icon-end{flex-shrink:0}:host .rt-tag__text{line-height:var(--rt-leading-none)}:host .rt-tag__close{margin-inline-start:var(--rt-space-0-5)}\n"] }]
+                    }, template: "<span\n    rtBlock=\"rt-tag\"\n    qa-dataid=\"tag\"\n    [attr.data-severity]=\"severity()\"\n    [rtMod]=\"{\n        severity: severity(),\n        shape: shape(),\n        appearance: appearance(),\n        radius: radius(),\n        closable: closable(),\n    }\">\n    @if (icon(); as iconName) {\n        <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"iconName\" />\n    }\n    <span rtElem=\"text\" qa-dataid=\"tag-text\">{{ value() }}</span>\n    @if (iconEnd(); as iconEndName) {\n        <rt-icon rtElem=\"icon-end\" size=\"sm\" [name]=\"iconEndName\" />\n    }\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"tag-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            shape=\"circle\"\n            [ariaLabel]=\"'rtKit.uiRemove' | transloco\"\n            (clicked)=\"onClose($event)\" />\n    }\n</span>\n", styles: ["@charset \"UTF-8\";rt-tag{display:inline-flex}rt-tag .rt-tag{display:inline-flex;align-items:center;padding:var(--rt-space-1) var(--rt-space-2);border-radius:var(--rt-radius-md);background:var(--rt-neutral-100);color:var(--rt-neutral-700);font-size:var(--rt-text-sm);gap:var(--rt-space-1);line-height:var(--rt-leading-tight)}rt-tag .rt-tag--shape--pill{border-radius:var(--rt-radius-full)}rt-tag .rt-tag--shape--square{border-radius:var(--rt-radius-sm)}rt-tag .rt-tag--radius--none{border-radius:var(--rt-radius-none)}rt-tag .rt-tag--radius--sm{border-radius:var(--rt-radius-sm)}rt-tag .rt-tag--radius--md{border-radius:var(--rt-radius-md)}rt-tag .rt-tag--radius--lg{border-radius:var(--rt-radius-lg)}rt-tag .rt-tag--radius--full{border-radius:var(--rt-radius-full)}rt-tag .rt-tag--severity--info{background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info)}rt-tag .rt-tag--severity--success{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-tag .rt-tag--severity--warning{background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning)}rt-tag .rt-tag--severity--danger{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-tag .rt-tag--severity--secondary,rt-tag .rt-tag--severity--neutral{background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary)}rt-tag .rt-tag--appearance--outlined{border:var(--rt-border-width-thin) solid currentcolor;background:transparent}rt-tag .rt-tag__icon{flex-shrink:0}rt-tag .rt-tag__icon-end{flex-shrink:0}rt-tag .rt-tag__text{line-height:var(--rt-leading-none)}rt-tag .rt-tag__close{margin-inline-start:var(--rt-space-0-5)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const BEM_BLOCK$1c = 'rt-aside-header';
@@ -1609,7 +1620,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * - self-injected `NgControl` + ручная привязка `valueAccessor` (без
  *   `NG_VALUE_ACCESSOR` provider — иначе NG0200 cycle при self-reference),
  *   что даёт доступ к `control.invalid/touched` для авто-подсветки ошибки;
- * - сигнал значения `value`, состояния `isDisabled`/`isInvalid`;
+ * - сигнал значения `value`, состояния `isDisabled`/`isInvalid` (отключение
+ *   складывается из входа `disabled` и слова формы — см. `isDisabled`);
  * - общие инпуты `size`/`disabled`/`controlId`/`ariaLabel`/`clearable`;
  * - оркестрацию очистки (`clear`) через абстрактные хуки конкретного поля.
  *
@@ -1628,6 +1640,8 @@ class RtFormControlBase {
     #readonlyAssigned;
     #errors;
     #required;
+    /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+    #disabledByForm;
     constructor() {
         this.#ngControl = inject(NgControl, { self: true, optional: true });
         this.#destroyRef = inject(DestroyRef);
@@ -1643,7 +1657,17 @@ class RtFormControlBase {
         ...(ngDevMode ? [{ debugName: "#errors" }] : /* istanbul ignore next */ []));
         this.#required = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#required" }] : /* istanbul ignore next */ []));
-        this.isDisabled = signal(false, /* @ts-ignore */
+        /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+        this.#disabledByForm = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []));
+        /**
+         * Отключение: вход и форма — два независимых источника, поле отключено,
+         * если так сказал любой из них. Сводить их в один signal нельзя: форма
+         * зовёт `setDisabledState` при связывании контрола, то есть раньше, чем
+         * поле впервые обновит своё вью, и мирроринг входа затирал бы её слово —
+         * контрол, созданный отключённым, оказывался бы редактируемым.
+         */
+        this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.isInvalid = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
@@ -1684,10 +1708,6 @@ class RtFormControlBase {
         if (this.#ngControl !== null) {
             this.#ngControl.valueAccessor = this;
         }
-        // Signal-input `disabled` → внутренний isDisabled (CVA пишет туда же).
-        effect(() => {
-            this.isDisabled.set(this.disabled());
-        });
     }
     ngOnInit() {
         const control = this.#ngControl?.control ?? null;
@@ -1711,7 +1731,7 @@ class RtFormControlBase {
         this.#onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.isDisabled.set(isDisabled);
+        this.#disabledByForm.set(isDisabled);
     }
     /** Назначить авто-id (rt-field), когда у контрола нет явного controlId. */
     assignControlId(id) {
@@ -2258,20 +2278,20 @@ class RtBarListComponent {
     }
     #t_uiNoData;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtBarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtBarListComponent, isStandalone: true, selector: "rt-bar-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-bar-list" }, ngImport: i0, template: "<section rtBlock=\"rt-bar-list\" qa-dataid=\"bar-list\">\n    @if (title()) {\n        <h3 rtElem=\"title\" qa-dataid=\"bar-list-title\">{{ title() }}</h3>\n    }\n\n    @if (rows().length > 0) {\n        <ul rtElem=\"rows\" qa-dataid=\"bar-list-rows\">\n            @for (row of rows(); track row.id) {\n                <li rtElem=\"row\" qa-dataid=\"bar-list-row\" [attr.data-id]=\"row.id\">\n                    <span rtElem=\"row-head\">\n                        <span rtElem=\"row-title\" qa-dataid=\"bar-list-row-title\">{{ row.title }}</span>\n                        <span rtElem=\"row-value\" qa-dataid=\"bar-list-row-value\">{{ row.value }}</span>\n                    </span>\n                    @if (row.meta) {\n                        <span rtElem=\"row-meta\" qa-dataid=\"bar-list-row-meta\">{{ row.meta }}</span>\n                    }\n                    <span rtElem=\"track\">\n                        <span rtElem=\"fill\" qa-dataid=\"bar-list-row-fill\" [style.width.%]=\"row.sharePercent\"></span>\n                    </span>\n                </li>\n            }\n        </ul>\n    } @else {\n        <div rtElem=\"empty\" qa-dataid=\"bar-list-empty\">\n            <rt-icon name=\"warning\" size=\"md\" color=\"muted\" />\n            <p rtElem=\"empty-text\" qa-dataid=\"bar-list-empty-text\">{{ emptyMessage() }}</p>\n        </div>\n    }\n</section>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-bar-list{display:flex;flex-direction:column;gap:var(--rt-space-2)}:host .rt-bar-list__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}:host .rt-bar-list__rows{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--rt-space-5);list-style:none}:host .rt-bar-list__row{display:flex;min-width:0;flex-direction:column;gap:var(--rt-space-1-5)}:host .rt-bar-list__row-head{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-3);line-height:var(--rt-leading-tight)}:host .rt-bar-list__row-title{overflow:hidden;color:var(--rt-color-text-primary);text-overflow:ellipsis;white-space:nowrap}:host .rt-bar-list__row-value{flex:0 0 auto;color:var(--rt-color-text-primary)}:host .rt-bar-list__row-meta{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}:host .rt-bar-list__track{display:block;height:6px;border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface-subtle)}:host .rt-bar-list__fill{display:block;min-width:2px;height:100%;border-radius:var(--rt-radius-sm);background:var(--rt-color-action-primary)}:host .rt-bar-list__empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-lg) 0;gap:var(--rt-space-2-5)}:host .rt-bar-list__empty-text{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtBarListComponent, isStandalone: true, selector: "rt-bar-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-bar-list" }, ngImport: i0, template: "<section rtBlock=\"rt-bar-list\" qa-dataid=\"bar-list\">\n    @if (title()) {\n        <h3 rtElem=\"title\" qa-dataid=\"bar-list-title\">{{ title() }}</h3>\n    }\n\n    @if (rows().length > 0) {\n        <ul rtElem=\"rows\" qa-dataid=\"bar-list-rows\">\n            @for (row of rows(); track row.id) {\n                <li rtElem=\"row\" qa-dataid=\"bar-list-row\" [attr.data-id]=\"row.id\">\n                    <span rtElem=\"row-head\">\n                        <span rtElem=\"row-title\" qa-dataid=\"bar-list-row-title\">{{ row.title }}</span>\n                        <span rtElem=\"row-value\" qa-dataid=\"bar-list-row-value\">{{ row.value }}</span>\n                    </span>\n                    @if (row.meta) {\n                        <span rtElem=\"row-meta\" qa-dataid=\"bar-list-row-meta\">{{ row.meta }}</span>\n                    }\n                    <span rtElem=\"track\">\n                        <span rtElem=\"fill\" qa-dataid=\"bar-list-row-fill\" [style.width.%]=\"row.sharePercent\"></span>\n                    </span>\n                </li>\n            }\n        </ul>\n    } @else {\n        <div rtElem=\"empty\" qa-dataid=\"bar-list-empty\">\n            <rt-icon name=\"warning\" size=\"md\" color=\"muted\" />\n            <p rtElem=\"empty-text\" qa-dataid=\"bar-list-empty-text\">{{ emptyMessage() }}</p>\n        </div>\n    }\n</section>\n", styles: ["@charset \"UTF-8\";rt-bar-list{display:block}rt-bar-list .rt-bar-list{display:flex;flex-direction:column;gap:var(--rt-space-2)}rt-bar-list .rt-bar-list__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}rt-bar-list .rt-bar-list__rows{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--rt-space-5);list-style:none}rt-bar-list .rt-bar-list__row{display:flex;min-width:0;flex-direction:column;gap:var(--rt-space-1-5)}rt-bar-list .rt-bar-list__row-head{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-3);line-height:var(--rt-leading-tight)}rt-bar-list .rt-bar-list__row-title{overflow:hidden;color:var(--rt-color-text-primary);text-overflow:ellipsis;white-space:nowrap}rt-bar-list .rt-bar-list__row-value{flex:0 0 auto;color:var(--rt-color-text-primary)}rt-bar-list .rt-bar-list__row-meta{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}rt-bar-list .rt-bar-list__track{display:block;height:6px;border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface-subtle)}rt-bar-list .rt-bar-list__fill{display:block;min-width:2px;height:100%;border-radius:var(--rt-radius-sm);background:var(--rt-color-action-primary)}rt-bar-list .rt-bar-list__empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-lg) 0;gap:var(--rt-space-2-5)}rt-bar-list .rt-bar-list__empty-text{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}\n"], dependencies: [{ kind: "component", type: 
                 // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtBarListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-bar-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-bar-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtIconComponent,
                         BlockDirective,
                         ElemDirective,
                     ], host: {
                         class: BEM_BLOCK$18,
-                    }, template: "<section rtBlock=\"rt-bar-list\" qa-dataid=\"bar-list\">\n    @if (title()) {\n        <h3 rtElem=\"title\" qa-dataid=\"bar-list-title\">{{ title() }}</h3>\n    }\n\n    @if (rows().length > 0) {\n        <ul rtElem=\"rows\" qa-dataid=\"bar-list-rows\">\n            @for (row of rows(); track row.id) {\n                <li rtElem=\"row\" qa-dataid=\"bar-list-row\" [attr.data-id]=\"row.id\">\n                    <span rtElem=\"row-head\">\n                        <span rtElem=\"row-title\" qa-dataid=\"bar-list-row-title\">{{ row.title }}</span>\n                        <span rtElem=\"row-value\" qa-dataid=\"bar-list-row-value\">{{ row.value }}</span>\n                    </span>\n                    @if (row.meta) {\n                        <span rtElem=\"row-meta\" qa-dataid=\"bar-list-row-meta\">{{ row.meta }}</span>\n                    }\n                    <span rtElem=\"track\">\n                        <span rtElem=\"fill\" qa-dataid=\"bar-list-row-fill\" [style.width.%]=\"row.sharePercent\"></span>\n                    </span>\n                </li>\n            }\n        </ul>\n    } @else {\n        <div rtElem=\"empty\" qa-dataid=\"bar-list-empty\">\n            <rt-icon name=\"warning\" size=\"md\" color=\"muted\" />\n            <p rtElem=\"empty-text\" qa-dataid=\"bar-list-empty-text\">{{ emptyMessage() }}</p>\n        </div>\n    }\n</section>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-bar-list{display:flex;flex-direction:column;gap:var(--rt-space-2)}:host .rt-bar-list__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}:host .rt-bar-list__rows{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--rt-space-5);list-style:none}:host .rt-bar-list__row{display:flex;min-width:0;flex-direction:column;gap:var(--rt-space-1-5)}:host .rt-bar-list__row-head{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-3);line-height:var(--rt-leading-tight)}:host .rt-bar-list__row-title{overflow:hidden;color:var(--rt-color-text-primary);text-overflow:ellipsis;white-space:nowrap}:host .rt-bar-list__row-value{flex:0 0 auto;color:var(--rt-color-text-primary)}:host .rt-bar-list__row-meta{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}:host .rt-bar-list__track{display:block;height:6px;border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface-subtle)}:host .rt-bar-list__fill{display:block;min-width:2px;height:100%;border-radius:var(--rt-radius-sm);background:var(--rt-color-action-primary)}:host .rt-bar-list__empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-lg) 0;gap:var(--rt-space-2-5)}:host .rt-bar-list__empty-text{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}\n"] }]
+                    }, template: "<section rtBlock=\"rt-bar-list\" qa-dataid=\"bar-list\">\n    @if (title()) {\n        <h3 rtElem=\"title\" qa-dataid=\"bar-list-title\">{{ title() }}</h3>\n    }\n\n    @if (rows().length > 0) {\n        <ul rtElem=\"rows\" qa-dataid=\"bar-list-rows\">\n            @for (row of rows(); track row.id) {\n                <li rtElem=\"row\" qa-dataid=\"bar-list-row\" [attr.data-id]=\"row.id\">\n                    <span rtElem=\"row-head\">\n                        <span rtElem=\"row-title\" qa-dataid=\"bar-list-row-title\">{{ row.title }}</span>\n                        <span rtElem=\"row-value\" qa-dataid=\"bar-list-row-value\">{{ row.value }}</span>\n                    </span>\n                    @if (row.meta) {\n                        <span rtElem=\"row-meta\" qa-dataid=\"bar-list-row-meta\">{{ row.meta }}</span>\n                    }\n                    <span rtElem=\"track\">\n                        <span rtElem=\"fill\" qa-dataid=\"bar-list-row-fill\" [style.width.%]=\"row.sharePercent\"></span>\n                    </span>\n                </li>\n            }\n        </ul>\n    } @else {\n        <div rtElem=\"empty\" qa-dataid=\"bar-list-empty\">\n            <rt-icon name=\"warning\" size=\"md\" color=\"muted\" />\n            <p rtElem=\"empty-text\" qa-dataid=\"bar-list-empty-text\">{{ emptyMessage() }}</p>\n        </div>\n    }\n</section>\n", styles: ["@charset \"UTF-8\";rt-bar-list{display:block}rt-bar-list .rt-bar-list{display:flex;flex-direction:column;gap:var(--rt-space-2)}rt-bar-list .rt-bar-list__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}rt-bar-list .rt-bar-list__rows{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--rt-space-5);list-style:none}rt-bar-list .rt-bar-list__row{display:flex;min-width:0;flex-direction:column;gap:var(--rt-space-1-5)}rt-bar-list .rt-bar-list__row-head{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-3);line-height:var(--rt-leading-tight)}rt-bar-list .rt-bar-list__row-title{overflow:hidden;color:var(--rt-color-text-primary);text-overflow:ellipsis;white-space:nowrap}rt-bar-list .rt-bar-list__row-value{flex:0 0 auto;color:var(--rt-color-text-primary)}rt-bar-list .rt-bar-list__row-meta{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}rt-bar-list .rt-bar-list__track{display:block;height:6px;border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface-subtle)}rt-bar-list .rt-bar-list__fill{display:block;min-width:2px;height:100%;border-radius:var(--rt-radius-sm);background:var(--rt-color-action-primary)}rt-bar-list .rt-bar-list__empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-lg) 0;gap:var(--rt-space-2-5)}rt-bar-list .rt-bar-list__empty-text{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}\n"] }]
         }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }] } });
 
 const DRAG_DISMISS_THRESHOLD_PX = 80;
@@ -2324,15 +2344,15 @@ class RtBottomSheetComponent {
         this.dragDeltaY.set(0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtBottomSheetComponent, isStandalone: true, selector: "rt-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "class.rt-bottom-sheet--open": "open()" }, classAttribute: "rt-bottom-sheet" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-bottom-sheet\">\n    <button\n        type=\"button\"\n        rtElem=\"backdrop\"\n        qa-dataid=\"bottom-sheet-backdrop\"\n        [attr.aria-label]=\"'rtKit.bottomSheetClose' | transloco\"\n        (click)=\"dismiss()\"></button>\n    <div\n        rtElem=\"panel\"\n        qa-dataid=\"bottom-sheet-panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [rtMod]=\"{ dragging: dragging() }\"\n        [style.transform]=\"dragging() ? 'translateY(' + dragDeltaY() + 'px)' : null\">\n        <div rtElem=\"handle\" qa-dataid=\"bottom-sheet-handle\" (pointerdown)=\"onDragStart($event)\"></div>\n        <div rtElem=\"header\" qa-dataid=\"bottom-sheet-header\">\n            <ng-content select=\"[sheetHeader]\" />\n        </div>\n        <ng-content />\n    </div>\n</ng-container>\n", styles: [":host{position:fixed;z-index:1000;inset:0;pointer-events:none}:host .rt-bottom-sheet__backdrop{position:absolute;padding:0;border:none;background:var(--rt-overlay-black-50);cursor:pointer;inset:0;opacity:0;transition:opacity var(--rt-duration-base) ease}:host .rt-bottom-sheet__panel{position:absolute;right:0;bottom:0;left:0;display:flex;max-height:80vh;flex-direction:column;border-radius:var(--rt-radius-2xl) var(--rt-radius-2xl) 0 0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card-soft);transform:translateY(100%);transition:transform var(--rt-duration-base) ease}:host .rt-bottom-sheet__panel--dragging{transition:none}:host .rt-bottom-sheet__handle{width:40px;height:4px;align-self:center;border-radius:var(--rt-radius-xs);margin:var(--rt-space-3) 0;background:var(--rt-color-border-default);cursor:grab;touch-action:none}:host .rt-bottom-sheet__header{display:flex;justify-content:center;padding:0 var(--rt-space-5) var(--rt-space-3);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}:host.rt-bottom-sheet--open{pointer-events:auto}:host.rt-bottom-sheet--open .rt-bottom-sheet__backdrop{opacity:1}:host.rt-bottom-sheet--open .rt-bottom-sheet__panel{transform:translateY(0)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtBottomSheetComponent, isStandalone: true, selector: "rt-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "class.rt-bottom-sheet--open": "open()", "attr.inert": "open() ? null : \"\"" }, classAttribute: "rt-bottom-sheet" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-bottom-sheet\">\n    <button\n        type=\"button\"\n        rtElem=\"backdrop\"\n        qa-dataid=\"bottom-sheet-backdrop\"\n        [attr.aria-label]=\"'rtKit.bottomSheetClose' | transloco\"\n        (click)=\"dismiss()\"></button>\n    <div\n        rtElem=\"panel\"\n        qa-dataid=\"bottom-sheet-panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [rtMod]=\"{ dragging: dragging() }\"\n        [style.transform]=\"dragging() ? 'translateY(' + dragDeltaY() + 'px)' : null\">\n        <div rtElem=\"handle\" qa-dataid=\"bottom-sheet-handle\" (pointerdown)=\"onDragStart($event)\"></div>\n        <div rtElem=\"header\" qa-dataid=\"bottom-sheet-header\">\n            <ng-content select=\"[sheetHeader]\" />\n        </div>\n        <ng-content />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-bottom-sheet{position:fixed;z-index:1000;inset:0;pointer-events:none}.rt-bottom-sheet__backdrop{position:absolute;padding:0;border:none;background:var(--rt-overlay-black-50);cursor:pointer;inset:0;opacity:0;transition:opacity var(--rt-duration-base) ease}.rt-bottom-sheet__panel{position:absolute;right:0;bottom:0;left:0;display:flex;max-height:80vh;flex-direction:column;border-radius:var(--rt-radius-2xl) var(--rt-radius-2xl) 0 0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card-soft);transform:translateY(100%);transition:transform var(--rt-duration-base) ease}.rt-bottom-sheet__panel--dragging{transition:none}.rt-bottom-sheet__handle{width:40px;height:4px;align-self:center;border-radius:var(--rt-radius-xs);margin:var(--rt-space-3) 0;background:var(--rt-color-border-default);cursor:grab;touch-action:none}.rt-bottom-sheet__header{display:flex;justify-content:center;padding:0 var(--rt-space-5) var(--rt-space-3);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-bottom-sheet--open{pointer-events:auto}.rt-bottom-sheet--open .rt-bottom-sheet__backdrop{opacity:1}.rt-bottom-sheet--open .rt-bottom-sheet__panel{transform:translateY(0)}\n"], dependencies: [{ kind: "directive", type: 
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: 
                 // transloco
-                TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtBottomSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-bottom-sheet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-bottom-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // rt-tools
                         BlockDirective,
                         ElemDirective,
@@ -2342,10 +2362,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: BEM_BLOCK$17,
                         '[class.rt-bottom-sheet--open]': 'open()',
-                    }, template: "<ng-container rtBlock=\"rt-bottom-sheet\">\n    <button\n        type=\"button\"\n        rtElem=\"backdrop\"\n        qa-dataid=\"bottom-sheet-backdrop\"\n        [attr.aria-label]=\"'rtKit.bottomSheetClose' | transloco\"\n        (click)=\"dismiss()\"></button>\n    <div\n        rtElem=\"panel\"\n        qa-dataid=\"bottom-sheet-panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [rtMod]=\"{ dragging: dragging() }\"\n        [style.transform]=\"dragging() ? 'translateY(' + dragDeltaY() + 'px)' : null\">\n        <div rtElem=\"handle\" qa-dataid=\"bottom-sheet-handle\" (pointerdown)=\"onDragStart($event)\"></div>\n        <div rtElem=\"header\" qa-dataid=\"bottom-sheet-header\">\n            <ng-content select=\"[sheetHeader]\" />\n        </div>\n        <ng-content />\n    </div>\n</ng-container>\n", styles: [":host{position:fixed;z-index:1000;inset:0;pointer-events:none}:host .rt-bottom-sheet__backdrop{position:absolute;padding:0;border:none;background:var(--rt-overlay-black-50);cursor:pointer;inset:0;opacity:0;transition:opacity var(--rt-duration-base) ease}:host .rt-bottom-sheet__panel{position:absolute;right:0;bottom:0;left:0;display:flex;max-height:80vh;flex-direction:column;border-radius:var(--rt-radius-2xl) var(--rt-radius-2xl) 0 0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card-soft);transform:translateY(100%);transition:transform var(--rt-duration-base) ease}:host .rt-bottom-sheet__panel--dragging{transition:none}:host .rt-bottom-sheet__handle{width:40px;height:4px;align-self:center;border-radius:var(--rt-radius-xs);margin:var(--rt-space-3) 0;background:var(--rt-color-border-default);cursor:grab;touch-action:none}:host .rt-bottom-sheet__header{display:flex;justify-content:center;padding:0 var(--rt-space-5) var(--rt-space-3);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}:host.rt-bottom-sheet--open{pointer-events:auto}:host.rt-bottom-sheet--open .rt-bottom-sheet__backdrop{opacity:1}:host.rt-bottom-sheet--open .rt-bottom-sheet__panel{transform:translateY(0)}\n"] }]
+                        // Закрытый лист остаётся в разметке ради анимации, и спрятан он только
+                        // стилями — а `opacity`/`pointer-events` не убирают узел ни из порядка
+                        // табуляции, ни из дерева доступности. Без `inert` страница с закрытым
+                        // листом держала бы в табуляции невидимую кнопку «Закрыть», а
+                        // скринридер объявлял бы модальный диалог, которого не видно.
+                        '[attr.inert]': 'open() ? null : ""',
+                    }, template: "<ng-container rtBlock=\"rt-bottom-sheet\">\n    <button\n        type=\"button\"\n        rtElem=\"backdrop\"\n        qa-dataid=\"bottom-sheet-backdrop\"\n        [attr.aria-label]=\"'rtKit.bottomSheetClose' | transloco\"\n        (click)=\"dismiss()\"></button>\n    <div\n        rtElem=\"panel\"\n        qa-dataid=\"bottom-sheet-panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [rtMod]=\"{ dragging: dragging() }\"\n        [style.transform]=\"dragging() ? 'translateY(' + dragDeltaY() + 'px)' : null\">\n        <div rtElem=\"handle\" qa-dataid=\"bottom-sheet-handle\" (pointerdown)=\"onDragStart($event)\"></div>\n        <div rtElem=\"header\" qa-dataid=\"bottom-sheet-header\">\n            <ng-content select=\"[sheetHeader]\" />\n        </div>\n        <ng-content />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-bottom-sheet{position:fixed;z-index:1000;inset:0;pointer-events:none}.rt-bottom-sheet__backdrop{position:absolute;padding:0;border:none;background:var(--rt-overlay-black-50);cursor:pointer;inset:0;opacity:0;transition:opacity var(--rt-duration-base) ease}.rt-bottom-sheet__panel{position:absolute;right:0;bottom:0;left:0;display:flex;max-height:80vh;flex-direction:column;border-radius:var(--rt-radius-2xl) var(--rt-radius-2xl) 0 0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card-soft);transform:translateY(100%);transition:transform var(--rt-duration-base) ease}.rt-bottom-sheet__panel--dragging{transition:none}.rt-bottom-sheet__handle{width:40px;height:4px;align-self:center;border-radius:var(--rt-radius-xs);margin:var(--rt-space-3) 0;background:var(--rt-color-border-default);cursor:grab;touch-action:none}.rt-bottom-sheet__header{display:flex;justify-content:center;padding:0 var(--rt-space-5) var(--rt-space-3);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-bottom-sheet--open{pointer-events:auto}.rt-bottom-sheet--open .rt-bottom-sheet__backdrop{opacity:1}.rt-bottom-sheet--open .rt-bottom-sheet__panel{transform:translateY(0)}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
 const BEM_BLOCK$16 = 'rt-button';
+/** Длительность затухания спиннера при выходе из загрузки. */
+const LOADING_FADE_OUT_MS = 300;
+/** Запас поверх затухания, после которого подпись возвращается без анимации. */
+const LOADING_FADE_OUT_BUFFER_MS = 50;
 /**
  * Директива стилизованной кнопки. Применяется к `<button>` или `<a>`
  * (для ссылок-кнопок с `routerLink`/`href`).
@@ -2451,17 +2481,32 @@ class RtButtonDirective {
     }
     #transitionFromLoading(button) {
         const spinnerEl = this.#spinnerEl;
-        if (spinnerEl) {
-            spinnerEl.style.animation = 'rt-button-fade-out 0.3s ease-out forwards';
-            spinnerEl.addEventListener('animationend', () => {
-                this.#clearContent(button);
-                this.#renderIconAndLabel(button);
-            }, { once: true });
-        }
-        else {
-            this.#clearContent(button);
-            this.#renderIconAndLabel(button);
+        if (spinnerEl === null) {
+            this.#restoreContent(button);
+            return;
         }
+        spinnerEl.style.animation = `rt-button-fade-out ${LOADING_FADE_OUT_MS}ms ease-out forwards`;
+        // settled-гард делает animationend и страховочный таймаут взаимно
+        // идемпотентными — сработает и снимет listener только то, что раньше.
+        // Без таймаута подпись возвращалась бы только по анимации, а она не
+        // идёт, пока кнопка спрятана (свёрнутая панель, неактивная вкладка):
+        // выход из загрузки не наступал никогда, и на кнопке навсегда
+        // оставался голый спиннер.
+        let settled = false;
+        const finish = () => {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            spinnerEl.removeEventListener('animationend', finish);
+            this.#restoreContent(button);
+        };
+        spinnerEl.addEventListener('animationend', finish);
+        setTimeout(finish, LOADING_FADE_OUT_MS + LOADING_FADE_OUT_BUFFER_MS);
+    }
+    #restoreContent(button) {
+        this.#clearContent(button);
+        this.#renderIconAndLabel(button);
     }
     /**
      * Чистим по классу, а не по своим ссылкам. Под серверным рендером разметку
@@ -2603,15 +2648,15 @@ class RtCalendarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtCalendarComponent, isStandalone: true, selector: "rt-calendar", inputs: { months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: true, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: true, transformFunction: null }, canPrev: { classPropertyName: "canPrev", publicName: "canPrev", isSignal: true, isRequired: false, transformFunction: null }, canNext: { classPropertyName: "canNext", publicName: "canNext", isSignal: true, isRequired: false, transformFunction: null }, prevAriaLabel: { classPropertyName: "prevAriaLabel", publicName: "prevAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextAriaLabel: { classPropertyName: "nextAriaLabel", publicName: "nextAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sublabelsLoading: { classPropertyName: "sublabelsLoading", publicName: "sublabelsLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevMonth: "prevMonth", nextMonth: "nextMonth", dayClick: "dayClick" }, host: { classAttribute: "rt-calendar" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-calendar\">\n    <div rtElem=\"header\">\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-prev-month\"\n            icon=\"chevron-left\"\n            variant=\"secondary\"\n            shape=\"circle\"\n            [ariaLabel]=\"prevAriaLabel()\"\n            [disabled]=\"!canPrev()\"\n            (clicked)=\"prevMonth.emit()\" />\n        <ng-content select=\"[calendarHint]\" />\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-next-month\"\n            icon=\"chevron-right\"\n            variant=\"secondary\"\n            shape=\"circle\"\n            [ariaLabel]=\"nextAriaLabel()\"\n            [disabled]=\"!canNext()\"\n            (clicked)=\"nextMonth.emit()\" />\n    </div>\n\n    <div rtElem=\"months\" qa-dataid=\"calendar-months\">\n        @for (month of months(); track month.key) {\n            <div rtElem=\"month\" qa-dataid=\"calendar-month\">\n                <p rtElem=\"month-title\" qa-dataid=\"calendar-month-title\">{{ month.label }}</p>\n                <div rtElem=\"grid\" qa-dataid=\"calendar-grid\">\n                    @for (weekday of weekdayLabels(); track $index) {\n                        <span rtElem=\"weekday\" qa-dataid=\"calendar-weekday\">{{ weekday }}</span>\n                    }\n                    @for (blank of month.leadingBlanks; track blank) {\n                        <span rtElem=\"blank\"></span>\n                    }\n                    @for (day of month.days; track day.key) {\n                        <button\n                            rtElem=\"day\"\n                            qa-dataid=\"calendar-day\"\n                            type=\"button\"\n                            [attr.data-iso]=\"day.key\"\n                            [attr.data-state]=\"day.state\"\n                            [disabled]=\"day.disabled\"\n                            (click)=\"onDayClick(day)\">\n                            <span rtElem=\"day-num\" qa-dataid=\"calendar-day-num\">{{ day.dayOfMonth }}</span>\n                            @if (sublabelsLoading()) {\n                                <rt-skeleton\n                                    rtElem=\"day-sublabel\"\n                                    qa-dataid=\"calendar-day-price-skeleton\"\n                                    width=\"80%\"\n                                    borderRadius=\"sm\"\n                                    [height]=\"sublabelSkeletonHeight\" />\n                            } @else if (day.sublabel) {\n                                <span rtElem=\"day-sublabel\" qa-dataid=\"calendar-day-price\">{{ day.sublabel }}</span>\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <ng-content />\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-3);gap:var(--rt-space-3)}:host .rt-calendar__nav{flex:0 0 auto}:host .rt-calendar__months{display:grid;gap:var(--rt-space-6);grid-template-columns:repeat(2,1fr)}:host .rt-calendar__month-title{margin:0 0 var(--rt-space-2);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold);text-align:center}:host .rt-calendar__month-title:first-letter{text-transform:uppercase}:host .rt-calendar__grid{display:grid;gap:var(--rt-space-0-5);grid-template-columns:repeat(7,1fr)}:host .rt-calendar__weekday{padding:var(--rt-space-1) 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-align:center}:host .rt-calendar__day{display:flex;flex-direction:column;align-items:center;padding:var(--rt-space-1-5) var(--rt-space-0-5);border:none;border-radius:var(--rt-radius-md);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-0-5)}:host .rt-calendar__day:hover:not(:disabled,[data-state=start],[data-state=end],[data-state=in-range]){background:var(--rt-color-bg-subtle)}:host .rt-calendar__day:disabled{cursor:not-allowed}:host .rt-calendar__day[data-state=past],:host .rt-calendar__day[data-state=blocked]{color:var(--rt-color-text-muted);opacity:.45}:host .rt-calendar__day[data-state=busy]{color:var(--rt-color-text-muted);opacity:.45;text-decoration:line-through}:host .rt-calendar__day[data-state=start],:host .rt-calendar__day[data-state=end]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}:host .rt-calendar__day[data-state=in-range]{background:var(--rt-color-action-primary-soft);color:var(--rt-color-text-link);font-weight:var(--rt-font-weight-semibold)}:host .rt-calendar__day-num{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium)}:host .rt-calendar__day-sublabel{font-size:var(--rt-text-2xs);opacity:.75}@media(width<=640px){:host .rt-calendar__months{grid-template-columns:1fr}:host .rt-calendar__month:last-child{display:none}}@media(width<=374px){:host .rt-calendar__day{padding-inline:0}:host .rt-calendar__day-sublabel{font-size:var(--rt-text-3xs)}}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtCalendarComponent, isStandalone: true, selector: "rt-calendar", inputs: { months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: true, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: true, transformFunction: null }, canPrev: { classPropertyName: "canPrev", publicName: "canPrev", isSignal: true, isRequired: false, transformFunction: null }, canNext: { classPropertyName: "canNext", publicName: "canNext", isSignal: true, isRequired: false, transformFunction: null }, prevAriaLabel: { classPropertyName: "prevAriaLabel", publicName: "prevAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextAriaLabel: { classPropertyName: "nextAriaLabel", publicName: "nextAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sublabelsLoading: { classPropertyName: "sublabelsLoading", publicName: "sublabelsLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevMonth: "prevMonth", nextMonth: "nextMonth", dayClick: "dayClick" }, host: { classAttribute: "rt-calendar" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-calendar\">\n    <div rtElem=\"header\">\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-prev-month\"\n            icon=\"chevron-left\"\n            variant=\"secondary\"\n            shape=\"circle\"\n            [ariaLabel]=\"prevAriaLabel()\"\n            [disabled]=\"!canPrev()\"\n            (clicked)=\"prevMonth.emit()\" />\n        <ng-content select=\"[calendarHint]\" />\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-next-month\"\n            icon=\"chevron-right\"\n            variant=\"secondary\"\n            shape=\"circle\"\n            [ariaLabel]=\"nextAriaLabel()\"\n            [disabled]=\"!canNext()\"\n            (clicked)=\"nextMonth.emit()\" />\n    </div>\n\n    <div rtElem=\"months\" qa-dataid=\"calendar-months\">\n        @for (month of months(); track month.key) {\n            <div rtElem=\"month\" qa-dataid=\"calendar-month\">\n                <p rtElem=\"month-title\" qa-dataid=\"calendar-month-title\">{{ month.label }}</p>\n                <div rtElem=\"grid\" qa-dataid=\"calendar-grid\">\n                    @for (weekday of weekdayLabels(); track $index) {\n                        <span rtElem=\"weekday\" qa-dataid=\"calendar-weekday\">{{ weekday }}</span>\n                    }\n                    @for (blank of month.leadingBlanks; track blank) {\n                        <span rtElem=\"blank\"></span>\n                    }\n                    @for (day of month.days; track day.key) {\n                        <button\n                            rtElem=\"day\"\n                            qa-dataid=\"calendar-day\"\n                            type=\"button\"\n                            [attr.data-iso]=\"day.key\"\n                            [attr.data-state]=\"day.state\"\n                            [disabled]=\"day.disabled\"\n                            (click)=\"onDayClick(day)\">\n                            <span rtElem=\"day-num\" qa-dataid=\"calendar-day-num\">{{ day.dayOfMonth }}</span>\n                            @if (sublabelsLoading()) {\n                                <rt-skeleton\n                                    rtElem=\"day-sublabel\"\n                                    qa-dataid=\"calendar-day-price-skeleton\"\n                                    width=\"80%\"\n                                    borderRadius=\"sm\"\n                                    [height]=\"sublabelSkeletonHeight\" />\n                            } @else if (day.sublabel) {\n                                <span rtElem=\"day-sublabel\" qa-dataid=\"calendar-day-price\">{{ day.sublabel }}</span>\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <ng-content />\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-calendar{display:block}.rt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-3);gap:var(--rt-space-3)}.rt-calendar__nav{flex:0 0 auto}.rt-calendar__months{display:grid;gap:var(--rt-space-6);grid-template-columns:repeat(2,1fr)}.rt-calendar__month-title{margin:0 0 var(--rt-space-2);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold);text-align:center}.rt-calendar__month-title:first-letter{text-transform:uppercase}.rt-calendar__grid{display:grid;gap:var(--rt-space-0-5);grid-template-columns:repeat(7,1fr)}.rt-calendar__weekday{padding:var(--rt-space-1) 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-align:center}.rt-calendar__day{display:flex;flex-direction:column;align-items:center;padding:var(--rt-space-1-5) var(--rt-space-0-5);border:none;border-radius:var(--rt-radius-md);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-0-5)}.rt-calendar__day:hover:not(:disabled,[data-state=start],[data-state=end],[data-state=in-range]){background:var(--rt-color-bg-subtle)}.rt-calendar__day:disabled{cursor:not-allowed}.rt-calendar__day[data-state=past],.rt-calendar__day[data-state=blocked]{color:var(--rt-color-text-muted);opacity:.45}.rt-calendar__day[data-state=busy]{color:var(--rt-color-text-muted);opacity:.45;text-decoration:line-through}.rt-calendar__day[data-state=start],.rt-calendar__day[data-state=end]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-calendar__day[data-state=in-range]{background:var(--rt-color-action-primary-soft);color:var(--rt-color-text-link);font-weight:var(--rt-font-weight-semibold)}.rt-calendar__day-num{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium)}.rt-calendar__day-sublabel{font-size:var(--rt-text-2xs);opacity:.75}@media(width<=640px){.rt-calendar__months{grid-template-columns:1fr}.rt-calendar__month:last-child{display:none}}@media(width<=374px){.rt-calendar__day{padding-inline:0}.rt-calendar__day-sublabel{font-size:var(--rt-text-3xs)}}\n"], dependencies: [{ kind: "directive", type: 
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "component", type: 
                 // components
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtSkeletonComponent, selector: "rt-skeleton", inputs: ["shape", "size", "width", "height", "borderRadius", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtSkeletonComponent, selector: "rt-skeleton", inputs: ["shape", "size", "width", "height", "borderRadius", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-calendar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-calendar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // rt-tools
                         BlockDirective,
                         ElemDirective,
@@ -2620,7 +2665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtSkeletonComponent,
                     ], host: {
                         class: BEM_BLOCK$15,
-                    }, template: "<ng-container rtBlock=\"rt-calendar\">\n    <div rtElem=\"header\">\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-prev-month\"\n            icon=\"chevron-left\"\n            variant=\"secondary\"\n            shape=\"circle\"\n            [ariaLabel]=\"prevAriaLabel()\"\n            [disabled]=\"!canPrev()\"\n            (clicked)=\"prevMonth.emit()\" />\n        <ng-content select=\"[calendarHint]\" />\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-next-month\"\n            icon=\"chevron-right\"\n            variant=\"secondary\"\n            shape=\"circle\"\n            [ariaLabel]=\"nextAriaLabel()\"\n            [disabled]=\"!canNext()\"\n            (clicked)=\"nextMonth.emit()\" />\n    </div>\n\n    <div rtElem=\"months\" qa-dataid=\"calendar-months\">\n        @for (month of months(); track month.key) {\n            <div rtElem=\"month\" qa-dataid=\"calendar-month\">\n                <p rtElem=\"month-title\" qa-dataid=\"calendar-month-title\">{{ month.label }}</p>\n                <div rtElem=\"grid\" qa-dataid=\"calendar-grid\">\n                    @for (weekday of weekdayLabels(); track $index) {\n                        <span rtElem=\"weekday\" qa-dataid=\"calendar-weekday\">{{ weekday }}</span>\n                    }\n                    @for (blank of month.leadingBlanks; track blank) {\n                        <span rtElem=\"blank\"></span>\n                    }\n                    @for (day of month.days; track day.key) {\n                        <button\n                            rtElem=\"day\"\n                            qa-dataid=\"calendar-day\"\n                            type=\"button\"\n                            [attr.data-iso]=\"day.key\"\n                            [attr.data-state]=\"day.state\"\n                            [disabled]=\"day.disabled\"\n                            (click)=\"onDayClick(day)\">\n                            <span rtElem=\"day-num\" qa-dataid=\"calendar-day-num\">{{ day.dayOfMonth }}</span>\n                            @if (sublabelsLoading()) {\n                                <rt-skeleton\n                                    rtElem=\"day-sublabel\"\n                                    qa-dataid=\"calendar-day-price-skeleton\"\n                                    width=\"80%\"\n                                    borderRadius=\"sm\"\n                                    [height]=\"sublabelSkeletonHeight\" />\n                            } @else if (day.sublabel) {\n                                <span rtElem=\"day-sublabel\" qa-dataid=\"calendar-day-price\">{{ day.sublabel }}</span>\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <ng-content />\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-3);gap:var(--rt-space-3)}:host .rt-calendar__nav{flex:0 0 auto}:host .rt-calendar__months{display:grid;gap:var(--rt-space-6);grid-template-columns:repeat(2,1fr)}:host .rt-calendar__month-title{margin:0 0 var(--rt-space-2);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold);text-align:center}:host .rt-calendar__month-title:first-letter{text-transform:uppercase}:host .rt-calendar__grid{display:grid;gap:var(--rt-space-0-5);grid-template-columns:repeat(7,1fr)}:host .rt-calendar__weekday{padding:var(--rt-space-1) 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-align:center}:host .rt-calendar__day{display:flex;flex-direction:column;align-items:center;padding:var(--rt-space-1-5) var(--rt-space-0-5);border:none;border-radius:var(--rt-radius-md);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-0-5)}:host .rt-calendar__day:hover:not(:disabled,[data-state=start],[data-state=end],[data-state=in-range]){background:var(--rt-color-bg-subtle)}:host .rt-calendar__day:disabled{cursor:not-allowed}:host .rt-calendar__day[data-state=past],:host .rt-calendar__day[data-state=blocked]{color:var(--rt-color-text-muted);opacity:.45}:host .rt-calendar__day[data-state=busy]{color:var(--rt-color-text-muted);opacity:.45;text-decoration:line-through}:host .rt-calendar__day[data-state=start],:host .rt-calendar__day[data-state=end]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}:host .rt-calendar__day[data-state=in-range]{background:var(--rt-color-action-primary-soft);color:var(--rt-color-text-link);font-weight:var(--rt-font-weight-semibold)}:host .rt-calendar__day-num{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium)}:host .rt-calendar__day-sublabel{font-size:var(--rt-text-2xs);opacity:.75}@media(width<=640px){:host .rt-calendar__months{grid-template-columns:1fr}:host .rt-calendar__month:last-child{display:none}}@media(width<=374px){:host .rt-calendar__day{padding-inline:0}:host .rt-calendar__day-sublabel{font-size:var(--rt-text-3xs)}}\n"] }]
+                    }, template: "<ng-container rtBlock=\"rt-calendar\">\n    <div rtElem=\"header\">\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-prev-month\"\n            icon=\"chevron-left\"\n            variant=\"secondary\"\n            shape=\"circle\"\n            [ariaLabel]=\"prevAriaLabel()\"\n            [disabled]=\"!canPrev()\"\n            (clicked)=\"prevMonth.emit()\" />\n        <ng-content select=\"[calendarHint]\" />\n        <rt-icon-button\n            rtElem=\"nav\"\n            qa-dataid=\"calendar-next-month\"\n            icon=\"chevron-right\"\n            variant=\"secondary\"\n            shape=\"circle\"\n            [ariaLabel]=\"nextAriaLabel()\"\n            [disabled]=\"!canNext()\"\n            (clicked)=\"nextMonth.emit()\" />\n    </div>\n\n    <div rtElem=\"months\" qa-dataid=\"calendar-months\">\n        @for (month of months(); track month.key) {\n            <div rtElem=\"month\" qa-dataid=\"calendar-month\">\n                <p rtElem=\"month-title\" qa-dataid=\"calendar-month-title\">{{ month.label }}</p>\n                <div rtElem=\"grid\" qa-dataid=\"calendar-grid\">\n                    @for (weekday of weekdayLabels(); track $index) {\n                        <span rtElem=\"weekday\" qa-dataid=\"calendar-weekday\">{{ weekday }}</span>\n                    }\n                    @for (blank of month.leadingBlanks; track blank) {\n                        <span rtElem=\"blank\"></span>\n                    }\n                    @for (day of month.days; track day.key) {\n                        <button\n                            rtElem=\"day\"\n                            qa-dataid=\"calendar-day\"\n                            type=\"button\"\n                            [attr.data-iso]=\"day.key\"\n                            [attr.data-state]=\"day.state\"\n                            [disabled]=\"day.disabled\"\n                            (click)=\"onDayClick(day)\">\n                            <span rtElem=\"day-num\" qa-dataid=\"calendar-day-num\">{{ day.dayOfMonth }}</span>\n                            @if (sublabelsLoading()) {\n                                <rt-skeleton\n                                    rtElem=\"day-sublabel\"\n                                    qa-dataid=\"calendar-day-price-skeleton\"\n                                    width=\"80%\"\n                                    borderRadius=\"sm\"\n                                    [height]=\"sublabelSkeletonHeight\" />\n                            } @else if (day.sublabel) {\n                                <span rtElem=\"day-sublabel\" qa-dataid=\"calendar-day-price\">{{ day.sublabel }}</span>\n                            }\n                        </button>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n\n    <ng-content />\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-calendar{display:block}.rt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--rt-space-3);gap:var(--rt-space-3)}.rt-calendar__nav{flex:0 0 auto}.rt-calendar__months{display:grid;gap:var(--rt-space-6);grid-template-columns:repeat(2,1fr)}.rt-calendar__month-title{margin:0 0 var(--rt-space-2);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold);text-align:center}.rt-calendar__month-title:first-letter{text-transform:uppercase}.rt-calendar__grid{display:grid;gap:var(--rt-space-0-5);grid-template-columns:repeat(7,1fr)}.rt-calendar__weekday{padding:var(--rt-space-1) 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-align:center}.rt-calendar__day{display:flex;flex-direction:column;align-items:center;padding:var(--rt-space-1-5) var(--rt-space-0-5);border:none;border-radius:var(--rt-radius-md);background:none;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;gap:var(--rt-space-0-5)}.rt-calendar__day:hover:not(:disabled,[data-state=start],[data-state=end],[data-state=in-range]){background:var(--rt-color-bg-subtle)}.rt-calendar__day:disabled{cursor:not-allowed}.rt-calendar__day[data-state=past],.rt-calendar__day[data-state=blocked]{color:var(--rt-color-text-muted);opacity:.45}.rt-calendar__day[data-state=busy]{color:var(--rt-color-text-muted);opacity:.45;text-decoration:line-through}.rt-calendar__day[data-state=start],.rt-calendar__day[data-state=end]{background:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary)}.rt-calendar__day[data-state=in-range]{background:var(--rt-color-action-primary-soft);color:var(--rt-color-text-link);font-weight:var(--rt-font-weight-semibold)}.rt-calendar__day-num{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium)}.rt-calendar__day-sublabel{font-size:var(--rt-text-2xs);opacity:.75}@media(width<=640px){.rt-calendar__months{grid-template-columns:1fr}.rt-calendar__month:last-child{display:none}}@media(width<=374px){.rt-calendar__day{padding-inline:0}.rt-calendar__day-sublabel{font-size:var(--rt-text-3xs)}}\n"] }]
         }], propDecorators: { months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: true }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: true }] }], canPrev: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPrev", required: false }] }], canNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "canNext", required: false }] }], prevAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevAriaLabel", required: false }] }], nextAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextAriaLabel", required: false }] }], sublabelsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabelsLoading", required: false }] }], prevMonth: [{ type: i0.Output, args: ["prevMonth"] }], nextMonth: [{ type: i0.Output, args: ["nextMonth"] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }] } });
 
 /**
@@ -2686,20 +2731,20 @@ class RtCardComponent {
         this.cardClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtCardComponent, isStandalone: true, selector: "rt-card", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { classAttribute: "rt-card" }, ngImport: i0, template: "<article\n    rtBlock=\"rt-card\"\n    qa-dataid=\"card\"\n    [rtMod]=\"{ clickable: clickable() }\"\n    [attr.role]=\"clickable() ? 'button' : null\"\n    [attr.tabindex]=\"clickable() ? 0 : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onKeyActivate($event)\"\n    (keydown.space)=\"onKeyActivate($event)\">\n    <header rtElem=\"header\">\n        @if (header(); as h) {\n            <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n        }\n        <ng-content select=\"[rtCardHeader]\" />\n    </header>\n    <div rtElem=\"content\">\n        <ng-content />\n    </div>\n    <footer rtElem=\"footer\">\n        <ng-content select=\"[rtCardFooter]\" />\n    </footer>\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-card{display:block;padding:var(--rt-space-lg);border-radius:var(--rt-radius-xl);background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card);color:var(--rt-color-text-primary)}:host .rt-card--clickable{cursor:pointer;transition:box-shadow var(--rt-duration-fast) ease,transform var(--rt-duration-fast) ease}:host .rt-card--clickable:hover{box-shadow:var(--rt-shadow-lg)}:host .rt-card--clickable:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}:host .rt-card__header{margin-block-end:var(--rt-space-md)}:host .rt-card__header:empty{display:none}:host .rt-card__title{margin:0;font-size:var(--rt-text-lg);line-height:var(--rt-leading-snug)}:host .rt-card__content{display:block}:host .rt-card__footer{margin-block-start:var(--rt-space-md)}:host .rt-card__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtCardComponent, isStandalone: true, selector: "rt-card", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { classAttribute: "rt-card" }, ngImport: i0, template: "<article\n    rtBlock=\"rt-card\"\n    qa-dataid=\"card\"\n    [rtMod]=\"{ clickable: clickable() }\"\n    [attr.role]=\"clickable() ? 'button' : null\"\n    [attr.tabindex]=\"clickable() ? 0 : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onKeyActivate($event)\"\n    (keydown.space)=\"onKeyActivate($event)\">\n    <header rtElem=\"header\">\n        @if (header(); as h) {\n            <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n        }\n        <ng-content select=\"[rtCardHeader]\" />\n    </header>\n    <div rtElem=\"content\">\n        <ng-content />\n    </div>\n    <footer rtElem=\"footer\">\n        <ng-content select=\"[rtCardFooter]\" />\n    </footer>\n</article>\n", styles: ["@charset \"UTF-8\";rt-card{display:block}rt-card .rt-card{display:block;padding:var(--rt-space-lg);border-radius:var(--rt-radius-xl);background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card);color:var(--rt-color-text-primary)}rt-card .rt-card--clickable{cursor:pointer;transition:box-shadow var(--rt-duration-fast) ease,transform var(--rt-duration-fast) ease}rt-card .rt-card--clickable:hover{box-shadow:var(--rt-shadow-lg)}rt-card .rt-card--clickable:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}rt-card .rt-card__header{margin-block-end:var(--rt-space-md)}rt-card .rt-card__header:empty{display:none}rt-card .rt-card__title{margin:0;font-size:var(--rt-text-lg);line-height:var(--rt-leading-snug)}rt-card .rt-card__content{display:block}rt-card .rt-card__footer{margin-block-start:var(--rt-space-md)}rt-card .rt-card__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: 
                 // standalone components / directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         BlockDirective,
                         ElemDirective,
                         ModDirective,
                     ], host: {
                         class: BEM_BLOCK$14,
-                    }, template: "<article\n    rtBlock=\"rt-card\"\n    qa-dataid=\"card\"\n    [rtMod]=\"{ clickable: clickable() }\"\n    [attr.role]=\"clickable() ? 'button' : null\"\n    [attr.tabindex]=\"clickable() ? 0 : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onKeyActivate($event)\"\n    (keydown.space)=\"onKeyActivate($event)\">\n    <header rtElem=\"header\">\n        @if (header(); as h) {\n            <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n        }\n        <ng-content select=\"[rtCardHeader]\" />\n    </header>\n    <div rtElem=\"content\">\n        <ng-content />\n    </div>\n    <footer rtElem=\"footer\">\n        <ng-content select=\"[rtCardFooter]\" />\n    </footer>\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-card{display:block;padding:var(--rt-space-lg);border-radius:var(--rt-radius-xl);background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card);color:var(--rt-color-text-primary)}:host .rt-card--clickable{cursor:pointer;transition:box-shadow var(--rt-duration-fast) ease,transform var(--rt-duration-fast) ease}:host .rt-card--clickable:hover{box-shadow:var(--rt-shadow-lg)}:host .rt-card--clickable:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}:host .rt-card__header{margin-block-end:var(--rt-space-md)}:host .rt-card__header:empty{display:none}:host .rt-card__title{margin:0;font-size:var(--rt-text-lg);line-height:var(--rt-leading-snug)}:host .rt-card__content{display:block}:host .rt-card__footer{margin-block-start:var(--rt-space-md)}:host .rt-card__footer:empty{display:none}\n"] }]
+                    }, template: "<article\n    rtBlock=\"rt-card\"\n    qa-dataid=\"card\"\n    [rtMod]=\"{ clickable: clickable() }\"\n    [attr.role]=\"clickable() ? 'button' : null\"\n    [attr.tabindex]=\"clickable() ? 0 : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"onClick($event)\"\n    (keydown.enter)=\"onKeyActivate($event)\"\n    (keydown.space)=\"onKeyActivate($event)\">\n    <header rtElem=\"header\">\n        @if (header(); as h) {\n            <h3 rtElem=\"title\" qa-dataid=\"card-title\">{{ h }}</h3>\n        }\n        <ng-content select=\"[rtCardHeader]\" />\n    </header>\n    <div rtElem=\"content\">\n        <ng-content />\n    </div>\n    <footer rtElem=\"footer\">\n        <ng-content select=\"[rtCardFooter]\" />\n    </footer>\n</article>\n", styles: ["@charset \"UTF-8\";rt-card{display:block}rt-card .rt-card{display:block;padding:var(--rt-space-lg);border-radius:var(--rt-radius-xl);background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card);color:var(--rt-color-text-primary)}rt-card .rt-card--clickable{cursor:pointer;transition:box-shadow var(--rt-duration-fast) ease,transform var(--rt-duration-fast) ease}rt-card .rt-card--clickable:hover{box-shadow:var(--rt-shadow-lg)}rt-card .rt-card--clickable:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}rt-card .rt-card__header{margin-block-end:var(--rt-space-md)}rt-card .rt-card__header:empty{display:none}rt-card .rt-card__title{margin:0;font-size:var(--rt-text-lg);line-height:var(--rt-leading-snug)}rt-card .rt-card__content{display:block}rt-card .rt-card__footer{margin-block-start:var(--rt-space-md)}rt-card .rt-card__footer:empty{display:none}\n"] }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
 
 /**
@@ -4687,10 +4732,12 @@ const BEM_BLOCK$V = 'rt-checkbox';
  * `useExisting: forwardRef(...)` — `useClass` на self-reference вызывает
  * NG0200 cycle при boot'е.
  *
- * Source-of-truth для disabled — внутренний `isDisabled` signal: и signal-input
- * `disabled`, и CVA `setDisabledState` пишут в один и тот же signal (input —
- * через `effect()`, CVA — напрямую), так `[disabled]="true"` и
- * `FormControl.disable()` ведут себя одинаково.
+ * Отключение складывается из двух независимых источников: входа `disabled` и
+ * слова формы (CVA `setDisabledState`). Отключено, если так сказал любой из
+ * них. Сводить их в один signal нельзя: форма зовёт `setDisabledState` при
+ * связывании контрола, то есть раньше, чем чекбокс впервые обновит своё вью,
+ * и мирроринг входа затирал бы её слово — контрол, созданный отключённым,
+ * оказывался бы кликабельным.
  *
  * `indeterminate` — чисто визуальное mixed-состояние; клик по нему разрешается
  * в `true` (стандартное поведение tri-state чекбокса).
@@ -4698,14 +4745,15 @@ const BEM_BLOCK$V = 'rt-checkbox';
  * Текстовая подпись проецируется через `<ng-content>`.
  */
 class RtCheckboxComponent {
-    #onChange;
-    #onTouched;
     constructor() {
         this.#onChange = () => undefined;
         this.#onTouched = () => undefined;
+        /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+        this.#disabledByForm = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []));
         this.isChecked = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
-        this.isDisabled = signal(false, /* @ts-ignore */
+        this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.inputId = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
@@ -4713,13 +4761,11 @@ class RtCheckboxComponent {
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        // Синхронизируем signal-input `disabled` в `isDisabled`, чтобы
-        // `[disabled]="..."` и `setDisabledState(...)` (CVA) писали в одно
-        // и то же место. Effect живёт в injection context конструктора.
-        effect(() => {
-            this.isDisabled.set(this.disabled());
-        });
     }
+    #onChange;
+    #onTouched;
+    /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+    #disabledByForm;
     writeValue(value) {
         this.isChecked.set(value === true);
     }
@@ -4730,7 +4776,7 @@ class RtCheckboxComponent {
         this.#onTouched = fn;
     }
     setDisabledState(disabled) {
-        this.isDisabled.set(disabled);
+        this.#disabledByForm.set(disabled);
     }
     toggle() {
         if (this.isDisabled()) {
@@ -4749,13 +4795,13 @@ class RtCheckboxComponent {
                 useExisting: forwardRef(() => RtCheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<button\n    rtBlock=\"rt-checkbox\"\n    qa-dataid=\"checkbox-control\"\n    type=\"button\"\n    role=\"checkbox\"\n    [rtMod]=\"{\n        checked: isChecked() && !indeterminate(),\n        indeterminate: indeterminate(),\n        disabled: isDisabled(),\n    }\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : isChecked()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\">\n    <span rtElem=\"box\">\n        @if (indeterminate()) {\n            <rt-icon rtElem=\"icon\" name=\"minus\" size=\"xs\" color=\"inverse\" />\n        } @else if (isChecked()) {\n            <rt-icon rtElem=\"icon\" name=\"check\" size=\"xs\" color=\"inverse\" />\n        }\n    </span>\n\n    <span rtElem=\"label\" qa-dataid=\"checkbox-label\">\n        <ng-content />\n    </span>\n</button>\n", styles: [":host{display:inline-block}.rt-checkbox{display:inline-flex;align-items:center;padding:0;border:none;background:none;cursor:pointer;gap:var(--rt-space-sm);text-align:start}.rt-checkbox:focus-visible{border-radius:var(--rt-radius-sm);box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}.rt-checkbox--disabled{cursor:not-allowed;opacity:.5}.rt-checkbox__box{display:inline-flex;width:18px;height:18px;flex-shrink:0;align-items:center;justify-content:center;border:var(--rt-input-border-width) solid var(--rt-color-border-strong);border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface);transition:background var(--rt-duration-fast) ease,border-color var(--rt-duration-fast) ease}.rt-checkbox--checked .rt-checkbox__box,.rt-checkbox--indeterminate .rt-checkbox__box{border-color:var(--rt-color-action-primary);background:var(--rt-color-action-primary)}.rt-checkbox__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}.rt-checkbox__label:empty{display:none}\n"], dependencies: [{ kind: "component", type: 
+        ], ngImport: i0, template: "<button\n    rtBlock=\"rt-checkbox\"\n    qa-dataid=\"checkbox-control\"\n    type=\"button\"\n    role=\"checkbox\"\n    [rtMod]=\"{\n        checked: isChecked() && !indeterminate(),\n        indeterminate: indeterminate(),\n        disabled: isDisabled(),\n    }\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : isChecked()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\">\n    <span rtElem=\"box\">\n        @if (indeterminate()) {\n            <rt-icon rtElem=\"icon\" name=\"minus\" size=\"xs\" color=\"inverse\" />\n        } @else if (isChecked()) {\n            <rt-icon rtElem=\"icon\" name=\"check\" size=\"xs\" color=\"inverse\" />\n        }\n    </span>\n\n    <span rtElem=\"label\" qa-dataid=\"checkbox-label\">\n        <ng-content />\n    </span>\n</button>\n", styles: ["@charset \"UTF-8\";rt-checkbox{display:inline-block}rt-checkbox .rt-checkbox{display:inline-flex;align-items:center;padding:0;border:none;background:none;cursor:pointer;gap:var(--rt-space-sm);text-align:start}rt-checkbox .rt-checkbox:focus-visible{border-radius:var(--rt-radius-sm);box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}rt-checkbox .rt-checkbox--disabled{cursor:not-allowed;opacity:.5}rt-checkbox .rt-checkbox__box{display:inline-flex;width:18px;height:18px;flex-shrink:0;align-items:center;justify-content:center;border:var(--rt-input-border-width) solid var(--rt-color-border-strong);border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface);transition:background var(--rt-duration-fast) ease,border-color var(--rt-duration-fast) ease}rt-checkbox .rt-checkbox--checked rt-checkbox .rt-checkbox__box,rt-checkbox .rt-checkbox--indeterminate rt-checkbox .rt-checkbox__box{border-color:var(--rt-color-action-primary);background:var(--rt-color-action-primary)}rt-checkbox .rt-checkbox__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}rt-checkbox .rt-checkbox__label:empty{display:none}\n"], dependencies: [{ kind: "component", type: 
                 // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtIconComponent,
                         BlockDirective,
@@ -4769,8 +4815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         },
                     ], host: {
                         class: BEM_BLOCK$V,
-                    }, template: "<button\n    rtBlock=\"rt-checkbox\"\n    qa-dataid=\"checkbox-control\"\n    type=\"button\"\n    role=\"checkbox\"\n    [rtMod]=\"{\n        checked: isChecked() && !indeterminate(),\n        indeterminate: indeterminate(),\n        disabled: isDisabled(),\n    }\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : isChecked()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\">\n    <span rtElem=\"box\">\n        @if (indeterminate()) {\n            <rt-icon rtElem=\"icon\" name=\"minus\" size=\"xs\" color=\"inverse\" />\n        } @else if (isChecked()) {\n            <rt-icon rtElem=\"icon\" name=\"check\" size=\"xs\" color=\"inverse\" />\n        }\n    </span>\n\n    <span rtElem=\"label\" qa-dataid=\"checkbox-label\">\n        <ng-content />\n    </span>\n</button>\n", styles: [":host{display:inline-block}.rt-checkbox{display:inline-flex;align-items:center;padding:0;border:none;background:none;cursor:pointer;gap:var(--rt-space-sm);text-align:start}.rt-checkbox:focus-visible{border-radius:var(--rt-radius-sm);box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}.rt-checkbox--disabled{cursor:not-allowed;opacity:.5}.rt-checkbox__box{display:inline-flex;width:18px;height:18px;flex-shrink:0;align-items:center;justify-content:center;border:var(--rt-input-border-width) solid var(--rt-color-border-strong);border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface);transition:background var(--rt-duration-fast) ease,border-color var(--rt-duration-fast) ease}.rt-checkbox--checked .rt-checkbox__box,.rt-checkbox--indeterminate .rt-checkbox__box{border-color:var(--rt-color-action-primary);background:var(--rt-color-action-primary)}.rt-checkbox__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}.rt-checkbox__label:empty{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+                    }, template: "<button\n    rtBlock=\"rt-checkbox\"\n    qa-dataid=\"checkbox-control\"\n    type=\"button\"\n    role=\"checkbox\"\n    [rtMod]=\"{\n        checked: isChecked() && !indeterminate(),\n        indeterminate: indeterminate(),\n        disabled: isDisabled(),\n    }\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : isChecked()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\">\n    <span rtElem=\"box\">\n        @if (indeterminate()) {\n            <rt-icon rtElem=\"icon\" name=\"minus\" size=\"xs\" color=\"inverse\" />\n        } @else if (isChecked()) {\n            <rt-icon rtElem=\"icon\" name=\"check\" size=\"xs\" color=\"inverse\" />\n        }\n    </span>\n\n    <span rtElem=\"label\" qa-dataid=\"checkbox-label\">\n        <ng-content />\n    </span>\n</button>\n", styles: ["@charset \"UTF-8\";rt-checkbox{display:inline-block}rt-checkbox .rt-checkbox{display:inline-flex;align-items:center;padding:0;border:none;background:none;cursor:pointer;gap:var(--rt-space-sm);text-align:start}rt-checkbox .rt-checkbox:focus-visible{border-radius:var(--rt-radius-sm);box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}rt-checkbox .rt-checkbox--disabled{cursor:not-allowed;opacity:.5}rt-checkbox .rt-checkbox__box{display:inline-flex;width:18px;height:18px;flex-shrink:0;align-items:center;justify-content:center;border:var(--rt-input-border-width) solid var(--rt-color-border-strong);border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface);transition:background var(--rt-duration-fast) ease,border-color var(--rt-duration-fast) ease}rt-checkbox .rt-checkbox--checked rt-checkbox .rt-checkbox__box,rt-checkbox .rt-checkbox--indeterminate rt-checkbox .rt-checkbox__box{border-color:var(--rt-color-action-primary);background:var(--rt-color-action-primary)}rt-checkbox .rt-checkbox__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);-webkit-user-select:none;user-select:none}rt-checkbox .rt-checkbox__label:empty{display:none}\n"] }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
 const BEM_BLOCK$U = 'rt-collapsible-text';
 class RtCollapsibleTextComponent {
@@ -5822,7 +5868,7 @@ class RtContainerComponent {
         return maxSeconds * 1000;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtContainerComponent, isStandalone: true, selector: "rt-container", inputs: { mobileLeftNav: { classPropertyName: "mobileLeftNav", publicName: "mobileLeftNav", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick", rightOpened: "rightOpened", rightClosed: "rightClosed" }, host: { properties: { "class.rt-container--mobile-left-bottom": "mobileLeftNav() === 'bottom'", "class.rt-container--viewport": "height() === 'viewport'" }, classAttribute: "rt-container" }, providers: [RtContainerStateService], queries: [{ propertyName: "headerTpl", first: true, predicate: RtContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "leftSidenavTpl", first: true, predicate: RtContainerLeftSidenavDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightSidenavTpl", first: true, predicate: RtContainerRightSidenavDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarLeftTpl", first: true, predicate: RtContainerToolbarLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarCenterTpl", first: true, predicate: RtContainerToolbarCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarRightTpl", first: true, predicate: RtContainerToolbarRightDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: RtContainerContentDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-container\">\n    @if (headerTpl(); as tpl) {\n        <header rtElem=\"header\" qa-dataid=\"container-header\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </header>\n    }\n\n    @if (leftSidenavTpl(); as tpl) {\n        <aside rtElem=\"left-sidenav\" qa-dataid=\"container-left-sidenav\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </aside>\n    }\n\n    @if (toolbarLeftTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"left\" [rtMod]=\"{ slot: 'left' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarCenterTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"center\" [rtMod]=\"{ slot: 'center' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarRightTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"right\" [rtMod]=\"{ slot: 'right' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (contentTpl(); as tpl) {\n        <main rtElem=\"content\" qa-dataid=\"container-content\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </main>\n    }\n\n    <rt-toaster position=\"bottom-center\" />\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-container{display:grid;min-height:100%;flex:1 1 auto;background-color:var(--rt-color-bg-page, #f5f5f5);color:var(--rt-color-text-primary, #222);grid-template:\"header header\" auto \"left-sidenav toolbar\" auto \"left-sidenav content\" 1fr/auto 1fr}.rt-container__header{position:sticky;z-index:1;top:0;display:block;grid-area:header}.rt-container__left-sidenav{display:block;padding:var(--rt-space-md);border-right:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface, #fff);grid-area:left-sidenav}.rt-container__toolbar{display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);border-bottom:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface, #fff);grid-area:toolbar}.rt-container__toolbar--slot--left{justify-content:flex-start}.rt-container__toolbar--slot--center{justify-content:center}.rt-container__toolbar--slot--right{justify-content:flex-end}.rt-container__content{display:flex;overflow:auto;min-height:0;flex-direction:column;grid-area:content}.rt-container--viewport{block-size:100dvh;min-block-size:0}.rt-container--viewport .rt-container__content{overflow:hidden}.rt-container--viewport .rt-container__left-sidenav{overflow:auto}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#00000073;opacity:0;pointer-events:none;transition:opacity var(--rt-duration-base) ease}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-duration-base) ease}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{width:100dvw}.rt-container--mobile-left-bottom{grid-template:\"header\" auto \"toolbar\" auto \"content\" 1fr \"left-sidenav\" auto/1fr}.rt-container--mobile-left-bottom .rt-container__left-sidenav{padding:0;border-top:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);border-right:none}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtContainerComponent, isStandalone: true, selector: "rt-container", inputs: { mobileLeftNav: { classPropertyName: "mobileLeftNav", publicName: "mobileLeftNav", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick", rightOpened: "rightOpened", rightClosed: "rightClosed" }, host: { properties: { "class.rt-container--mobile-left-bottom": "mobileLeftNav() === 'bottom'", "class.rt-container--viewport": "height() === 'viewport'" }, classAttribute: "rt-container" }, providers: [RtContainerStateService], queries: [{ propertyName: "headerTpl", first: true, predicate: RtContainerHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "leftSidenavTpl", first: true, predicate: RtContainerLeftSidenavDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "rightSidenavTpl", first: true, predicate: RtContainerRightSidenavDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarLeftTpl", first: true, predicate: RtContainerToolbarLeftDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarCenterTpl", first: true, predicate: RtContainerToolbarCenterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarRightTpl", first: true, predicate: RtContainerToolbarRightDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: RtContainerContentDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-container\">\n    @if (headerTpl(); as tpl) {\n        <header rtElem=\"header\" qa-dataid=\"container-header\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </header>\n    }\n\n    @if (leftSidenavTpl(); as tpl) {\n        <aside rtElem=\"left-sidenav\" qa-dataid=\"container-left-sidenav\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </aside>\n    }\n\n    @if (toolbarLeftTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"left\" [rtMod]=\"{ slot: 'left' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarCenterTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"center\" [rtMod]=\"{ slot: 'center' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarRightTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"right\" [rtMod]=\"{ slot: 'right' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (contentTpl(); as tpl) {\n        <main rtElem=\"content\" qa-dataid=\"container-content\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </main>\n    }\n\n    <rt-toaster position=\"bottom-center\" />\n</ng-container>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: rgb(0 0 0 / 45%);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);opacity:0;pointer-events:none;transition:opacity var(--rt-aside-animation-duration) ease}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}.rt-container{display:grid;min-height:100%;flex:1 1 auto;background-color:var(--rt-color-bg-page, #f5f5f5);color:var(--rt-color-text-primary, #222);grid-template:\"header header\" auto \"left-sidenav toolbar\" auto \"left-sidenav content\" 1fr/auto 1fr}.rt-container__header{position:sticky;z-index:1;top:0;display:block;grid-area:header}.rt-container__left-sidenav{display:block;padding:var(--rt-space-md);border-right:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface, #fff);grid-area:left-sidenav}.rt-container__toolbar{display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);border-bottom:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface, #fff);grid-area:toolbar}.rt-container__toolbar--slot--left{justify-content:flex-start}.rt-container__toolbar--slot--center{justify-content:center}.rt-container__toolbar--slot--right{justify-content:flex-end}.rt-container__content{display:flex;overflow:auto;min-height:0;flex-direction:column;grid-area:content}.rt-container--viewport{block-size:100dvh;min-block-size:0}.rt-container--viewport .rt-container__content{overflow:hidden}.rt-container--viewport .rt-container__left-sidenav{overflow:auto}@media(width<=768px){.rt-container--mobile-left-bottom{grid-template:\"header\" auto \"toolbar\" auto \"content\" 1fr \"left-sidenav\" auto/1fr}.rt-container--mobile-left-bottom .rt-container__left-sidenav{padding:0;border-top:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);border-right:none}}\n"], dependencies: [{ kind: "directive", type: 
                 // Angular
                 NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // standalone components / directives
@@ -5842,7 +5888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         class: BEM_BLOCK$R,
                         '[class.rt-container--mobile-left-bottom]': "mobileLeftNav() === 'bottom'",
                         '[class.rt-container--viewport]': "height() === 'viewport'",
-                    }, template: "<ng-container rtBlock=\"rt-container\">\n    @if (headerTpl(); as tpl) {\n        <header rtElem=\"header\" qa-dataid=\"container-header\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </header>\n    }\n\n    @if (leftSidenavTpl(); as tpl) {\n        <aside rtElem=\"left-sidenav\" qa-dataid=\"container-left-sidenav\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </aside>\n    }\n\n    @if (toolbarLeftTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"left\" [rtMod]=\"{ slot: 'left' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarCenterTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"center\" [rtMod]=\"{ slot: 'center' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarRightTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"right\" [rtMod]=\"{ slot: 'right' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (contentTpl(); as tpl) {\n        <main rtElem=\"content\" qa-dataid=\"container-content\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </main>\n    }\n\n    <rt-toaster position=\"bottom-center\" />\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-container{display:grid;min-height:100%;flex:1 1 auto;background-color:var(--rt-color-bg-page, #f5f5f5);color:var(--rt-color-text-primary, #222);grid-template:\"header header\" auto \"left-sidenav toolbar\" auto \"left-sidenav content\" 1fr/auto 1fr}.rt-container__header{position:sticky;z-index:1;top:0;display:block;grid-area:header}.rt-container__left-sidenav{display:block;padding:var(--rt-space-md);border-right:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface, #fff);grid-area:left-sidenav}.rt-container__toolbar{display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);border-bottom:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface, #fff);grid-area:toolbar}.rt-container__toolbar--slot--left{justify-content:flex-start}.rt-container__toolbar--slot--center{justify-content:center}.rt-container__toolbar--slot--right{justify-content:flex-end}.rt-container__content{display:flex;overflow:auto;min-height:0;flex-direction:column;grid-area:content}.rt-container--viewport{block-size:100dvh;min-block-size:0}.rt-container--viewport .rt-container__content{overflow:hidden}.rt-container--viewport .rt-container__left-sidenav{overflow:auto}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#00000073;opacity:0;pointer-events:none;transition:opacity var(--rt-duration-base) ease}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-duration-base) ease}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{width:100dvw}.rt-container--mobile-left-bottom{grid-template:\"header\" auto \"toolbar\" auto \"content\" 1fr \"left-sidenav\" auto/1fr}.rt-container--mobile-left-bottom .rt-container__left-sidenav{padding:0;border-top:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);border-right:none}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}\n"] }]
+                    }, template: "<ng-container rtBlock=\"rt-container\">\n    @if (headerTpl(); as tpl) {\n        <header rtElem=\"header\" qa-dataid=\"container-header\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </header>\n    }\n\n    @if (leftSidenavTpl(); as tpl) {\n        <aside rtElem=\"left-sidenav\" qa-dataid=\"container-left-sidenav\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </aside>\n    }\n\n    @if (toolbarLeftTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"left\" [rtMod]=\"{ slot: 'left' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarCenterTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"center\" [rtMod]=\"{ slot: 'center' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarRightTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"right\" [rtMod]=\"{ slot: 'right' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (contentTpl(); as tpl) {\n        <main rtElem=\"content\" qa-dataid=\"container-content\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </main>\n    }\n\n    <rt-toaster position=\"bottom-center\" />\n</ng-container>\n", styles: ["@charset \"UTF-8\";:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: rgb(0 0 0 / 45%);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);opacity:0;pointer-events:none;transition:opacity var(--rt-aside-animation-duration) ease}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}.rt-container{display:grid;min-height:100%;flex:1 1 auto;background-color:var(--rt-color-bg-page, #f5f5f5);color:var(--rt-color-text-primary, #222);grid-template:\"header header\" auto \"left-sidenav toolbar\" auto \"left-sidenav content\" 1fr/auto 1fr}.rt-container__header{position:sticky;z-index:1;top:0;display:block;grid-area:header}.rt-container__left-sidenav{display:block;padding:var(--rt-space-md);border-right:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface, #fff);grid-area:left-sidenav}.rt-container__toolbar{display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);border-bottom:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface, #fff);grid-area:toolbar}.rt-container__toolbar--slot--left{justify-content:flex-start}.rt-container__toolbar--slot--center{justify-content:center}.rt-container__toolbar--slot--right{justify-content:flex-end}.rt-container__content{display:flex;overflow:auto;min-height:0;flex-direction:column;grid-area:content}.rt-container--viewport{block-size:100dvh;min-block-size:0}.rt-container--viewport .rt-container__content{overflow:hidden}.rt-container--viewport .rt-container__left-sidenav{overflow:auto}@media(width<=768px){.rt-container--mobile-left-bottom{grid-template:\"header\" auto \"toolbar\" auto \"content\" 1fr \"left-sidenav\" auto/1fr}.rt-container--mobile-left-bottom .rt-container__left-sidenav{padding:0;border-top:var(--rt-border-width-thin) solid var(--rt-color-border-subtle);border-right:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtContainerHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], leftSidenavTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtContainerLeftSidenavDirective), { ...{
@@ -5959,14 +6005,14 @@ class RtDialogComponent {
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtDialogComponent, isStandalone: true, selector: "rt-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rt-dialog-width": "width()" }, classAttribute: "rt-dialog" }, ngImport: i0, template: "<div\n    rtBlock=\"rt-dialog\"\n    qa-dataid=\"dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [rtMod]=\"{ size: size() }\"\n    [style.--rt-dialog-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:root{--rt-dialog-width-sm: 460px;--rt-dialog-width-md: 660px;--rt-dialog-width-lg: 860px;--rt-dialog-shadow: 0 0 40px 0 rgb(0 0 0 / 25%);--rt-dialog-backdrop-bg: rgb(25 41 64 / 70%);--rt-dialog-backdrop-blur: 5px}.rt-dialog{display:flex;overflow:hidden;width:var(--rt-dialog-width, var(--rt-dialog-width-md));max-width:90dvw;max-height:90dvh;flex-direction:column;padding:0;border:none;border-radius:var(--rt-radius-xl, 15px);background:var(--rt-color-bg-surface);box-shadow:var(--rt-dialog-shadow);color:var(--rt-color-text-primary)}.rt-dialog--size--sm{width:var(--rt-dialog-width, var(--rt-dialog-width-sm))}.rt-dialog--size--md{width:var(--rt-dialog-width, var(--rt-dialog-width-md))}.rt-dialog--size--lg{width:var(--rt-dialog-width, var(--rt-dialog-width-lg))}.rt-dialog-backdrop{-webkit-backdrop-filter:blur(var(--rt-dialog-backdrop-blur));backdrop-filter:blur(var(--rt-dialog-backdrop-blur));background:var(--rt-dialog-backdrop-bg)}.rt-dialog-overlay{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtDialogComponent, isStandalone: true, selector: "rt-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rt-dialog-width": "width()" }, classAttribute: "rt-dialog" }, ngImport: i0, template: "<div\n    rtBlock=\"rt-dialog\"\n    qa-dataid=\"dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [rtMod]=\"{ size: size() }\"\n    [style.--rt-dialog-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";rt-dialog{display:contents}:root{--rt-dialog-width-sm: 460px;--rt-dialog-width-md: 660px;--rt-dialog-width-lg: 860px;--rt-dialog-shadow: 0 0 40px 0 rgb(0 0 0 / 25%);--rt-dialog-backdrop-bg: rgb(25 41 64 / 70%);--rt-dialog-backdrop-blur: 5px}rt-dialog .rt-dialog{display:flex;overflow:hidden;width:var(--rt-dialog-width, var(--rt-dialog-width-md));max-width:90dvw;max-height:90dvh;flex-direction:column;padding:0;border:none;border-radius:var(--rt-radius-xl, 15px);background:var(--rt-color-bg-surface);box-shadow:var(--rt-dialog-shadow);color:var(--rt-color-text-primary)}rt-dialog .rt-dialog--size--sm{width:var(--rt-dialog-width, var(--rt-dialog-width-sm))}rt-dialog .rt-dialog--size--md{width:var(--rt-dialog-width, var(--rt-dialog-width-md))}rt-dialog .rt-dialog--size--lg{width:var(--rt-dialog-width, var(--rt-dialog-width-lg))}.rt-dialog-backdrop{-webkit-backdrop-filter:blur(var(--rt-dialog-backdrop-blur));backdrop-filter:blur(var(--rt-dialog-backdrop-blur));background:var(--rt-dialog-backdrop-bg)}.rt-dialog-overlay{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rt-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [BlockDirective, ModDirective], host: {
                         class: BEM_BLOCK$Q,
                         '[style.--rt-dialog-width]': 'width()',
-                    }, template: "<div\n    rtBlock=\"rt-dialog\"\n    qa-dataid=\"dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [rtMod]=\"{ size: size() }\"\n    [style.--rt-dialog-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:root{--rt-dialog-width-sm: 460px;--rt-dialog-width-md: 660px;--rt-dialog-width-lg: 860px;--rt-dialog-shadow: 0 0 40px 0 rgb(0 0 0 / 25%);--rt-dialog-backdrop-bg: rgb(25 41 64 / 70%);--rt-dialog-backdrop-blur: 5px}.rt-dialog{display:flex;overflow:hidden;width:var(--rt-dialog-width, var(--rt-dialog-width-md));max-width:90dvw;max-height:90dvh;flex-direction:column;padding:0;border:none;border-radius:var(--rt-radius-xl, 15px);background:var(--rt-color-bg-surface);box-shadow:var(--rt-dialog-shadow);color:var(--rt-color-text-primary)}.rt-dialog--size--sm{width:var(--rt-dialog-width, var(--rt-dialog-width-sm))}.rt-dialog--size--md{width:var(--rt-dialog-width, var(--rt-dialog-width-md))}.rt-dialog--size--lg{width:var(--rt-dialog-width, var(--rt-dialog-width-lg))}.rt-dialog-backdrop{-webkit-backdrop-filter:blur(var(--rt-dialog-backdrop-blur));backdrop-filter:blur(var(--rt-dialog-backdrop-blur));background:var(--rt-dialog-backdrop-bg)}.rt-dialog-overlay{display:flex;align-items:center;justify-content:center}\n"] }]
+                    }, template: "<div\n    rtBlock=\"rt-dialog\"\n    qa-dataid=\"dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [rtMod]=\"{ size: size() }\"\n    [style.--rt-dialog-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";rt-dialog{display:contents}:root{--rt-dialog-width-sm: 460px;--rt-dialog-width-md: 660px;--rt-dialog-width-lg: 860px;--rt-dialog-shadow: 0 0 40px 0 rgb(0 0 0 / 25%);--rt-dialog-backdrop-bg: rgb(25 41 64 / 70%);--rt-dialog-backdrop-blur: 5px}rt-dialog .rt-dialog{display:flex;overflow:hidden;width:var(--rt-dialog-width, var(--rt-dialog-width-md));max-width:90dvw;max-height:90dvh;flex-direction:column;padding:0;border:none;border-radius:var(--rt-radius-xl, 15px);background:var(--rt-color-bg-surface);box-shadow:var(--rt-dialog-shadow);color:var(--rt-color-text-primary)}rt-dialog .rt-dialog--size--sm{width:var(--rt-dialog-width, var(--rt-dialog-width-sm))}rt-dialog .rt-dialog--size--md{width:var(--rt-dialog-width, var(--rt-dialog-width-md))}rt-dialog .rt-dialog--size--lg{width:var(--rt-dialog-width, var(--rt-dialog-width-lg))}.rt-dialog-backdrop{-webkit-backdrop-filter:blur(var(--rt-dialog-backdrop-blur));backdrop-filter:blur(var(--rt-dialog-backdrop-blur));background:var(--rt-dialog-backdrop-bg)}.rt-dialog-overlay{display:flex;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /** Что делает панель, когда её просят закрыться. */
@@ -6657,28 +6703,30 @@ function clamp$1(value, min, max) {
  * `useExisting: forwardRef(...)` — `useClass` на self-reference вызывает
  * NG0200 cycle при boot'е.
  *
- * Source-of-truth для disabled — внутренний `isDisabled` signal: и signal-input
- * `disabled`, и CVA `setDisabledState` пишут в него, поэтому `[disabled]="true"`
- * и `FormControl.disable()` ведут себя одинаково.
+ * Отключение складывается из двух независимых источников: входа `disabled` и
+ * слова формы (CVA `setDisabledState`). Отключено, если так сказал любой из
+ * них. Сводить их в один signal нельзя: форма зовёт `setDisabledState` при
+ * связывании контрола, то есть раньше, чем счётчик впервые обновит своё вью,
+ * и мирроринг входа затирал бы её слово — контрол, созданный отключённым,
+ * оказывался бы рабочим.
  *
  * Хост объявлен группой с `aria-label`, значение помечено `aria-live`, так что
  * скринридер называет назначение счётчика и проговаривает новое число.
  *
- * ViewEncapsulation — default (Emulated), стили обёрнуты в `:host { ... }`.
+ * ViewEncapsulation.None — стили таргетируют имя элемента и BEM-класс блока.
  */
 class RtCounterComponent {
-    #onChange;
-    #onTouched;
-    #decreaseFallback;
-    #increaseFallback;
     constructor() {
         this.#onChange = () => undefined;
         this.#onTouched = () => undefined;
         this.#decreaseFallback = translateSignal(RT_COUNTER_DECREASE_KEY);
         this.#increaseFallback = translateSignal(RT_COUNTER_INCREASE_KEY);
+        /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+        this.#disabledByForm = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []));
         this.value = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.isDisabled = signal(false, /* @ts-ignore */
+        this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         /** Своя подпись важнее умолчания: форма знает, что именно считает */
         this.decreaseAriaLabel = computed(() => this.decreaseLabel() || this.#decreaseFallback(), /* @ts-ignore */
@@ -6702,13 +6750,13 @@ class RtCounterComponent {
         this.increaseLabel = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "increaseLabel" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        // Синхронизируем signal-input `disabled` в `isDisabled`, чтобы
-        // `[disabled]="..."` и `setDisabledState(...)` (CVA) писали в одно
-        // и то же место. Effect живёт в injection context конструктора.
-        effect(() => {
-            this.isDisabled.set(this.disabled());
-        });
     }
+    #onChange;
+    #onTouched;
+    #decreaseFallback;
+    #increaseFallback;
+    /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+    #disabledByForm;
     writeValue(value) {
         this.value.set(clamp$1(Number(value ?? this.min()), this.min(), this.max()));
     }
@@ -6719,7 +6767,7 @@ class RtCounterComponent {
         this.#onTouched = fn;
     }
     setDisabledState(disabled) {
-        this.isDisabled.set(disabled);
+        this.#disabledByForm.set(disabled);
     }
     decrease() {
         this.#shift(-this.step());
@@ -6746,15 +6794,15 @@ class RtCounterComponent {
                 useExisting: forwardRef(() => RtCounterComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-container rtBlock=\"rt-counter\">\n    <rt-icon-button\n        rtElem=\"decrease\"\n        qa-dataid=\"counter-decrease\"\n        icon=\"minus\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [ariaLabel]=\"decreaseAriaLabel()\"\n        [disabled]=\"!canDecrease()\"\n        (clicked)=\"decrease()\" />\n    <span rtElem=\"value\" qa-dataid=\"counter-value\" aria-live=\"polite\">{{ value() }}</span>\n    <rt-icon-button\n        rtElem=\"increase\"\n        qa-dataid=\"counter-increase\"\n        icon=\"ico-plus\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [ariaLabel]=\"increaseAriaLabel()\"\n        [disabled]=\"!canIncrease()\"\n        (clicked)=\"increase()\" />\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--rt-counter-gap)}:host .rt-counter__value{min-width:var(--rt-counter-value-min-width);color:var(--rt-counter-value-color);font-size:var(--rt-counter-value-font-size);font-variant-numeric:tabular-nums;text-align:center}\n"], dependencies: [{ kind: "directive", type: 
+        ], ngImport: i0, template: "<ng-container rtBlock=\"rt-counter\">\n    <rt-icon-button\n        rtElem=\"decrease\"\n        qa-dataid=\"counter-decrease\"\n        icon=\"minus\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [ariaLabel]=\"decreaseAriaLabel()\"\n        [disabled]=\"!canDecrease()\"\n        (clicked)=\"decrease()\" />\n    <span rtElem=\"value\" qa-dataid=\"counter-value\" aria-live=\"polite\">{{ value() }}</span>\n    <rt-icon-button\n        rtElem=\"increase\"\n        qa-dataid=\"counter-increase\"\n        icon=\"ico-plus\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [ariaLabel]=\"increaseAriaLabel()\"\n        [disabled]=\"!canIncrease()\"\n        (clicked)=\"increase()\" />\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-counter{display:inline-flex;align-items:center;gap:var(--rt-counter-gap)}.rt-counter__value{min-width:var(--rt-counter-value-min-width);color:var(--rt-counter-value-color);font-size:var(--rt-counter-value-font-size);font-variant-numeric:tabular-nums;text-align:center}\n"], dependencies: [{ kind: "directive", type: 
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "component", type: 
                 // components
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCounterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-counter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-counter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // rt-tools
                         BlockDirective,
                         ElemDirective,
@@ -6770,8 +6818,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         class: BEM_BLOCK$O,
                         role: 'group',
                         '[attr.aria-label]': 'ariaLabel()',
-                    }, template: "<ng-container rtBlock=\"rt-counter\">\n    <rt-icon-button\n        rtElem=\"decrease\"\n        qa-dataid=\"counter-decrease\"\n        icon=\"minus\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [ariaLabel]=\"decreaseAriaLabel()\"\n        [disabled]=\"!canDecrease()\"\n        (clicked)=\"decrease()\" />\n    <span rtElem=\"value\" qa-dataid=\"counter-value\" aria-live=\"polite\">{{ value() }}</span>\n    <rt-icon-button\n        rtElem=\"increase\"\n        qa-dataid=\"counter-increase\"\n        icon=\"ico-plus\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [ariaLabel]=\"increaseAriaLabel()\"\n        [disabled]=\"!canIncrease()\"\n        (clicked)=\"increase()\" />\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--rt-counter-gap)}:host .rt-counter__value{min-width:var(--rt-counter-value-min-width);color:var(--rt-counter-value-color);font-size:var(--rt-counter-value-font-size);font-variant-numeric:tabular-nums;text-align:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], decreaseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decreaseLabel", required: false }] }], increaseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "increaseLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+                    }, template: "<ng-container rtBlock=\"rt-counter\">\n    <rt-icon-button\n        rtElem=\"decrease\"\n        qa-dataid=\"counter-decrease\"\n        icon=\"minus\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [ariaLabel]=\"decreaseAriaLabel()\"\n        [disabled]=\"!canDecrease()\"\n        (clicked)=\"decrease()\" />\n    <span rtElem=\"value\" qa-dataid=\"counter-value\" aria-live=\"polite\">{{ value() }}</span>\n    <rt-icon-button\n        rtElem=\"increase\"\n        qa-dataid=\"counter-increase\"\n        icon=\"ico-plus\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [ariaLabel]=\"increaseAriaLabel()\"\n        [disabled]=\"!canIncrease()\"\n        (clicked)=\"increase()\" />\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-counter{display:inline-flex;align-items:center;gap:var(--rt-counter-gap)}.rt-counter__value{min-width:var(--rt-counter-value-min-width);color:var(--rt-counter-value-color);font-size:var(--rt-counter-value-font-size);font-variant-numeric:tabular-nums;text-align:center}\n"] }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], decreaseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decreaseLabel", required: false }] }], increaseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "increaseLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 const BEM_BLOCK$N = 'rt-counter-row';
 /**
@@ -6782,7 +6830,7 @@ const BEM_BLOCK$N = 'rt-counter-row';
  * раскладку, и её не приходится расширять каждый раз, когда у `rt-counter`
  * появляется новый input.
  *
- * ViewEncapsulation — default (Emulated), стили обёрнуты в `:host { ... }`.
+ * ViewEncapsulation.None — стили таргетируют имя элемента и BEM-класс блока.
  */
 class RtCounterRowComponent {
     constructor() {
@@ -6793,19 +6841,19 @@ class RtCounterRowComponent {
         ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCounterRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtCounterRowComponent, isStandalone: true, selector: "rt-counter-row", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-counter-row" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-counter-row\">\n    <span rtElem=\"text\">\n        <span rtElem=\"label\" qa-dataid=\"counter-row-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <span rtElem=\"hint\" qa-dataid=\"counter-row-hint\">{{ hintText }}</span>\n        }\n    </span>\n    <ng-content />\n</ng-container>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-counter-row-padding-y) 0;gap:var(--rt-counter-row-gap)}:host .rt-counter-row__text{display:flex;flex-direction:column;gap:var(--rt-space-2xs);text-align:start}:host .rt-counter-row__label{color:var(--rt-counter-row-label-color);font-size:var(--rt-counter-row-label-font-size);font-weight:var(--rt-font-weight-medium)}:host .rt-counter-row__hint{color:var(--rt-counter-row-hint-color);font-size:var(--rt-counter-row-hint-font-size)}:host(:not(:first-of-type)){border-top:var(--rt-border-width-thin) solid var(--rt-counter-row-color-border)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtCounterRowComponent, isStandalone: true, selector: "rt-counter-row", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-counter-row" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-counter-row\">\n    <span rtElem=\"text\">\n        <span rtElem=\"label\" qa-dataid=\"counter-row-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <span rtElem=\"hint\" qa-dataid=\"counter-row-hint\">{{ hintText }}</span>\n        }\n    </span>\n    <ng-content />\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-counter-row{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-counter-row-padding-y) 0;gap:var(--rt-counter-row-gap)}.rt-counter-row:not(:first-of-type){border-top:var(--rt-border-width-thin) solid var(--rt-counter-row-color-border)}.rt-counter-row__text{display:flex;flex-direction:column;gap:var(--rt-space-2xs);text-align:start}.rt-counter-row__label{color:var(--rt-counter-row-label-color);font-size:var(--rt-counter-row-label-font-size);font-weight:var(--rt-font-weight-medium)}.rt-counter-row__hint{color:var(--rt-counter-row-hint-color);font-size:var(--rt-counter-row-hint-font-size)}\n"], dependencies: [{ kind: "directive", type: 
                 // rt-tools
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtCounterRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-counter-row', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-counter-row', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // rt-tools
                         BlockDirective,
                         ElemDirective,
                     ], host: {
                         class: BEM_BLOCK$N,
-                    }, template: "<ng-container rtBlock=\"rt-counter-row\">\n    <span rtElem=\"text\">\n        <span rtElem=\"label\" qa-dataid=\"counter-row-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <span rtElem=\"hint\" qa-dataid=\"counter-row-hint\">{{ hintText }}</span>\n        }\n    </span>\n    <ng-content />\n</ng-container>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-counter-row-padding-y) 0;gap:var(--rt-counter-row-gap)}:host .rt-counter-row__text{display:flex;flex-direction:column;gap:var(--rt-space-2xs);text-align:start}:host .rt-counter-row__label{color:var(--rt-counter-row-label-color);font-size:var(--rt-counter-row-label-font-size);font-weight:var(--rt-font-weight-medium)}:host .rt-counter-row__hint{color:var(--rt-counter-row-hint-color);font-size:var(--rt-counter-row-hint-font-size)}:host(:not(:first-of-type)){border-top:var(--rt-border-width-thin) solid var(--rt-counter-row-color-border)}\n"] }]
+                    }, template: "<ng-container rtBlock=\"rt-counter-row\">\n    <span rtElem=\"text\">\n        <span rtElem=\"label\" qa-dataid=\"counter-row-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <span rtElem=\"hint\" qa-dataid=\"counter-row-hint\">{{ hintText }}</span>\n        }\n    </span>\n    <ng-content />\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-counter-row{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-counter-row-padding-y) 0;gap:var(--rt-counter-row-gap)}.rt-counter-row:not(:first-of-type){border-top:var(--rt-border-width-thin) solid var(--rt-counter-row-color-border)}.rt-counter-row__text{display:flex;flex-direction:column;gap:var(--rt-space-2xs);text-align:start}.rt-counter-row__label{color:var(--rt-counter-row-label-color);font-size:var(--rt-counter-row-label-font-size);font-weight:var(--rt-font-weight-medium)}.rt-counter-row__hint{color:var(--rt-counter-row-hint-color);font-size:var(--rt-counter-row-hint-font-size)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
 
 const BEM_BLOCK$M = 'rt-date-picker';
@@ -7776,13 +7824,13 @@ class RtToggleButtonGroupComponent {
         this.valueChange.emit(option.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtToggleButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtToggleButtonGroupComponent, isStandalone: true, selector: "rt-toggle-button-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.rt-toggle-button-group--full-width": "fullWidth()" }, classAttribute: "rt-toggle-button-group" }, ngImport: i0, template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"option.value\"\n            [rtMod]=\"{\n                active: value() === option.value,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"disabled()\"\n            [attr.aria-pressed]=\"value() === option.value ? 'true' : 'false'\"\n            [rtTooltip]=\"option.title ?? ''\"\n            (click)=\"onOptionClick(option)\">\n            @if (option.icon) {\n                <rt-icon rtElem=\"icon\" color=\"current\" [name]=\"option.icon\" [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ option.label }}</span>\n        </button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;--rt-toggle-button-group-track-bg: #eef0f4;--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface)}:host .rt-toggle-button-group{--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: 8px;--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: 8px;--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}:host .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-duration-fast) ease,color var(--rt-duration-fast) ease}:host .rt-toggle-button-group__button:hover:not(:disabled,:host .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}:host .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}:host .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:1px}:host .rt-toggle-button-group__button:disabled{cursor:not-allowed}:host .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}:host .rt-toggle-button-group__icon{flex-shrink:0}:host .rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-track-radius: 10px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-radius: 10px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}:host .rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-track-radius: 12px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-radius: 12px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}:host .rt-toggle-button-group--disabled{opacity:.5}:host(.rt-toggle-button-group--full-width){display:flex;width:100%}:host(.rt-toggle-button-group--full-width) .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}:host(.rt-toggle-button-group--full-width) .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:host-context(:root[data-theme=dark]),:host-context(html.rt-theme-dark){--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtToggleButtonGroupComponent, isStandalone: true, selector: "rt-toggle-button-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.rt-toggle-button-group--full-width": "fullWidth()" }, classAttribute: "rt-toggle-button-group" }, ngImport: i0, template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"option.value\"\n            [rtMod]=\"{\n                active: value() === option.value,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"disabled()\"\n            [attr.aria-pressed]=\"value() === option.value ? 'true' : 'false'\"\n            [rtTooltip]=\"option.title ?? ''\"\n            (click)=\"onOptionClick(option)\">\n            @if (option.icon) {\n                <rt-icon rtElem=\"icon\" color=\"current\" [name]=\"option.icon\" [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ option.label }}</span>\n        </button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";rt-toggle-button-group{display:inline-flex;--rt-toggle-button-group-track-bg: #eef0f4;--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface)}rt-toggle-button-group .rt-toggle-button-group{--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: 8px;--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: 8px;--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}rt-toggle-button-group .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-duration-fast) ease,color var(--rt-duration-fast) ease}rt-toggle-button-group .rt-toggle-button-group__button:hover:not(:disabled,rt-toggle-button-group .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:1px}rt-toggle-button-group .rt-toggle-button-group__button:disabled{cursor:not-allowed}rt-toggle-button-group .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}rt-toggle-button-group .rt-toggle-button-group__icon{flex-shrink:0}rt-toggle-button-group .rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-track-radius: 10px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-radius: 10px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}rt-toggle-button-group .rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-track-radius: 12px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-radius: 12px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}rt-toggle-button-group .rt-toggle-button-group--disabled{opacity:.5}rt-toggle-button-group.rt-toggle-button-group--full-width{display:flex;width:100%}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:root[data-theme=dark] rt-toggle-button-group,html.rt-theme-dark rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}\n"], dependencies: [{ kind: "component", type: 
                 // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement"], exportAs: ["rtTooltip"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement"], exportAs: ["rtTooltip"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtToggleButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-toggle-button-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-toggle-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtIconComponent,
                         RtTooltipDirective,
@@ -7792,7 +7840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: BEM_BLOCK$A,
                         '[class.rt-toggle-button-group--full-width]': 'fullWidth()',
-                    }, template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"option.value\"\n            [rtMod]=\"{\n                active: value() === option.value,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"disabled()\"\n            [attr.aria-pressed]=\"value() === option.value ? 'true' : 'false'\"\n            [rtTooltip]=\"option.title ?? ''\"\n            (click)=\"onOptionClick(option)\">\n            @if (option.icon) {\n                <rt-icon rtElem=\"icon\" color=\"current\" [name]=\"option.icon\" [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ option.label }}</span>\n        </button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;--rt-toggle-button-group-track-bg: #eef0f4;--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface)}:host .rt-toggle-button-group{--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: 8px;--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: 8px;--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}:host .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-duration-fast) ease,color var(--rt-duration-fast) ease}:host .rt-toggle-button-group__button:hover:not(:disabled,:host .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}:host .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}:host .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:1px}:host .rt-toggle-button-group__button:disabled{cursor:not-allowed}:host .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}:host .rt-toggle-button-group__icon{flex-shrink:0}:host .rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-track-radius: 10px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-radius: 10px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}:host .rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-track-radius: 12px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-radius: 12px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}:host .rt-toggle-button-group--disabled{opacity:.5}:host(.rt-toggle-button-group--full-width){display:flex;width:100%}:host(.rt-toggle-button-group--full-width) .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}:host(.rt-toggle-button-group--full-width) .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:host-context(:root[data-theme=dark]),:host-context(html.rt-theme-dark){--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}\n"] }]
+                    }, template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"option.value\"\n            [rtMod]=\"{\n                active: value() === option.value,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"disabled()\"\n            [attr.aria-pressed]=\"value() === option.value ? 'true' : 'false'\"\n            [rtTooltip]=\"option.title ?? ''\"\n            (click)=\"onOptionClick(option)\">\n            @if (option.icon) {\n                <rt-icon rtElem=\"icon\" color=\"current\" [name]=\"option.icon\" [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ option.label }}</span>\n        </button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";rt-toggle-button-group{display:inline-flex;--rt-toggle-button-group-track-bg: #eef0f4;--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface)}rt-toggle-button-group .rt-toggle-button-group{--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: 8px;--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: 8px;--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}rt-toggle-button-group .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-duration-fast) ease,color var(--rt-duration-fast) ease}rt-toggle-button-group .rt-toggle-button-group__button:hover:not(:disabled,rt-toggle-button-group .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:1px}rt-toggle-button-group .rt-toggle-button-group__button:disabled{cursor:not-allowed}rt-toggle-button-group .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}rt-toggle-button-group .rt-toggle-button-group__icon{flex-shrink:0}rt-toggle-button-group .rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-track-radius: 10px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-radius: 10px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}rt-toggle-button-group .rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-track-radius: 12px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-radius: 12px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}rt-toggle-button-group .rt-toggle-button-group--disabled{opacity:.5}rt-toggle-button-group.rt-toggle-button-group--full-width{display:flex;width:100%}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:root[data-theme=dark] rt-toggle-button-group,html.rt-theme-dark rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 const BEM_BLOCK$z = 'rt-filter-control';
@@ -7940,13 +7988,13 @@ class RtLogoComponent {
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtLogoComponent, isStandalone: true, selector: "rt-logo", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "effectiveHeight()", "style.width.px": "effectiveWidth()", "attr.role": "'img'", "attr.aria-label": "ariaLabel()" }, classAttribute: "rt-logo" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-logo\">\n    <span rtElem=\"wordmark\" qa-dataid=\"logo-wordmark\"></span>\n\n    @if (showTagline()) {\n        <span rtElem=\"tagline\" qa-dataid=\"logo-tagline\"></span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;line-height:0}.rt-logo__wordmark,.rt-logo__tagline{display:block;width:100%;background-position:left center;background-repeat:no-repeat;background-size:contain}.rt-logo__wordmark{height:100%;background-image:var(--rt-logo-wordmark, none)}.rt-logo__tagline{background-image:var(--rt-logo-tagline, none)}[data-theme=dark] .rt-logo__wordmark{background-image:var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none))}[data-theme=dark] .rt-logo__tagline{background-image:var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none))}:host:has(.rt-logo__tagline){display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}:host:has(.rt-logo__tagline) .rt-logo__wordmark{height:66.7%}:host:has(.rt-logo__tagline) .rt-logo__tagline{height:22.1%}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtLogoComponent, isStandalone: true, selector: "rt-logo", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "effectiveHeight()", "style.width.px": "effectiveWidth()", "attr.role": "'img'", "attr.aria-label": "ariaLabel()" }, classAttribute: "rt-logo" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-logo\">\n    <span rtElem=\"wordmark\" qa-dataid=\"logo-wordmark\"></span>\n\n    @if (showTagline()) {\n        <span rtElem=\"tagline\" qa-dataid=\"logo-tagline\"></span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-logo{display:inline-block;line-height:0}.rt-logo__wordmark,.rt-logo__tagline{display:block;width:100%;background-position:left center;background-repeat:no-repeat;background-size:contain}.rt-logo__wordmark{height:100%;background-image:var(--rt-logo-wordmark, none)}.rt-logo__tagline{background-image:var(--rt-logo-tagline, none)}[data-theme=dark] .rt-logo__wordmark{background-image:var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none))}[data-theme=dark] .rt-logo__tagline{background-image:var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none))}.rt-logo:has(.rt-logo__tagline){display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}.rt-logo:has(.rt-logo__tagline) .rt-logo__wordmark{height:66.7%}.rt-logo:has(.rt-logo__tagline) .rt-logo__tagline{height:22.1%}\n"], dependencies: [{ kind: "directive", type: 
                 // standalone components / directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtLogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-logo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-logo', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         BlockDirective,
                         ElemDirective,
@@ -7956,7 +8004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[style.width.px]': 'effectiveWidth()',
                         '[attr.role]': "'img'",
                         '[attr.aria-label]': 'ariaLabel()',
-                    }, template: "<ng-container rtBlock=\"rt-logo\">\n    <span rtElem=\"wordmark\" qa-dataid=\"logo-wordmark\"></span>\n\n    @if (showTagline()) {\n        <span rtElem=\"tagline\" qa-dataid=\"logo-tagline\"></span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;line-height:0}.rt-logo__wordmark,.rt-logo__tagline{display:block;width:100%;background-position:left center;background-repeat:no-repeat;background-size:contain}.rt-logo__wordmark{height:100%;background-image:var(--rt-logo-wordmark, none)}.rt-logo__tagline{background-image:var(--rt-logo-tagline, none)}[data-theme=dark] .rt-logo__wordmark{background-image:var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none))}[data-theme=dark] .rt-logo__tagline{background-image:var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none))}:host:has(.rt-logo__tagline){display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}:host:has(.rt-logo__tagline) .rt-logo__wordmark{height:66.7%}:host:has(.rt-logo__tagline) .rt-logo__tagline{height:22.1%}\n"] }]
+                    }, template: "<ng-container rtBlock=\"rt-logo\">\n    <span rtElem=\"wordmark\" qa-dataid=\"logo-wordmark\"></span>\n\n    @if (showTagline()) {\n        <span rtElem=\"tagline\" qa-dataid=\"logo-tagline\"></span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-logo{display:inline-block;line-height:0}.rt-logo__wordmark,.rt-logo__tagline{display:block;width:100%;background-position:left center;background-repeat:no-repeat;background-size:contain}.rt-logo__wordmark{height:100%;background-image:var(--rt-logo-wordmark, none)}.rt-logo__tagline{background-image:var(--rt-logo-tagline, none)}[data-theme=dark] .rt-logo__wordmark{background-image:var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none))}[data-theme=dark] .rt-logo__tagline{background-image:var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none))}.rt-logo:has(.rt-logo__tagline){display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}.rt-logo:has(.rt-logo__tagline) .rt-logo__wordmark{height:66.7%}.rt-logo:has(.rt-logo__tagline) .rt-logo__tagline{height:22.1%}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 const BEM_BLOCK$x = 'rt-header';
@@ -8046,13 +8094,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 const BEM_BLOCK$v = 'rt-input-number';
 /**
- * Парсит строку в `number | null`. Принимает `,` или `.` как decimal
- * separator. Все пробелы (включая неразрывный) удаляются — нужно чтобы
- * сгруппированное по разрядам отображение (`1 234,56`) парсилось обратно.
+ * Парсит строку в `number | null` по разделителям локали: `groupSep` и любые
+ * пробелы удаляются, оставшийся разделитель дробной части приводится к точке.
+ *
+ * Разбор обязан знать локаль, иначе он расходится с показом: в `en-US` разряды
+ * группируются запятой, и набранное `1000` показывалось как `1,000`, а в форму
+ * уходила `1` — безусловная замена первой запятой на точку читала разделитель
+ * разрядов как десятичный.
+ *
  * Пустая строка / NaN → null.
  */
-function parseNumber(text) {
-    const cleaned = text.replace(/\s/g, '').replace(',', '.');
+function parseNumber(text, groupSep) {
+    const withoutSpaces = text.replace(/\s/g, '');
+    // Пробельный разделитель разрядов (ru) уже снят предыдущей строкой.
+    const withoutGroups = groupSep.trim() === '' ? withoutSpaces : withoutSpaces.split(groupSep).join('');
+    const cleaned = withoutGroups.replace(/,/g, '.');
     if (cleaned === '') {
         return null;
     }
@@ -8115,6 +8171,14 @@ class RtInputNumberComponent extends RtFormControlBase {
         // тот же, что отдаёт toLocaleString на blur — тогда live и blur выглядят
         // одинаково, а parseNumber (стрипает \s) парсит обратно обе формы.
         this.#groupSep = (1000).toLocaleString(this.#locale).replace(/\d/g, '') || ' ';
+        /**
+         * Что в этой локали можно набрать как разделитель дробной части: всё из
+         * «.,», кроме того, чем локаль разделяет разряды. В `ru` разряды разделяет
+         * неразрывный пробел, поэтому годятся оба знака; в `en-US` запятая — это
+         * разряды, и десятичной остаётся только точка. Иначе набранное `1,5`
+         * значило бы в показе одно, а в разборе другое.
+         */
+        this.#decimalSepPattern = new RegExp(`[${['.', ','].filter((char) => char !== this.#groupSep).join('')}]`);
         this.fieldEl = viewChild('fieldEl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []));
         this.displayValue = signal('', /* @ts-ignore */
@@ -8146,6 +8210,14 @@ class RtInputNumberComponent extends RtFormControlBase {
     // тот же, что отдаёт toLocaleString на blur — тогда live и blur выглядят
     // одинаково, а parseNumber (стрипает \s) парсит обратно обе формы.
     #groupSep;
+    /**
+     * Что в этой локали можно набрать как разделитель дробной части: всё из
+     * «.,», кроме того, чем локаль разделяет разряды. В `ru` разряды разделяет
+     * неразрывный пробел, поэтому годятся оба знака; в `en-US` запятая — это
+     * разряды, и десятичной остаётся только точка. Иначе набранное `1,5`
+     * значило бы в показе одно, а в разборе другое.
+     */
+    #decimalSepPattern;
     writeValue(value) {
         super.writeValue(value);
         this.displayValue.set(formatNumber(this.value(), this.minFractionDigits(), this.maxFractionDigits(), this.#locale));
@@ -8197,7 +8269,7 @@ class RtInputNumberComponent extends RtFormControlBase {
         target.value = formatted;
         target.setSelectionRange(nextCaret, nextCaret);
         this.displayValue.set(formatted);
-        const parsed = parseNumber(formatted);
+        const parsed = parseNumber(formatted, this.#groupSep);
         if (parsed === null) {
             // Только реально пустой ввод → emit null (пользователь очистил поле).
             // Нечисловой ввод стрипается из отображения, но prev value держится до
@@ -8212,7 +8284,7 @@ class RtInputNumberComponent extends RtFormControlBase {
         this.emitChange(parsed);
     }
     onBlur() {
-        const parsed = parseNumber(this.displayValue());
+        const parsed = parseNumber(this.displayValue(), this.#groupSep);
         if (parsed === null) {
             this.value.set(null);
             this.displayValue.set('');
@@ -8222,9 +8294,9 @@ class RtInputNumberComponent extends RtFormControlBase {
         }
         const clamped = clamp(parsed, this.min(), this.max());
         const formatted = formatNumber(clamped, this.minFractionDigits(), this.maxFractionDigits(), this.#locale);
-        // `formatted` содержит пробелы-разделители и запятую — обратный парс
-        // через parseNumber (а не parseFloat) даёт округлённое числовое значение.
-        const rounded = parseNumber(formatted) ?? clamped;
+        // `formatted` содержит разделители локали — обратный парс через
+        // parseNumber (а не parseFloat) даёт округлённое числовое значение.
+        const rounded = parseNumber(formatted, this.#groupSep) ?? clamped;
         this.value.set(rounded);
         this.displayValue.set(formatted);
         this.emitChange(rounded);
@@ -8233,8 +8305,11 @@ class RtInputNumberComponent extends RtFormControlBase {
     /**
      * Live-форматирование строки во время набора: целая часть группируется по
      * разрядам (`#groupSep`), дробная остаётся как набрана (хвостовая запятая и
-     * нули сохраняются, чтобы их можно было дописать). Десятичный разделитель
-     * всегда допускается — округление по `maxFractionDigits` происходит на blur
+     * нули сохраняются, чтобы их можно было дописать). Разделителем дробной
+     * части считается только то, что им может быть в этой локали
+     * (`#decimalSepPattern`), — иначе запятая-разряды в `en-US` читалась бы как
+     * десятичная. Разделитель допускается всегда — округление по
+     * `maxFractionDigits` происходит на blur
      * (поэтому в целочисленном поле «1000,5» парсится и округлится, а не склеится
      * в «10005»). Группировка — линейным проходом, а не `Number()`, чтобы не
      * терять точность на суммах длиннее 2^53.
@@ -8244,7 +8319,7 @@ class RtInputNumberComponent extends RtFormControlBase {
         let sep = '';
         let fracDigits = '';
         let intDigits;
-        const sepIndex = raw.search(/[.,]/);
+        const sepIndex = raw.search(this.#decimalSepPattern);
         if (sepIndex >= 0) {
             sep = raw.charAt(sepIndex);
             intDigits = raw.slice(0, sepIndex).replace(/\D/g, '');
@@ -8370,20 +8445,20 @@ class RtLiveBadgeComponent {
     }
     #t_uiLiveOnSite;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtLiveBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtLiveBadgeComponent, isStandalone: true, selector: "rt-live-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-live-badge" }, ngImport: i0, template: "<span rtBlock=\"rt-live-badge\" qa-dataid=\"live-badge\" [attr.data-active]=\"active()\" [rtMod]=\"{ active: active() }\">\n    <span rtElem=\"dot\"></span>\n    <span rtElem=\"label\" qa-dataid=\"live-badge-label\">{{ labelText() }}</span>\n    <span rtElem=\"count\" qa-dataid=\"live-badge-count\">{{ count() ?? '\u2014' }}</span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}:host .rt-live-badge{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);gap:var(--rt-space-1)}:host .rt-live-badge--active .rt-live-badge__dot{background:var(--rt-color-state-success)}:host .rt-live-badge__dot{width:8px;height:8px;border-radius:var(--rt-radius-full);background:var(--rt-color-border-subtle)}:host .rt-live-badge__count{color:var(--rt-color-text-primary)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: RtLiveBadgeComponent, isStandalone: true, selector: "rt-live-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-live-badge" }, ngImport: i0, template: "<span rtBlock=\"rt-live-badge\" qa-dataid=\"live-badge\" [attr.data-active]=\"active()\" [rtMod]=\"{ active: active() }\">\n    <span rtElem=\"dot\"></span>\n    <span rtElem=\"label\" qa-dataid=\"live-badge-label\">{{ labelText() }}</span>\n    <span rtElem=\"count\" qa-dataid=\"live-badge-count\">{{ count() ?? '\u2014' }}</span>\n</span>\n", styles: ["@charset \"UTF-8\";rt-live-badge{display:inline-flex}rt-live-badge .rt-live-badge{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);gap:var(--rt-space-1)}rt-live-badge .rt-live-badge--active .rt-live-badge__dot{background:var(--rt-color-state-success)}rt-live-badge .rt-live-badge__dot{width:8px;height:8px;border-radius:var(--rt-radius-full);background:var(--rt-color-border-subtle)}rt-live-badge .rt-live-badge__count{color:var(--rt-color-text-primary)}\n"], dependencies: [{ kind: "directive", type: 
                 // standalone components / directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtLiveBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-live-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-live-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         BlockDirective,
                         ElemDirective,
                         ModDirective,
                     ], host: {
                         class: BEM_BLOCK$u,
-                    }, template: "<span rtBlock=\"rt-live-badge\" qa-dataid=\"live-badge\" [attr.data-active]=\"active()\" [rtMod]=\"{ active: active() }\">\n    <span rtElem=\"dot\"></span>\n    <span rtElem=\"label\" qa-dataid=\"live-badge-label\">{{ labelText() }}</span>\n    <span rtElem=\"count\" qa-dataid=\"live-badge-count\">{{ count() ?? '\u2014' }}</span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}:host .rt-live-badge{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);gap:var(--rt-space-1)}:host .rt-live-badge--active .rt-live-badge__dot{background:var(--rt-color-state-success)}:host .rt-live-badge__dot{width:8px;height:8px;border-radius:var(--rt-radius-full);background:var(--rt-color-border-subtle)}:host .rt-live-badge__count{color:var(--rt-color-text-primary)}\n"] }]
+                    }, template: "<span rtBlock=\"rt-live-badge\" qa-dataid=\"live-badge\" [attr.data-active]=\"active()\" [rtMod]=\"{ active: active() }\">\n    <span rtElem=\"dot\"></span>\n    <span rtElem=\"label\" qa-dataid=\"live-badge-label\">{{ labelText() }}</span>\n    <span rtElem=\"count\" qa-dataid=\"live-badge-count\">{{ count() ?? '\u2014' }}</span>\n</span>\n", styles: ["@charset \"UTF-8\";rt-live-badge{display:inline-flex}rt-live-badge .rt-live-badge{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);gap:var(--rt-space-1)}rt-live-badge .rt-live-badge--active .rt-live-badge__dot{background:var(--rt-color-state-success)}rt-live-badge .rt-live-badge__dot{width:8px;height:8px;border-radius:var(--rt-radius-full);background:var(--rt-color-border-subtle)}rt-live-badge .rt-live-badge__count{color:var(--rt-color-text-primary)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
 
 const BEM_BLOCK$t = 'rt-menu-confirm-dialog';
@@ -8766,13 +8841,13 @@ class RtMessageComponent {
         this.closed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtMessageComponent, isStandalone: true, selector: "rt-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "rt-message" }, ngImport: i0, template: "<aside rtBlock=\"rt-message\" qa-dataid=\"message-alert\" role=\"alert\" [attr.data-severity]=\"severity()\" [rtMod]=\"{ severity: severity() }\">\n    @if (effectiveIcon(); as iconName) {\n        <rt-icon rtElem=\"icon\" [name]=\"iconName\" />\n    }\n    <div rtElem=\"body\" qa-dataid=\"message-body\">\n        <ng-content />\n    </div>\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"message-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            shape=\"circle\"\n            [ariaLabel]=\"'rtKit.uiClose' | transloco\"\n            (clicked)=\"onClose()\" />\n    }\n</aside>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-message{display:flex;align-items:flex-start;padding:var(--rt-space-3) var(--rt-space-4);border-radius:var(--rt-radius-md);background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info);font-size:var(--rt-text-sm);gap:var(--rt-space-2);line-height:var(--rt-leading-normal)}:host .rt-message--severity--info{background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info)}:host .rt-message--severity--success{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}:host .rt-message--severity--warning{background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning)}:host .rt-message--severity--danger{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}:host .rt-message--severity--secondary,:host .rt-message--severity--neutral{background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary)}:host .rt-message__icon{flex-shrink:0;margin-block-start:var(--rt-space-0-5)}:host .rt-message__body{min-width:0;flex:1 1 auto}:host .rt-message__close{flex-shrink:0;margin-inline-start:auto}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtMessageComponent, isStandalone: true, selector: "rt-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "rt-message" }, ngImport: i0, template: "<aside rtBlock=\"rt-message\" qa-dataid=\"message-alert\" role=\"alert\" [attr.data-severity]=\"severity()\" [rtMod]=\"{ severity: severity() }\">\n    @if (effectiveIcon(); as iconName) {\n        <rt-icon rtElem=\"icon\" [name]=\"iconName\" />\n    }\n    <div rtElem=\"body\" qa-dataid=\"message-body\">\n        <ng-content />\n    </div>\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"message-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            shape=\"circle\"\n            [ariaLabel]=\"'rtKit.uiClose' | transloco\"\n            (clicked)=\"onClose()\" />\n    }\n</aside>\n", styles: ["@charset \"UTF-8\";rt-message{display:block}rt-message .rt-message{display:flex;align-items:flex-start;padding:var(--rt-space-3) var(--rt-space-4);border-radius:var(--rt-radius-md);background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info);font-size:var(--rt-text-sm);gap:var(--rt-space-2);line-height:var(--rt-leading-normal)}rt-message .rt-message--severity--info{background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info)}rt-message .rt-message--severity--success{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-message .rt-message--severity--warning{background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning)}rt-message .rt-message--severity--danger{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-message .rt-message--severity--secondary,rt-message .rt-message--severity--neutral{background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary)}rt-message .rt-message__icon{flex-shrink:0;margin-block-start:var(--rt-space-0-5)}rt-message .rt-message__body{min-width:0;flex:1 1 auto}rt-message .rt-message__close{flex-shrink:0;margin-inline-start:auto}\n"], dependencies: [{ kind: "component", type: 
                 // standalone components / directives
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-message', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtIconButtonComponent,
                         RtIconComponent,
@@ -8782,7 +8857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         TranslocoPipe,
                     ], host: {
                         class: BEM_BLOCK$q,
-                    }, template: "<aside rtBlock=\"rt-message\" qa-dataid=\"message-alert\" role=\"alert\" [attr.data-severity]=\"severity()\" [rtMod]=\"{ severity: severity() }\">\n    @if (effectiveIcon(); as iconName) {\n        <rt-icon rtElem=\"icon\" [name]=\"iconName\" />\n    }\n    <div rtElem=\"body\" qa-dataid=\"message-body\">\n        <ng-content />\n    </div>\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"message-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            shape=\"circle\"\n            [ariaLabel]=\"'rtKit.uiClose' | transloco\"\n            (clicked)=\"onClose()\" />\n    }\n</aside>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-message{display:flex;align-items:flex-start;padding:var(--rt-space-3) var(--rt-space-4);border-radius:var(--rt-radius-md);background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info);font-size:var(--rt-text-sm);gap:var(--rt-space-2);line-height:var(--rt-leading-normal)}:host .rt-message--severity--info{background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info)}:host .rt-message--severity--success{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}:host .rt-message--severity--warning{background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning)}:host .rt-message--severity--danger{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}:host .rt-message--severity--secondary,:host .rt-message--severity--neutral{background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary)}:host .rt-message__icon{flex-shrink:0;margin-block-start:var(--rt-space-0-5)}:host .rt-message__body{min-width:0;flex:1 1 auto}:host .rt-message__close{flex-shrink:0;margin-inline-start:auto}\n"] }]
+                    }, template: "<aside rtBlock=\"rt-message\" qa-dataid=\"message-alert\" role=\"alert\" [attr.data-severity]=\"severity()\" [rtMod]=\"{ severity: severity() }\">\n    @if (effectiveIcon(); as iconName) {\n        <rt-icon rtElem=\"icon\" [name]=\"iconName\" />\n    }\n    <div rtElem=\"body\" qa-dataid=\"message-body\">\n        <ng-content />\n    </div>\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"message-close\"\n            icon=\"ico-close\"\n            variant=\"ghost\"\n            size=\"sm\"\n            shape=\"circle\"\n            [ariaLabel]=\"'rtKit.uiClose' | transloco\"\n            (clicked)=\"onClose()\" />\n    }\n</aside>\n", styles: ["@charset \"UTF-8\";rt-message{display:block}rt-message .rt-message{display:flex;align-items:flex-start;padding:var(--rt-space-3) var(--rt-space-4);border-radius:var(--rt-radius-md);background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info);font-size:var(--rt-text-sm);gap:var(--rt-space-2);line-height:var(--rt-leading-normal)}rt-message .rt-message--severity--info{background:var(--rt-color-state-info-bg);color:var(--rt-color-state-info)}rt-message .rt-message--severity--success{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-message .rt-message--severity--warning{background:var(--rt-color-state-warning-bg);color:var(--rt-color-state-warning)}rt-message .rt-message--severity--danger{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-message .rt-message--severity--secondary,rt-message .rt-message--severity--neutral{background:var(--rt-color-bg-subtle);color:var(--rt-color-text-primary)}rt-message .rt-message__icon{flex-shrink:0;margin-block-start:var(--rt-space-0-5)}rt-message .rt-message__body{min-width:0;flex:1 1 auto}rt-message .rt-message__close{flex-shrink:0;margin-inline-start:auto}\n"] }]
         }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const BEM_BLOCK$p = 'rt-money-list';
@@ -9076,20 +9151,20 @@ class RtNightGridComponent {
         this.cellClick.emit(cell);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtNightGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtNightGridComponent, isStandalone: true, selector: "rt-night-grid", inputs: { cells: { classPropertyName: "cells", publicName: "cells", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick" }, host: { classAttribute: "rt-night-grid" }, ngImport: i0, template: "<div rtBlock=\"rt-night-grid\" qa-dataid=\"night-grid\" role=\"list\" [attr.aria-label]=\"ariaText()\">\n    @for (cell of cells(); track cell.id) {\n        <button\n            rtElem=\"cell\"\n            qa-dataid=\"night-grid-cell\"\n            type=\"button\"\n            role=\"listitem\"\n            [attr.data-id]=\"cell.id\"\n            [attr.data-state]=\"cell.state\"\n            [rtMod]=\"{ state: cell.state }\"\n            [attr.title]=\"cell.title\"\n            [attr.aria-label]=\"cell.title\"\n            (click)=\"onCellClick(cell)\"></button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-night-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(auto-fit,minmax(16px,1fr))}:host .rt-night-grid__cell{padding:0;border:none;border-radius:var(--rt-radius-sm);aspect-ratio:1;background:var(--rt-color-bg-surface-subtle);cursor:pointer}:host .rt-night-grid__cell:hover{outline:var(--rt-border-width-thin) solid var(--rt-color-border-strong)}:host .rt-night-grid__cell:focus-visible{outline:var(--rt-border-width-thin) solid var(--rt-color-border-focus);outline-offset:1px}:host .rt-night-grid__cell--state--primary{background:var(--rt-color-state-success)}:host .rt-night-grid__cell--state--secondary{background:color-mix(in srgb,var(--rt-color-state-success) 35%,transparent)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtNightGridComponent, isStandalone: true, selector: "rt-night-grid", inputs: { cells: { classPropertyName: "cells", publicName: "cells", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClick: "cellClick" }, host: { classAttribute: "rt-night-grid" }, ngImport: i0, template: "<!--\n    \u0413\u0440\u0443\u043F\u043F\u0430, \u0430 \u043D\u0435 \u0441\u043F\u0438\u0441\u043E\u043A: \u043A\u043B\u0435\u0442\u043A\u0438 \u2014 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0435 \u043A\u043D\u043E\u043F\u043A\u0438, \u0438 `role=\"listitem\"` \u043D\u0430 \u043D\u0438\u0445\n    \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u043B \u0431\u044B \u0440\u043E\u043B\u044C \u043A\u043D\u043E\u043F\u043A\u0438, \u0442\u0430\u043A \u0447\u0442\u043E \u0441\u043A\u0440\u0438\u043D\u0440\u0438\u0434\u0435\u0440 \u043D\u0430\u0437\u044B\u0432\u0430\u043B \u0431\u044B \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0441\u043F\u0438\u0441\u043A\u0430 \u0438\n    \u0443\u043C\u0430\u043B\u0447\u0438\u0432\u0430\u043B, \u0447\u0442\u043E \u043F\u043E \u043D\u0435\u043C\u0443 \u043D\u0430\u0436\u0438\u043C\u0430\u044E\u0442. \u041E\u0431\u0435\u0440\u043D\u0443\u0442\u044C \u043A\u0430\u0436\u0434\u0443\u044E \u043A\u043D\u043E\u043F\u043A\u0443 \u0432 `listitem` \u0442\u043E\u0436\u0435\n    \u043D\u0435\u043B\u044C\u0437\u044F: \u043A\u043B\u0435\u0442\u043A\u0438 \u2014 \u043F\u0440\u044F\u043C\u044B\u0435 \u0434\u0435\u0442\u0438 grid-\u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430, \u043E\u0431\u0451\u0440\u0442\u043A\u0430 \u0440\u0430\u0437\u0432\u0430\u043B\u0438\u043B\u0430 \u0431\u044B \u0440\u0430\u0441\u043A\u043B\u0430\u0434\u043A\u0443.\n-->\n<div rtBlock=\"rt-night-grid\" qa-dataid=\"night-grid\" role=\"group\" [attr.aria-label]=\"ariaText()\">\n    @for (cell of cells(); track cell.id) {\n        <button\n            rtElem=\"cell\"\n            qa-dataid=\"night-grid-cell\"\n            type=\"button\"\n            [attr.data-id]=\"cell.id\"\n            [attr.data-state]=\"cell.state\"\n            [rtMod]=\"{ state: cell.state }\"\n            [attr.title]=\"cell.title\"\n            [attr.aria-label]=\"cell.title\"\n            (click)=\"onCellClick(cell)\"></button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";rt-night-grid{display:block}rt-night-grid .rt-night-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(auto-fit,minmax(16px,1fr))}rt-night-grid .rt-night-grid__cell{padding:0;border:none;border-radius:var(--rt-radius-sm);aspect-ratio:1;background:var(--rt-color-bg-surface-subtle);cursor:pointer}rt-night-grid .rt-night-grid__cell:hover{outline:var(--rt-border-width-thin) solid var(--rt-color-border-strong)}rt-night-grid .rt-night-grid__cell:focus-visible{outline:var(--rt-border-width-thin) solid var(--rt-color-border-focus);outline-offset:1px}rt-night-grid .rt-night-grid__cell--state--primary{background:var(--rt-color-state-success)}rt-night-grid .rt-night-grid__cell--state--secondary{background:color-mix(in srgb,var(--rt-color-state-success) 35%,transparent)}\n"], dependencies: [{ kind: "directive", type: 
                 // standalone components / directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtNightGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-night-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-night-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         BlockDirective,
                         ElemDirective,
                         ModDirective,
                     ], host: {
                         class: BEM_BLOCK$m,
-                    }, template: "<div rtBlock=\"rt-night-grid\" qa-dataid=\"night-grid\" role=\"list\" [attr.aria-label]=\"ariaText()\">\n    @for (cell of cells(); track cell.id) {\n        <button\n            rtElem=\"cell\"\n            qa-dataid=\"night-grid-cell\"\n            type=\"button\"\n            role=\"listitem\"\n            [attr.data-id]=\"cell.id\"\n            [attr.data-state]=\"cell.state\"\n            [rtMod]=\"{ state: cell.state }\"\n            [attr.title]=\"cell.title\"\n            [attr.aria-label]=\"cell.title\"\n            (click)=\"onCellClick(cell)\"></button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-night-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(auto-fit,minmax(16px,1fr))}:host .rt-night-grid__cell{padding:0;border:none;border-radius:var(--rt-radius-sm);aspect-ratio:1;background:var(--rt-color-bg-surface-subtle);cursor:pointer}:host .rt-night-grid__cell:hover{outline:var(--rt-border-width-thin) solid var(--rt-color-border-strong)}:host .rt-night-grid__cell:focus-visible{outline:var(--rt-border-width-thin) solid var(--rt-color-border-focus);outline-offset:1px}:host .rt-night-grid__cell--state--primary{background:var(--rt-color-state-success)}:host .rt-night-grid__cell--state--secondary{background:color-mix(in srgb,var(--rt-color-state-success) 35%,transparent)}\n"] }]
+                    }, template: "<!--\n    \u0413\u0440\u0443\u043F\u043F\u0430, \u0430 \u043D\u0435 \u0441\u043F\u0438\u0441\u043E\u043A: \u043A\u043B\u0435\u0442\u043A\u0438 \u2014 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0435 \u043A\u043D\u043E\u043F\u043A\u0438, \u0438 `role=\"listitem\"` \u043D\u0430 \u043D\u0438\u0445\n    \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u043B \u0431\u044B \u0440\u043E\u043B\u044C \u043A\u043D\u043E\u043F\u043A\u0438, \u0442\u0430\u043A \u0447\u0442\u043E \u0441\u043A\u0440\u0438\u043D\u0440\u0438\u0434\u0435\u0440 \u043D\u0430\u0437\u044B\u0432\u0430\u043B \u0431\u044B \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0441\u043F\u0438\u0441\u043A\u0430 \u0438\n    \u0443\u043C\u0430\u043B\u0447\u0438\u0432\u0430\u043B, \u0447\u0442\u043E \u043F\u043E \u043D\u0435\u043C\u0443 \u043D\u0430\u0436\u0438\u043C\u0430\u044E\u0442. \u041E\u0431\u0435\u0440\u043D\u0443\u0442\u044C \u043A\u0430\u0436\u0434\u0443\u044E \u043A\u043D\u043E\u043F\u043A\u0443 \u0432 `listitem` \u0442\u043E\u0436\u0435\n    \u043D\u0435\u043B\u044C\u0437\u044F: \u043A\u043B\u0435\u0442\u043A\u0438 \u2014 \u043F\u0440\u044F\u043C\u044B\u0435 \u0434\u0435\u0442\u0438 grid-\u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430, \u043E\u0431\u0451\u0440\u0442\u043A\u0430 \u0440\u0430\u0437\u0432\u0430\u043B\u0438\u043B\u0430 \u0431\u044B \u0440\u0430\u0441\u043A\u043B\u0430\u0434\u043A\u0443.\n-->\n<div rtBlock=\"rt-night-grid\" qa-dataid=\"night-grid\" role=\"group\" [attr.aria-label]=\"ariaText()\">\n    @for (cell of cells(); track cell.id) {\n        <button\n            rtElem=\"cell\"\n            qa-dataid=\"night-grid-cell\"\n            type=\"button\"\n            [attr.data-id]=\"cell.id\"\n            [attr.data-state]=\"cell.state\"\n            [rtMod]=\"{ state: cell.state }\"\n            [attr.title]=\"cell.title\"\n            [attr.aria-label]=\"cell.title\"\n            (click)=\"onCellClick(cell)\"></button>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";rt-night-grid{display:block}rt-night-grid .rt-night-grid{display:grid;gap:var(--rt-space-1);grid-template-columns:repeat(auto-fit,minmax(16px,1fr))}rt-night-grid .rt-night-grid__cell{padding:0;border:none;border-radius:var(--rt-radius-sm);aspect-ratio:1;background:var(--rt-color-bg-surface-subtle);cursor:pointer}rt-night-grid .rt-night-grid__cell:hover{outline:var(--rt-border-width-thin) solid var(--rt-color-border-strong)}rt-night-grid .rt-night-grid__cell:focus-visible{outline:var(--rt-border-width-thin) solid var(--rt-color-border-focus);outline-offset:1px}rt-night-grid .rt-night-grid__cell--state--primary{background:var(--rt-color-state-success)}rt-night-grid .rt-night-grid__cell--state--secondary{background:color-mix(in srgb,var(--rt-color-state-success) 35%,transparent)}\n"] }]
         }], propDecorators: { cells: [{ type: i0.Input, args: [{ isSignal: true, alias: "cells", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }] } });
 
 const BEM_BLOCK$l = 'rt-notifications-bell';
@@ -9486,7 +9561,7 @@ class RtPhotoViewerComponent {
         track.scrollTo({ left: track.clientWidth * this.currentIndex(), behavior: 'instant' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtPhotoViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtPhotoViewerComponent, isStandalone: true, selector: "rt-photo-viewer", host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, listeners: { "keydown.escape": "close()", "keydown.arrowLeft": "move(-1)", "keydown.arrowRight": "move(1)" }, classAttribute: "rt-photo-viewer" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-photo-viewer\">\n    <!-- \u041B\u043E\u0432\u0443\u0448\u043A\u0430 \u0434\u0435\u0440\u0436\u0438\u0442 Tab \u0432\u043D\u0443\u0442\u0440\u0438; \u0444\u043E\u043A\u0443\u0441 \u0441\u0442\u0430\u0432\u0438\u0442 \u0441\u0430\u043C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442, \u043F\u043E\u044D\u0442\u043E\u043C\u0443\n         \u0430\u0432\u0442\u043E-\u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u0437\u0434\u0435\u0441\u044C \u043D\u0435\u0442: \u043E\u043D \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u043B \u0444\u043E\u043A\u0443\u0441 \u043D\u0430 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0449\u0438\u043A\u0435, \u0438 \u043A\u043B\u0430\u0432\u0438\u0448\u0438\n         \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u0430\u043B\u0438 \u043B\u0438\u0441\u0442\u0430\u0442\u044C -->\n    <div rtElem=\"surface\" cdkTrapFocus>\n        <header rtElem=\"bar\">\n            <span rtElem=\"counter\" qa-dataid=\"photo-viewer-counter\">{{ counter() }}</span>\n            <rt-icon-button\n                qa-dataid=\"photo-viewer-close\"\n                icon=\"close\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerClose' | transloco\"\n                (clicked)=\"close()\" />\n        </header>\n\n        <div rtElem=\"track\" qa-dataid=\"photo-viewer-track\" #track (scroll)=\"onScroll()\">\n            @for (photo of photos; track photo.id; let index = $index) {\n                <figure rtElem=\"slide\" [attr.data-photo-index]=\"index\">\n                    @if (rendered()[index]) {\n                        <picture>\n                            @for (source of photo.picture.sources; track source.type) {\n                                <source sizes=\"100vw\" [type]=\"source.type\" [srcset]=\"source.srcset\" />\n                            }\n                            <img\n                                rtElem=\"image\"\n                                qa-dataid=\"photo-viewer-image\"\n                                decoding=\"async\"\n                                sizes=\"100vw\"\n                                [srcset]=\"photo.picture.fallbackSrcset\"\n                                [src]=\"photo.picture.fallbackSrc\"\n                                [alt]=\"photo.alt\" />\n                        </picture>\n                    }\n                </figure>\n            }\n        </div>\n\n        @if (photos.length > 1) {\n            <rt-icon-button\n                rtElem=\"arrow-prev\"\n                qa-dataid=\"photo-viewer-prev\"\n                icon=\"angle-left\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerPrev' | transloco\"\n                (clicked)=\"move(-1)\" />\n\n            <rt-icon-button\n                rtElem=\"arrow-next\"\n                qa-dataid=\"photo-viewer-next\"\n                icon=\"angle-right\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerNext' | transloco\"\n                (clicked)=\"move(1)\" />\n        }\n\n        <!-- \u041F\u0430\u043D\u0435\u043B\u044C \u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043D\u0430\u0440\u0443\u0436\u0438: \u0433\u0434\u0435-\u0442\u043E \u043A\u0430\u0434\u0440 \u0442\u043E\u043B\u044C\u043A\u043E \u0441\u043C\u043E\u0442\u0440\u044F\u0442, \u0433\u0434\u0435-\u0442\u043E \u0438\u043C \u0435\u0449\u0451 \u0438\n             \u0443\u043F\u0440\u0430\u0432\u043B\u044F\u044E\u0442, \u0438 \u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442\u0441\u044F \u0442\u0430\u043C \u0436\u0435, \u0433\u0434\u0435 \u043A\u0430\u0434\u0440 \u0432\u0438\u0434\u0435\u043D \u043A\u0440\u0443\u043F\u043D\u043E -->\n        @if (panel) {\n            <footer rtElem=\"panel\" qa-dataid=\"photo-viewer-panel\">\n                <ng-container\n                    [ngTemplateOutlet]=\"panel\"\n                    [ngTemplateOutletContext]=\"{ $implicit: photos[currentIndex()], index: currentIndex() }\" />\n            </footer>\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100vw;height:100vh;height:100dvh;background:var(--rt-color-bg-inverse)}:host .rt-photo-viewer__surface{position:absolute;inset:0}:host .rt-photo-viewer__bar{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-4) var(--rt-space-5);color:var(--rt-color-text-inverse);gap:var(--rt-space-4)}:host .rt-photo-viewer__counter{font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums}:host .rt-photo-viewer__track{display:flex;overflow:auto hidden;width:100%;height:100%;scroll-snap-type:x mandatory;scrollbar-width:none}:host .rt-photo-viewer__slide{display:flex;flex:0 0 100%;align-items:center;justify-content:center;padding:var(--rt-space-10) var(--rt-space-4);margin:0;scroll-snap-align:center}:host .rt-photo-viewer__slide picture{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rt-photo-viewer__image{display:block;max-width:100%;max-height:100%;object-fit:contain}:host .rt-photo-viewer__panel{position:absolute;z-index:1;right:0;bottom:0;left:0;padding:var(--rt-space-4) var(--rt-space-5);background:var(--rt-color-bg-surface);color:var(--rt-color-text-primary)}:host .rt-photo-viewer__bar rt-icon-button,:host .rt-photo-viewer__arrow-prev,:host .rt-photo-viewer__arrow-next{--rt-icon-button-color: var(--rt-color-text-inverse);--rt-icon-button-color-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);border-radius:var(--rt-radius-md);background:color-mix(in srgb,var(--rt-color-bg-inverse) 55%,transparent)}:host .rt-photo-viewer__arrow-prev,:host .rt-photo-viewer__arrow-next{position:absolute;top:50%;transform:translateY(-50%)}:host .rt-photo-viewer__arrow-prev{left:var(--rt-space-3)}:host .rt-photo-viewer__arrow-next{right:var(--rt-space-3)}:host:has(.rt-photo-viewer__panel) .rt-photo-viewer__slide{padding-bottom:var(--rt-space-20)}@media(width<=700px){:host .rt-photo-viewer__arrow-prev,:host .rt-photo-viewer__arrow-next{display:none}:host .rt-photo-viewer__slide{padding:var(--rt-space-12) 0}}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtPhotoViewerComponent, isStandalone: true, selector: "rt-photo-viewer", host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, listeners: { "keydown.escape": "close()", "keydown.arrowLeft": "move(-1)", "keydown.arrowRight": "move(1)" }, classAttribute: "rt-photo-viewer" }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-photo-viewer\">\n    <!-- \u041B\u043E\u0432\u0443\u0448\u043A\u0430 \u0434\u0435\u0440\u0436\u0438\u0442 Tab \u0432\u043D\u0443\u0442\u0440\u0438; \u0444\u043E\u043A\u0443\u0441 \u0441\u0442\u0430\u0432\u0438\u0442 \u0441\u0430\u043C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442, \u043F\u043E\u044D\u0442\u043E\u043C\u0443\n         \u0430\u0432\u0442\u043E-\u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u0437\u0434\u0435\u0441\u044C \u043D\u0435\u0442: \u043E\u043D \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u043B \u0444\u043E\u043A\u0443\u0441 \u043D\u0430 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0449\u0438\u043A\u0435, \u0438 \u043A\u043B\u0430\u0432\u0438\u0448\u0438\n         \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u0430\u043B\u0438 \u043B\u0438\u0441\u0442\u0430\u0442\u044C -->\n    <div rtElem=\"surface\" cdkTrapFocus>\n        <header rtElem=\"bar\">\n            <span rtElem=\"counter\" qa-dataid=\"photo-viewer-counter\">{{ counter() }}</span>\n            <rt-icon-button\n                qa-dataid=\"photo-viewer-close\"\n                icon=\"close\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerClose' | transloco\"\n                (clicked)=\"close()\" />\n        </header>\n\n        <div rtElem=\"track\" qa-dataid=\"photo-viewer-track\" #track (scroll)=\"onScroll()\">\n            @for (photo of photos; track photo.id; let index = $index) {\n                <figure rtElem=\"slide\" [attr.data-photo-index]=\"index\">\n                    @if (rendered()[index]) {\n                        <picture>\n                            @for (source of photo.picture.sources; track source.type) {\n                                <source sizes=\"100vw\" [type]=\"source.type\" [srcset]=\"source.srcset\" />\n                            }\n                            <img\n                                rtElem=\"image\"\n                                qa-dataid=\"photo-viewer-image\"\n                                decoding=\"async\"\n                                sizes=\"100vw\"\n                                [srcset]=\"photo.picture.fallbackSrcset\"\n                                [src]=\"photo.picture.fallbackSrc\"\n                                [alt]=\"photo.alt\" />\n                        </picture>\n                    }\n                </figure>\n            }\n        </div>\n\n        @if (photos.length > 1) {\n            <rt-icon-button\n                rtElem=\"arrow-prev\"\n                qa-dataid=\"photo-viewer-prev\"\n                icon=\"angle-left\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerPrev' | transloco\"\n                (clicked)=\"move(-1)\" />\n\n            <rt-icon-button\n                rtElem=\"arrow-next\"\n                qa-dataid=\"photo-viewer-next\"\n                icon=\"angle-right\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerNext' | transloco\"\n                (clicked)=\"move(1)\" />\n        }\n\n        <!-- \u041F\u0430\u043D\u0435\u043B\u044C \u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043D\u0430\u0440\u0443\u0436\u0438: \u0433\u0434\u0435-\u0442\u043E \u043A\u0430\u0434\u0440 \u0442\u043E\u043B\u044C\u043A\u043E \u0441\u043C\u043E\u0442\u0440\u044F\u0442, \u0433\u0434\u0435-\u0442\u043E \u0438\u043C \u0435\u0449\u0451 \u0438\n             \u0443\u043F\u0440\u0430\u0432\u043B\u044F\u044E\u0442, \u0438 \u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442\u0441\u044F \u0442\u0430\u043C \u0436\u0435, \u0433\u0434\u0435 \u043A\u0430\u0434\u0440 \u0432\u0438\u0434\u0435\u043D \u043A\u0440\u0443\u043F\u043D\u043E -->\n        @if (panel) {\n            <footer rtElem=\"panel\" qa-dataid=\"photo-viewer-panel\">\n                <ng-container\n                    [ngTemplateOutlet]=\"panel\"\n                    [ngTemplateOutletContext]=\"{ $implicit: photos[currentIndex()], index: currentIndex() }\" />\n            </footer>\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-photo-viewer{display:block;width:100vw;height:100vh;height:100dvh;background:var(--rt-color-bg-inverse)}.rt-photo-viewer__surface{position:absolute;inset:0}.rt-photo-viewer__bar{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-4) var(--rt-space-5);color:var(--rt-color-text-inverse);gap:var(--rt-space-4)}.rt-photo-viewer__counter{font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums}.rt-photo-viewer__track{display:flex;overflow:auto hidden;width:100%;height:100%;scroll-snap-type:x mandatory;scrollbar-width:none}.rt-photo-viewer__slide{display:flex;flex:0 0 100%;align-items:center;justify-content:center;padding:var(--rt-space-10) var(--rt-space-4);margin:0;scroll-snap-align:center}.rt-photo-viewer__slide picture{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.rt-photo-viewer__image{display:block;max-width:100%;max-height:100%;object-fit:contain}.rt-photo-viewer__panel{position:absolute;z-index:1;right:0;bottom:0;left:0;padding:var(--rt-space-4) var(--rt-space-5);background:var(--rt-color-bg-surface);color:var(--rt-color-text-primary)}.rt-photo-viewer__bar rt-icon-button,.rt-photo-viewer__arrow-prev,.rt-photo-viewer__arrow-next{--rt-icon-button-color: var(--rt-color-text-inverse);--rt-icon-button-color-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);border-radius:var(--rt-radius-md);background:color-mix(in srgb,var(--rt-color-bg-inverse) 55%,transparent)}.rt-photo-viewer__arrow-prev,.rt-photo-viewer__arrow-next{position:absolute;top:50%;transform:translateY(-50%)}.rt-photo-viewer__arrow-prev{left:var(--rt-space-3)}.rt-photo-viewer__arrow-next{right:var(--rt-space-3)}.rt-photo-viewer:has(.rt-photo-viewer__panel) .rt-photo-viewer__slide{padding-bottom:var(--rt-space-20)}@media(width<=700px){.rt-photo-viewer__arrow-prev,.rt-photo-viewer__arrow-next{display:none}.rt-photo-viewer__slide{padding:var(--rt-space-12) 0}}\n"], dependencies: [{ kind: "directive", type: 
                 // angular
                 CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 
                 // rt-tools
@@ -9494,11 +9569,11 @@ class RtPhotoViewerComponent {
                 // components
                 RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "pipe", type: 
                 // transloco
-                TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtPhotoViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-photo-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-photo-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // angular
                         CdkTrapFocus,
                         NgTemplateOutlet,
@@ -9520,7 +9595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(keydown.escape)': 'close()',
                         '(keydown.arrowLeft)': 'move(-1)',
                         '(keydown.arrowRight)': 'move(1)',
-                    }, template: "<ng-container rtBlock=\"rt-photo-viewer\">\n    <!-- \u041B\u043E\u0432\u0443\u0448\u043A\u0430 \u0434\u0435\u0440\u0436\u0438\u0442 Tab \u0432\u043D\u0443\u0442\u0440\u0438; \u0444\u043E\u043A\u0443\u0441 \u0441\u0442\u0430\u0432\u0438\u0442 \u0441\u0430\u043C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442, \u043F\u043E\u044D\u0442\u043E\u043C\u0443\n         \u0430\u0432\u0442\u043E-\u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u0437\u0434\u0435\u0441\u044C \u043D\u0435\u0442: \u043E\u043D \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u043B \u0444\u043E\u043A\u0443\u0441 \u043D\u0430 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0449\u0438\u043A\u0435, \u0438 \u043A\u043B\u0430\u0432\u0438\u0448\u0438\n         \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u0430\u043B\u0438 \u043B\u0438\u0441\u0442\u0430\u0442\u044C -->\n    <div rtElem=\"surface\" cdkTrapFocus>\n        <header rtElem=\"bar\">\n            <span rtElem=\"counter\" qa-dataid=\"photo-viewer-counter\">{{ counter() }}</span>\n            <rt-icon-button\n                qa-dataid=\"photo-viewer-close\"\n                icon=\"close\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerClose' | transloco\"\n                (clicked)=\"close()\" />\n        </header>\n\n        <div rtElem=\"track\" qa-dataid=\"photo-viewer-track\" #track (scroll)=\"onScroll()\">\n            @for (photo of photos; track photo.id; let index = $index) {\n                <figure rtElem=\"slide\" [attr.data-photo-index]=\"index\">\n                    @if (rendered()[index]) {\n                        <picture>\n                            @for (source of photo.picture.sources; track source.type) {\n                                <source sizes=\"100vw\" [type]=\"source.type\" [srcset]=\"source.srcset\" />\n                            }\n                            <img\n                                rtElem=\"image\"\n                                qa-dataid=\"photo-viewer-image\"\n                                decoding=\"async\"\n                                sizes=\"100vw\"\n                                [srcset]=\"photo.picture.fallbackSrcset\"\n                                [src]=\"photo.picture.fallbackSrc\"\n                                [alt]=\"photo.alt\" />\n                        </picture>\n                    }\n                </figure>\n            }\n        </div>\n\n        @if (photos.length > 1) {\n            <rt-icon-button\n                rtElem=\"arrow-prev\"\n                qa-dataid=\"photo-viewer-prev\"\n                icon=\"angle-left\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerPrev' | transloco\"\n                (clicked)=\"move(-1)\" />\n\n            <rt-icon-button\n                rtElem=\"arrow-next\"\n                qa-dataid=\"photo-viewer-next\"\n                icon=\"angle-right\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerNext' | transloco\"\n                (clicked)=\"move(1)\" />\n        }\n\n        <!-- \u041F\u0430\u043D\u0435\u043B\u044C \u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043D\u0430\u0440\u0443\u0436\u0438: \u0433\u0434\u0435-\u0442\u043E \u043A\u0430\u0434\u0440 \u0442\u043E\u043B\u044C\u043A\u043E \u0441\u043C\u043E\u0442\u0440\u044F\u0442, \u0433\u0434\u0435-\u0442\u043E \u0438\u043C \u0435\u0449\u0451 \u0438\n             \u0443\u043F\u0440\u0430\u0432\u043B\u044F\u044E\u0442, \u0438 \u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442\u0441\u044F \u0442\u0430\u043C \u0436\u0435, \u0433\u0434\u0435 \u043A\u0430\u0434\u0440 \u0432\u0438\u0434\u0435\u043D \u043A\u0440\u0443\u043F\u043D\u043E -->\n        @if (panel) {\n            <footer rtElem=\"panel\" qa-dataid=\"photo-viewer-panel\">\n                <ng-container\n                    [ngTemplateOutlet]=\"panel\"\n                    [ngTemplateOutletContext]=\"{ $implicit: photos[currentIndex()], index: currentIndex() }\" />\n            </footer>\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100vw;height:100vh;height:100dvh;background:var(--rt-color-bg-inverse)}:host .rt-photo-viewer__surface{position:absolute;inset:0}:host .rt-photo-viewer__bar{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-4) var(--rt-space-5);color:var(--rt-color-text-inverse);gap:var(--rt-space-4)}:host .rt-photo-viewer__counter{font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums}:host .rt-photo-viewer__track{display:flex;overflow:auto hidden;width:100%;height:100%;scroll-snap-type:x mandatory;scrollbar-width:none}:host .rt-photo-viewer__slide{display:flex;flex:0 0 100%;align-items:center;justify-content:center;padding:var(--rt-space-10) var(--rt-space-4);margin:0;scroll-snap-align:center}:host .rt-photo-viewer__slide picture{display:flex;width:100%;height:100%;align-items:center;justify-content:center}:host .rt-photo-viewer__image{display:block;max-width:100%;max-height:100%;object-fit:contain}:host .rt-photo-viewer__panel{position:absolute;z-index:1;right:0;bottom:0;left:0;padding:var(--rt-space-4) var(--rt-space-5);background:var(--rt-color-bg-surface);color:var(--rt-color-text-primary)}:host .rt-photo-viewer__bar rt-icon-button,:host .rt-photo-viewer__arrow-prev,:host .rt-photo-viewer__arrow-next{--rt-icon-button-color: var(--rt-color-text-inverse);--rt-icon-button-color-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);border-radius:var(--rt-radius-md);background:color-mix(in srgb,var(--rt-color-bg-inverse) 55%,transparent)}:host .rt-photo-viewer__arrow-prev,:host .rt-photo-viewer__arrow-next{position:absolute;top:50%;transform:translateY(-50%)}:host .rt-photo-viewer__arrow-prev{left:var(--rt-space-3)}:host .rt-photo-viewer__arrow-next{right:var(--rt-space-3)}:host:has(.rt-photo-viewer__panel) .rt-photo-viewer__slide{padding-bottom:var(--rt-space-20)}@media(width<=700px){:host .rt-photo-viewer__arrow-prev,:host .rt-photo-viewer__arrow-next{display:none}:host .rt-photo-viewer__slide{padding:var(--rt-space-12) 0}}\n"] }]
+                    }, template: "<ng-container rtBlock=\"rt-photo-viewer\">\n    <!-- \u041B\u043E\u0432\u0443\u0448\u043A\u0430 \u0434\u0435\u0440\u0436\u0438\u0442 Tab \u0432\u043D\u0443\u0442\u0440\u0438; \u0444\u043E\u043A\u0443\u0441 \u0441\u0442\u0430\u0432\u0438\u0442 \u0441\u0430\u043C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442, \u043F\u043E\u044D\u0442\u043E\u043C\u0443\n         \u0430\u0432\u0442\u043E-\u0437\u0430\u0445\u0432\u0430\u0442\u0430 \u0437\u0434\u0435\u0441\u044C \u043D\u0435\u0442: \u043E\u043D \u043F\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u043B \u0444\u043E\u043A\u0443\u0441 \u043D\u0430 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\u0449\u0438\u043A\u0435, \u0438 \u043A\u043B\u0430\u0432\u0438\u0448\u0438\n         \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u0430\u043B\u0438 \u043B\u0438\u0441\u0442\u0430\u0442\u044C -->\n    <div rtElem=\"surface\" cdkTrapFocus>\n        <header rtElem=\"bar\">\n            <span rtElem=\"counter\" qa-dataid=\"photo-viewer-counter\">{{ counter() }}</span>\n            <rt-icon-button\n                qa-dataid=\"photo-viewer-close\"\n                icon=\"close\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerClose' | transloco\"\n                (clicked)=\"close()\" />\n        </header>\n\n        <div rtElem=\"track\" qa-dataid=\"photo-viewer-track\" #track (scroll)=\"onScroll()\">\n            @for (photo of photos; track photo.id; let index = $index) {\n                <figure rtElem=\"slide\" [attr.data-photo-index]=\"index\">\n                    @if (rendered()[index]) {\n                        <picture>\n                            @for (source of photo.picture.sources; track source.type) {\n                                <source sizes=\"100vw\" [type]=\"source.type\" [srcset]=\"source.srcset\" />\n                            }\n                            <img\n                                rtElem=\"image\"\n                                qa-dataid=\"photo-viewer-image\"\n                                decoding=\"async\"\n                                sizes=\"100vw\"\n                                [srcset]=\"photo.picture.fallbackSrcset\"\n                                [src]=\"photo.picture.fallbackSrc\"\n                                [alt]=\"photo.alt\" />\n                        </picture>\n                    }\n                </figure>\n            }\n        </div>\n\n        @if (photos.length > 1) {\n            <rt-icon-button\n                rtElem=\"arrow-prev\"\n                qa-dataid=\"photo-viewer-prev\"\n                icon=\"angle-left\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerPrev' | transloco\"\n                (clicked)=\"move(-1)\" />\n\n            <rt-icon-button\n                rtElem=\"arrow-next\"\n                qa-dataid=\"photo-viewer-next\"\n                icon=\"angle-right\"\n                variant=\"ghost\"\n                [ariaLabel]=\"'rtKit.photoViewerNext' | transloco\"\n                (clicked)=\"move(1)\" />\n        }\n\n        <!-- \u041F\u0430\u043D\u0435\u043B\u044C \u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043D\u0430\u0440\u0443\u0436\u0438: \u0433\u0434\u0435-\u0442\u043E \u043A\u0430\u0434\u0440 \u0442\u043E\u043B\u044C\u043A\u043E \u0441\u043C\u043E\u0442\u0440\u044F\u0442, \u0433\u0434\u0435-\u0442\u043E \u0438\u043C \u0435\u0449\u0451 \u0438\n             \u0443\u043F\u0440\u0430\u0432\u043B\u044F\u044E\u0442, \u0438 \u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442\u0441\u044F \u0442\u0430\u043C \u0436\u0435, \u0433\u0434\u0435 \u043A\u0430\u0434\u0440 \u0432\u0438\u0434\u0435\u043D \u043A\u0440\u0443\u043F\u043D\u043E -->\n        @if (panel) {\n            <footer rtElem=\"panel\" qa-dataid=\"photo-viewer-panel\">\n                <ng-container\n                    [ngTemplateOutlet]=\"panel\"\n                    [ngTemplateOutletContext]=\"{ $implicit: photos[currentIndex()], index: currentIndex() }\" />\n            </footer>\n        }\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-photo-viewer{display:block;width:100vw;height:100vh;height:100dvh;background:var(--rt-color-bg-inverse)}.rt-photo-viewer__surface{position:absolute;inset:0}.rt-photo-viewer__bar{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-4) var(--rt-space-5);color:var(--rt-color-text-inverse);gap:var(--rt-space-4)}.rt-photo-viewer__counter{font-size:var(--rt-text-sm);font-variant-numeric:tabular-nums}.rt-photo-viewer__track{display:flex;overflow:auto hidden;width:100%;height:100%;scroll-snap-type:x mandatory;scrollbar-width:none}.rt-photo-viewer__slide{display:flex;flex:0 0 100%;align-items:center;justify-content:center;padding:var(--rt-space-10) var(--rt-space-4);margin:0;scroll-snap-align:center}.rt-photo-viewer__slide picture{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.rt-photo-viewer__image{display:block;max-width:100%;max-height:100%;object-fit:contain}.rt-photo-viewer__panel{position:absolute;z-index:1;right:0;bottom:0;left:0;padding:var(--rt-space-4) var(--rt-space-5);background:var(--rt-color-bg-surface);color:var(--rt-color-text-primary)}.rt-photo-viewer__bar rt-icon-button,.rt-photo-viewer__arrow-prev,.rt-photo-viewer__arrow-next{--rt-icon-button-color: var(--rt-color-text-inverse);--rt-icon-button-color-bg-hover: color-mix(in srgb, var(--rt-color-text-inverse) 24%, transparent);border-radius:var(--rt-radius-md);background:color-mix(in srgb,var(--rt-color-bg-inverse) 55%,transparent)}.rt-photo-viewer__arrow-prev,.rt-photo-viewer__arrow-next{position:absolute;top:50%;transform:translateY(-50%)}.rt-photo-viewer__arrow-prev{left:var(--rt-space-3)}.rt-photo-viewer__arrow-next{right:var(--rt-space-3)}.rt-photo-viewer:has(.rt-photo-viewer__panel) .rt-photo-viewer__slide{padding-bottom:var(--rt-space-20)}@media(width<=700px){.rt-photo-viewer__arrow-prev,.rt-photo-viewer__arrow-next{display:none}.rt-photo-viewer__slide{padding:var(--rt-space-12) 0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
 /** Сколько всего страниц. Пустой список — одна страница, листать нечего. */
@@ -9622,7 +9697,7 @@ class RtPaginationComponent {
         this.perPageChange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtPaginationComponent, isStandalone: true, selector: "rt-pagination", inputs: { pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, host: { properties: { "style.display": "isVisible() ? null : 'none'" }, classAttribute: "rt-pagination" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-pagination\">\n    <span rtElem=\"range\" qa-dataid=\"pagination-range\">\n        @if (pageModel().totalCount === 0) {\n            {{ 'rtKit.uiRangeEmpty' | transloco }}\n        } @else {\n            {{ 'rtKit.uiRangeOf' | transloco: { from: rangeFrom(), to: rangeTo(), total: pageModel().totalCount } }}\n        }\n    </span>\n\n    @if (pageItems().length) {\n        <nav rtElem=\"compact\" qa-dataid=\"pagination-compact\" [attr.aria-label]=\"'rtKit.uiPagination' | transloco\">\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-compact-prev\"\n                icon=\"chevron-left\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiPrevPage' | transloco\"\n                [tooltip]=\"'rtKit.uiBack' | transloco\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            <span rtElem=\"compact-label\" qa-dataid=\"pagination-compact-label\">\n                {{ 'rtKit.uiPageOf' | transloco: { page: pageModel().pageNumber, last: lastPage() } }}\n            </span>\n\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-compact-next\"\n                icon=\"chevron-right\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiNextPage' | transloco\"\n                [tooltip]=\"'rtKit.uiForward' | transloco\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n\n        <nav rtElem=\"nav\" qa-dataid=\"pagination-nav\" [attr.aria-label]=\"'rtKit.uiPagination' | transloco\">\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-prev\"\n                icon=\"chevron-left\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiPrevPage' | transloco\"\n                [tooltip]=\"'rtKit.uiBack' | transloco\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            @for (item of pageItems(); track $index) {\n                @if (item === 'gap') {\n                    <span rtElem=\"gap\" aria-hidden=\"true\">\u2026</span>\n                } @else {\n                    <button\n                        rtElem=\"page\"\n                        qa-dataid=\"pagination-page\"\n                        type=\"button\"\n                        [attr.data-page]=\"item\"\n                        [rtMod]=\"{ current: item === pageModel().pageNumber }\"\n                        [attr.aria-current]=\"item === pageModel().pageNumber ? 'page' : null\"\n                        [disabled]=\"loading()\"\n                        (click)=\"goTo(item)\">\n                        {{ item }}\n                    </button>\n                }\n            }\n\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-next\"\n                icon=\"chevron-right\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiNextPage' | transloco\"\n                [tooltip]=\"'rtKit.uiForward' | transloco\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n    }\n\n    <div rtElem=\"per-page\">\n        <span rtElem=\"per-page-label\">{{ 'rtKit.uiPerPage' | transloco }}</span>\n        <rt-select\n            qa-dataid=\"pagination-per-page\"\n            [ariaLabel]=\"'rtKit.uiItemsPerPage' | transloco\"\n            [options]=\"perPageSelectOptions()\"\n            [clearable]=\"false\"\n            [ngModel]=\"pageModel().pageSize\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (selectionChange)=\"onPerPage($event)\" />\n    </div>\n</ng-container>\n", styles: [".rt-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-3) var(--rt-space-xs);container-type:inline-size;gap:var(--rt-space-md)}.rt-pagination__range{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__nav{display:flex;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact{display:none;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__page{min-width:var(--rt-space-xl);height:var(--rt-space-xl);padding:0 var(--rt-space-sm);border:var(--rt-border-width-thin) solid var(--rt-color-border-default);border-radius:var(--rt-radius-md);background:transparent;color:var(--rt-color-text-primary);cursor:pointer;transition:background-color var(--rt-duration-fast) ease,border-color var(--rt-duration-fast) ease,color var(--rt-duration-fast) ease}.rt-pagination__page:hover:not(:disabled,.rt-pagination__page--current){border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle)}.rt-pagination__page:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}.rt-pagination__page--current{border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle);font-weight:var(--rt-font-weight-semibold)}.rt-pagination__page:disabled{cursor:default;opacity:.6}.rt-pagination__gap{padding:0 var(--rt-space-xs);color:var(--rt-color-text-muted)}.rt-pagination__per-page{display:flex;align-items:center;gap:var(--rt-space-sm)}.rt-pagination__per-page-label{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}@container (max-width: 460px){.rt-pagination__nav,.rt-pagination__range{display:none}.rt-pagination__compact{display:flex}}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtPaginationComponent, isStandalone: true, selector: "rt-pagination", inputs: { pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, host: { properties: { "style.display": "isVisible() ? null : 'none'" }, classAttribute: "rt-pagination" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-pagination\">\n    <!--\n        \u0412\u0435\u0442\u043A\u0438 \u00AB\u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\u00BB \u0437\u0434\u0435\u0441\u044C \u043D\u0435\u0442 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E: \u043F\u0443\u0441\u0442\u043E\u0439 \u043D\u0430\u0431\u043E\u0440 \u043F\u0440\u044F\u0447\u0435\u0442 \u0432\u0435\u0441\u044C\n        \u0431\u0430\u0440 \u0446\u0435\u043B\u0438\u043A\u043E\u043C (`isVisible`), \u0442\u0430\u043A \u0447\u0442\u043E \u0434\u043E \u044D\u0442\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0438 \u0434\u0435\u043B\u043E \u043D\u0435 \u0434\u043E\u0445\u043E\u0434\u0438\u0442. \u041F\u043E\u043A\u0430\n        \u0442\u0430\u043A\u0430\u044F \u0432\u0435\u0442\u043A\u0430 \u0442\u0443\u0442 \u0432\u0438\u0441\u0435\u043B\u0430, \u043E\u043D\u0430 \u0447\u0438\u0442\u0430\u043B\u0430\u0441\u044C \u043A\u0430\u043A \u0440\u0430\u0431\u043E\u0447\u0435\u0435 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435, \u0430 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C\n        \u0435\u0451 \u0431\u044B\u043B\u043E \u043D\u0435\u043B\u044C\u0437\u044F \u043D\u0438 \u043F\u0440\u0438 \u043A\u0430\u043A\u0438\u0445 \u0432\u0445\u043E\u0434\u0430\u0445.\n    -->\n    <span rtElem=\"range\" qa-dataid=\"pagination-range\">\n        {{ 'rtKit.uiRangeOf' | transloco: { from: rangeFrom(), to: rangeTo(), total: pageModel().totalCount } }}\n    </span>\n\n    @if (pageItems().length) {\n        <nav rtElem=\"compact\" qa-dataid=\"pagination-compact\" [attr.aria-label]=\"'rtKit.uiPagination' | transloco\">\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-compact-prev\"\n                icon=\"chevron-left\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiPrevPage' | transloco\"\n                [tooltip]=\"'rtKit.uiBack' | transloco\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            <span rtElem=\"compact-label\" qa-dataid=\"pagination-compact-label\">\n                {{ 'rtKit.uiPageOf' | transloco: { page: pageModel().pageNumber, last: lastPage() } }}\n            </span>\n\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-compact-next\"\n                icon=\"chevron-right\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiNextPage' | transloco\"\n                [tooltip]=\"'rtKit.uiForward' | transloco\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n\n        <nav rtElem=\"nav\" qa-dataid=\"pagination-nav\" [attr.aria-label]=\"'rtKit.uiPagination' | transloco\">\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-prev\"\n                icon=\"chevron-left\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiPrevPage' | transloco\"\n                [tooltip]=\"'rtKit.uiBack' | transloco\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            @for (item of pageItems(); track $index) {\n                @if (item === 'gap') {\n                    <span rtElem=\"gap\" aria-hidden=\"true\">\u2026</span>\n                } @else {\n                    <button\n                        rtElem=\"page\"\n                        qa-dataid=\"pagination-page\"\n                        type=\"button\"\n                        [attr.data-page]=\"item\"\n                        [rtMod]=\"{ current: item === pageModel().pageNumber }\"\n                        [attr.aria-current]=\"item === pageModel().pageNumber ? 'page' : null\"\n                        [disabled]=\"loading()\"\n                        (click)=\"goTo(item)\">\n                        {{ item }}\n                    </button>\n                }\n            }\n\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-next\"\n                icon=\"chevron-right\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiNextPage' | transloco\"\n                [tooltip]=\"'rtKit.uiForward' | transloco\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n    }\n\n    <div rtElem=\"per-page\">\n        <span rtElem=\"per-page-label\">{{ 'rtKit.uiPerPage' | transloco }}</span>\n        <rt-select\n            qa-dataid=\"pagination-per-page\"\n            [ariaLabel]=\"'rtKit.uiItemsPerPage' | transloco\"\n            [options]=\"perPageSelectOptions()\"\n            [clearable]=\"false\"\n            [ngModel]=\"pageModel().pageSize\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (selectionChange)=\"onPerPage($event)\" />\n    </div>\n</ng-container>\n", styles: [".rt-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-3) var(--rt-space-xs);container-type:inline-size;gap:var(--rt-space-md)}.rt-pagination__range{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__nav{display:flex;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact{display:none;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__page{min-width:var(--rt-space-xl);height:var(--rt-space-xl);padding:0 var(--rt-space-sm);border:var(--rt-border-width-thin) solid var(--rt-color-border-default);border-radius:var(--rt-radius-md);background:transparent;color:var(--rt-color-text-primary);cursor:pointer;transition:background-color var(--rt-duration-fast) ease,border-color var(--rt-duration-fast) ease,color var(--rt-duration-fast) ease}.rt-pagination__page:hover:not(:disabled,.rt-pagination__page--current){border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle)}.rt-pagination__page:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}.rt-pagination__page--current{border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle);font-weight:var(--rt-font-weight-semibold)}.rt-pagination__page:disabled{cursor:default;opacity:.6}.rt-pagination__gap{padding:0 var(--rt-space-xs);color:var(--rt-color-text-muted)}.rt-pagination__per-page{display:flex;align-items:center;gap:var(--rt-space-sm)}.rt-pagination__per-page-label{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}@container (max-width: 460px){.rt-pagination__nav,.rt-pagination__range{display:none}.rt-pagination__compact{display:flex}}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // Angular
                 FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 
                 // standalone components / directives
@@ -9643,7 +9718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: BEM_BLOCK$i,
                         '[style.display]': "isVisible() ? null : 'none'",
-                    }, template: "<ng-container rtBlock=\"rt-pagination\">\n    <span rtElem=\"range\" qa-dataid=\"pagination-range\">\n        @if (pageModel().totalCount === 0) {\n            {{ 'rtKit.uiRangeEmpty' | transloco }}\n        } @else {\n            {{ 'rtKit.uiRangeOf' | transloco: { from: rangeFrom(), to: rangeTo(), total: pageModel().totalCount } }}\n        }\n    </span>\n\n    @if (pageItems().length) {\n        <nav rtElem=\"compact\" qa-dataid=\"pagination-compact\" [attr.aria-label]=\"'rtKit.uiPagination' | transloco\">\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-compact-prev\"\n                icon=\"chevron-left\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiPrevPage' | transloco\"\n                [tooltip]=\"'rtKit.uiBack' | transloco\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            <span rtElem=\"compact-label\" qa-dataid=\"pagination-compact-label\">\n                {{ 'rtKit.uiPageOf' | transloco: { page: pageModel().pageNumber, last: lastPage() } }}\n            </span>\n\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-compact-next\"\n                icon=\"chevron-right\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiNextPage' | transloco\"\n                [tooltip]=\"'rtKit.uiForward' | transloco\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n\n        <nav rtElem=\"nav\" qa-dataid=\"pagination-nav\" [attr.aria-label]=\"'rtKit.uiPagination' | transloco\">\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-prev\"\n                icon=\"chevron-left\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiPrevPage' | transloco\"\n                [tooltip]=\"'rtKit.uiBack' | transloco\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            @for (item of pageItems(); track $index) {\n                @if (item === 'gap') {\n                    <span rtElem=\"gap\" aria-hidden=\"true\">\u2026</span>\n                } @else {\n                    <button\n                        rtElem=\"page\"\n                        qa-dataid=\"pagination-page\"\n                        type=\"button\"\n                        [attr.data-page]=\"item\"\n                        [rtMod]=\"{ current: item === pageModel().pageNumber }\"\n                        [attr.aria-current]=\"item === pageModel().pageNumber ? 'page' : null\"\n                        [disabled]=\"loading()\"\n                        (click)=\"goTo(item)\">\n                        {{ item }}\n                    </button>\n                }\n            }\n\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-next\"\n                icon=\"chevron-right\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiNextPage' | transloco\"\n                [tooltip]=\"'rtKit.uiForward' | transloco\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n    }\n\n    <div rtElem=\"per-page\">\n        <span rtElem=\"per-page-label\">{{ 'rtKit.uiPerPage' | transloco }}</span>\n        <rt-select\n            qa-dataid=\"pagination-per-page\"\n            [ariaLabel]=\"'rtKit.uiItemsPerPage' | transloco\"\n            [options]=\"perPageSelectOptions()\"\n            [clearable]=\"false\"\n            [ngModel]=\"pageModel().pageSize\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (selectionChange)=\"onPerPage($event)\" />\n    </div>\n</ng-container>\n", styles: [".rt-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-3) var(--rt-space-xs);container-type:inline-size;gap:var(--rt-space-md)}.rt-pagination__range{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__nav{display:flex;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact{display:none;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__page{min-width:var(--rt-space-xl);height:var(--rt-space-xl);padding:0 var(--rt-space-sm);border:var(--rt-border-width-thin) solid var(--rt-color-border-default);border-radius:var(--rt-radius-md);background:transparent;color:var(--rt-color-text-primary);cursor:pointer;transition:background-color var(--rt-duration-fast) ease,border-color var(--rt-duration-fast) ease,color var(--rt-duration-fast) ease}.rt-pagination__page:hover:not(:disabled,.rt-pagination__page--current){border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle)}.rt-pagination__page:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}.rt-pagination__page--current{border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle);font-weight:var(--rt-font-weight-semibold)}.rt-pagination__page:disabled{cursor:default;opacity:.6}.rt-pagination__gap{padding:0 var(--rt-space-xs);color:var(--rt-color-text-muted)}.rt-pagination__per-page{display:flex;align-items:center;gap:var(--rt-space-sm)}.rt-pagination__per-page-label{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}@container (max-width: 460px){.rt-pagination__nav,.rt-pagination__range{display:none}.rt-pagination__compact{display:flex}}\n"] }]
+                    }, template: "<ng-container rtBlock=\"rt-pagination\">\n    <!--\n        \u0412\u0435\u0442\u043A\u0438 \u00AB\u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\u00BB \u0437\u0434\u0435\u0441\u044C \u043D\u0435\u0442 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E: \u043F\u0443\u0441\u0442\u043E\u0439 \u043D\u0430\u0431\u043E\u0440 \u043F\u0440\u044F\u0447\u0435\u0442 \u0432\u0435\u0441\u044C\n        \u0431\u0430\u0440 \u0446\u0435\u043B\u0438\u043A\u043E\u043C (`isVisible`), \u0442\u0430\u043A \u0447\u0442\u043E \u0434\u043E \u044D\u0442\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0438 \u0434\u0435\u043B\u043E \u043D\u0435 \u0434\u043E\u0445\u043E\u0434\u0438\u0442. \u041F\u043E\u043A\u0430\n        \u0442\u0430\u043A\u0430\u044F \u0432\u0435\u0442\u043A\u0430 \u0442\u0443\u0442 \u0432\u0438\u0441\u0435\u043B\u0430, \u043E\u043D\u0430 \u0447\u0438\u0442\u0430\u043B\u0430\u0441\u044C \u043A\u0430\u043A \u0440\u0430\u0431\u043E\u0447\u0435\u0435 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435, \u0430 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C\n        \u0435\u0451 \u0431\u044B\u043B\u043E \u043D\u0435\u043B\u044C\u0437\u044F \u043D\u0438 \u043F\u0440\u0438 \u043A\u0430\u043A\u0438\u0445 \u0432\u0445\u043E\u0434\u0430\u0445.\n    -->\n    <span rtElem=\"range\" qa-dataid=\"pagination-range\">\n        {{ 'rtKit.uiRangeOf' | transloco: { from: rangeFrom(), to: rangeTo(), total: pageModel().totalCount } }}\n    </span>\n\n    @if (pageItems().length) {\n        <nav rtElem=\"compact\" qa-dataid=\"pagination-compact\" [attr.aria-label]=\"'rtKit.uiPagination' | transloco\">\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-compact-prev\"\n                icon=\"chevron-left\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiPrevPage' | transloco\"\n                [tooltip]=\"'rtKit.uiBack' | transloco\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            <span rtElem=\"compact-label\" qa-dataid=\"pagination-compact-label\">\n                {{ 'rtKit.uiPageOf' | transloco: { page: pageModel().pageNumber, last: lastPage() } }}\n            </span>\n\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-compact-next\"\n                icon=\"chevron-right\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiNextPage' | transloco\"\n                [tooltip]=\"'rtKit.uiForward' | transloco\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n\n        <nav rtElem=\"nav\" qa-dataid=\"pagination-nav\" [attr.aria-label]=\"'rtKit.uiPagination' | transloco\">\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-prev\"\n                icon=\"chevron-left\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiPrevPage' | transloco\"\n                [tooltip]=\"'rtKit.uiBack' | transloco\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            @for (item of pageItems(); track $index) {\n                @if (item === 'gap') {\n                    <span rtElem=\"gap\" aria-hidden=\"true\">\u2026</span>\n                } @else {\n                    <button\n                        rtElem=\"page\"\n                        qa-dataid=\"pagination-page\"\n                        type=\"button\"\n                        [attr.data-page]=\"item\"\n                        [rtMod]=\"{ current: item === pageModel().pageNumber }\"\n                        [attr.aria-current]=\"item === pageModel().pageNumber ? 'page' : null\"\n                        [disabled]=\"loading()\"\n                        (click)=\"goTo(item)\">\n                        {{ item }}\n                    </button>\n                }\n            }\n\n            <rt-icon-button\n                rtElem=\"arrow\"\n                qa-dataid=\"pagination-next\"\n                icon=\"chevron-right\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [ariaLabel]=\"'rtKit.uiNextPage' | transloco\"\n                [tooltip]=\"'rtKit.uiForward' | transloco\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n    }\n\n    <div rtElem=\"per-page\">\n        <span rtElem=\"per-page-label\">{{ 'rtKit.uiPerPage' | transloco }}</span>\n        <rt-select\n            qa-dataid=\"pagination-per-page\"\n            [ariaLabel]=\"'rtKit.uiItemsPerPage' | transloco\"\n            [options]=\"perPageSelectOptions()\"\n            [clearable]=\"false\"\n            [ngModel]=\"pageModel().pageSize\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (selectionChange)=\"onPerPage($event)\" />\n    </div>\n</ng-container>\n", styles: [".rt-pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-space-3) var(--rt-space-xs);container-type:inline-size;gap:var(--rt-space-md)}.rt-pagination__range{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__nav{display:flex;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact{display:none;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__page{min-width:var(--rt-space-xl);height:var(--rt-space-xl);padding:0 var(--rt-space-sm);border:var(--rt-border-width-thin) solid var(--rt-color-border-default);border-radius:var(--rt-radius-md);background:transparent;color:var(--rt-color-text-primary);cursor:pointer;transition:background-color var(--rt-duration-fast) ease,border-color var(--rt-duration-fast) ease,color var(--rt-duration-fast) ease}.rt-pagination__page:hover:not(:disabled,.rt-pagination__page--current){border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle)}.rt-pagination__page:focus-visible{box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}.rt-pagination__page--current{border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle);font-weight:var(--rt-font-weight-semibold)}.rt-pagination__page:disabled{cursor:default;opacity:.6}.rt-pagination__gap{padding:0 var(--rt-space-xs);color:var(--rt-color-text-muted)}.rt-pagination__per-page{display:flex;align-items:center;gap:var(--rt-space-sm)}.rt-pagination__per-page-label{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}@container (max-width: 460px){.rt-pagination__nav,.rt-pagination__range{display:none}.rt-pagination__compact{display:flex}}\n"] }]
         }], propDecorators: { pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: true }] }], perPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageOptions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], perPageChange: [{ type: i0.Output, args: ["perPageChange"] }] } });
 
 const BEM_BLOCK$h = 'rt-section-nav';
@@ -9660,14 +9735,14 @@ class RtSectionNavComponent {
         this.itemSelect.emit(item.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSectionNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtSectionNavComponent, isStandalone: true, selector: "rt-section-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { attributes: { "role": "navigation" }, classAttribute: "rt-section-nav" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n", styles: [".rt-section-nav{display:flex;gap:var(--rt-space-md)}.rt-section-nav__tile{display:flex;min-width:0;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:0;border-radius:var(--rt-radius-xl);background:transparent;box-shadow:none;color:var(--rt-color-text-primary);cursor:pointer;gap:var(--rt-space-2-5);transition:background var(--rt-duration-fast) ease,box-shadow var(--rt-duration-fast) ease}.rt-section-nav__tile:not(.rt-section-nav__tile--active):hover{background:var(--rt-color-bg-surface-subtle);box-shadow:var(--rt-shadow-card-soft)}.rt-section-nav__tile--active{background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card-soft);cursor:default}.rt-section-nav__icon{color:inherit}.rt-section-nav__label{color:inherit;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}:host-context([data-theme=dark]) .rt-section-nav__tile--active{background:var(--rt-blue-900)}\n"], dependencies: [{ kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtSectionNavComponent, isStandalone: true, selector: "rt-section-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { attributes: { "role": "navigation" }, classAttribute: "rt-section-nav" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-section-nav{display:flex;gap:var(--rt-space-md)}.rt-section-nav__tile{display:flex;min-width:0;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:0;border-radius:var(--rt-radius-xl);background:transparent;box-shadow:none;color:var(--rt-color-text-primary);cursor:pointer;gap:var(--rt-space-2-5);transition:background var(--rt-duration-fast) ease,box-shadow var(--rt-duration-fast) ease}.rt-section-nav__tile:not(.rt-section-nav__tile--active):hover{background:var(--rt-color-bg-surface-subtle);box-shadow:var(--rt-shadow-card-soft)}.rt-section-nav__tile--active{background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card-soft);cursor:default}.rt-section-nav__icon{color:inherit}.rt-section-nav__label{color:inherit;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}[data-theme=dark] .rt-section-nav__tile--active{background:var(--rt-blue-900)}\n"], dependencies: [{ kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtSectionNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rt-section-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtIconComponent, BlockDirective, ElemDirective, ModDirective], host: {
                         class: BEM_BLOCK$h,
                         role: 'navigation',
-                    }, template: "<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n", styles: [".rt-section-nav{display:flex;gap:var(--rt-space-md)}.rt-section-nav__tile{display:flex;min-width:0;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:0;border-radius:var(--rt-radius-xl);background:transparent;box-shadow:none;color:var(--rt-color-text-primary);cursor:pointer;gap:var(--rt-space-2-5);transition:background var(--rt-duration-fast) ease,box-shadow var(--rt-duration-fast) ease}.rt-section-nav__tile:not(.rt-section-nav__tile--active):hover{background:var(--rt-color-bg-surface-subtle);box-shadow:var(--rt-shadow-card-soft)}.rt-section-nav__tile--active{background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card-soft);cursor:default}.rt-section-nav__icon{color:inherit}.rt-section-nav__label{color:inherit;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}:host-context([data-theme=dark]) .rt-section-nav__tile--active{background:var(--rt-blue-900)}\n"] }]
+                    }, template: "<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-section-nav{display:flex;gap:var(--rt-space-md)}.rt-section-nav__tile{display:flex;min-width:0;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:0;border-radius:var(--rt-radius-xl);background:transparent;box-shadow:none;color:var(--rt-color-text-primary);cursor:pointer;gap:var(--rt-space-2-5);transition:background var(--rt-duration-fast) ease,box-shadow var(--rt-duration-fast) ease}.rt-section-nav__tile:not(.rt-section-nav__tile--active):hover{background:var(--rt-color-bg-surface-subtle);box-shadow:var(--rt-shadow-card-soft)}.rt-section-nav__tile--active{background:var(--rt-color-bg-surface);box-shadow:var(--rt-shadow-card-soft);cursor:default}.rt-section-nav__icon{color:inherit}.rt-section-nav__label{color:inherit;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}[data-theme=dark] .rt-section-nav__tile--active{background:var(--rt-blue-900)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
 
 const BEM_BLOCK$g = 'rt-split-button';
@@ -9802,7 +9877,17 @@ function deltaRow(key, delta) {
  */
 class RtStatTileComponent {
     constructor() {
-        this.#baselinePrefix = translateSignal('rtKit.uiBaseline');
+        /**
+         * Значение базы уходит параметром перевода, а не подставляется в готовую
+         * строку: Transloco интерполирует `{{value}}` в момент перевода, и к
+         * возвращённой строке подставлять уже нечего — от подписи оставалась одна
+         * приставка («было», «was»), а само число пропадало.
+         */
+        this.#baselineParams = computed(() => ({
+            value: this.deltaPrimary()?.baseline ?? '',
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#baselineParams" }] : /* istanbul ignore next */ []));
+        this.#baselineLine = translateSignal('rtKit.uiBaseline', this.#baselineParams);
         /**
          * Дельта к предыдущему периоду — рядом со значением. Пустая база (`percent`
          * = null) не рисуется вовсе: «—» рядом с цифрой читается как поломка, а не
@@ -9818,10 +9903,7 @@ class RtStatTileComponent {
          * (занятость, состав воронки) живёт во вторичной строке, иначе одна плитка
          * растягивает ряд под самую длинную подпись.
          */
-        this.baselineText = computed(() => {
-            const baseline = this.deltaPrimary()?.baseline;
-            return baseline ? this.#baselinePrefix().replace('{{value}}', baseline) : '';
-        }, /* @ts-ignore */
+        this.baselineText = computed(() => (this.deltaPrimary()?.baseline ? this.#baselineLine() : ''), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baselineText" }] : /* istanbul ignore next */ []));
         /** Подпись метрики. */
         this.label = input.required(/* @ts-ignore */
@@ -9842,7 +9924,14 @@ class RtStatTileComponent {
         this.hint = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     }
-    #baselinePrefix;
+    /**
+     * Значение базы уходит параметром перевода, а не подставляется в готовую
+     * строку: Transloco интерполирует `{{value}}` в момент перевода, и к
+     * возвращённой строке подставлять уже нечего — от подписи оставалась одна
+     * приставка («было», «was»), а само число пропадало.
+     */
+    #baselineParams;
+    #baselineLine;
     #visibleDelta(delta) {
         if (!delta || delta.percent === null) {
             return null;
@@ -9850,13 +9939,13 @@ class RtStatTileComponent {
         return deltaRow('primary', delta);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtStatTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtStatTileComponent, isStandalone: true, selector: "rt-stat-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, deltaPrimary: { classPropertyName: "deltaPrimary", publicName: "deltaPrimary", isSignal: true, isRequired: false, transformFunction: null }, deltaSecondary: { classPropertyName: "deltaSecondary", publicName: "deltaSecondary", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-stat-tile" }, ngImport: i0, template: "<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon rtElem=\"delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span rtElem=\"delta-percent\" qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ 'rtKit.uiYearOverYear' | transloco }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-stat-tile{display:flex;height:100%;flex-direction:column;gap:var(--rt-space-2)}:host .rt-stat-tile__head{display:flex;align-items:center;gap:var(--rt-space-1)}:host .rt-stat-tile__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}:host .rt-stat-tile__hint{color:var(--rt-color-text-muted);cursor:help}:host .rt-stat-tile__value-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-3)}:host .rt-stat-tile__value{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-3xl);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-none)}:host .rt-stat-tile__delta{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);gap:var(--rt-space-1);line-height:var(--rt-leading-none)}:host .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-success)}:host .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-danger)}:host .rt-stat-tile__year{flex:0 0 auto;padding:var(--rt-space-0-5) var(--rt-space-1-5);border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}:host .rt-stat-tile__year--direction--up{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}:host .rt-stat-tile__year--direction--down{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}:host .rt-stat-tile__baseline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}:host .rt-stat-tile__secondary{overflow:hidden;margin:auto 0 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtStatTileComponent, isStandalone: true, selector: "rt-stat-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, deltaPrimary: { classPropertyName: "deltaPrimary", publicName: "deltaPrimary", isSignal: true, isRequired: false, transformFunction: null }, deltaSecondary: { classPropertyName: "deltaSecondary", publicName: "deltaSecondary", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-stat-tile" }, ngImport: i0, template: "<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon rtElem=\"delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span rtElem=\"delta-percent\" qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ 'rtKit.uiYearOverYear' | transloco }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n", styles: ["@charset \"UTF-8\";rt-stat-tile{display:block}rt-stat-tile .rt-stat-tile{display:flex;height:100%;flex-direction:column;gap:var(--rt-space-2)}rt-stat-tile .rt-stat-tile__head{display:flex;align-items:center;gap:var(--rt-space-1)}rt-stat-tile .rt-stat-tile__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}rt-stat-tile .rt-stat-tile__hint{color:var(--rt-color-text-muted);cursor:help}rt-stat-tile .rt-stat-tile__value-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-3)}rt-stat-tile .rt-stat-tile__value{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-3xl);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);gap:var(--rt-space-1);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__year{flex:0 0 auto;padding:var(--rt-space-0-5) var(--rt-space-1-5);border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}rt-stat-tile .rt-stat-tile__year--direction--up{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__year--direction--down{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__baseline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}rt-stat-tile .rt-stat-tile__secondary{overflow:hidden;margin:auto 0 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: 
                 // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtStatTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-stat-tile', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-stat-tile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtIconComponent,
                         BlockDirective,
@@ -9865,7 +9954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         TranslocoPipe,
                     ], host: {
                         class: BEM_BLOCK$f,
-                    }, template: "<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon rtElem=\"delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span rtElem=\"delta-percent\" qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ 'rtKit.uiYearOverYear' | transloco }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-stat-tile{display:flex;height:100%;flex-direction:column;gap:var(--rt-space-2)}:host .rt-stat-tile__head{display:flex;align-items:center;gap:var(--rt-space-1)}:host .rt-stat-tile__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}:host .rt-stat-tile__hint{color:var(--rt-color-text-muted);cursor:help}:host .rt-stat-tile__value-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-3)}:host .rt-stat-tile__value{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-3xl);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-none)}:host .rt-stat-tile__delta{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);gap:var(--rt-space-1);line-height:var(--rt-leading-none)}:host .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-success)}:host .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-danger)}:host .rt-stat-tile__year{flex:0 0 auto;padding:var(--rt-space-0-5) var(--rt-space-1-5);border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}:host .rt-stat-tile__year--direction--up{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}:host .rt-stat-tile__year--direction--down{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}:host .rt-stat-tile__baseline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}:host .rt-stat-tile__secondary{overflow:hidden;margin:auto 0 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    }, template: "<article rtBlock=\"rt-stat-tile\" qa-dataid=\"stat-tile\">\n    <header rtElem=\"head\">\n        <span rtElem=\"label\" qa-dataid=\"stat-tile-label\">{{ label() }}</span>\n        @if (hint(); as hintText) {\n            <rt-icon rtElem=\"hint\" qa-dataid=\"stat-tile-hint\" name=\"info-circle\" size=\"xs\" [attr.title]=\"hintText\" />\n        }\n    </header>\n\n    <div rtElem=\"value-row\">\n        <p rtElem=\"value\" qa-dataid=\"stat-tile-value\">{{ value() }}</p>\n\n        @if (primaryDelta(); as row) {\n            <span\n                rtElem=\"delta\"\n                qa-dataid=\"stat-tile-delta\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                <rt-icon rtElem=\"delta-icon\" size=\"xs\" [name]=\"row.icon\" />\n                <span rtElem=\"delta-percent\" qa-dataid=\"stat-tile-delta-percent\">{{ row.text }}</span>\n            </span>\n        }\n\n        @if (yearDelta(); as row) {\n            <span\n                rtElem=\"year\"\n                qa-dataid=\"stat-tile-year\"\n                [attr.data-direction]=\"row.direction\"\n                [rtMod]=\"{ direction: row.direction }\"\n                [attr.title]=\"row.label\">\n                {{ 'rtKit.uiYearOverYear' | transloco }} {{ row.text }}\n            </span>\n        }\n    </div>\n\n    @if (baselineText(); as text) {\n        <p rtElem=\"baseline\" qa-dataid=\"stat-tile-baseline\">{{ text }}</p>\n    }\n\n    @if (secondary(); as text) {\n        <p rtElem=\"secondary\" qa-dataid=\"stat-tile-secondary\">{{ text }}</p>\n    }\n</article>\n", styles: ["@charset \"UTF-8\";rt-stat-tile{display:block}rt-stat-tile .rt-stat-tile{display:flex;height:100%;flex-direction:column;gap:var(--rt-space-2)}rt-stat-tile .rt-stat-tile__head{display:flex;align-items:center;gap:var(--rt-space-1)}rt-stat-tile .rt-stat-tile__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold)}rt-stat-tile .rt-stat-tile__hint{color:var(--rt-color-text-muted);cursor:help}rt-stat-tile .rt-stat-tile__value-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-3)}rt-stat-tile .rt-stat-tile__value{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-3xl);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);gap:var(--rt-space-1);line-height:var(--rt-leading-none)}rt-stat-tile .rt-stat-tile__delta--direction--up{color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__delta--direction--down{color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__year{flex:0 0 auto;padding:var(--rt-space-0-5) var(--rt-space-1-5);border-radius:var(--rt-radius-sm);background:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}rt-stat-tile .rt-stat-tile__year--direction--up{background:var(--rt-color-state-success-bg);color:var(--rt-color-state-success)}rt-stat-tile .rt-stat-tile__year--direction--down{background:var(--rt-color-state-danger-bg);color:var(--rt-color-state-danger)}rt-stat-tile .rt-stat-tile__baseline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}rt-stat-tile .rt-stat-tile__secondary{overflow:hidden;margin:auto 0 0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], deltaPrimary: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaPrimary", required: false }] }], deltaSecondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaSecondary", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
 
 const BEM_BLOCK$e = 'rt-stepper';
@@ -9884,12 +9973,24 @@ const BEM_BLOCK$e = 'rt-stepper';
  */
 class RtStepperComponent {
     constructor() {
-        this.currentStep = computed(() => {
-            const list = this.steps();
-            const idx = this.currentIndex();
-            return list[idx] ?? null;
+        /**
+         * Номер шага, зажатый в набор. Индекс приходит снаружи и может выйти за
+         * границы; полоса и якорь подписи это уже переживали, а вот объявление для
+         * скринридера — нет: при `currentIndex: 99` на трёх шагах на прогрессбаре
+         * оказывалось `aria-valuenow="100"` при `aria-valuemax="3"`, а подпись шага
+         * пропадала вовсе. Зажимаем один раз здесь, чтобы показ и объявление не
+         * могли разойтись.
+         */
+        this.#safeIndex = computed(() => {
+            const total = this.steps().length;
+            return Math.max(0, Math.min(this.currentIndex(), total - 1));
         }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#safeIndex" }] : /* istanbul ignore next */ []));
+        this.currentStep = computed(() => this.steps()[this.#safeIndex()] ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+        /** Номер текущего шага для скринридера: `0`, когда шагов нет вовсе. */
+        this.currentStepNumber = computed(() => (this.steps().length === 0 ? 0 : this.#safeIndex() + 1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentStepNumber" }] : /* istanbul ignore next */ []));
         /**
          * Доля заполненной полосы от 0 до 100. На один шаг и меньше — 0%, иначе
          * `idx / (total - 1)`. Без clamp в шаблоне получаем переполнение если
@@ -9897,11 +9998,10 @@ class RtStepperComponent {
          */
         this.progressPercent = computed(() => {
             const total = this.steps().length;
-            const idx = this.currentIndex();
             if (total <= 1) {
                 return 0;
             }
-            return Math.max(0, Math.min(100, (idx / (total - 1)) * 100));
+            return (this.#safeIndex() / (total - 1)) * 100;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "progressPercent" }] : /* istanbul ignore next */ []));
         this.totalSteps = computed(() => this.steps().length, /* @ts-ignore */
@@ -9913,7 +10013,7 @@ class RtStepperComponent {
          */
         this.labelAnchor = computed(() => {
             const total = this.steps().length;
-            const idx = this.currentIndex();
+            const idx = this.#safeIndex();
             if (idx <= 0) {
                 return 'start';
             }
@@ -9936,21 +10036,30 @@ class RtStepperComponent {
         ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
         this.currentIndex = input(0, { ...(ngDevMode ? { debugName: "currentIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     }
+    /**
+     * Номер шага, зажатый в набор. Индекс приходит снаружи и может выйти за
+     * границы; полоса и якорь подписи это уже переживали, а вот объявление для
+     * скринридера — нет: при `currentIndex: 99` на трёх шагах на прогрессбаре
+     * оказывалось `aria-valuenow="100"` при `aria-valuemax="3"`, а подпись шага
+     * пропадала вовсе. Зажимаем один раз здесь, чтобы показ и объявление не
+     * могли разойтись.
+     */
+    #safeIndex;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtStepperComponent, isStandalone: true, selector: "rt-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-stepper" }, ngImport: i0, template: "@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentIndex() + 1\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-stepper{display:flex;flex-direction:column;gap:var(--rt-space-3)}:host .rt-stepper__rail{position:relative;block-size:39px}:host .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-duration-fast) ease-out;white-space:nowrap}:host .rt-stepper__label--anchor--start{transform:translate(0)}:host .rt-stepper__label--anchor--center{transform:translate(-50%)}:host .rt-stepper__label--anchor--end{transform:translate(-100%)}:host .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}:host .rt-stepper__track,:host .rt-stepper__progress{position:absolute;border-radius:var(--rt-radius-full);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}:host .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}:host .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-duration-fast) ease-out}:host .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}:host .rt-stepper__point{border-radius:var(--rt-radius-full);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-duration-fast) ease-out,block-size var(--rt-duration-fast) ease-out,background var(--rt-duration-fast) ease-out}:host .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}:host .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-shadow-step-indicator);inline-size:16px}:host .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}:host .rt-stepper__description+:host .rt-stepper__description{margin-block-start:var(--rt-space-2-5)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtStepperComponent, isStandalone: true, selector: "rt-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, currentIndex: { classPropertyName: "currentIndex", publicName: "currentIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-stepper" }, ngImport: i0, template: "@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentStepNumber()\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";rt-stepper{display:block}rt-stepper .rt-stepper{display:flex;flex-direction:column;gap:var(--rt-space-3)}rt-stepper .rt-stepper__rail{position:relative;block-size:39px}rt-stepper .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-duration-fast) ease-out;white-space:nowrap}rt-stepper .rt-stepper__label--anchor--start{transform:translate(0)}rt-stepper .rt-stepper__label--anchor--center{transform:translate(-50%)}rt-stepper .rt-stepper__label--anchor--end{transform:translate(-100%)}rt-stepper .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}rt-stepper .rt-stepper__track,rt-stepper .rt-stepper__progress{position:absolute;border-radius:var(--rt-radius-full);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}rt-stepper .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}rt-stepper .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-duration-fast) ease-out}rt-stepper .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}rt-stepper .rt-stepper__point{border-radius:var(--rt-radius-full);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-duration-fast) ease-out,block-size var(--rt-duration-fast) ease-out,background var(--rt-duration-fast) ease-out}rt-stepper .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}rt-stepper .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-shadow-step-indicator);inline-size:16px}rt-stepper .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}rt-stepper .rt-stepper__description+rt-stepper .rt-stepper__description{margin-block-start:var(--rt-space-2-5)}\n"], dependencies: [{ kind: "directive", type: 
                 // standalone components / directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-stepper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         BlockDirective,
                         ElemDirective,
                         ModDirective,
                     ], host: {
                         class: BEM_BLOCK$e,
-                    }, template: "@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentIndex() + 1\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-stepper{display:flex;flex-direction:column;gap:var(--rt-space-3)}:host .rt-stepper__rail{position:relative;block-size:39px}:host .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-duration-fast) ease-out;white-space:nowrap}:host .rt-stepper__label--anchor--start{transform:translate(0)}:host .rt-stepper__label--anchor--center{transform:translate(-50%)}:host .rt-stepper__label--anchor--end{transform:translate(-100%)}:host .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}:host .rt-stepper__track,:host .rt-stepper__progress{position:absolute;border-radius:var(--rt-radius-full);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}:host .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}:host .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-duration-fast) ease-out}:host .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}:host .rt-stepper__point{border-radius:var(--rt-radius-full);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-duration-fast) ease-out,block-size var(--rt-duration-fast) ease-out,background var(--rt-duration-fast) ease-out}:host .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}:host .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-shadow-step-indicator);inline-size:16px}:host .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}:host .rt-stepper__description+:host .rt-stepper__description{margin-block-start:var(--rt-space-2-5)}\n"] }]
+                    }, template: "@let current = currentStep();\n<div\n    rtBlock=\"rt-stepper\"\n    qa-dataid=\"stepper\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"totalSteps()\"\n    [attr.aria-valuenow]=\"currentStepNumber()\"\n    [attr.aria-valuetext]=\"current?.label ?? null\">\n    <div rtElem=\"rail\">\n        @if (current) {\n            <p rtElem=\"label\" qa-dataid=\"stepper-label\" [rtMod]=\"{ anchor: labelAnchor() }\" [style.left.%]=\"progressPercent()\">\n                {{ current.label }}\n            </p>\n        }\n        <div rtElem=\"track-band\">\n            <span rtElem=\"track\" aria-hidden=\"true\"></span>\n            <span rtElem=\"progress\" qa-dataid=\"stepper-progress\" aria-hidden=\"true\" [style.width.%]=\"progressPercent()\"></span>\n            <ul rtElem=\"points\">\n                @for (step of steps(); track $index; let i = $index) {\n                    <li\n                        rtElem=\"point\"\n                        qa-dataid=\"stepper-point\"\n                        aria-hidden=\"true\"\n                        [rtMod]=\"{\n                            current: i === currentIndex(),\n                            complete: i < currentIndex(),\n                        }\"></li>\n                }\n            </ul>\n        </div>\n    </div>\n    @for (paragraph of descriptionParagraphs(); track $index) {\n        <p rtElem=\"description\" qa-dataid=\"stepper-description\">{{ paragraph }}</p>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";rt-stepper{display:block}rt-stepper .rt-stepper{display:flex;flex-direction:column;gap:var(--rt-space-3)}rt-stepper .rt-stepper__rail{position:relative;block-size:39px}rt-stepper .rt-stepper__label{position:absolute;margin:0;color:var(--rt-color-stepper-current);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);inset-block-start:0;letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-none);transition:left var(--rt-duration-fast) ease-out;white-space:nowrap}rt-stepper .rt-stepper__label--anchor--start{transform:translate(0)}rt-stepper .rt-stepper__label--anchor--center{transform:translate(-50%)}rt-stepper .rt-stepper__label--anchor--end{transform:translate(-100%)}rt-stepper .rt-stepper__track-band{position:absolute;display:flex;align-items:center;block-size:16px;inset-block-end:0;inset-inline:0}rt-stepper .rt-stepper__track,rt-stepper .rt-stepper__progress{position:absolute;border-radius:var(--rt-radius-full);block-size:2px;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}rt-stepper .rt-stepper__track{background:var(--rt-color-stepper-track);inset-inline-end:0}rt-stepper .rt-stepper__progress{background:var(--rt-color-stepper-progress);transition:width var(--rt-duration-fast) ease-out}rt-stepper .rt-stepper__points{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;inline-size:100%;list-style:none}rt-stepper .rt-stepper__point{border-radius:var(--rt-radius-full);background:var(--rt-color-stepper-track);block-size:8px;inline-size:8px;transition:inline-size var(--rt-duration-fast) ease-out,block-size var(--rt-duration-fast) ease-out,background var(--rt-duration-fast) ease-out}rt-stepper .rt-stepper__point--complete{background:var(--rt-color-stepper-progress)}rt-stepper .rt-stepper__point--current{background:var(--rt-color-stepper-current);block-size:16px;box-shadow:var(--rt-shadow-step-indicator);inline-size:16px}rt-stepper .rt-stepper__description{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}rt-stepper .rt-stepper__description+rt-stepper .rt-stepper__description{margin-block-start:var(--rt-space-2-5)}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], currentIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentIndex", required: false }] }] } });
 
 const BEM_BLOCK$d = 'rt-copy-cell';
@@ -11053,7 +11162,7 @@ class RtTableSettingsAsideComponent extends RtRouteAsideComponent {
         this.onClose();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableSettingsAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RtTableSettingsAsideComponent, isStandalone: true, selector: "rt-table-settings-aside", host: { classAttribute: "rt-table-settings-aside" }, usesInheritance: true, ngImport: i0, template: "<ng-container rtContainerRightSidenavPanel #panel=\"rtContainerRightPanel\" (cancelled)=\"onCancel()\" (closed)=\"onClosed()\" />\n\n<rt-aside [ariaLabel]=\"'rtKit.uiColumnSettings' | transloco\">\n    <rt-aside-header [title]=\"'rtKit.uiColumnSettingsTitle' | transloco\" (dismiss)=\"onClose()\">\n        <rt-icon-button\n            asideActions\n            qa-dataid=\"table-settings-reset\"\n            icon=\"undo\"\n            variant=\"ghost\"\n            [tooltip]=\"'rtKit.uiResetDefaults' | transloco\"\n            [ariaLabel]=\"'rtKit.uiResetDefaults' | transloco\"\n            (clicked)=\"onReset()\" />\n    </rt-aside-header>\n\n    <rt-table-settings-panel [(items)]=\"items\" />\n\n    <rt-aside-footer>\n        <button\n            rtButton\n            asideDismiss\n            qa-dataid=\"table-settings-close\"\n            type=\"button\"\n            appearance=\"text\"\n            [label]=\"'rtKit.uiClose' | transloco\"\n            [attr.aria-label]=\"'rtKit.uiClose' | transloco\"\n            (click)=\"onClose()\"></button>\n        <button\n            rtButton\n            asidePrimary\n            qa-dataid=\"table-settings-save\"\n            type=\"button\"\n            [label]=\"'rtKit.uiSave' | transloco\"\n            [attr.aria-label]=\"'rtKit.uiSave' | transloco\"\n            (click)=\"onSave()\"></button>\n    </rt-aside-footer>\n</rt-aside>\n", styles: ["@charset \"UTF-8\";:host{display:contents}\n"], dependencies: [{ kind: "component", type: RtAsideComponent, selector: "rt-aside", inputs: ["size", "contentLayout", "width", "ariaLabel"] }, { kind: "component", type: RtAsideFooterComponent, selector: "rt-aside-footer" }, { kind: "component", type: RtAsideHeaderComponent, selector: "rt-aside-header", inputs: ["title", "overline", "badges", "closable", "loading"], outputs: ["dismiss"] }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "rounded", "loading", "loadingIcon"] }, { kind: "directive", type: RtContainerRightSidenavPanelDirective, selector: "[rtContainerRightSidenavPanel]", outputs: ["opened", "closed", "cancelled"], exportAs: ["rtContainerRightPanel"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtTableSettingsPanelComponent, selector: "rt-table-settings-panel", inputs: ["items"], outputs: ["itemsChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: RtTableSettingsAsideComponent, isStandalone: true, selector: "rt-table-settings-aside", host: { classAttribute: "rt-table-settings-aside" }, usesInheritance: true, ngImport: i0, template: "<ng-container rtContainerRightSidenavPanel #panel=\"rtContainerRightPanel\" (cancelled)=\"onCancel()\" (closed)=\"onClosed()\" />\n\n<rt-aside [ariaLabel]=\"'rtKit.uiColumnSettings' | transloco\">\n    <rt-aside-header [title]=\"'rtKit.uiColumnSettingsTitle' | transloco\" (dismiss)=\"onClose()\">\n        <rt-icon-button\n            asideActions\n            qa-dataid=\"table-settings-reset\"\n            icon=\"undo\"\n            variant=\"ghost\"\n            [tooltip]=\"'rtKit.uiResetDefaults' | transloco\"\n            [ariaLabel]=\"'rtKit.uiResetDefaults' | transloco\"\n            (clicked)=\"onReset()\" />\n    </rt-aside-header>\n\n    <rt-table-settings-panel [(items)]=\"items\" />\n\n    <rt-aside-footer>\n        <button\n            rtButton\n            asideDismiss\n            qa-dataid=\"table-settings-close\"\n            type=\"button\"\n            appearance=\"text\"\n            [label]=\"'rtKit.uiClose' | transloco\"\n            [attr.aria-label]=\"'rtKit.uiClose' | transloco\"\n            (click)=\"onClose()\"></button>\n        <button\n            rtButton\n            asidePrimary\n            qa-dataid=\"table-settings-save\"\n            type=\"button\"\n            [label]=\"'rtKit.uiSave' | transloco\"\n            [attr.aria-label]=\"'rtKit.uiSave' | transloco\"\n            (click)=\"onSave()\"></button>\n    </rt-aside-footer>\n</rt-aside>\n", styles: ["@charset \"UTF-8\";.rt-table-settings-aside{display:contents}\n"], dependencies: [{ kind: "component", type: RtAsideComponent, selector: "rt-aside", inputs: ["size", "contentLayout", "width", "ariaLabel"] }, { kind: "component", type: RtAsideFooterComponent, selector: "rt-aside-footer" }, { kind: "component", type: RtAsideHeaderComponent, selector: "rt-aside-header", inputs: ["title", "overline", "badges", "closable", "loading"], outputs: ["dismiss"] }, { kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "rounded", "loading", "loadingIcon"] }, { kind: "directive", type: RtContainerRightSidenavPanelDirective, selector: "[rtContainerRightSidenavPanel]", outputs: ["opened", "closed", "cancelled"], exportAs: ["rtContainerRightPanel"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtTableSettingsPanelComponent, selector: "rt-table-settings-panel", inputs: ["items"], outputs: ["itemsChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTableSettingsAsideComponent, decorators: [{
             type: Component,
@@ -11068,7 +11177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         TranslocoPipe,
                     ], host: {
                         class: BEM_BLOCK$9,
-                    }, template: "<ng-container rtContainerRightSidenavPanel #panel=\"rtContainerRightPanel\" (cancelled)=\"onCancel()\" (closed)=\"onClosed()\" />\n\n<rt-aside [ariaLabel]=\"'rtKit.uiColumnSettings' | transloco\">\n    <rt-aside-header [title]=\"'rtKit.uiColumnSettingsTitle' | transloco\" (dismiss)=\"onClose()\">\n        <rt-icon-button\n            asideActions\n            qa-dataid=\"table-settings-reset\"\n            icon=\"undo\"\n            variant=\"ghost\"\n            [tooltip]=\"'rtKit.uiResetDefaults' | transloco\"\n            [ariaLabel]=\"'rtKit.uiResetDefaults' | transloco\"\n            (clicked)=\"onReset()\" />\n    </rt-aside-header>\n\n    <rt-table-settings-panel [(items)]=\"items\" />\n\n    <rt-aside-footer>\n        <button\n            rtButton\n            asideDismiss\n            qa-dataid=\"table-settings-close\"\n            type=\"button\"\n            appearance=\"text\"\n            [label]=\"'rtKit.uiClose' | transloco\"\n            [attr.aria-label]=\"'rtKit.uiClose' | transloco\"\n            (click)=\"onClose()\"></button>\n        <button\n            rtButton\n            asidePrimary\n            qa-dataid=\"table-settings-save\"\n            type=\"button\"\n            [label]=\"'rtKit.uiSave' | transloco\"\n            [attr.aria-label]=\"'rtKit.uiSave' | transloco\"\n            (click)=\"onSave()\"></button>\n    </rt-aside-footer>\n</rt-aside>\n", styles: ["@charset \"UTF-8\";:host{display:contents}\n"] }]
+                    }, template: "<ng-container rtContainerRightSidenavPanel #panel=\"rtContainerRightPanel\" (cancelled)=\"onCancel()\" (closed)=\"onClosed()\" />\n\n<rt-aside [ariaLabel]=\"'rtKit.uiColumnSettings' | transloco\">\n    <rt-aside-header [title]=\"'rtKit.uiColumnSettingsTitle' | transloco\" (dismiss)=\"onClose()\">\n        <rt-icon-button\n            asideActions\n            qa-dataid=\"table-settings-reset\"\n            icon=\"undo\"\n            variant=\"ghost\"\n            [tooltip]=\"'rtKit.uiResetDefaults' | transloco\"\n            [ariaLabel]=\"'rtKit.uiResetDefaults' | transloco\"\n            (clicked)=\"onReset()\" />\n    </rt-aside-header>\n\n    <rt-table-settings-panel [(items)]=\"items\" />\n\n    <rt-aside-footer>\n        <button\n            rtButton\n            asideDismiss\n            qa-dataid=\"table-settings-close\"\n            type=\"button\"\n            appearance=\"text\"\n            [label]=\"'rtKit.uiClose' | transloco\"\n            [attr.aria-label]=\"'rtKit.uiClose' | transloco\"\n            (click)=\"onClose()\"></button>\n        <button\n            rtButton\n            asidePrimary\n            qa-dataid=\"table-settings-save\"\n            type=\"button\"\n            [label]=\"'rtKit.uiSave' | transloco\"\n            [attr.aria-label]=\"'rtKit.uiSave' | transloco\"\n            (click)=\"onSave()\"></button>\n    </rt-aside-footer>\n</rt-aside>\n", styles: ["@charset \"UTF-8\";.rt-table-settings-aside{display:contents}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -11403,8 +11512,6 @@ class RtTextareaComponent extends RtFormControlBase {
         super(...arguments);
         this.fieldEl = viewChild('fieldEl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fieldEl" }] : /* istanbul ignore next */ []));
-        this.effectiveDisabled = computed(() => this.disabled() || this.isDisabled(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
         this.hasValue = computed(() => this.value() !== '', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
         this.displayText = computed(() => this.value(), /* @ts-ignore */
@@ -11435,7 +11542,7 @@ class RtTextareaComponent extends RtFormControlBase {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtTextareaComponent, isStandalone: true, selector: "rt-textarea", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rt-textarea--size--sm": "size() === 'sm'", "class.rt-textarea--size--lg": "size() === 'lg'", "class.rt-textarea--disabled": "isDisabled()", "class.rt-textarea--readonly": "readonly()", "class.rt-textarea--invalid": "isInvalid()", "class.rt-textarea--borderless": "!bordered()" }, classAttribute: "rt-textarea" }, providers: [
             // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.
             { provide: RtFormControlBase, useExisting: forwardRef(() => RtTextareaComponent) },
-        ], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container rtBlock=\"rt-textarea\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"textarea-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <textarea\n            #fieldEl\n            rtElem=\"control\"\n            qa-dataid=\"textarea-control\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [style.resize]=\"resize()\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"effectiveDisabled()\"\n            [readOnly]=\"readonly()\"\n            [rows]=\"rows()\"\n            [value]=\"value()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\"></textarea>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-textarea{display:block;width:100%}.rt-textarea--borderless .rt-textarea__control{border-color:transparent}.rt-textarea__control{width:100%;min-height:var(--rt-textarea-min-height);box-sizing:border-box;padding:var(--rt-textarea-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);line-height:var(--rt-textarea-line-height);transition:var(--rt-input-transition)}.rt-textarea__control::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-textarea__control:focus-visible{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-textarea__control:disabled{background-color:var(--rt-input-color-bg-disabled);cursor:not-allowed}.rt-textarea--size--sm .rt-textarea__control{min-height:var(--rt-textarea-min-height-sm)}.rt-textarea--size--lg .rt-textarea__control{min-height:var(--rt-textarea-min-height-lg)}.rt-textarea--invalid .rt-textarea__control{border-color:var(--rt-input-color-border-error)}.rt-textarea--invalid .rt-textarea__control:focus-visible{box-shadow:var(--rt-input-focus-shadow-error)}.rt-textarea--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-textarea__readonly{display:block;color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size);white-space:pre-wrap}.rt-textarea__readonly--empty{color:var(--rt-field-value-empty-color)}\n"], dependencies: [{ kind: "directive", type: 
+        ], viewQueries: [{ propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container rtBlock=\"rt-textarea\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"textarea-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <textarea\n            #fieldEl\n            rtElem=\"control\"\n            qa-dataid=\"textarea-control\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [style.resize]=\"resize()\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [readOnly]=\"readonly()\"\n            [rows]=\"rows()\"\n            [value]=\"value()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\"></textarea>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-textarea{display:block;width:100%}.rt-textarea--borderless .rt-textarea__control{border-color:transparent}.rt-textarea__control{width:100%;min-height:var(--rt-textarea-min-height);box-sizing:border-box;padding:var(--rt-textarea-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);line-height:var(--rt-textarea-line-height);transition:var(--rt-input-transition)}.rt-textarea__control::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-textarea__control:focus-visible{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-textarea__control:disabled{background-color:var(--rt-input-color-bg-disabled);cursor:not-allowed}.rt-textarea--size--sm .rt-textarea__control{min-height:var(--rt-textarea-min-height-sm)}.rt-textarea--size--lg .rt-textarea__control{min-height:var(--rt-textarea-min-height-lg)}.rt-textarea--invalid .rt-textarea__control{border-color:var(--rt-input-color-border-error)}.rt-textarea--invalid .rt-textarea__control:focus-visible{box-shadow:var(--rt-input-focus-shadow-error)}.rt-textarea--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-textarea__readonly{display:block;color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size);white-space:pre-wrap}.rt-textarea__readonly--empty{color:var(--rt-field-value-empty-color)}\n"], dependencies: [{ kind: "directive", type: 
                 // standalone components / directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -11457,7 +11564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[class.rt-textarea--readonly]': 'readonly()',
                         '[class.rt-textarea--invalid]': 'isInvalid()',
                         '[class.rt-textarea--borderless]': '!bordered()',
-                    }, template: "<ng-container rtBlock=\"rt-textarea\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"textarea-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <textarea\n            #fieldEl\n            rtElem=\"control\"\n            qa-dataid=\"textarea-control\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [style.resize]=\"resize()\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"effectiveDisabled()\"\n            [readOnly]=\"readonly()\"\n            [rows]=\"rows()\"\n            [value]=\"value()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\"></textarea>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-textarea{display:block;width:100%}.rt-textarea--borderless .rt-textarea__control{border-color:transparent}.rt-textarea__control{width:100%;min-height:var(--rt-textarea-min-height);box-sizing:border-box;padding:var(--rt-textarea-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);line-height:var(--rt-textarea-line-height);transition:var(--rt-input-transition)}.rt-textarea__control::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-textarea__control:focus-visible{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-textarea__control:disabled{background-color:var(--rt-input-color-bg-disabled);cursor:not-allowed}.rt-textarea--size--sm .rt-textarea__control{min-height:var(--rt-textarea-min-height-sm)}.rt-textarea--size--lg .rt-textarea__control{min-height:var(--rt-textarea-min-height-lg)}.rt-textarea--invalid .rt-textarea__control{border-color:var(--rt-input-color-border-error)}.rt-textarea--invalid .rt-textarea__control:focus-visible{box-shadow:var(--rt-input-focus-shadow-error)}.rt-textarea--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-textarea__readonly{display:block;color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size);white-space:pre-wrap}.rt-textarea__readonly--empty{color:var(--rt-field-value-empty-color)}\n"] }]
+                    }, template: "<ng-container rtBlock=\"rt-textarea\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"textarea-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '\u2014' }}</span>\n    } @else {\n        <textarea\n            #fieldEl\n            rtElem=\"control\"\n            qa-dataid=\"textarea-control\"\n            [attr.id]=\"effectiveControlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-invalid]=\"isInvalid() || null\"\n            [style.resize]=\"resize()\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"isDisabled()\"\n            [readOnly]=\"readonly()\"\n            [rows]=\"rows()\"\n            [value]=\"value()\"\n            (input)=\"onInput($event)\"\n            (blur)=\"onBlur()\"></textarea>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";.rt-textarea{display:block;width:100%}.rt-textarea--borderless .rt-textarea__control{border-color:transparent}.rt-textarea__control{width:100%;min-height:var(--rt-textarea-min-height);box-sizing:border-box;padding:var(--rt-textarea-padding-y) var(--rt-input-padding-x);border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);line-height:var(--rt-textarea-line-height);transition:var(--rt-input-transition)}.rt-textarea__control::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-textarea__control:focus-visible{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow);outline:2px solid transparent;outline-offset:var(--rt-input-focus-outline-offset)}.rt-textarea__control:disabled{background-color:var(--rt-input-color-bg-disabled);cursor:not-allowed}.rt-textarea--size--sm .rt-textarea__control{min-height:var(--rt-textarea-min-height-sm)}.rt-textarea--size--lg .rt-textarea__control{min-height:var(--rt-textarea-min-height-lg)}.rt-textarea--invalid .rt-textarea__control{border-color:var(--rt-input-color-border-error)}.rt-textarea--invalid .rt-textarea__control:focus-visible{box-shadow:var(--rt-input-focus-shadow-error)}.rt-textarea--disabled{opacity:var(--rt-input-disabled-opacity)}.rt-textarea__readonly{display:block;color:var(--rt-field-value-color);font-size:var(--rt-field-value-font-size);white-space:pre-wrap}.rt-textarea__readonly--empty{color:var(--rt-field-value-empty-color)}\n"] }]
         }], propDecorators: { fieldEl: [{ type: i0.ViewChild, args: ['fieldEl', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
 const BEM_BLOCK$6 = 'rt-toggle-switch';
@@ -11470,27 +11577,30 @@ const BEM_BLOCK$6 = 'rt-toggle-switch';
  * `useExisting: forwardRef(...)` — `useClass` на self-reference вызывает
  * NG0200 cycle при boot'е.
  *
- * Source-of-truth для disabled — внутренний `isDisabled` signal. И signal-input
- * `disabled`, и CVA `setDisabledState` пишут в один и тот же signal: input —
- * через `effect()`, CVA — напрямую через метод. Так `[disabled]="true"` и
- * `FormControl.disable()` ведут себя одинаково.
+ * Отключение складывается из двух независимых источников: входа `disabled` и
+ * слова формы (CVA `setDisabledState`). Отключено, если так сказал любой из
+ * них. Сводить их в один signal нельзя: форма зовёт `setDisabledState` при
+ * связывании контрола, то есть раньше, чем переключатель впервые обновит своё
+ * вью, и мирроринг входа затирал бы её слово — контрол, созданный отключённым,
+ * оказывался бы кликабельным.
  *
  * Опциональные иконки `iconOff` / `iconOn` рисуются внутри трека статично:
  * off-иконка в начальной половине, on-иконка в конечной. Бегунок непрозрачен
  * и наезжает на иконку активного состояния, так что видна всегда иконка того
  * состояния, куда переключится контрол.
  *
- * ViewEncapsulation — default (Emulated), стили обёрнуты в `:host { ... }`.
+ * ViewEncapsulation.None — стили таргетируют имя элемента и BEM-класс блока.
  */
 class RtToggleSwitchComponent {
-    #onChange;
-    #onTouched;
     constructor() {
         this.#onChange = () => undefined;
         this.#onTouched = () => undefined;
+        /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+        this.#disabledByForm = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []));
         this.isOn = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isOn" }] : /* istanbul ignore next */ []));
-        this.isDisabled = signal(false, /* @ts-ignore */
+        this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         /**
          * BEM-модификаторы для `[rtMod]`. Собираем в .ts, потому что
@@ -11518,13 +11628,11 @@ class RtToggleSwitchComponent {
         this.iconOn = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconOn" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        // Синхронизируем signal-input `disabled` в `isDisabled`, чтобы
-        // `[disabled]="..."` и `setDisabledState(...)` (CVA) писали в одно
-        // и то же место. Effect живёт в injection context конструктора.
-        effect(() => {
-            this.isDisabled.set(this.disabled());
-        });
     }
+    #onChange;
+    #onTouched;
+    /** Отключение, назначенное формой через CVA (`setDisabledState`). */
+    #disabledByForm;
     writeValue(value) {
         this.isOn.set(value === true);
     }
@@ -11535,7 +11643,7 @@ class RtToggleSwitchComponent {
         this.#onTouched = fn;
     }
     setDisabledState(disabled) {
-        this.isDisabled.set(disabled);
+        this.#disabledByForm.set(disabled);
     }
     toggle() {
         if (this.isDisabled()) {
@@ -11553,13 +11661,13 @@ class RtToggleSwitchComponent {
                 useExisting: forwardRef(() => RtToggleSwitchComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<button\n    rtBlock=\"rt-toggle-switch\"\n    qa-dataid=\"toggle-switch-control\"\n    type=\"button\"\n    role=\"switch\"\n    [rtMod]=\"bemMods()\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-checked]=\"isOn()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\">\n    <span rtElem=\"track\">\n        @if (iconOff(); as iconOffName) {\n            <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n        }\n        @if (iconOn(); as iconOnName) {\n            <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n        }\n        <span rtElem=\"thumb\"></span>\n    </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.rt-toggle-switch{--rt-toggle-track-width: 42px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 18px;--rt-toggle-thumb-inset: 3px;--rt-toggle-thumb-travel: 18px;--rt-toggle-icon-inset: 4px;display:inline-flex;padding:0;border:none;background:none;cursor:pointer}.rt-toggle-switch--md{--rt-toggle-track-width: 52px;--rt-toggle-thumb-travel: 28px}.rt-toggle-switch--lg{--rt-toggle-track-width: 60px;--rt-toggle-track-height: 30px;--rt-toggle-thumb-size: 24px;--rt-toggle-thumb-travel: 30px;--rt-toggle-icon-inset: 6px}.rt-toggle-switch:focus-visible{border-radius:var(--rt-radius-full);box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}.rt-toggle-switch--disabled{cursor:not-allowed;opacity:.5}.rt-toggle-switch__track{position:relative;display:inline-block;width:var(--rt-toggle-track-width);height:var(--rt-toggle-track-height);border-radius:var(--rt-radius-full);background:var(--rt-toggle-color-track);box-shadow:var(--rt-toggle-shadow-border);color:var(--rt-toggle-color-icon);transition:background var(--rt-duration-fast) ease,box-shadow var(--rt-duration-fast) ease}.rt-toggle-switch--on .rt-toggle-switch__track{background:var(--rt-toggle-color-track-on);box-shadow:none}.rt-toggle-switch__icon-off,.rt-toggle-switch__icon-on{position:absolute;inset-block-start:50%;transform:translateY(-50%)}.rt-toggle-switch__icon-off{inset-inline-start:var(--rt-toggle-icon-inset)}.rt-toggle-switch__icon-on{inset-inline-end:var(--rt-toggle-icon-inset)}.rt-toggle-switch__thumb{position:absolute;width:var(--rt-toggle-thumb-size);height:var(--rt-toggle-thumb-size);border-radius:var(--rt-radius-full);background:var(--rt-toggle-color-thumb);box-shadow:var(--rt-toggle-shadow-thumb);inset-block-start:var(--rt-toggle-thumb-inset);inset-inline-start:var(--rt-toggle-thumb-inset);transition:transform var(--rt-duration-fast) ease}.rt-toggle-switch--on .rt-toggle-switch__thumb{transform:translate(var(--rt-toggle-thumb-travel))}\n"], dependencies: [{ kind: "component", type: 
+        ], ngImport: i0, template: "<button\n    rtBlock=\"rt-toggle-switch\"\n    qa-dataid=\"toggle-switch-control\"\n    type=\"button\"\n    role=\"switch\"\n    [rtMod]=\"bemMods()\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-checked]=\"isOn()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\">\n    <span rtElem=\"track\">\n        @if (iconOff(); as iconOffName) {\n            <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n        }\n        @if (iconOn(); as iconOnName) {\n            <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n        }\n        <span rtElem=\"thumb\"></span>\n    </span>\n</button>\n", styles: ["@charset \"UTF-8\";rt-toggle-switch{display:inline-flex}rt-toggle-switch .rt-toggle-switch{--rt-toggle-track-width: 42px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 18px;--rt-toggle-thumb-inset: 3px;--rt-toggle-thumb-travel: 18px;--rt-toggle-icon-inset: 4px;display:inline-flex;padding:0;border:none;background:none;cursor:pointer}rt-toggle-switch .rt-toggle-switch--md{--rt-toggle-track-width: 52px;--rt-toggle-thumb-travel: 28px}rt-toggle-switch .rt-toggle-switch--lg{--rt-toggle-track-width: 60px;--rt-toggle-track-height: 30px;--rt-toggle-thumb-size: 24px;--rt-toggle-thumb-travel: 30px;--rt-toggle-icon-inset: 6px}rt-toggle-switch .rt-toggle-switch:focus-visible{border-radius:var(--rt-radius-full);box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}rt-toggle-switch .rt-toggle-switch--disabled{cursor:not-allowed;opacity:.5}rt-toggle-switch .rt-toggle-switch__track{position:relative;display:inline-block;width:var(--rt-toggle-track-width);height:var(--rt-toggle-track-height);border-radius:var(--rt-radius-full);background:var(--rt-toggle-color-track);box-shadow:var(--rt-toggle-shadow-border);color:var(--rt-toggle-color-icon);transition:background var(--rt-duration-fast) ease,box-shadow var(--rt-duration-fast) ease}rt-toggle-switch .rt-toggle-switch--on rt-toggle-switch .rt-toggle-switch__track{background:var(--rt-toggle-color-track-on);box-shadow:none}rt-toggle-switch .rt-toggle-switch__icon-off,rt-toggle-switch .rt-toggle-switch__icon-on{position:absolute;inset-block-start:50%;transform:translateY(-50%)}rt-toggle-switch .rt-toggle-switch__icon-off{inset-inline-start:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__icon-on{inset-inline-end:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__thumb{position:absolute;width:var(--rt-toggle-thumb-size);height:var(--rt-toggle-thumb-size);border-radius:var(--rt-radius-full);background:var(--rt-toggle-color-thumb);box-shadow:var(--rt-toggle-shadow-thumb);inset-block-start:var(--rt-toggle-thumb-inset);inset-inline-start:var(--rt-toggle-thumb-inset);transition:transform var(--rt-duration-fast) ease}rt-toggle-switch .rt-toggle-switch--on rt-toggle-switch .rt-toggle-switch__thumb{transform:translate(var(--rt-toggle-thumb-travel))}\n"], dependencies: [{ kind: "component", type: 
                 // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "size", "color", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtToggleSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-toggle-switch', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-toggle-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtIconComponent,
                         BlockDirective,
@@ -11573,8 +11681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         },
                     ], host: {
                         class: BEM_BLOCK$6,
-                    }, template: "<button\n    rtBlock=\"rt-toggle-switch\"\n    qa-dataid=\"toggle-switch-control\"\n    type=\"button\"\n    role=\"switch\"\n    [rtMod]=\"bemMods()\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-checked]=\"isOn()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\">\n    <span rtElem=\"track\">\n        @if (iconOff(); as iconOffName) {\n            <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n        }\n        @if (iconOn(); as iconOnName) {\n            <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n        }\n        <span rtElem=\"thumb\"></span>\n    </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.rt-toggle-switch{--rt-toggle-track-width: 42px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 18px;--rt-toggle-thumb-inset: 3px;--rt-toggle-thumb-travel: 18px;--rt-toggle-icon-inset: 4px;display:inline-flex;padding:0;border:none;background:none;cursor:pointer}.rt-toggle-switch--md{--rt-toggle-track-width: 52px;--rt-toggle-thumb-travel: 28px}.rt-toggle-switch--lg{--rt-toggle-track-width: 60px;--rt-toggle-track-height: 30px;--rt-toggle-thumb-size: 24px;--rt-toggle-thumb-travel: 30px;--rt-toggle-icon-inset: 6px}.rt-toggle-switch:focus-visible{border-radius:var(--rt-radius-full);box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}.rt-toggle-switch--disabled{cursor:not-allowed;opacity:.5}.rt-toggle-switch__track{position:relative;display:inline-block;width:var(--rt-toggle-track-width);height:var(--rt-toggle-track-height);border-radius:var(--rt-radius-full);background:var(--rt-toggle-color-track);box-shadow:var(--rt-toggle-shadow-border);color:var(--rt-toggle-color-icon);transition:background var(--rt-duration-fast) ease,box-shadow var(--rt-duration-fast) ease}.rt-toggle-switch--on .rt-toggle-switch__track{background:var(--rt-toggle-color-track-on);box-shadow:none}.rt-toggle-switch__icon-off,.rt-toggle-switch__icon-on{position:absolute;inset-block-start:50%;transform:translateY(-50%)}.rt-toggle-switch__icon-off{inset-inline-start:var(--rt-toggle-icon-inset)}.rt-toggle-switch__icon-on{inset-inline-end:var(--rt-toggle-icon-inset)}.rt-toggle-switch__thumb{position:absolute;width:var(--rt-toggle-thumb-size);height:var(--rt-toggle-thumb-size);border-radius:var(--rt-radius-full);background:var(--rt-toggle-color-thumb);box-shadow:var(--rt-toggle-shadow-thumb);inset-block-start:var(--rt-toggle-thumb-inset);inset-inline-start:var(--rt-toggle-thumb-inset);transition:transform var(--rt-duration-fast) ease}.rt-toggle-switch--on .rt-toggle-switch__thumb{transform:translate(var(--rt-toggle-thumb-travel))}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+                    }, template: "<button\n    rtBlock=\"rt-toggle-switch\"\n    qa-dataid=\"toggle-switch-control\"\n    type=\"button\"\n    role=\"switch\"\n    [rtMod]=\"bemMods()\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-checked]=\"isOn()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\">\n    <span rtElem=\"track\">\n        @if (iconOff(); as iconOffName) {\n            <rt-icon rtElem=\"icon-off\" size=\"sm\" [name]=\"iconOffName\" />\n        }\n        @if (iconOn(); as iconOnName) {\n            <rt-icon rtElem=\"icon-on\" size=\"sm\" [name]=\"iconOnName\" />\n        }\n        <span rtElem=\"thumb\"></span>\n    </span>\n</button>\n", styles: ["@charset \"UTF-8\";rt-toggle-switch{display:inline-flex}rt-toggle-switch .rt-toggle-switch{--rt-toggle-track-width: 42px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 18px;--rt-toggle-thumb-inset: 3px;--rt-toggle-thumb-travel: 18px;--rt-toggle-icon-inset: 4px;display:inline-flex;padding:0;border:none;background:none;cursor:pointer}rt-toggle-switch .rt-toggle-switch--md{--rt-toggle-track-width: 52px;--rt-toggle-thumb-travel: 28px}rt-toggle-switch .rt-toggle-switch--lg{--rt-toggle-track-width: 60px;--rt-toggle-track-height: 30px;--rt-toggle-thumb-size: 24px;--rt-toggle-thumb-travel: 30px;--rt-toggle-icon-inset: 6px}rt-toggle-switch .rt-toggle-switch:focus-visible{border-radius:var(--rt-radius-full);box-shadow:var(--rt-shadow-focus-ring);outline:2px solid transparent;outline-offset:2px}rt-toggle-switch .rt-toggle-switch--disabled{cursor:not-allowed;opacity:.5}rt-toggle-switch .rt-toggle-switch__track{position:relative;display:inline-block;width:var(--rt-toggle-track-width);height:var(--rt-toggle-track-height);border-radius:var(--rt-radius-full);background:var(--rt-toggle-color-track);box-shadow:var(--rt-toggle-shadow-border);color:var(--rt-toggle-color-icon);transition:background var(--rt-duration-fast) ease,box-shadow var(--rt-duration-fast) ease}rt-toggle-switch .rt-toggle-switch--on rt-toggle-switch .rt-toggle-switch__track{background:var(--rt-toggle-color-track-on);box-shadow:none}rt-toggle-switch .rt-toggle-switch__icon-off,rt-toggle-switch .rt-toggle-switch__icon-on{position:absolute;inset-block-start:50%;transform:translateY(-50%)}rt-toggle-switch .rt-toggle-switch__icon-off{inset-inline-start:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__icon-on{inset-inline-end:var(--rt-toggle-icon-inset)}rt-toggle-switch .rt-toggle-switch__thumb{position:absolute;width:var(--rt-toggle-thumb-size);height:var(--rt-toggle-thumb-size);border-radius:var(--rt-radius-full);background:var(--rt-toggle-color-thumb);box-shadow:var(--rt-toggle-shadow-thumb);inset-block-start:var(--rt-toggle-thumb-inset);inset-inline-start:var(--rt-toggle-thumb-inset);transition:transform var(--rt-duration-fast) ease}rt-toggle-switch .rt-toggle-switch--on rt-toggle-switch .rt-toggle-switch__thumb{transform:translate(var(--rt-toggle-thumb-travel))}\n"] }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Модель `<rt-toggle-switch>`: один корневой неймспейс с префиксом `I`.
@@ -11616,15 +11724,15 @@ class RtThemeToggleComponent {
         this.#theme.toggle();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtThemeToggleComponent, isStandalone: true, selector: "rt-theme-toggle", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-theme-toggle" }, ngImport: i0, template: "@if (isSwitch()) {\n    <rt-toggle-switch\n        qa-dataid=\"theme-toggle-control\"\n        size=\"md\"\n        iconOff=\"ico-sun\"\n        iconOn=\"moon\"\n        [ariaLabel]=\"label\"\n        [ngModel]=\"isDark()\"\n        (ngModelChange)=\"onToggle()\" />\n} @else {\n    <rt-icon-button\n        qa-dataid=\"theme-toggle-control\"\n        variant=\"ghost\"\n        size=\"md\"\n        shape=\"circle\"\n        [ariaLabel]=\"label\"\n        [icon]=\"iconName()\"\n        [active]=\"isDark()\"\n        (clicked)=\"onToggle()\" />\n}\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtThemeToggleComponent, isStandalone: true, selector: "rt-theme-toggle", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-theme-toggle" }, ngImport: i0, template: "@if (isSwitch()) {\n    <rt-toggle-switch\n        qa-dataid=\"theme-toggle-control\"\n        size=\"md\"\n        iconOff=\"ico-sun\"\n        iconOn=\"moon\"\n        [ariaLabel]=\"label\"\n        [ngModel]=\"isDark()\"\n        (ngModelChange)=\"onToggle()\" />\n} @else {\n    <rt-icon-button\n        qa-dataid=\"theme-toggle-control\"\n        variant=\"ghost\"\n        size=\"md\"\n        shape=\"circle\"\n        [ariaLabel]=\"label\"\n        [icon]=\"iconName()\"\n        [active]=\"isDark()\"\n        (clicked)=\"onToggle()\" />\n}\n", styles: ["@charset \"UTF-8\";.rt-theme-toggle{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // angular
                 FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 
                 // standalone components / directives
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtToggleSwitchComponent, selector: "rt-toggle-switch", inputs: ["inputId", "ariaLabel", "size", "iconOff", "iconOn", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "ariaLabel", "variant", "iconColor", "size", "iconSize", "shape", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtToggleSwitchComponent, selector: "rt-toggle-switch", inputs: ["inputId", "ariaLabel", "size", "iconOff", "iconOn", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtThemeToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // angular
                         FormsModule,
                         // standalone components / directives
@@ -11632,7 +11740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtToggleSwitchComponent,
                     ], host: {
                         class: BEM_BLOCK$5,
-                    }, template: "@if (isSwitch()) {\n    <rt-toggle-switch\n        qa-dataid=\"theme-toggle-control\"\n        size=\"md\"\n        iconOff=\"ico-sun\"\n        iconOn=\"moon\"\n        [ariaLabel]=\"label\"\n        [ngModel]=\"isDark()\"\n        (ngModelChange)=\"onToggle()\" />\n} @else {\n    <rt-icon-button\n        qa-dataid=\"theme-toggle-control\"\n        variant=\"ghost\"\n        size=\"md\"\n        shape=\"circle\"\n        [ariaLabel]=\"label\"\n        [icon]=\"iconName()\"\n        [active]=\"isDark()\"\n        (clicked)=\"onToggle()\" />\n}\n", styles: [":host{display:inline-flex}\n"] }]
+                    }, template: "@if (isSwitch()) {\n    <rt-toggle-switch\n        qa-dataid=\"theme-toggle-control\"\n        size=\"md\"\n        iconOff=\"ico-sun\"\n        iconOn=\"moon\"\n        [ariaLabel]=\"label\"\n        [ngModel]=\"isDark()\"\n        (ngModelChange)=\"onToggle()\" />\n} @else {\n    <rt-icon-button\n        qa-dataid=\"theme-toggle-control\"\n        variant=\"ghost\"\n        size=\"md\"\n        shape=\"circle\"\n        [ariaLabel]=\"label\"\n        [icon]=\"iconName()\"\n        [active]=\"isDark()\"\n        (clicked)=\"onToggle()\" />\n}\n", styles: ["@charset \"UTF-8\";.rt-theme-toggle{display:inline-flex}\n"] }]
         }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
 
 /**
@@ -11903,20 +12011,20 @@ class RtTimelineComponent {
         ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtTimelineComponent, isStandalone: true, selector: "rt-timeline", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-timeline" }, ngImport: i0, template: "<ol rtBlock=\"rt-timeline\" qa-dataid=\"timeline\">\n    @for (step of steps(); track $index; let last = $last) {\n        <li rtElem=\"item\" qa-dataid=\"timeline-item\" [attr.data-status]=\"step.status\" [rtMod]=\"{ status: step.status }\">\n            <span rtElem=\"rail\" aria-hidden=\"true\">\n                <span rtElem=\"dot\" [rtMod]=\"{ status: step.status }\"></span>\n                @if (!last) {\n                    <span rtElem=\"line\"></span>\n                }\n            </span>\n            <span rtElem=\"body\">\n                <span rtElem=\"label\" qa-dataid=\"timeline-item-label\">{{ step.label }}</span>\n                @if (step.meta || step.actor) {\n                    <span rtElem=\"meta\">\n                        @if (step.meta) {\n                            <span rtElem=\"time\" qa-dataid=\"timeline-item-time\">{{ step.meta }}</span>\n                        }\n                        @if (step.actor) {\n                            <span rtElem=\"actor\" qa-dataid=\"timeline-item-actor\">{{ step.actor }}</span>\n                        }\n                    </span>\n                }\n            </span>\n        </li>\n    }\n</ol>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-timeline{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}:host .rt-timeline__item{display:flex;gap:var(--rt-space-sm)}:host .rt-timeline__item:last-child .rt-timeline__body{padding-block-end:0}:host .rt-timeline__rail{display:flex;flex-direction:column;align-items:center;inline-size:16px}:host .rt-timeline__dot{box-sizing:border-box;flex:none;border-radius:var(--rt-radius-full);background:var(--rt-color-stepper-track);block-size:10px;inline-size:10px;margin-block-start:var(--rt-space-xs)}:host .rt-timeline__dot--status--complete{background:var(--rt-color-stepper-progress)}:host .rt-timeline__dot--status--current{background:var(--rt-color-stepper-current);block-size:14px;box-shadow:var(--rt-shadow-step-indicator);inline-size:14px;margin-block-start:var(--rt-space-2xs)}:host .rt-timeline__dot--status--pending{border:var(--rt-border-width-thin) solid var(--rt-color-stepper-track);background:transparent}:host .rt-timeline__line{flex:1 1 auto;background:var(--rt-color-stepper-track);inline-size:2px;margin-block-start:var(--rt-space-2xs)}:host .rt-timeline__body{display:flex;flex-direction:column;gap:var(--rt-space-2xs);padding-block-end:var(--rt-space-md)}:host .rt-timeline__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug)}:host .rt-timeline__meta{display:inline-flex;flex-wrap:wrap;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);gap:var(--rt-space-xs);line-height:var(--rt-leading-snug)}:host .rt-timeline__actor:before{content:\"\\b7\";margin-inline-end:var(--rt-space-xs)}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtTimelineComponent, isStandalone: true, selector: "rt-timeline", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-timeline" }, ngImport: i0, template: "<ol rtBlock=\"rt-timeline\" qa-dataid=\"timeline\">\n    @for (step of steps(); track $index; let last = $last) {\n        <li rtElem=\"item\" qa-dataid=\"timeline-item\" [attr.data-status]=\"step.status\" [rtMod]=\"{ status: step.status }\">\n            <span rtElem=\"rail\" aria-hidden=\"true\">\n                <span rtElem=\"dot\" [rtMod]=\"{ status: step.status }\"></span>\n                @if (!last) {\n                    <span rtElem=\"line\"></span>\n                }\n            </span>\n            <span rtElem=\"body\">\n                <span rtElem=\"label\" qa-dataid=\"timeline-item-label\">{{ step.label }}</span>\n                @if (step.meta || step.actor) {\n                    <span rtElem=\"meta\">\n                        @if (step.meta) {\n                            <span rtElem=\"time\" qa-dataid=\"timeline-item-time\">{{ step.meta }}</span>\n                        }\n                        @if (step.actor) {\n                            <span rtElem=\"actor\" qa-dataid=\"timeline-item-actor\">{{ step.actor }}</span>\n                        }\n                    </span>\n                }\n            </span>\n        </li>\n    }\n</ol>\n", styles: ["@charset \"UTF-8\";rt-timeline{display:block}rt-timeline .rt-timeline{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}rt-timeline .rt-timeline__item{display:flex;gap:var(--rt-space-sm)}rt-timeline .rt-timeline__item:last-child .rt-timeline__body{padding-block-end:0}rt-timeline .rt-timeline__rail{display:flex;flex-direction:column;align-items:center;inline-size:16px}rt-timeline .rt-timeline__dot{box-sizing:border-box;flex:none;border-radius:var(--rt-radius-full);background:var(--rt-color-stepper-track);block-size:10px;inline-size:10px;margin-block-start:var(--rt-space-xs)}rt-timeline .rt-timeline__dot--status--complete{background:var(--rt-color-stepper-progress)}rt-timeline .rt-timeline__dot--status--current{background:var(--rt-color-stepper-current);block-size:14px;box-shadow:var(--rt-shadow-step-indicator);inline-size:14px;margin-block-start:var(--rt-space-2xs)}rt-timeline .rt-timeline__dot--status--pending{border:var(--rt-border-width-thin) solid var(--rt-color-stepper-track);background:transparent}rt-timeline .rt-timeline__line{flex:1 1 auto;background:var(--rt-color-stepper-track);inline-size:2px;margin-block-start:var(--rt-space-2xs)}rt-timeline .rt-timeline__body{display:flex;flex-direction:column;gap:var(--rt-space-2xs);padding-block-end:var(--rt-space-md)}rt-timeline .rt-timeline__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug)}rt-timeline .rt-timeline__meta{display:inline-flex;flex-wrap:wrap;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);gap:var(--rt-space-xs);line-height:var(--rt-leading-snug)}rt-timeline .rt-timeline__actor:before{content:\"\\b7\";margin-inline-end:var(--rt-space-xs)}\n"], dependencies: [{ kind: "directive", type: 
                 // standalone components / directives
-                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         BlockDirective,
                         ElemDirective,
                         ModDirective,
                     ], host: {
                         class: BEM_BLOCK$3,
-                    }, template: "<ol rtBlock=\"rt-timeline\" qa-dataid=\"timeline\">\n    @for (step of steps(); track $index; let last = $last) {\n        <li rtElem=\"item\" qa-dataid=\"timeline-item\" [attr.data-status]=\"step.status\" [rtMod]=\"{ status: step.status }\">\n            <span rtElem=\"rail\" aria-hidden=\"true\">\n                <span rtElem=\"dot\" [rtMod]=\"{ status: step.status }\"></span>\n                @if (!last) {\n                    <span rtElem=\"line\"></span>\n                }\n            </span>\n            <span rtElem=\"body\">\n                <span rtElem=\"label\" qa-dataid=\"timeline-item-label\">{{ step.label }}</span>\n                @if (step.meta || step.actor) {\n                    <span rtElem=\"meta\">\n                        @if (step.meta) {\n                            <span rtElem=\"time\" qa-dataid=\"timeline-item-time\">{{ step.meta }}</span>\n                        }\n                        @if (step.actor) {\n                            <span rtElem=\"actor\" qa-dataid=\"timeline-item-actor\">{{ step.actor }}</span>\n                        }\n                    </span>\n                }\n            </span>\n        </li>\n    }\n</ol>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .rt-timeline{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}:host .rt-timeline__item{display:flex;gap:var(--rt-space-sm)}:host .rt-timeline__item:last-child .rt-timeline__body{padding-block-end:0}:host .rt-timeline__rail{display:flex;flex-direction:column;align-items:center;inline-size:16px}:host .rt-timeline__dot{box-sizing:border-box;flex:none;border-radius:var(--rt-radius-full);background:var(--rt-color-stepper-track);block-size:10px;inline-size:10px;margin-block-start:var(--rt-space-xs)}:host .rt-timeline__dot--status--complete{background:var(--rt-color-stepper-progress)}:host .rt-timeline__dot--status--current{background:var(--rt-color-stepper-current);block-size:14px;box-shadow:var(--rt-shadow-step-indicator);inline-size:14px;margin-block-start:var(--rt-space-2xs)}:host .rt-timeline__dot--status--pending{border:var(--rt-border-width-thin) solid var(--rt-color-stepper-track);background:transparent}:host .rt-timeline__line{flex:1 1 auto;background:var(--rt-color-stepper-track);inline-size:2px;margin-block-start:var(--rt-space-2xs)}:host .rt-timeline__body{display:flex;flex-direction:column;gap:var(--rt-space-2xs);padding-block-end:var(--rt-space-md)}:host .rt-timeline__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug)}:host .rt-timeline__meta{display:inline-flex;flex-wrap:wrap;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);gap:var(--rt-space-xs);line-height:var(--rt-leading-snug)}:host .rt-timeline__actor:before{content:\"\\b7\";margin-inline-end:var(--rt-space-xs)}\n"] }]
+                    }, template: "<ol rtBlock=\"rt-timeline\" qa-dataid=\"timeline\">\n    @for (step of steps(); track $index; let last = $last) {\n        <li rtElem=\"item\" qa-dataid=\"timeline-item\" [attr.data-status]=\"step.status\" [rtMod]=\"{ status: step.status }\">\n            <span rtElem=\"rail\" aria-hidden=\"true\">\n                <span rtElem=\"dot\" [rtMod]=\"{ status: step.status }\"></span>\n                @if (!last) {\n                    <span rtElem=\"line\"></span>\n                }\n            </span>\n            <span rtElem=\"body\">\n                <span rtElem=\"label\" qa-dataid=\"timeline-item-label\">{{ step.label }}</span>\n                @if (step.meta || step.actor) {\n                    <span rtElem=\"meta\">\n                        @if (step.meta) {\n                            <span rtElem=\"time\" qa-dataid=\"timeline-item-time\">{{ step.meta }}</span>\n                        }\n                        @if (step.actor) {\n                            <span rtElem=\"actor\" qa-dataid=\"timeline-item-actor\">{{ step.actor }}</span>\n                        }\n                    </span>\n                }\n            </span>\n        </li>\n    }\n</ol>\n", styles: ["@charset \"UTF-8\";rt-timeline{display:block}rt-timeline .rt-timeline{display:flex;flex-direction:column;padding:0;margin:0;list-style:none}rt-timeline .rt-timeline__item{display:flex;gap:var(--rt-space-sm)}rt-timeline .rt-timeline__item:last-child .rt-timeline__body{padding-block-end:0}rt-timeline .rt-timeline__rail{display:flex;flex-direction:column;align-items:center;inline-size:16px}rt-timeline .rt-timeline__dot{box-sizing:border-box;flex:none;border-radius:var(--rt-radius-full);background:var(--rt-color-stepper-track);block-size:10px;inline-size:10px;margin-block-start:var(--rt-space-xs)}rt-timeline .rt-timeline__dot--status--complete{background:var(--rt-color-stepper-progress)}rt-timeline .rt-timeline__dot--status--current{background:var(--rt-color-stepper-current);block-size:14px;box-shadow:var(--rt-shadow-step-indicator);inline-size:14px;margin-block-start:var(--rt-space-2xs)}rt-timeline .rt-timeline__dot--status--pending{border:var(--rt-border-width-thin) solid var(--rt-color-stepper-track);background:transparent}rt-timeline .rt-timeline__line{flex:1 1 auto;background:var(--rt-color-stepper-track);inline-size:2px;margin-block-start:var(--rt-space-2xs)}rt-timeline .rt-timeline__body{display:flex;flex-direction:column;gap:var(--rt-space-2xs);padding-block-end:var(--rt-space-md)}rt-timeline .rt-timeline__label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);line-height:var(--rt-leading-snug)}rt-timeline .rt-timeline__meta{display:inline-flex;flex-wrap:wrap;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);gap:var(--rt-space-xs);line-height:var(--rt-leading-snug)}rt-timeline .rt-timeline__actor:before{content:\"\\b7\";margin-inline-end:var(--rt-space-xs)}\n"] }]
         }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }] } });
 
 const BEM_BLOCK$2 = 'rt-welcome-dialog';
@@ -11952,13 +12060,13 @@ class RtWelcomeDialogComponent {
         this.#dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtWelcomeDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtWelcomeDialogComponent, isStandalone: true, selector: "rt-welcome-dialog", host: { classAttribute: "rt-welcome-dialog" }, ngImport: i0, template: "<rt-dialog width=\"335px\" [ariaLabel]=\"'rtKit.uiWelcomeAria' | transloco\">\n    <div rtBlock=\"rt-welcome-dialog\">\n        <div rtElem=\"text\">\n            @if (title) {\n                <h2 rtElem=\"title\" qa-dataid=\"welcome-dialog-title\">{{ title }}</h2>\n            }\n            @for (paragraph of paragraphs; track $index) {\n                <p rtElem=\"description\" qa-dataid=\"welcome-dialog-description\">{{ paragraph }}</p>\n            }\n        </div>\n        <!-- rtButton-\u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u0440\u0435\u043D\u0434\u0435\u0440\u0438\u0442 label \u0447\u0435\u0440\u0435\u0437 Renderer2 \u0432 afterNextRender \u2014\n             \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E child-\u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 \u0432 template \u043D\u0435\u0442 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n        <button\n            rtButton\n            rtElem=\"cta\"\n            qa-dataid=\"welcome-dialog-cta\"\n            type=\"button\"\n            theme=\"primary\"\n            appearance=\"filled\"\n            [label]=\"ctaLabel()\"\n            (click)=\"onClose()\"></button>\n    </div>\n</rt-dialog>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host .rt-welcome-dialog{display:flex;flex-direction:column;padding:var(--rt-space-16) var(--rt-space-5);gap:var(--rt-space-5)}:host .rt-welcome-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-2-5);text-align:center}:host .rt-welcome-dialog__title{margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-snug)}:host .rt-welcome-dialog__description{margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-snug);white-space:pre-line}:host .rt-welcome-dialog__cta{--rt-btn-font-size: 14px;width:100%;letter-spacing:0}\n"], dependencies: [{ kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtWelcomeDialogComponent, isStandalone: true, selector: "rt-welcome-dialog", host: { classAttribute: "rt-welcome-dialog" }, ngImport: i0, template: "<rt-dialog width=\"335px\" [ariaLabel]=\"'rtKit.uiWelcomeAria' | transloco\">\n    <div rtBlock=\"rt-welcome-dialog\">\n        <div rtElem=\"text\">\n            @if (title) {\n                <h2 rtElem=\"title\" qa-dataid=\"welcome-dialog-title\">{{ title }}</h2>\n            }\n            @for (paragraph of paragraphs; track $index) {\n                <p rtElem=\"description\" qa-dataid=\"welcome-dialog-description\">{{ paragraph }}</p>\n            }\n        </div>\n        <!-- rtButton-\u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u0440\u0435\u043D\u0434\u0435\u0440\u0438\u0442 label \u0447\u0435\u0440\u0435\u0437 Renderer2 \u0432 afterNextRender \u2014\n             \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E child-\u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 \u0432 template \u043D\u0435\u0442 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n        <button\n            rtButton\n            rtElem=\"cta\"\n            qa-dataid=\"welcome-dialog-cta\"\n            type=\"button\"\n            theme=\"primary\"\n            appearance=\"filled\"\n            [label]=\"ctaLabel()\"\n            (click)=\"onClose()\"></button>\n    </div>\n</rt-dialog>\n", styles: ["@charset \"UTF-8\";rt-welcome-dialog{display:contents}rt-welcome-dialog .rt-welcome-dialog{display:flex;flex-direction:column;padding:var(--rt-space-16) var(--rt-space-5);gap:var(--rt-space-5)}rt-welcome-dialog .rt-welcome-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-2-5);text-align:center}rt-welcome-dialog .rt-welcome-dialog__title{margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-snug)}rt-welcome-dialog .rt-welcome-dialog__description{margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-snug);white-space:pre-line}rt-welcome-dialog .rt-welcome-dialog__cta{--rt-btn-font-size: 14px;width:100%;letter-spacing:0}\n"], dependencies: [{ kind: "directive", type: 
                 // standalone components / directives
-                RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "rounded", "loading", "loadingIcon"] }, { kind: "component", type: RtDialogComponent, selector: "rt-dialog", inputs: ["size", "width", "ariaLabel"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "rounded", "loading", "loadingIcon"] }, { kind: "component", type: RtDialogComponent, selector: "rt-dialog", inputs: ["size", "width", "ariaLabel"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtWelcomeDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rt-welcome-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'rt-welcome-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         // standalone components / directives
                         RtButtonDirective,
                         RtDialogComponent,
@@ -11967,7 +12075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         TranslocoPipe,
                     ], host: {
                         class: BEM_BLOCK$2,
-                    }, template: "<rt-dialog width=\"335px\" [ariaLabel]=\"'rtKit.uiWelcomeAria' | transloco\">\n    <div rtBlock=\"rt-welcome-dialog\">\n        <div rtElem=\"text\">\n            @if (title) {\n                <h2 rtElem=\"title\" qa-dataid=\"welcome-dialog-title\">{{ title }}</h2>\n            }\n            @for (paragraph of paragraphs; track $index) {\n                <p rtElem=\"description\" qa-dataid=\"welcome-dialog-description\">{{ paragraph }}</p>\n            }\n        </div>\n        <!-- rtButton-\u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u0440\u0435\u043D\u0434\u0435\u0440\u0438\u0442 label \u0447\u0435\u0440\u0435\u0437 Renderer2 \u0432 afterNextRender \u2014\n             \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E child-\u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 \u0432 template \u043D\u0435\u0442 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n        <button\n            rtButton\n            rtElem=\"cta\"\n            qa-dataid=\"welcome-dialog-cta\"\n            type=\"button\"\n            theme=\"primary\"\n            appearance=\"filled\"\n            [label]=\"ctaLabel()\"\n            (click)=\"onClose()\"></button>\n    </div>\n</rt-dialog>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host .rt-welcome-dialog{display:flex;flex-direction:column;padding:var(--rt-space-16) var(--rt-space-5);gap:var(--rt-space-5)}:host .rt-welcome-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-2-5);text-align:center}:host .rt-welcome-dialog__title{margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-snug)}:host .rt-welcome-dialog__description{margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-snug);white-space:pre-line}:host .rt-welcome-dialog__cta{--rt-btn-font-size: 14px;width:100%;letter-spacing:0}\n"] }]
+                    }, template: "<rt-dialog width=\"335px\" [ariaLabel]=\"'rtKit.uiWelcomeAria' | transloco\">\n    <div rtBlock=\"rt-welcome-dialog\">\n        <div rtElem=\"text\">\n            @if (title) {\n                <h2 rtElem=\"title\" qa-dataid=\"welcome-dialog-title\">{{ title }}</h2>\n            }\n            @for (paragraph of paragraphs; track $index) {\n                <p rtElem=\"description\" qa-dataid=\"welcome-dialog-description\">{{ paragraph }}</p>\n            }\n        </div>\n        <!-- rtButton-\u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u0440\u0435\u043D\u0434\u0435\u0440\u0438\u0442 label \u0447\u0435\u0440\u0435\u0437 Renderer2 \u0432 afterNextRender \u2014\n             \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E child-\u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430 \u0432 template \u043D\u0435\u0442 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n        <button\n            rtButton\n            rtElem=\"cta\"\n            qa-dataid=\"welcome-dialog-cta\"\n            type=\"button\"\n            theme=\"primary\"\n            appearance=\"filled\"\n            [label]=\"ctaLabel()\"\n            (click)=\"onClose()\"></button>\n    </div>\n</rt-dialog>\n", styles: ["@charset \"UTF-8\";rt-welcome-dialog{display:contents}rt-welcome-dialog .rt-welcome-dialog{display:flex;flex-direction:column;padding:var(--rt-space-16) var(--rt-space-5);gap:var(--rt-space-5)}rt-welcome-dialog .rt-welcome-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-2-5);text-align:center}rt-welcome-dialog .rt-welcome-dialog__title{margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);line-height:var(--rt-leading-snug)}rt-welcome-dialog .rt-welcome-dialog__description{margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-snug);white-space:pre-line}rt-welcome-dialog .rt-welcome-dialog__cta{--rt-btn-font-size: 14px;width:100%;letter-spacing:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class RtWorkspaceDesktopOnlyDirective {