@rt-tools/ui-kit-v2 0.33.0 → 0.34.1

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

@@ -1,6 +1,6 @@
-import { BooleanInput } from "@angular/cdk/coercion";
+import { BooleanInput, NumberInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import { ElementRef, InputSignal, InputSignalWithTransform, Signal, WritableSignal } from "@angular/core";
+import { ElementRef, InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal, WritableSignal } from "@angular/core";
 import { IRtIcon, IRtInput, TRtKitLabelMap } from "@rt-tools/ui-kit-v2/core";
 import { RtFormControlBase } from "@rt-tools/ui-kit-v2/form-control";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
@@ -8,7 +8,10 @@ import * as i1 from "@rt-tools/ui-kit-v2/radius";
  * Шеренный input common/ui. Поддерживает:
  * - интеграцию с Reactive Forms через общий `RtFormControlBase` (CVA-ядро,
  *   авто-подсветка invalid, `clearable`);
- * - левую и правую иконочные «слоты» (`iconLeft`, `iconRight`);
+ * - левую и правую иконочные «слоты» (`iconLeft`, `iconRight`); по `iconLeftAction` /
+ *   `iconRightAction` иконка становится кнопкой с подсказкой и своим выходом;
+ * - подпись на рамке (`floatingLabel`): у пустого поля в покое лежит на месте подсказки, при
+ *   значении или фокусе поднимается на верхнюю рамку, высоту поля не меняет;
  * - встроенный password-toggle (`passwordToggle=true` + `type="password"`);
  * - кнопку очистки (крестик) при наличии значения; на password-полях крестик
  *   не показывается (postfix занят toggle'ом).
@@ -18,13 +21,25 @@ import * as i1 from "@rt-tools/ui-kit-v2/radius";
 export declare class RtInputComponent extends RtFormControlBase<string> {
   protected readonly t: Signal<TRtKitLabelMap>;
   protected readonly fieldEl: Signal<ElementRef<HTMLInputElement> | undefined>;
+  /** Подпись на рамке: по её ширине материальный набор вырезает разрыв в рамке. `#`-поле `viewChild` не принимает. */
+  protected readonly floatingLabelEl: Signal<ElementRef<HTMLElement> | undefined>;
+  /** Ширина подписи на рамке, px. */
+  protected readonly notchWidth: Signal<number>;
   protected readonly isPasswordVisible: WritableSignal<boolean>;
   protected readonly hasValue: Signal<boolean>;
+  /** Id подписи на рамке: на него ссылается `aria-labelledby` поля. */
+  protected readonly floatingLabelId: string;
+  /** Подпись на рамке называет поле, только когда явного `ariaLabel` нет. */
+  protected readonly labelledBy: Signal<string | null>;
   protected readonly effectiveType: Signal<string>;
   protected readonly showPasswordToggle: Signal<boolean>;
   protected readonly hasIconRight: Signal<boolean>;
+  /** Иконка-кнопка отключена вместе с полем или своим входом. */
+  protected readonly isIconLeftDisabled: Signal<boolean>;
+  protected readonly isIconRightDisabled: Signal<boolean>;
   protected readonly passwordToggleIcon: Signal<IRtIcon.Name>;
   /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
+  readonly fieldLabelInside: boolean;
   readonly appearance: InputSignal<IRtInput.Appearance>;
   readonly displayText: Signal<string>;
   readonly type: InputSignal<IRtInput.Type>;
@@ -33,6 +48,42 @@ export declare class RtInputComponent extends RtFormControlBase<string> {
   readonly iconRight: InputSignal<IRtIcon.Name | null>;
   readonly passwordToggle: InputSignalWithTransform<boolean, BooleanInput>;
   readonly autocomplete: InputSignal<string | null>;
+  /**
+   * Предел длины значения: уходит атрибутом `maxlength` на поле, и браузер не даёт набрать лишний
+   * знак. `null` — предела нет. Проверку формы вход не заменяет: значение, записанное кодом,
+   * браузер не режет.
+   */
+  readonly maxlength: InputSignalWithTransform<number | null, NumberInput>;
+  /** Видимая подпись на рамке поля. `null` — подписи нет, поле как прежде. */
+  readonly floatingLabel: InputSignal<string | null>;
+  /** Левая иконка — кнопка: Tab, Enter, Space, нажатие уходит в `iconLeftClick`. */
+  readonly iconLeftAction: InputSignalWithTransform<boolean, BooleanInput>;
+  /**
+   * Правая иконка — кнопка, нажатие уходит в `iconRightClick`. На поле пароля с переключателем
+   * показа не действует: место занято переключателем.
+   */
+  readonly iconRightAction: InputSignalWithTransform<boolean, BooleanInput>;
+  /**
+   * Левая иконка-кнопка отключена, хотя поле доступно: например, поиск, который не ищет, пока
+   * введено меньше трёх знаков. Подсказка у отключённой кнопки остаётся и объясняет почему.
+   */
+  readonly iconLeftDisabled: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Правая иконка-кнопка отключена, хотя поле доступно. */
+  readonly iconRightDisabled: InputSignalWithTransform<boolean, BooleanInput>;
+  /** Подсказка левой иконки-кнопки; она же её доступное имя. Без неё имя — имя иконки. */
+  readonly iconLeftTooltip: InputSignal<string | null>;
+  /** Подсказка правой иконки-кнопки; она же её доступное имя. */
+  readonly iconRightTooltip: InputSignal<string | null>;
+  /** Нажатие левой иконки-кнопки — мышью или клавишей (браузер шлёт click и на Enter/Space). */
+  readonly iconLeftClick: OutputEmitterRef<MouseEvent>;
+  /** Нажатие правой иконки-кнопки. */
+  readonly iconRightClick: OutputEmitterRef<MouseEvent>;
+  /**
+   * Форма может вернуть полю прежнее значение в том же стеке, что и ввод: сигнал тогда равен
+   * последнему отрисованному, привязка `[value]` не срабатывает, и поле остаётся с набранным.
+   * Поэтому расхождение с полем пишется в него сразу.
+   */
+  writeValue(value: string | null): void;
   protected getEmptyValue(): string;
   protected focusAfterClear(): void;
   /**
@@ -83,7 +134,50 @@ export declare class RtInputComponent extends RtFormControlBase<string> {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, [{
+    "maxlength": {
+      "alias": "maxlength";
+      "required": false;
+      "isSignal": true;
+    };
+    "floatingLabel": {
+      "alias": "floatingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconLeftAction": {
+      "alias": "iconLeftAction";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconRightAction": {
+      "alias": "iconRightAction";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconLeftDisabled": {
+      "alias": "iconLeftDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconRightDisabled": {
+      "alias": "iconRightDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconLeftTooltip": {
+      "alias": "iconLeftTooltip";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconRightTooltip": {
+      "alias": "iconRightTooltip";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "iconLeftClick": "iconLeftClick";
+    "iconRightClick": "iconRightClick";
+  }, never, never, true, [{
     directive: typeof i1.RtRadiusDirective;
     inputs: {
       "radius": "radius";

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

@@ -0,0 +1,53 @@
+import * as i0 from "@angular/core";
+import { InputSignal, InputSignalWithTransform, Signal } from "@angular/core";
+export declare namespace IRtProgressBar {
+  /** `determinate` — доля из `value`, `indeterminate` — бегущая полоса, когда доля неизвестна. */
+  type Mode = 'determinate' | 'indeterminate';
+  /** Цвет заполнения — заливка кнопочной палитры. */
+  type Color = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
+}
+/** Доля, зажатая в 0–100: значение из потока может выйти за края, полоса и объявление — нет. */
+export declare function clampProgress(value: number): number;
+/**
+ * Полоса прогресса: дорожка во всю ширину и заполнение поверх. В режиме `determinate` заполнение
+ * равно `value` процентов и плавно идёт за ним — так полоса показывает живой прогресс задачи из
+ * потока. В режиме `indeterminate` по дорожке бежит отрезок: доля неизвестна, известно, что
+ * работа идёт.
+ *
+ * Для чтения с экрана полоса — `progressbar` с долей; без доли значение не объявляется.
+ */
+export declare class RtProgressBarComponent {
+  protected readonly determinate: Signal<boolean>;
+  protected readonly percent: Signal<number>;
+  /** Ширина заполнения: в режиме без доли её задаёт движение, а не вход. */
+  protected readonly fillWidth: Signal<number | null>;
+  readonly mode: InputSignal<IRtProgressBar.Mode>;
+  /** Доля в процентах, 0–100; что выходит за края, прижимается к ним. */
+  readonly value: InputSignalWithTransform<number, unknown>;
+  readonly color: InputSignal<IRtProgressBar.Color>;
+  /** Что за прогресс — для чтения с экрана, когда рядом нет видимой подписи. */
+  readonly ariaLabel: InputSignal<string | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtProgressBarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtProgressBarComponent, "rt-progress-bar", never, {
+    "mode": {
+      "alias": "mode";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -1,6 +1,6 @@
 import { BooleanInput } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from "@angular/core";
+import { InjectionToken, InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from "@angular/core";
 import { ControlValueAccessor } from "@angular/forms";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
 /**
@@ -18,6 +18,9 @@ import * as i1 from "@rt-tools/ui-kit-v2/radius";
  * Отключение складывается из входа `disabled` и слова формы: форма зовёт `setDisabledState`
  * раньше первого обновления вида, и один общий signal затёр бы её слово.
  *
+ * Внутри `rt-radio-group` в порядке обхода по Tab стоит одна радиокнопка группы, а соседей выбирают
+ * стрелки; вне группы каждая радиокнопка стоит в порядке обхода сама, как прежде.
+ *
  * Каждая радиокнопка — свой `ControlValueAccessor`, и значение, отданное одной, форма соседям на
  * том же контроле не пишет: поэтому модель берётся и у самого контрола.
  */
@@ -25,6 +28,10 @@ export declare class RtRadioButtonComponent implements ControlValueAccessor {
   #private;
   protected readonly isChecked: Signal<boolean>;
   protected readonly isDisabled: Signal<boolean>;
+  /** Место в порядке обхода: в группе — только у той, на которую указала группа. */
+  protected readonly tabIndex: Signal<number>;
+  /** Узел радиокнопки: по нему группа ставит радиокнопки в порядок страницы. */
+  readonly element: HTMLElement;
   /** Значение радиокнопки: выбрана та, чьё значение — модель формы. */
   readonly value: InputSignal<unknown>;
   /** Выбранность без формы; не заданный вход оставляет решение форме. */
@@ -36,6 +43,10 @@ export declare class RtRadioButtonComponent implements ControlValueAccessor {
   readonly description: InputSignal<string>;
   /** Имя для вспомогательных средств, когда видимой подписи нет — кружок в строке таблицы. */
   readonly ariaLabel: InputSignal<string | null>;
+  /** Выбрана ли радиокнопка — для группы, которая ведёт по ним стрелками. */
+  readonly selected: Signal<boolean>;
+  /** Отключена ли радиокнопка — группа её пропускает. */
+  readonly off: Signal<boolean>;
   /** Каждое нажатие указателем, сменило оно выбор или нет. */
   readonly clickAction: OutputEmitterRef<MouseEvent>;
   /** Радиокнопка стала выбранной. */
@@ -51,6 +62,12 @@ export declare class RtRadioButtonComponent implements ControlValueAccessor {
   registerOnChange(fn: (value: unknown) => void): void;
   registerOnTouched(fn: () => void): void;
   setDisabledState(disabled: boolean): void;
+  /** Группа отдаёт или забирает шаг Tab. */
+  setTabStop(on: boolean): void;
+  /** Лежит ли узел внутри радиокнопки — группа так находит, с какой ушла стрелка. */
+  contains(target: EventTarget | null): boolean;
+  /** Выбор стрелкой из группы: фокус и выбор переходят сюда вместе. */
+  selectFromKeyboard(): void;
   protected onClick(event: MouseEvent): void;
   protected onKeydown(event: KeyboardEvent): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtRadioButtonComponent, never>;
@@ -100,4 +117,66 @@ export declare class RtRadioButtonComponent implements ControlValueAccessor {
     };
     outputs: {};
   }]>;
+}
+/**
+ * Что группа знает о радиокнопке. Отдельным описанием, а не классом радиокнопки: радиокнопка
+ * импортирует токен, и прямой импорт в обе стороны замкнул бы файлы в круг.
+ */
+export interface IRtRadioGroupMember {
+  /** Узел радиокнопки: по нему группа ставит радиокнопки в порядок страницы. */
+  readonly element: HTMLElement;
+  readonly selected: () => boolean;
+  readonly off: () => boolean;
+  readonly setTabStop: (on: boolean) => void;
+  readonly contains: (target: EventTarget | null) => boolean;
+  readonly selectFromKeyboard: () => void;
+}
+/**
+ * Что радиокнопка сообщает группе, в которой стоит. Радиокнопка встаёт в группу сама, через
+ * внедрение: так в группу попадает и радиокнопка из шаблона обёртки потребителя, до которой запрос
+ * по содержимому не дотянулся бы.
+ */
+export interface IRtRadioGroupHost {
+  /** Ориентация группы. */
+  readonly orientation: () => string;
+  readonly register: (radio: IRtRadioGroupMember) => void;
+  readonly unregister: (radio: IRtRadioGroupMember) => void;
+}
+export declare const RT_RADIO_GROUP: InjectionToken<IRtRadioGroupHost>;
+/** Раскладка группы: столбцом или строкой с переносом. */
+export type TRtRadioGroupOrientation = 'vertical' | 'horizontal';
+/**
+ * Группа радиокнопок: `role="radiogroup"`, имя группы и ход стрелками.
+ *
+ * Стрелки переводят фокус и выбор на соседнюю включённую радиокнопку, по кругу; в порядке обхода по
+ * Tab стоит одна радиокнопка группы — выбранная, а пока выбора нет, первая включённая. Выбор и форма
+ * остаются у самих радиокнопок: группа значения не держит, и радиокнопки вне группы работают как
+ * прежде.
+ */
+export declare class RtRadioGroupComponent implements IRtRadioGroupHost {
+  #private;
+  /** Радиокнопки в порядке страницы: регистрация идёт в порядке создания, а не расположения. */
+  protected readonly radios: Signal<readonly IRtRadioGroupMember[]>;
+  /** Радиокнопка, стоящая в порядке обхода: выбранная, иначе первая включённая. */
+  protected readonly tabStop: Signal<IRtRadioGroupMember | null>;
+  /** Имя группы для вспомогательных средств — вопрос, на который отвечают радиокнопки. */
+  readonly ariaLabel: InputSignal<string | null>;
+  readonly orientation: InputSignal<TRtRadioGroupOrientation>;
+  constructor();
+  register(radio: IRtRadioGroupMember): void;
+  unregister(radio: IRtRadioGroupMember): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtRadioGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RtRadioGroupComponent, "rt-radio-group", never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
 }

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

@@ -34,11 +34,44 @@ export declare namespace IRtSelect {
     /** Отключён ли выбор. */
     readonly isDisabled: boolean;
   }
+  /** Обстановка шаблона строки списка: опция приходит как `$implicit`. */
+  interface OptionContext<TValue> {
+    readonly $implicit: Option<TValue>;
+    /** Выбрана ли опция. */
+    readonly selected: boolean;
+  }
+  /** Шаблон строки с выбранной опцией: так указатель рисует выбранное той же разметкой, что и список. */
+  interface ChosenView<TValue> {
+    readonly templateRef: TemplateRef<OptionContext<TValue>>;
+    readonly context: OptionContext<TValue>;
+  }
   /** Обстановка шаблона указателя: состояние приходит как `$implicit`. */
   interface TriggerContext<TValue> {
     readonly $implicit: TriggerState<TValue>;
   }
 }
+/**
+ * Маркер своей разметки строки списка — того, что рисуется на месте подписи пункта.
+ *
+ * Строка остаётся киту: выбор, подсветка, клавиши, стрелка ветки дерева и галочка выбранного. Потребитель
+ * даёт только то, что стоит на месте подписи, — например цветную метку перед текстом, — и получает опцию
+ * и признак, выбрана ли она. Тем же шаблоном поле рисует выбранное значение — метка из списка не
+ * пропадает после выбора.
+ *
+ * @example
+ * ```html
+ * <rt-select [options]="colors">
+ *     <ng-template rtSelectOption let-option let-selected="selected">
+ *         <span class="dot" [style.background]="option.value"></span>{{ option.label }}
+ *     </ng-template>
+ * </rt-select>
+ * ```
+ */
+export declare class RtSelectOptionDirective<TValue = unknown> {
+  readonly templateRef: TemplateRef<IRtSelect.OptionContext<TValue>>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtSelectOptionDirective<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<RtSelectOptionDirective<any>, "[rtSelectOption]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Маркер своей разметки указателя — того, что человек нажимает, чтобы открыть список.
  *
@@ -84,6 +117,10 @@ export declare class RtSelectComponent<TValue> extends RtFormControlBase<TValue
   protected readonly filterPlaceholderText: Signal<string>;
   protected readonly popover: Signal<RtPopoverDirective>;
   protected readonly triggerEl: Signal<ElementRef<HTMLButtonElement> | undefined>;
+  /** Подпись на рамке: по её ширине материальный набор вырезает разрыв в рамке. `#`-поле `viewChild` не принимает. */
+  protected readonly floatingLabelEl: Signal<ElementRef<HTMLElement> | undefined>;
+  /** Ширина подписи на рамке, px. */
+  protected readonly notchWidth: Signal<number>;
   protected readonly filterTerm: WritableSignal<string>;
   /** Раскрытые ветки дерева. Живут, пока открыта панель: при открытии раскрыты ветки над выбранным. */
   protected readonly openBranches: WritableSignal<ReadonlySet<TValue>>;
@@ -98,7 +135,23 @@ export declare class RtSelectComponent<TValue> extends RtFormControlBase<TValue
    * нынешний потребитель не двигается.
    */
   protected readonly triggerTpl: Signal<RtSelectTriggerDirective<TValue> | undefined>;
+  /** Своя разметка строки списка; не объявлена — строка рисует подпись опции. */
+  protected readonly optionTpl: Signal<RtSelectOptionDirective<TValue> | undefined>;
   protected readonly hasValue: Signal<boolean>;
+  /** Id подписи на рамке: на него ссылается `aria-labelledby` указателя. */
+  protected readonly floatingLabelId: string;
+  /** Id текста выбранного значения в указателе: его имя читает скринридер вслед за подписью. */
+  protected readonly valueTextId: string;
+  /**
+   * Подпись на рамке называет указатель, только когда явного `ariaLabel` нет. Ссылка заменяет имя
+   * из содержимого кнопки, поэтому за подписью идёт и выбранное значение — иначе скринридер
+   * назвал бы поле без того, что в нём выбрано.
+   */
+  protected readonly labelledBy: Signal<string | null>;
+  /** Выбранная опция: по ней указатель рисует подпись или ту же разметку строки, что и список. */
+  protected readonly selectedOption: Signal<IRtSelect.Option<TValue> | null>;
+  /** Разметка выбранного в указателе — шаблон строки с выбранной опцией; без шаблона или выбора её нет. */
+  protected readonly chosenOwn: Signal<IRtSelect.ChosenView<TValue> | null>;
   protected readonly selectedLabel: Signal<string>;
   /** Дерево ли список: тогда у строк есть место под стрелку и отступ по уровню. */
   protected readonly isTree: Signal<boolean>;
@@ -107,11 +160,17 @@ export declare class RtSelectComponent<TValue> extends RtFormControlBase<TValue
   /** Три значения, которые кит отдаёт своей разметке указателя, и не больше. */
   protected readonly triggerState: Signal<IRtSelect.TriggerState<TValue>>;
   /** Вид рамки: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
+  readonly fieldLabelInside: boolean;
   readonly appearance: InputSignal<IRtInput.Appearance>;
   readonly displayText: Signal<string>;
   readonly options: InputSignal<ReadonlyArray<IRtSelect.Option<TValue>>>;
   readonly placeholder: InputSignal<string>;
   readonly iconLeft: InputSignal<IRtIcon.Name | null>;
+  /**
+   * Видимая подпись на рамке. Пока ничего не выбрано и список закрыт, лежит на месте подсказки;
+   * при выбранном значении или открытом списке поднимается на верхнюю рамку. `null` — подписи нет.
+   */
+  readonly floatingLabel: InputSignal<string | null>;
   readonly filter: InputSignalWithTransform<boolean, TBooleanInput>;
   /** Пусто — берётся переведённая подпись по умолчанию */
   readonly filterPlaceholder: InputSignal<string>;
@@ -169,6 +228,11 @@ export declare class RtSelectComponent<TValue> extends RtFormControlBase<TValue
       "required": false;
       "isSignal": true;
     };
+    "floatingLabel": {
+      "alias": "floatingLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "filter": {
       "alias": "filter";
       "required": false;
@@ -191,7 +255,7 @@ export declare class RtSelectComponent<TValue> extends RtFormControlBase<TValue
     };
   }, {
     "selectionChange": "selectionChange";
-  }, ["triggerTpl"], never, true, [{
+  }, ["triggerTpl", "optionTpl"], never, true, [{
     directive: typeof i1.RtRadiusDirective;
     inputs: {
       "radius": "radius";

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

@@ -381,6 +381,9 @@ export declare function filterSideMenuItems(items: ReadonlyArray<IRtSideMenu.Ite
 /**
  * Папки отобранного списка — те, что должны стоять раскрытыми. Возвращаются номера, а не пункты:
  * отобранный список пересобирается на каждую букву запроса, и ссылка на пункт этого не переживает.
+ *
+ * Раскрыта и папка, совпавшая только по имени: отбор оставляет её без детей, но человек искал
+ * именно её, и закрытый заголовок читался бы как «внутри ничего не нашлось».
  */
 export declare function sideMenuIdsToExpand(items: ReadonlyArray<IRtSideMenu.Item>): Array<string | number>;
 /**

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

@@ -1,12 +1,47 @@
 import * as i0 from "@angular/core";
-import { InputSignal, InputSignalWithTransform, Signal } from "@angular/core";
+import { InputSignal, InputSignalWithTransform, Signal, TemplateRef } from "@angular/core";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
 export declare namespace IRtStepper {
   interface Step {
     label: string;
-    description: string;
+    /** Пояснение шага. В вертикальном списке его может и не быть: там шаг — строка инструкции. */
+    description?: string;
+  }
+  /** `horizontal` — полоса прогресса с подписью текущего шага, `vertical` — все шаги списком. */
+  type Orientation = 'horizontal' | 'vertical';
+  /** Состояние шага в вертикальном списке; `neutral` — у всех шагов, когда текущего нет. */
+  type StepState = 'complete' | 'current' | 'upcoming' | 'neutral';
+  /** Обстановка шаблона подписи: шаг и его номер с нуля. */
+  interface LabelContext {
+    readonly $implicit: Step;
+    readonly index: number;
   }
 }
+/**
+ * Шаблон подписи шага в вертикальном списке: разметка вместо строки `label`, например выделенное
+ * слово. Обстановка — сам шаг и его номер с нуля.
+ *
+ * @example
+ * ```html
+ * <rt-stepper orientation="vertical" [steps]="steps" [currentIndex]="-1">
+ *     <ng-template rtStepLabel let-step let-index="index">
+ *         @if (index === 3) { Войдите под логином <strong>LOGIN</strong> } @else { {{ step.label }} }
+ *     </ng-template>
+ * </rt-stepper>
+ * ```
+ */
+export declare class RtStepLabelDirective {
+  readonly template: TemplateRef<IRtStepper.LabelContext>;
+  static ngTemplateContextGuard(_directive: RtStepLabelDirective, context: unknown): context is IRtStepper.LabelContext;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RtStepLabelDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<RtStepLabelDirective, "ng-template[rtStepLabel]", never, {}, {}, never, never, true, never>;
+}
+/** Шаг вертикального списка, собранный для шаблона: номер для метки и состояние. */
+interface IStepItem {
+  readonly step: IRtStepper.Step;
+  readonly index: number;
+  readonly state: IRtStepper.StepState;
+}
 /**
  * Линейный прогресс-степпер: тонкая полоса, набор точек и подпись
  * текущего шага. Шаги задаются через input `steps` (массив `IRtStepper.Step`
@@ -19,6 +54,11 @@ export declare namespace IRtStepper {
  * полосой — описание текущего шага, многоабзацное (`\n\n`). Сам список названий
  * шагов на ui не выводится — публичен только текущий, остальные читаются
  * скринридером через aria.
+ *
+ * `orientation="vertical"` показывает все шаги списком: у каждого круглая метка с номером и
+ * подпись справа, метки соединены линией. Подпись — строка `label` или шаблон `rtStepLabel`.
+ * `currentIndex` меньше нуля значит «текущего шага нет»: список — статичная инструкция, все метки
+ * нейтральные. Шаги в списке не нажимаются и фокуса не принимают.
  */
 export declare class RtStepperComponent {
   #private;
@@ -32,6 +72,12 @@ export declare class RtStepperComponent {
    */
   protected readonly progressPercent: Signal<number>;
   protected readonly totalSteps: Signal<number>;
+  protected readonly labelTemplate: Signal<RtStepLabelDirective | undefined>;
+  /**
+   * Шаги вертикального списка с состоянием. Номер текущего здесь не зажимается: меньше нуля —
+   * текущего нет, и все шаги нейтральные; больше последнего — пройдены все.
+   */
+  protected readonly items: Signal<readonly IStepItem[]>;
   /**
    * Якорь подписи текущего шага: подпись висит над активной точкой и не должна
    * вылезать за края рельсы. Первый шаг — выравнивание по левому краю точки,
@@ -41,6 +87,7 @@ export declare class RtStepperComponent {
   /** Абзацы описания текущего шага: бэк отдаёт плоскую строку, делим по `\n\n`. */
   protected readonly descriptionParagraphs: Signal<readonly string[]>;
   readonly steps: InputSignal<readonly IRtStepper.Step[]>;
+  readonly orientation: InputSignal<IRtStepper.Orientation>;
   readonly currentIndex: InputSignalWithTransform<number, number | string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<RtStepperComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<RtStepperComponent, "rt-stepper", never, {
@@ -49,16 +96,22 @@ export declare class RtStepperComponent {
       "required": false;
       "isSignal": true;
     };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
     "currentIndex": {
       "alias": "currentIndex";
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, [{
+  }, {}, ["labelTemplate"], never, true, [{
     directive: typeof i1.RtRadiusDirective;
     inputs: {
       "radius": "radius";
     };
     outputs: {};
   }]>;
-}
+}
+export {};