@rt-tools/ui-kit-v2 0.34.3 → 0.34.5

package/styles/tokens.css

@@ -7454,11 +7454,14 @@ html.rt-theme-dark.rt-preset-material {
   }
   .rt-form {
     /* Строка контрола: один ряд колонки. Поле занимает строку целиком — иначе каждый
-       потребитель дописывает ширину сам. Зазор строки разводит элементы в ряду. */
+       потребитель дописывает ширину сам. Зазор строки разводит элементы в ряду. Строка
+       переносит элементы: две кнопки с длинными подписями на узкой панели иначе не встают
+       в ряд, и вторая выходит за край. */
   }
   .rt-form__control-item {
     display: flex;
     width: 100%;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: flex-start;
     gap: var(--rt-space-xl);
@@ -7644,6 +7647,15 @@ html.rt-theme-dark.rt-preset-material {
       gap: var(--rt-space-md);
     }
   }
+  /* На узком экране строка из одних кнопок встаёт столбиком, кнопки во всю ширину, порядок
+     прежний. Порог ниже порога панели: на 768 точках кнопки ещё стоят в ряд. Строка с полем
+     рядом с кнопкой сюда не попадает и переносится общим правилом. */
+  @media (width <= 480px) {
+    .rt-form__control-item:has(> .rt-button):not(:has(> :not(.rt-button))) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
 }
 @layer rt-kit.components {
   .rt-button {

package/types/rt-tools-ui-kit-v2-aside.d.ts

@@ -5,6 +5,7 @@ import { ComponentType, OverlayRef } from "@angular/cdk/overlay";
 import { Observable, Subject } from "rxjs";
 import { IRtIcon, TRtKitLabelMap, TRtRadius } from "@rt-tools/ui-kit-v2/core";
 import { IRtTag } from "@rt-tools/ui-kit-v2/tag";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
 /**
  * Варианты ширины side-sheet:
  * - `sm` — 400px (`--rt-aside-width-sm`)
@@ -400,12 +401,17 @@ export declare class RtAsideHeaderComponent {
 }
 /**
  * Footer-слот для композиции внутри `<rt-aside>`. Две зоны через именованные
- * слоты: `[asideDismiss]` (слева — «Закрыть», `appearance="text"`, всегда) и
- * `[asidePrimary]` (справа — единственный позитивный глагол: Сохранить /
- * Отправить / Опубликовать, если есть). Раскладка `justify-content:
- * space-between`. Доменные/деструктивные действия в футер не кладём — они
+ * слоты: `[asideDismiss]` (слева — «Закрыть») и `[asidePrimary]` (справа —
+ * единственный позитивный глагол: Сохранить / Отправить / Опубликовать, если
+ * есть). Раскладка `justify-content: space-between`, кнопки стоят в одну строку
+ * на любой ширине. Доменные/деструктивные действия в футер не кладём — они
  * проецируются иконками в `<rt-aside-header>` слот `[asideActions]`.
  *
+ * Вид кнопок задаёт подвал, а не разметка потребителя: «Закрыть» в рамке темы
+ * secondary, позитивный глагол залитый и без значка. На телефоне первая кнопка
+ * подписана коротко — «Закрыть» из подписей кита. Кнопка может стоять в слоте
+ * не сама, а внутри обёртки с атрибутом слота: так ставят подсказку на кнопку.
+ *
  * Только две именованные зоны — безатрибутный контент НЕ проецируется (контент
  * без `asideDismiss`/`asidePrimary` не отрендерится).
  *
@@ -414,14 +420,18 @@ export declare class RtAsideHeaderComponent {
  * @example
  * \`\`\`html
  * <rt-aside-footer>
- *   <button rtButton asideDismiss appearance="text" (click)="onClose()">Закрыть</button>
- *   <button rtButton asidePrimary theme="primary" (click)="save()">Сохранить</button>
+ *   <button rtButton asideDismiss label="Закрыть и не сохранять" (click)="onClose()"></button>
+ *   <button rtButton asidePrimary label="Сохранить" (click)="save()"></button>
  * </rt-aside-footer>
  * \`\`\`
  */
 export declare class RtAsideFooterComponent {
+  #private;
+  protected readonly buttons: Signal<readonly RtButtonDirective[]>;
+  protected readonly hosts: Signal<readonly ElementRef<HTMLElement>[]>;
+  constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<RtAsideFooterComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideFooterComponent, "rt-aside-footer", never, {}, {}, never, ["[asideDismiss]", "[asidePrimary]"], true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtAsideFooterComponent, "rt-aside-footer", never, {}, {}, ["buttons", "hosts"], ["[asideDismiss]", "[asidePrimary]"], true, never>;
 }
 /**
  * Блок ошибки запроса боковой панели: надпись и кнопка, которая кладёт в буфер обмена время и

package/types/rt-tools-ui-kit-v2-button.d.ts

@@ -1,6 +1,6 @@
 import { BooleanInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import { InputSignal, InputSignalWithTransform, Signal } from "@angular/core";
+import { InputSignal, InputSignalWithTransform, Signal, WritableSignal } from "@angular/core";
 import { IButton } from "@rt-tools/ui-kit-v2/core";
 import * as i1 from "@rt-tools/ui-kit-v2/ripple";
 import * as i2 from "@rt-tools/ui-kit-v2/radius";
@@ -24,6 +24,11 @@ import * as i2 from "@rt-tools/ui-kit-v2/radius";
 export declare class RtButtonDirective {
   #private;
   protected readonly isIconOnly: Signal<boolean>;
+  /**
+   * Вид, который задаёт место кнопки: слот подвала панели. Пишет его хозяин места, а не
+   * приложение, — входы кнопки при этом не трогаются и вернутся, когда место вид снимет.
+   */
+  readonly placeLook: WritableSignal<IButton.PlaceLook | null>;
   /** Текстовый лейбл кнопки. Если null — кнопка только с иконкой. */
   readonly label: InputSignal<string | null>;
   /**

package/types/rt-tools-ui-kit-v2-core.d.ts

@@ -23,6 +23,17 @@ export declare namespace IButton {
    * невидимы, но держат ширину кнопки, а спиннер стоит по центру.
    */
   type LoadingLabel = 'keep' | 'hide';
+  /**
+   * Вид, который кнопке задаёт место, где она стоит, — например слот подвала панели. Названное
+   * здесь сильнее входов кнопки, неназванное берётся из входов. `icon: null` снимает значок,
+   * `label` подменяет подпись.
+   */
+  interface PlaceLook {
+    readonly theme?: Theme;
+    readonly appearance?: Appearance;
+    readonly icon?: null;
+    readonly label?: string;
+  }
 }
 /** Вид колонки: решает, чем рисуется значение ячейки. */
 export declare enum ERtDataTableColumnType {
@@ -1044,6 +1055,8 @@ export declare function rtSearchWords(query: string): string[];
 export declare function rtSearchMatches(text: string, query: string): boolean;
 /** Порог узкого вида — тот же, что у `$rt-bp-lg` в стилях кита. */
 export declare const RT_NARROW_WIDTH: number;
+/** Порог телефона — тот же, что у `$rt-bp-sm` в стилях кита. */
+export declare const RT_PHONE_WIDTH: number;
 /**
  * Узок ли вид. Ширина места страницы решает, когда место объявлено; без него решает окно.
  */
@@ -1067,6 +1080,11 @@ export declare class BreakpointsService {
    * `initialValue: false` — на SSR/CSR до первого matchMedia рендерим desktop-вариант.
    */
   readonly viewportNarrow: Signal<boolean>;
+  /**
+   * Окно телефона (≤480px). На нём то, что на экране шире стоит в строку, встаёт короче или
+   * столбиком: подпись первой кнопки подвала панели. `initialValue: false` — как у узкого окна.
+   */
+  readonly phone: Signal<boolean>;
   /**
    * Узкий вид (≤1080px) — единый порог для компонентов, которые на узком месте подменяют
    * развёрнутый контрол на компактный (напр. `rt-filter-control`: сегменты → `rt-select`).

package/types/rt-tools-ui-kit-v2-icon-button.d.ts

@@ -1,6 +1,7 @@
 import { BooleanInput, NumberInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from "@angular/core";
+import { ElementRef, InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from "@angular/core";
+import { RouterLink } from "@angular/router";
 import { IRtIcon } from "@rt-tools/ui-kit-v2/core";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
 /**
@@ -19,11 +20,14 @@ export declare namespace IRtIconButton {
   type Size = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** HTML-тип нативного `<button>`. */
   type Type = 'button' | 'submit';
+  /** Какую панель открывает кнопка — значения `aria-haspopup`. */
+  type HasPopup = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 }
 /**
  * Универсальная icon-only кнопка кита.
  *
- * Рендерит свой собственный `<button type="...">` внутри template (НЕ host-button).
+ * Рендерит свой собственный `<button type="...">` внутри template (НЕ host-button), а с входом
+ * `link` — ссылку `<a>` с тем же видом: её можно открыть в новой вкладке, и скринридер называет её ссылкой.
  * Все цвета и размеры — через семантические `--rt-*` токены; геометрия квадрата
  * берётся из `--rt-icon-button-size`, а без него — из шага `size`. Свойство, заданное на теге
  * `<rt-icon-button>` или выше, доходит до кнопки; так же и `--rt-icon-button-bg`.
@@ -44,6 +48,14 @@ export declare class RtIconButtonComponent {
    * должна остаться большой — в неё целятся пальцем.
    */
   protected readonly resolvedIconSize: Signal<IRtIcon.Size>;
+  protected readonly buttonEl: Signal<ElementRef<HTMLButtonElement> | undefined>;
+  protected readonly linkEl: Signal<ElementRef<HTMLAnchorElement> | undefined>;
+  /** Компонент рисует ссылку: задан `link`. */
+  protected readonly isLink: Signal<boolean>;
+  /** Адрес ссылки: у недоступной или загружающейся его нет, и ссылка никуда не ведёт. */
+  protected readonly linkTarget: Signal<RouterLink['routerLink']>;
+  /** Недоступная ссылка выпадает из порядка Tab, как отключённая кнопка. */
+  protected readonly linkTabIndex: Signal<number>;
   /** Кнопка отключена, если установлен disabled ИЛИ loading. */
   protected readonly isDisabled: Signal<boolean>;
   /**
@@ -110,10 +122,24 @@ export declare class RtIconButtonComponent {
    * кнопка ничего не раскрывает, и атрибута нет.
    */
   readonly expanded: InputSignal<boolean | null>;
+  /**
+   * Какую панель открывает кнопка — превращается в `aria-haspopup`: `'menu'` у кнопки, которая
+   * раскрывает меню. `null` — атрибута нет.
+   */
+  readonly ariaHaspopup: InputSignal<IRtIconButton.HasPopup | null>;
+  /**
+   * Команды маршрута приложения, как у `routerLink`. Задан — компонент рисует ссылку `<a href>` с тем
+   * же видом, подсказкой и рябью: Ctrl/Cmd-click, Shift-click, средняя кнопка и контекстное меню
+   * браузера открывают её в новой вкладке или окне. `type`, `active` и `aria-pressed` у ссылки не
+   * пишутся. `null` — обычная кнопка.
+   */
+  readonly link: InputSignal<RouterLink['routerLink']>;
   /** Бейдж-индикатор (dot top-right через BEM-модификатор). */
   readonly indicator: InputSignalWithTransform<boolean, BooleanInput>;
   /** Эмиттит MouseEvent при клике (только когда не disabled и не loading). */
   readonly clicked: OutputEmitterRef<MouseEvent>;
+  /** Фокусирует кнопку или ссылку внутри — например, когда закрылось меню, которое она открыла. */
+  focus(options?: FocusOptions): void;
   protected onClick(event: MouseEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtIconButtonComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<RtIconButtonComponent, "rt-icon-button", never, {
@@ -197,6 +223,16 @@ export declare class RtIconButtonComponent {
       "required": false;
       "isSignal": true;
     };
+    "ariaHaspopup": {
+      "alias": "ariaHaspopup";
+      "required": false;
+      "isSignal": true;
+    };
+    "link": {
+      "alias": "link";
+      "required": false;
+      "isSignal": true;
+    };
     "indicator": {
       "alias": "indicator";
       "required": false;

package/types/rt-tools-ui-kit-v2-input.d.ts

@@ -84,6 +84,8 @@ export declare class RtInputComponent extends RtFormControlBase<string> {
    * Поэтому расхождение с полем пишется в него сразу.
    */
   writeValue(value: string | null): void;
+  /** Фокусирует поле ввода внутри — например, поиск, когда открылась его панель. */
+  focus(options?: FocusOptions): void;
   protected getEmptyValue(): string;
   protected focusAfterClear(): void;
   /**