@rt-tools/ui-kit-v2 0.34.2 → 0.34.4

package/src/lib/components/icon-button/rt-icon-button.component.scss

@@ -47,6 +47,7 @@
             display: inline-flex;
             width: var(--rt-icon-button-size, var(--rt-icon-button-size-step));
             height: var(--rt-icon-button-size, var(--rt-icon-button-size-step));
+            box-sizing: border-box;
             align-items: center;
             justify-content: center;
             padding: 0;
@@ -56,6 +57,7 @@
             box-shadow: var(--rt-icon-button-shadow);
             color: var(--rt-icon-button-color);
             cursor: pointer;
+            text-decoration: none;
             transition:
                 background-color var(--rt-icon-button-transition-duration) ease,
                 box-shadow var(--rt-icon-button-transition-duration) ease;
@@ -92,14 +94,14 @@
 
             /* Подъём под указателем — ручка для потребителя, как тень покоя; по умолчанию равен
                тени покоя, и кнопка без подъёма под указателем не меняется. */
-            &:hover:not(:disabled) {
+            &:hover:not(:disabled, [aria-disabled='true']) {
                 box-shadow: var(--rt-icon-button-shadow-hover);
             }
 
             /* Заливка под указателем читается под ручкой `--rt-icon-button-bg-hover`; без неё каждый
                вид берёт свою, как прежде. */
             &--ghost {
-                &:hover:not(:disabled) {
+                &:hover:not(:disabled, [aria-disabled='true']) {
                     background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                     color: var(--rt-icon-button-color-hover);
                 }
@@ -114,7 +116,7 @@
 
                 color: var(--rt-color-action-on-primary);
 
-                &:hover:not(:disabled) {
+                &:hover:not(:disabled, [aria-disabled='true']) {
                     background-color: var(--rt-icon-button-bg-hover, var(--rt-color-action-primary-hover));
                 }
             }
@@ -124,7 +126,7 @@
 
                 color: var(--rt-color-text-primary);
 
-                &:hover:not(:disabled) {
+                &:hover:not(:disabled, [aria-disabled='true']) {
                     background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
             }
@@ -132,7 +134,7 @@
             &--danger {
                 color: var(--rt-color-state-danger);
 
-                &:hover:not(:disabled) {
+                &:hover:not(:disabled, [aria-disabled='true']) {
                     background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
@@ -144,7 +146,7 @@
             &--success {
                 color: var(--rt-color-state-success);
 
-                &:hover:not(:disabled) {
+                &:hover:not(:disabled, [aria-disabled='true']) {
                     background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
@@ -156,7 +158,7 @@
             &--warning {
                 color: var(--rt-color-state-warning);
 
-                &:hover:not(:disabled) {
+                &:hover:not(:disabled, [aria-disabled='true']) {
                     background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
@@ -168,8 +170,9 @@
             /* Цвет неактивной кнопки ставится рисунку значка: по умолчанию `currentcolor`, то есть цвет
                значка, и свой вид остаётся прежним. Не самому значку — переданный цвет он ставит себе
                встроенным стилем, и правилом его не перебить. Заливка остаётся долей заливки покоя: по умолчанию
-               вся, и свой вид прежний. */
-            &:disabled {
+               вся, и свой вид прежний. У ссылки нет `:disabled`: недоступную отмечает `aria-disabled`. */
+            &:disabled,
+            &[aria-disabled='true'] {
                 background-color: color-mix(
                     in srgb,
                     var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant)) var(--rt-icon-button-disabled-fill),
@@ -183,6 +186,11 @@
                 }
             }
 
+            /* Кнопка, спрятанная под ссылкой: `display` блока сильнее `[hidden]` браузера. */
+            &[hidden] {
+                display: none;
+            }
+
             /* Фокус от мыши и касания кольца не рисует, как у Material: браузер ставит `:focus-visible` и
                на фокус из кода после нажатия мышью — окно открылось кликом и перевело фокус на кнопку. */
             &:focus-visible:not(.cdk-mouse-focused, .cdk-touch-focused) {

package/src/lib/components/input/CONTEXT.md

@@ -28,6 +28,10 @@
 | `iconLeftClick` / `iconRightClick` | `MouseEvent` |
 | `cleared`                          | `void`       |
 
+| метод             | что делает                   |
+| ----------------- | ---------------------------- |
+| `focus(options?)` | фокусирует поле ввода внутри |
+
 Значение — `string`. `maxlength` уходит атрибутом на поле: браузер не даёт набрать больше, а
 значение из кода не режет, поэтому проверка формы остаётся за приложением.
 
@@ -59,6 +63,8 @@
   строки руками означал бы своё поле ввода времени рядом с китом.
 - Клик по рамке (падинги принадлежат host-у, а не `<input>`) переводит фокус в поле — кроме
   кликов по самому полю и по интерактивному постфиксу.
+- `focus()` фокусирует поле из кода приложения — например, поиск, когда открылась его панель.
+  Искать `input` внутри компонента не нужно.
 - Режим плоского чтения включает **вмещающий [`rt-field`](../field/CONTEXT.md)**, а не вход
   компонента: `[readonly]` стоит на поле-обёртке. Пустое значение в этом режиме рисуется прочерком.
 - Подсветка ошибки (`rt-input--invalid`) включается сама после касания — см. основу полей.

package/src/lib/components/tooltip/CONTEXT.md

@@ -30,6 +30,9 @@ no-op, а не пустая панель под курсором. Поэтому
 
 - Показывают и наведение, и фокус с клавиатуры; прячут уход курсора, потеря фокуса и **клик**
   (панель мешала бы смотреть на результат нажатия).
+- **Escape** прячет открытую подсказку и гасится на хосте; фокус остаётся на хосте, следующее
+  наведение или фокус с клавиатуры показывают её снова. При закрытой подсказке Escape идёт дальше,
+  и диалог или панель выше по дереву закрываются, как раньше.
 - У переключателя ставят `rtTooltipHideOnClick="false"`: клик оставляет подсказку, а новый текст
   `[rtTooltip]` («Включить» → «Выключить») появляется в открытой панели на месте. Отложенный показ клик
   снимает при любом значении, поэтому касание на тач-экране подсказку не показывает.

package/src/styles/_form.scss

@@ -60,10 +60,13 @@
         }
 
         /* Строка контрола: один ряд колонки. Поле занимает строку целиком — иначе каждый
-           потребитель дописывает ширину сам. Зазор строки разводит элементы в ряду. */
+           потребитель дописывает ширину сам. Зазор строки разводит элементы в ряду. Строка
+           переносит элементы: две кнопки с длинными подписями на узкой панели иначе не встают
+           в ряд, и вторая выходит за край. */
         &__control-item {
             display: flex;
             width: 100%;
+            flex-wrap: wrap;
             align-items: center;
             justify-content: flex-start;
             gap: var(--rt-space-xl);
@@ -237,4 +240,14 @@
             gap: var(--rt-space-md);
         }
     }
+
+    /* На узком экране строка из одних кнопок встаёт столбиком, кнопки во всю ширину, порядок
+       прежний. Порог ниже порога панели: на 768 точках кнопки ещё стоят в ряд. Строка с полем
+       рядом с кнопкой сюда не попадает и переносится общим правилом. */
+    @media (width <= #{bp.$rt-bp-sm}) {
+        .rt-form__control-item:has(> .rt-button):not(:has(> :not(.rt-button))) {
+            flex-direction: column;
+            align-items: stretch;
+        }
+    }
 }

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-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;
   /**

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

@@ -32,7 +32,7 @@ export declare namespace IRtTooltip {
  * режется `overflow: hidden` предками (таблицы, aside, карточки).
  *
  * Триггеры: `mouseenter` и фокус с клавиатуры показывают (с задержкой `SHOW_DELAY_MS`),
- * `mouseleave`/`focusout`/`click` прячут. Фокус, поставленный мышью или кодом, подсказку не
+ * `mouseleave`/`focusout`/`click`/Escape прячут. Фокус, поставленный мышью или кодом, подсказку не
  * показывает, как у Material: меню возвращает фокус кнопке после выбора пункта мышью, и
  * подсказка кнопки всплывала поверх того, что пункт открыл. Пустой текст → no-op (директива
  * выключена), поэтому её можно безусловно вешать на icon-кнопки и включать
@@ -82,6 +82,11 @@ export declare class RtTooltipDirective implements OnDestroy {
   protected show(): void;
   protected hide(): void;
   protected onClick(): void;
+  /**
+   * Escape прячет подсказку и снимает отложенный показ, фокус остаётся на хосте. Событие гасится,
+   * только когда панель была открыта: при закрытой Escape доходит до диалога или панели выше.
+   */
+  protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtTooltipDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<RtTooltipDirective, "[rtTooltip]", ["rtTooltip"], {
     "text": {