@rt-tools/ui-kit-v2 0.25.0 → 0.27.0

package/src/lib/components/pdf-viewer/rt-pdf-viewer.component.scss

@@ -0,0 +1,231 @@
+@use '../../../styles/breakpoints' as bp;
+
+@layer rt-kit.components {
+    /* rt-pdf-viewer — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
+       `.rt-pdf-viewer` — сам хост (шаблон начинается с ng-container, класс ставит host). */
+
+    .rt-pdf-viewer {
+        // Документ читают на тёмном в обеих темах: белый лист на светлой подложке теряет край.
+        // Поэтому цвета взяты со ступеней серого, а не с назначений темы, и стоят своими
+        // свойствами — потребитель перекрывает их правилом той же цели.
+        --rt-pdf-viewer-bg: var(--rt-neutral-900);
+        --rt-pdf-viewer-bar-bg: color-mix(in srgb, var(--rt-neutral-900) 35%, var(--rt-neutral-950));
+        --rt-pdf-viewer-bar-height: var(--rt-control-height-2xl);
+        --rt-pdf-viewer-text-color: var(--rt-neutral-0);
+        --rt-pdf-viewer-muted-color: var(--rt-neutral-200);
+        --rt-pdf-viewer-page-bg: var(--rt-neutral-0);
+        --rt-pdf-viewer-page-shadow: var(--rt-shadow-md);
+        --rt-pdf-viewer-page-gap: var(--rt-space-4);
+        --rt-pdf-viewer-toolbar-bg: var(--rt-neutral-800);
+        --rt-pdf-viewer-toolbar-radius: var(--rt-radius-full);
+        --rt-pdf-viewer-divider-width: var(--rt-border-width-thin);
+        --rt-pdf-viewer-divider-color: color-mix(in srgb, var(--rt-neutral-0) 20%, transparent);
+        --rt-pdf-viewer-control-radius: var(--rt-radius-md);
+        --rt-pdf-viewer-control-bg: color-mix(in srgb, var(--rt-neutral-0) 10%, transparent);
+        --rt-pdf-viewer-control-bg-hover: color-mix(in srgb, var(--rt-neutral-0) 24%, transparent);
+
+        display: block;
+        width: 100vw;
+        height: 100vh;
+        height: 100dvh;
+        background: var(--rt-pdf-viewer-bg);
+        color: var(--rt-pdf-viewer-text-color);
+
+        // Обёртка существует ради ловушки фокуса: display: contents ломает ловушку
+        &__surface {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            inset: 0;
+        }
+
+        &__bar {
+            display: flex;
+            height: var(--rt-pdf-viewer-bar-height);
+            flex: none;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 var(--rt-space-4);
+            background: var(--rt-pdf-viewer-bar-bg);
+            gap: var(--rt-space-4);
+        }
+
+        // Имя файла сжимается первым: кнопки справа не уходят за край ни при каком имени
+        &__title {
+            display: flex;
+            min-width: 0;
+            align-items: center;
+            gap: var(--rt-space-2);
+        }
+
+        &__file-icon {
+            flex: none;
+            color: var(--rt-pdf-viewer-text-color);
+        }
+
+        // Обрезанное имя целиком видно в подсказке: оно же стоит в title
+        &__file-name {
+            overflow: hidden;
+            min-width: 0;
+            font-size: var(--rt-text-sm);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__actions {
+            display: flex;
+            flex: none;
+            align-items: center;
+            gap: var(--rt-space-2);
+        }
+
+        // Кнопки полосы — тот же вид управляющего элемента поверх тёмного, что у просмотра фото
+        &__actions rt-icon-button {
+            --rt-icon-button-color: var(--rt-pdf-viewer-text-color);
+            --rt-icon-button-color-bg-hover: var(--rt-pdf-viewer-control-bg-hover);
+
+            border-radius: var(--rt-pdf-viewer-control-radius);
+            background: var(--rt-pdf-viewer-control-bg);
+        }
+
+        &__scroller {
+            position: relative;
+            overflow: auto;
+            flex: 1 1 auto;
+            overscroll-behavior: contain;
+
+            // Место под полосу прокрутки занято с самого начала: «по ширине» меряется до того, как
+            // страницы встанут, и полоса, появившись после, давала бы прокрутку вбок
+            scrollbar-gutter: stable;
+        }
+
+        // Столбец шире окна, когда страница увеличена: иначе левый край листа уходил бы за край
+        // прокрутки и до него нельзя было бы дотянуться
+        &__column {
+            display: flex;
+            width: max-content;
+            min-width: 100%;
+            box-sizing: border-box;
+            flex-direction: column;
+            align-items: center;
+            padding: var(--rt-space-4) var(--rt-space-4) var(--rt-space-24);
+            gap: var(--rt-pdf-viewer-page-gap);
+        }
+
+        &__page {
+            flex: none;
+            background: var(--rt-pdf-viewer-page-bg);
+            box-shadow: var(--rt-pdf-viewer-page-shadow);
+        }
+
+        &__canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        // Индикатор и отказ стоят по центру окна под полосой, поверх пустого столбца
+        &__center {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-4);
+            inset: var(--rt-pdf-viewer-bar-height) 0 0;
+        }
+
+        // Свойства заглушки объявлены на её же блоке — перекрываются правилом сильнее его
+        & &__error {
+            --rt-empty-state-title-color: var(--rt-pdf-viewer-text-color);
+
+            .rt-empty-state__description {
+                color: var(--rt-pdf-viewer-muted-color);
+            }
+        }
+
+        // Белая кнопка на тёмном: та же кнопка кита, перекрашенная своими свойствами
+        & &__error-download {
+            --rt-btn-bg: var(--rt-pdf-viewer-page-bg);
+            --rt-btn-bg-hover: var(--rt-neutral-100);
+            --rt-btn-bg-active: var(--rt-neutral-200);
+            --rt-btn-color: var(--rt-neutral-900);
+        }
+
+        &__toolbar {
+            position: absolute;
+            bottom: var(--rt-space-6);
+            left: 50%;
+            display: flex;
+            align-items: center;
+            padding: var(--rt-space-1) var(--rt-space-2);
+            border-radius: var(--rt-pdf-viewer-toolbar-radius);
+            background: var(--rt-pdf-viewer-toolbar-bg);
+            gap: var(--rt-space-1);
+            transform: translateX(-50%);
+            white-space: nowrap;
+        }
+
+        &__toolbar rt-icon-button {
+            --rt-icon-button-color: var(--rt-pdf-viewer-text-color);
+            --rt-icon-button-color-bg-hover: var(--rt-pdf-viewer-control-bg-hover);
+        }
+
+        &__counter,
+        &__zoom {
+            padding: 0 var(--rt-space-2);
+            font-size: var(--rt-text-sm);
+            font-variant-numeric: tabular-nums;
+        }
+
+        // Подпись масштаба не дёргает кнопки при смене «75%» на «100%»
+        &__zoom {
+            min-width: var(--rt-size-12);
+            text-align: center;
+        }
+
+        &__divider,
+        &__fit-divider {
+            width: var(--rt-pdf-viewer-divider-width);
+            height: var(--rt-size-5);
+            margin: 0 var(--rt-space-1);
+            background: var(--rt-pdf-viewer-divider-color);
+        }
+
+        & &__fit {
+            --rt-btn-color: var(--rt-pdf-viewer-text-color);
+            --rt-btn-bg-hover: var(--rt-pdf-viewer-control-bg-hover);
+        }
+
+        @media (width <= #{bp.$rt-bp-sm}) {
+            --rt-pdf-viewer-bar-height: var(--rt-control-height-xl);
+
+            &__fit,
+            &__fit-divider {
+                display: none;
+            }
+        }
+    }
+
+    /* Печатный лист: страницы картинками в конце <body>. Вне печати его не видно, а при печати
+       не видно ничего, кроме него, — ни полосы, ни плашки, ни страницы приложения под окном. */
+    .rt-pdf-viewer-print {
+        display: none;
+
+        &__page {
+            display: block;
+            width: 100%;
+            break-after: page;
+            break-inside: avoid;
+        }
+    }
+
+    @media print {
+        .rt-pdf-viewer-printing body > :not(.rt-pdf-viewer-print) {
+            display: none;
+        }
+
+        .rt-pdf-viewer-printing .rt-pdf-viewer-print {
+            display: block;
+        }
+    }
+}

package/src/lib/components/service-logo/CONTEXT.md

@@ -0,0 +1,40 @@
+# `rt-service-logo`
+
+```html
+<rt-service-logo size="sm" [logos]="[{ src: method.logoUrl, label: method.name }, { icon: 'wallet', label: 'Bank transfer' }]" />
+```
+
+| вход    | тип                              | умолчание  |
+| ------- | -------------------------------- | ---------- |
+| `logos` | `readonly IRtServiceLogo.Item[]` | обязателен |
+| `size`  | `'sm' \| 'md' \| 'lg'`           | `'md'`     |
+
+Выходов нет.
+
+Спек — `docs/specs/ui-kit-v2/service-logo/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Числа — атома «Service Logo», и все они в свойствах блока.** Круг, высота знака, шаг внахлёст и
+тень объявлены на корне блока ступенями шкалы, модификатор размера их переназначает. Тени и
+заливка круга — свои имена слоя оформления: `--rt-shadow-service-logo-*` и
+`--rt-color-service-logo-bg`.
+
+**Следующий круг лежит поверх предыдущего порядком разметки.** Круги позиционированы без
+`z-index`, нахлёст — отрицательный отступ, равный разнице круга и шага.
+
+**Знак значком — `rt-icon` ступенью, равной высоте знака:** `sm` → `md` (20), `md` → `xl` (32),
+`lg` → `3xl` (48). `rt-icon` сам скрыт от диктора, поэтому имя несёт обёртка с `role="img"`.
+
+## Края
+
+- Знаков компаний в пакете нет: картинку даёт приложение адресом. В витрине стоят заглушки из
+  `stories/component/story-placeholder-marks.ts`.
+- Круг светлый и в тёмной теме: знаки нарисованы под светлый фон. Цвет значка задан кругом
+  (`--rt-color-service-logo-mark`), иначе в тёмной теме значок берёт светлый текст и пропадает.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+
+## Рядом
+
+- [`rt-logo`](../logo/rt-logo.component.ts) — знак самого приложения.
+- [`rt-icon`](../icon/rt-icon.component.ts) — значок кита внутри круга.

package/src/lib/components/service-logo/rt-service-logo.component.scss

@@ -0,0 +1,68 @@
+@layer rt-kit.components {
+    /* rt-service-logo — знаки внешних служб в светлых кругах. ViewEncapsulation.None.
+       Корень шаблона — ng-container, поэтому класс блока висит только на хосте.
+       Числа — атома «Service Logo»: круг, высота знака, шаг внахлёст и размытие тени. */
+
+    .rt-service-logo {
+        --rt-service-logo-size: var(--rt-size-16);
+        --rt-service-logo-mark-height: var(--rt-size-8);
+        --rt-service-logo-step: var(--rt-size-10);
+        --rt-service-logo-shadow: var(--rt-shadow-service-logo-md);
+        --rt-service-logo-radius: var(--rt-radius-full);
+        --rt-service-logo-bg: var(--rt-color-service-logo-bg);
+        --rt-service-logo-color: var(--rt-color-service-logo-mark);
+
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+
+        &--size-sm {
+            --rt-service-logo-size: var(--rt-size-10);
+            --rt-service-logo-mark-height: var(--rt-size-5);
+            --rt-service-logo-step: var(--rt-size-6);
+            --rt-service-logo-shadow: var(--rt-shadow-service-logo-sm);
+        }
+
+        &--size-lg {
+            --rt-service-logo-size: var(--rt-size-24);
+            --rt-service-logo-mark-height: var(--rt-size-12);
+            --rt-service-logo-step: calc(var(--rt-size-12) + var(--rt-size-3));
+            --rt-service-logo-shadow: var(--rt-shadow-service-logo-lg);
+        }
+
+        /* Круги без z-index: позиционированные соседи ложатся в порядке разметки, и следующий
+           круг стоит поверх предыдущего. Нахлёст — разница круга и шага. */
+        &__plate {
+            position: relative;
+            display: inline-flex;
+            width: var(--rt-service-logo-size);
+            height: var(--rt-service-logo-size);
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-service-logo-radius);
+            background: var(--rt-service-logo-bg);
+            box-shadow: var(--rt-service-logo-shadow);
+
+            /* Значок кита берёт цвет текста: круг светлый и в тёмной теме, и значок остаётся тёмным. */
+            color: var(--rt-service-logo-color);
+
+            & + & {
+                margin-inline-start: calc(var(--rt-service-logo-step) - var(--rt-service-logo-size));
+            }
+        }
+
+        /* Рамка знака шире высоты в 1.375 раза (27.5×20, 44×32, 66×48): картинка вписывается в неё
+           целиком, без растяжения и обрезки. */
+        &__image {
+            display: block;
+            width: calc(var(--rt-service-logo-mark-height) * 1.375);
+            height: var(--rt-service-logo-mark-height);
+            object-fit: contain;
+        }
+
+        &__icon {
+            display: inline-flex;
+        }
+    }
+}

package/src/styles/_primitives.scss

@@ -73,6 +73,11 @@
     --rt-gray-350: #b3b3b3; /* трек, light */
     --rt-slate-300: #a9b8cd; /* пройденный прогресс, dark */
 
+    /* Service logo — светлая подложка под знаком внешней службы. Своя ступень: знаки
+       чужих компаний нарисованы под светлый фон, и ни одна нейтральная ступень этот
+       оттенок атома не повторяет. */
+    --rt-mist-50: #f5f6f8; /* круг логотипа службы */
+
     /* Status — success/warning/danger/info.
 
        Ступени 600 и 700 считаны от своей 500 ровным шагом светлоты линейки бренда
@@ -203,6 +208,12 @@
        лежит поверх затемнённой страницы, и слабый ореол на ней не читается. */
     --rt-shadow-dialog: 0 0 40px rgb(0 0 0 / 25%);
 
+    /* Тень круга логотипа службы — ореол без сдвига цвета почти чёрного на 15%;
+       размытие растёт с размером круга, по ступени на размер атома. */
+    --rt-shadow-service-logo-sm: 0 0 24px rgb(24 24 24 / 15%);
+    --rt-shadow-service-logo-md: 0 0 40px rgb(24 24 24 / 15%);
+    --rt-shadow-service-logo-lg: 0 0 56px rgb(24 24 24 / 15%);
+
     /* Size — шкала габаритов: ширина, высота и сторона квадратного узла там, где их
        задаёт не содержимое. Множитель тот же, что у отступов: ступень N равна N × 4px,
        и ряд идёт без промежуточных ступеней — габарит, не легший на ряд, округляется к

package/src/styles/_semantic.scss

@@ -236,6 +236,10 @@
     --rt-icon-button-disabled-color: currentcolor;
     --rt-icon-button-disabled-fill: 100%;
 
+    /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+    --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+    --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
+
     /* Spacing aliases — named semantic aliases на primitive numeric scale */
     --rt-space-2xs: var(--rt-space-0-5); /* 2px */
     --rt-space-xs: var(--rt-space-1); /* 4px */

package/styles/tokens.css

@@ -153,6 +153,10 @@
   /* Stepper rail — приглушённые оттенки трека/прогресса прогресс-полосы. */
   --rt-gray-350: #b3b3b3; /* трек, light */
   --rt-slate-300: #a9b8cd; /* пройденный прогресс, dark */
+  /* Service logo — светлая подложка под знаком внешней службы. Своя ступень: знаки
+     чужих компаний нарисованы под светлый фон, и ни одна нейтральная ступень этот
+     оттенок атома не повторяет. */
+  --rt-mist-50: #f5f6f8; /* круг логотипа службы */
   /* Status — success/warning/danger/info.
 
      Ступени 600 и 700 считаны от своей 500 ровным шагом светлоты линейки бренда
@@ -267,6 +271,11 @@
   /* Тень окна — тот же силуэт, что у shadow-card-soft, но вдвое плотнее: окно
      лежит поверх затемнённой страницы, и слабый ореол на ней не читается. */
   --rt-shadow-dialog: 0 0 40px rgb(0 0 0 / 25%);
+  /* Тень круга логотипа службы — ореол без сдвига цвета почти чёрного на 15%;
+     размытие растёт с размером круга, по ступени на размер атома. */
+  --rt-shadow-service-logo-sm: 0 0 24px rgb(24 24 24 / 15%);
+  --rt-shadow-service-logo-md: 0 0 40px rgb(24 24 24 / 15%);
+  --rt-shadow-service-logo-lg: 0 0 56px rgb(24 24 24 / 15%);
   /* Size — шкала габаритов: ширина, высота и сторона квадратного узла там, где их
      задаёт не содержимое. Множитель тот же, что у отступов: ступень N равна N × 4px,
      и ряд идёт без промежуточных ступеней — габарит, не легший на ряд, округляется к
@@ -653,6 +662,9 @@
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -1567,6 +1579,9 @@ html.rt-theme-dark {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -2064,6 +2079,9 @@ html.rt-theme-dark {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -2702,6 +2720,9 @@ html.rt-theme-dark {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -3402,6 +3423,9 @@ html.rt-theme-dark .rt-preset-material {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -4272,6 +4296,9 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -4971,6 +4998,9 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -5667,6 +5697,9 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */

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

@@ -539,6 +539,15 @@ export declare const RT_KIT_LABELS_EN: {
   readonly fieldErrorMinLength: "Value is too short";
   readonly fieldErrorPattern: "Invalid format";
   readonly fieldErrorRequired: "Required field";
+  readonly pdfViewerClose: "Close document";
+  readonly pdfViewerDownload: "Download";
+  readonly pdfViewerErrorText: "You can download the file and open it on your computer.";
+  readonly pdfViewerErrorTitle: "Couldn't show the document";
+  readonly pdfViewerFitWidth: "Fit to width";
+  readonly pdfViewerPageOf: "Page {{page}} of {{total}}";
+  readonly pdfViewerPrint: "Print";
+  readonly pdfViewerZoomIn: "Zoom in";
+  readonly pdfViewerZoomOut: "Zoom out";
   readonly photoViewerClose: "Close viewer";
   readonly photoViewerNext: "Next photo";
   readonly photoViewerPrev: "Previous photo";
@@ -1109,7 +1118,7 @@ export declare class RtInfiniteScrollDirective implements OnDestroy {
   }, never, never, true, never>;
 }
 /** The name of a styling property the kit declares itself. */
-export type TRtDesignTokenName = '--rt-amber-400' | '--rt-border-width-medium' | '--rt-border-width-thick' | '--rt-border-width-thin' | '--rt-bp-lg' | '--rt-bp-md' | '--rt-bp-sm' | '--rt-bp-xl' | '--rt-brand-100' | '--rt-brand-200' | '--rt-brand-300' | '--rt-brand-400' | '--rt-brand-50' | '--rt-brand-500' | '--rt-brand-600' | '--rt-brand-700' | '--rt-brand-800' | '--rt-brand-900' | '--rt-brand-950' | '--rt-btn-tint-active' | '--rt-btn-tint-hover' | '--rt-charcoal-700' | '--rt-charcoal-800' | '--rt-charcoal-900' | '--rt-charcoal-950' | '--rt-charcoal-border' | '--rt-charcoal-border-strong' | '--rt-chat-bubble-date' | '--rt-chat-bubble-in-author' | '--rt-chat-bubble-in-bg' | '--rt-chat-bubble-own-author' | '--rt-chat-bubble-own-bg' | '--rt-chat-status-read' | '--rt-color-action-danger' | '--rt-color-action-danger-active' | '--rt-color-action-danger-hover' | '--rt-color-action-danger-on-surface' | '--rt-color-action-disabled' | '--rt-color-action-info' | '--rt-color-action-info-active' | '--rt-color-action-info-hover' | '--rt-color-action-info-on-surface' | '--rt-color-action-on-danger' | '--rt-color-action-on-disabled' | '--rt-color-action-on-info' | '--rt-color-action-on-primary' | '--rt-color-action-on-secondary' | '--rt-color-action-on-success' | '--rt-color-action-on-warning' | '--rt-color-action-primary' | '--rt-color-action-primary-active' | '--rt-color-action-primary-hover' | '--rt-color-action-primary-on-surface' | '--rt-color-action-primary-soft' | '--rt-color-action-primary-subtle' | '--rt-color-action-secondary' | '--rt-color-action-secondary-active' | '--rt-color-action-secondary-hover' | '--rt-color-action-secondary-on-surface' | '--rt-color-action-success' | '--rt-color-action-success-active' | '--rt-color-action-success-hover' | '--rt-color-action-success-on-surface' | '--rt-color-action-warning' | '--rt-color-action-warning-active' | '--rt-color-action-warning-hover' | '--rt-color-action-warning-on-surface' | '--rt-color-bg-hover' | '--rt-color-bg-inverse' | '--rt-color-bg-nav' | '--rt-color-bg-overlay' | '--rt-color-bg-page' | '--rt-color-bg-page-auth' | '--rt-color-bg-subtle' | '--rt-color-bg-surface' | '--rt-color-bg-surface-auth-card' | '--rt-color-bg-surface-subtle' | '--rt-color-bg-surface-subtle-2' | '--rt-color-border-default' | '--rt-color-border-focus' | '--rt-color-border-strong' | '--rt-color-border-subtle' | '--rt-color-field-fill-underline' | '--rt-color-skeleton-base' | '--rt-color-skeleton-wave' | '--rt-color-state-danger' | '--rt-color-state-danger-bg' | '--rt-color-state-error-text' | '--rt-color-state-info' | '--rt-color-state-info-bg' | '--rt-color-state-success' | '--rt-color-state-success-bg' | '--rt-color-state-success-text' | '--rt-color-state-warning' | '--rt-color-state-warning-bg' | '--rt-color-state-warning-text' | '--rt-color-stepper-current' | '--rt-color-stepper-current-subtle' | '--rt-color-stepper-progress' | '--rt-color-stepper-track' | '--rt-color-table-head-bg' | '--rt-color-text-disabled' | '--rt-color-text-inverse' | '--rt-color-text-link' | '--rt-color-text-link-hover' | '--rt-color-text-muted' | '--rt-color-text-primary' | '--rt-control-height-2xl' | '--rt-control-height-lg' | '--rt-control-height-md' | '--rt-control-height-sm' | '--rt-control-height-xl' | '--rt-control-max-width' | '--rt-control-panel-max-height' | '--rt-control-textarea-min-height-lg' | '--rt-control-textarea-min-height-md' | '--rt-control-textarea-min-height-sm' | '--rt-counter-gap' | '--rt-counter-row-color-border' | '--rt-counter-row-gap' | '--rt-counter-row-hint-color' | '--rt-counter-row-hint-font-size' | '--rt-counter-row-label-color' | '--rt-counter-row-label-font-size' | '--rt-counter-row-padding-y' | '--rt-counter-value-color' | '--rt-counter-value-font-size' | '--rt-counter-value-min-width' | '--rt-danger-50' | '--rt-danger-500' | '--rt-danger-600' | '--rt-danger-700' | '--rt-duration-base' | '--rt-duration-fast' | '--rt-duration-slow' | '--rt-duration-slower' | '--rt-field-error-color' | '--rt-field-error-font-size' | '--rt-field-gap' | '--rt-field-hint-color' | '--rt-field-hint-font-size' | '--rt-field-label-color' | '--rt-field-label-font-size' | '--rt-field-label-font-weight' | '--rt-field-label-help-gap' | '--rt-field-required-color' | '--rt-field-value-color' | '--rt-field-value-empty-color' | '--rt-field-value-font-size' | '--rt-focus-ring-color' | '--rt-focus-ring-color-danger' | '--rt-focus-ring-offset' | '--rt-focus-ring-width' | '--rt-font-family-mono' | '--rt-font-family-sans' | '--rt-font-weight-bold' | '--rt-font-weight-medium' | '--rt-font-weight-regular' | '--rt-font-weight-semibold' | '--rt-gray-350' | '--rt-icon-button-color-bg-hover' | '--rt-icon-button-disabled-color' | '--rt-icon-button-disabled-fill' | '--rt-icon-button-disabled-opacity' | '--rt-info-50' | '--rt-info-500' | '--rt-info-600' | '--rt-info-700' | '--rt-input-border-width' | '--rt-input-color-bg' | '--rt-input-color-bg-disabled' | '--rt-input-color-bg-hover' | '--rt-input-color-border' | '--rt-input-color-border-error' | '--rt-input-color-border-focus' | '--rt-input-color-text' | '--rt-input-color-text-placeholder' | '--rt-input-disabled-opacity' | '--rt-input-focus-outline-offset' | '--rt-input-focus-shadow' | '--rt-input-focus-shadow-error' | '--rt-input-font-size' | '--rt-input-gap' | '--rt-input-height' | '--rt-input-height-lg' | '--rt-input-height-md' | '--rt-input-height-sm' | '--rt-input-icon-color' | '--rt-input-icon-size' | '--rt-input-line-height' | '--rt-input-max-width' | '--rt-input-padding-x' | '--rt-input-padding-y' | '--rt-input-panel-max-height' | '--rt-input-radius' | '--rt-input-transition' | '--rt-leading-none' | '--rt-leading-normal' | '--rt-leading-relaxed' | '--rt-leading-snug' | '--rt-leading-tight' | '--rt-letter-spacing-wide' | '--rt-list-action-color' | '--rt-list-action-color-bg-hover' | '--rt-list-action-color-hover' | '--rt-list-action-divider-height' | '--rt-list-action-gap' | '--rt-list-action-icon-size' | '--rt-list-action-radius' | '--rt-list-action-shadow' | '--rt-list-action-shadow-hover' | '--rt-list-content-padding-bottom' | '--rt-list-copy-button-bg' | '--rt-list-copy-button-bg-hover' | '--rt-list-copy-button-color' | '--rt-list-copy-button-radius' | '--rt-list-copy-button-size' | '--rt-list-empty-icon-size' | '--rt-list-empty-icon-wrap-bg' | '--rt-list-empty-icon-wrap-size' | '--rt-list-empty-title-size' | '--rt-list-empty-title-weight' | '--rt-list-filter-line-height' | '--rt-list-placeholder-grow' | '--rt-list-placeholder-min-height' | '--rt-list-search-color-bg' | '--rt-list-search-color-border' | '--rt-list-search-color-placeholder' | '--rt-list-search-font-size' | '--rt-list-search-gap' | '--rt-list-search-height' | '--rt-list-search-icon-color' | '--rt-list-search-icon-size' | '--rt-list-search-padding-x' | '--rt-list-search-radius' | '--rt-list-search-width' | '--rt-list-selector-label-color' | '--rt-list-settings-icon-color' | '--rt-list-settings-item-bg' | '--rt-list-settings-item-radius' | '--rt-list-table-button-radius' | '--rt-list-table-button-size' | '--rt-list-table-head-divider-color' | '--rt-list-table-icon-color' | '--rt-list-table-icon-size' | '--rt-list-toolbar-gap' | '--rt-list-toolbar-padding-bottom' | '--rt-list-toolbar-padding-top' | '--rt-mat-blue-100' | '--rt-mat-blue-20' | '--rt-mat-blue-40' | '--rt-mat-blue-60' | '--rt-mat-blue-80' | '--rt-mat-blue-active' | '--rt-mat-blue-hover' | '--rt-mat-dark-10' | '--rt-mat-dark-20' | '--rt-mat-dark-30' | '--rt-mat-dark-40' | '--rt-mat-green-10' | '--rt-mat-green-100' | '--rt-mat-green-120' | '--rt-mat-green-20' | '--rt-mat-green-40' | '--rt-mat-green-60' | '--rt-mat-green-80' | '--rt-mat-green-active' | '--rt-mat-green-hover' | '--rt-mat-menu-min-width' | '--rt-mat-menu-sm-icon-size' | '--rt-mat-menu-sm-item-height' | '--rt-mat-navy-100' | '--rt-mat-neutral-0' | '--rt-mat-neutral-10' | '--rt-mat-neutral-100' | '--rt-mat-neutral-15' | '--rt-mat-neutral-20' | '--rt-mat-neutral-25' | '--rt-mat-neutral-30' | '--rt-mat-neutral-35' | '--rt-mat-neutral-40' | '--rt-mat-neutral-5' | '--rt-mat-neutral-60' | '--rt-mat-neutral-80' | '--rt-mat-neutral-active' | '--rt-mat-neutral-hover' | '--rt-mat-orange-10' | '--rt-mat-orange-100' | '--rt-mat-orange-20' | '--rt-mat-orange-40' | '--rt-mat-orange-5' | '--rt-mat-orange-60' | '--rt-mat-orange-70' | '--rt-mat-orange-80' | '--rt-mat-orange-active' | '--rt-mat-orange-hover' | '--rt-mat-overlay-black-32' | '--rt-mat-overlay-black-4' | '--rt-mat-overlay-blue-24' | '--rt-mat-overlay-blue-8' | '--rt-mat-radius-4' | '--rt-mat-radius-5' | '--rt-mat-red-10' | '--rt-mat-red-100' | '--rt-mat-red-20' | '--rt-mat-red-40' | '--rt-mat-red-60' | '--rt-mat-red-80' | '--rt-mat-red-active' | '--rt-mat-red-hover' | '--rt-mat-shadow-fab' | '--rt-mat-shadow-fab-hover' | '--rt-mat-shadow-level-2' | '--rt-mat-yellow-100' | '--rt-nav-caret-size' | '--rt-nav-color-disabled' | '--rt-nav-color-focus' | '--rt-nav-header-color-bg' | '--rt-nav-header-padding' | '--rt-nav-item-color' | '--rt-nav-item-color-bg' | '--rt-nav-item-color-bg-active' | '--rt-nav-item-color-border' | '--rt-nav-item-color-caret' | '--rt-nav-item-color-hover' | '--rt-nav-item-color-pressed' | '--rt-nav-item-content-gap' | '--rt-nav-item-font-size' | '--rt-nav-item-font-weight' | '--rt-nav-item-gap' | '--rt-nav-item-height' | '--rt-nav-item-line-height' | '--rt-nav-item-padding' | '--rt-nav-marker-color' | '--rt-nav-marker-size' | '--rt-nav-panel-color-bg' | '--rt-nav-panel-color-border' | '--rt-nav-panel-column-gap' | '--rt-nav-panel-column-width' | '--rt-nav-panel-columns' | '--rt-nav-panel-group-color' | '--rt-nav-panel-group-content-gap' | '--rt-nav-panel-group-font-size' | '--rt-nav-panel-group-font-weight' | '--rt-nav-panel-group-gap' | '--rt-nav-panel-item-color' | '--rt-nav-panel-item-color-active' | '--rt-nav-panel-item-color-bg-active' | '--rt-nav-panel-item-color-bg-hover' | '--rt-nav-panel-item-content-gap' | '--rt-nav-panel-item-font-size' | '--rt-nav-panel-item-font-weight' | '--rt-nav-panel-item-gap' | '--rt-nav-panel-item-height' | '--rt-nav-panel-item-padding' | '--rt-nav-panel-padding' | '--rt-nav-panel-padding-y' | '--rt-nav-panel-shadow' | '--rt-navy-600' | '--rt-navy-900' | '--rt-neutral-0' | '--rt-neutral-100' | '--rt-neutral-200' | '--rt-neutral-300' | '--rt-neutral-400' | '--rt-neutral-50' | '--rt-neutral-500' | '--rt-neutral-600' | '--rt-neutral-700' | '--rt-neutral-800' | '--rt-neutral-900' | '--rt-neutral-950' | '--rt-opacity-disabled' | '--rt-overlay-amber-16' | '--rt-overlay-black-4' | '--rt-overlay-black-50' | '--rt-overlay-black-8' | '--rt-overlay-brand-24' | '--rt-overlay-brand-8' | '--rt-overlay-danger-16' | '--rt-overlay-menu-bg' | '--rt-overlay-menu-current-bg' | '--rt-overlay-menu-danger-color' | '--rt-overlay-menu-danger-label-color' | '--rt-overlay-menu-item-icon-size' | '--rt-overlay-menu-item-min-height' | '--rt-overlay-menu-item-padding-x' | '--rt-overlay-menu-item-padding-y' | '--rt-overlay-menu-item-weight' | '--rt-overlay-menu-min-width' | '--rt-overlay-menu-padding-y' | '--rt-overlay-menu-radius' | '--rt-overlay-menu-shadow' | '--rt-overlay-menu-sm-item-icon-size' | '--rt-overlay-menu-sm-item-min-height' | '--rt-overlay-navy-70' | '--rt-overlay-select-check-display' | '--rt-overlay-select-option-font-size' | '--rt-overlay-select-option-min-height' | '--rt-overlay-select-panel-border-width' | '--rt-overlay-select-radius' | '--rt-overlay-select-selected-bg' | '--rt-overlay-select-selected-weight' | '--rt-overlay-select-shadow' | '--rt-overlay-tooltip-radius' | '--rt-overlay-tooltip-shadow' | '--rt-overlay-white-25' | '--rt-overlay-white-4' | '--rt-overlay-white-40' | '--rt-overlay-white-50' | '--rt-overlay-white-8' | '--rt-pagination-arrow-color' | '--rt-pagination-arrow-radius' | '--rt-pagination-arrow-shadow' | '--rt-pagination-arrow-size' | '--rt-pagination-box-color-border' | '--rt-pagination-box-color-text' | '--rt-pagination-box-current-color-bg' | '--rt-pagination-box-current-color-border' | '--rt-pagination-box-current-color-text' | '--rt-pagination-box-current-font-weight' | '--rt-pagination-box-radius' | '--rt-pagination-box-size' | '--rt-pagination-field-color-bg' | '--rt-pagination-field-color-border' | '--rt-pagination-field-color-text' | '--rt-pagination-field-height' | '--rt-pagination-field-padding-x' | '--rt-pagination-field-radius' | '--rt-pagination-gap' | '--rt-pagination-justify' | '--rt-pagination-nav-gap' | '--rt-pagination-padding-x' | '--rt-pagination-padding-y' | '--rt-pagination-per-page-gap' | '--rt-pagination-per-page-label-white-space' | '--rt-pagination-range-display' | '--rt-profile-avatar-border-width' | '--rt-profile-avatar-font-size' | '--rt-profile-avatar-radius' | '--rt-profile-avatar-size' | '--rt-profile-item-content-gap' | '--rt-profile-item-font-size' | '--rt-profile-item-font-weight' | '--rt-profile-item-padding-y' | '--rt-profile-item-radius' | '--rt-profile-menu-border-width' | '--rt-profile-menu-min-width' | '--rt-profile-menu-padding' | '--rt-profile-menu-radius' | '--rt-profile-menu-shadow' | '--rt-profile-row-inset' | '--rt-profile-theme-icon-padding' | '--rt-profile-theme-icon-radius' | '--rt-radius-2xl' | '--rt-radius-control' | '--rt-radius-full' | '--rt-radius-lg' | '--rt-radius-md' | '--rt-radius-ms' | '--rt-radius-none' | '--rt-radius-sm' | '--rt-radius-xl' | '--rt-radius-xs' | '--rt-shadow-card' | '--rt-shadow-card-soft' | '--rt-shadow-dialog' | '--rt-shadow-focus-ring' | '--rt-shadow-focus-ring-danger' | '--rt-shadow-lg' | '--rt-shadow-md' | '--rt-shadow-nav-panel' | '--rt-shadow-none' | '--rt-shadow-profile-menu' | '--rt-shadow-sm' | '--rt-shadow-status-dot' | '--rt-shadow-step-indicator' | '--rt-shadow-xl' | '--rt-size-1' | '--rt-size-10' | '--rt-size-100' | '--rt-size-12' | '--rt-size-16' | '--rt-size-2' | '--rt-size-20' | '--rt-size-24' | '--rt-size-3' | '--rt-size-30' | '--rt-size-4' | '--rt-size-40' | '--rt-size-5' | '--rt-size-6' | '--rt-size-60' | '--rt-size-64' | '--rt-size-8' | '--rt-slate-300' | '--rt-space-0' | '--rt-space-0-5' | '--rt-space-1' | '--rt-space-10' | '--rt-space-12' | '--rt-space-16' | '--rt-space-2' | '--rt-space-20' | '--rt-space-24' | '--rt-space-2xl' | '--rt-space-2xs' | '--rt-space-3xl' | '--rt-space-4' | '--rt-space-5' | '--rt-space-6' | '--rt-space-8' | '--rt-space-lg' | '--rt-space-md' | '--rt-space-sm' | '--rt-space-xl' | '--rt-space-xs' | '--rt-success-100' | '--rt-success-400' | '--rt-success-50' | '--rt-success-500' | '--rt-success-600' | '--rt-success-700' | '--rt-text-2xl' | '--rt-text-2xs' | '--rt-text-3xl' | '--rt-text-3xs' | '--rt-text-4xl' | '--rt-text-base' | '--rt-text-lg' | '--rt-text-md' | '--rt-text-sm' | '--rt-text-xl' | '--rt-text-xs' | '--rt-textarea-line-height' | '--rt-textarea-min-height' | '--rt-textarea-min-height-lg' | '--rt-textarea-min-height-md' | '--rt-textarea-min-height-sm' | '--rt-textarea-padding-y' | '--rt-toggle-color-border' | '--rt-toggle-color-icon' | '--rt-toggle-color-thumb' | '--rt-toggle-color-track' | '--rt-toggle-color-track-on' | '--rt-toggle-shadow-border' | '--rt-toggle-shadow-thumb' | '--rt-warning-50' | '--rt-warning-500' | '--rt-warning-600' | '--rt-warning-700' | '--rt-yellow-400' | '--rt-z-base' | '--rt-z-dropdown' | '--rt-z-fixed' | '--rt-z-modal' | '--rt-z-modal-backdrop' | '--rt-z-popover' | '--rt-z-sticky' | '--rt-z-tooltip';
+export type TRtDesignTokenName = '--rt-amber-400' | '--rt-border-width-medium' | '--rt-border-width-thick' | '--rt-border-width-thin' | '--rt-bp-lg' | '--rt-bp-md' | '--rt-bp-sm' | '--rt-bp-xl' | '--rt-brand-100' | '--rt-brand-200' | '--rt-brand-300' | '--rt-brand-400' | '--rt-brand-50' | '--rt-brand-500' | '--rt-brand-600' | '--rt-brand-700' | '--rt-brand-800' | '--rt-brand-900' | '--rt-brand-950' | '--rt-btn-tint-active' | '--rt-btn-tint-hover' | '--rt-charcoal-700' | '--rt-charcoal-800' | '--rt-charcoal-900' | '--rt-charcoal-950' | '--rt-charcoal-border' | '--rt-charcoal-border-strong' | '--rt-chat-bubble-date' | '--rt-chat-bubble-in-author' | '--rt-chat-bubble-in-bg' | '--rt-chat-bubble-own-author' | '--rt-chat-bubble-own-bg' | '--rt-chat-status-read' | '--rt-color-action-danger' | '--rt-color-action-danger-active' | '--rt-color-action-danger-hover' | '--rt-color-action-danger-on-surface' | '--rt-color-action-disabled' | '--rt-color-action-info' | '--rt-color-action-info-active' | '--rt-color-action-info-hover' | '--rt-color-action-info-on-surface' | '--rt-color-action-on-danger' | '--rt-color-action-on-disabled' | '--rt-color-action-on-info' | '--rt-color-action-on-primary' | '--rt-color-action-on-secondary' | '--rt-color-action-on-success' | '--rt-color-action-on-warning' | '--rt-color-action-primary' | '--rt-color-action-primary-active' | '--rt-color-action-primary-hover' | '--rt-color-action-primary-on-surface' | '--rt-color-action-primary-soft' | '--rt-color-action-primary-subtle' | '--rt-color-action-secondary' | '--rt-color-action-secondary-active' | '--rt-color-action-secondary-hover' | '--rt-color-action-secondary-on-surface' | '--rt-color-action-success' | '--rt-color-action-success-active' | '--rt-color-action-success-hover' | '--rt-color-action-success-on-surface' | '--rt-color-action-warning' | '--rt-color-action-warning-active' | '--rt-color-action-warning-hover' | '--rt-color-action-warning-on-surface' | '--rt-color-bg-hover' | '--rt-color-bg-inverse' | '--rt-color-bg-nav' | '--rt-color-bg-overlay' | '--rt-color-bg-page' | '--rt-color-bg-page-auth' | '--rt-color-bg-subtle' | '--rt-color-bg-surface' | '--rt-color-bg-surface-auth-card' | '--rt-color-bg-surface-subtle' | '--rt-color-bg-surface-subtle-2' | '--rt-color-border-default' | '--rt-color-border-focus' | '--rt-color-border-strong' | '--rt-color-border-subtle' | '--rt-color-field-fill-underline' | '--rt-color-service-logo-bg' | '--rt-color-service-logo-mark' | '--rt-color-skeleton-base' | '--rt-color-skeleton-wave' | '--rt-color-state-danger' | '--rt-color-state-danger-bg' | '--rt-color-state-error-text' | '--rt-color-state-info' | '--rt-color-state-info-bg' | '--rt-color-state-success' | '--rt-color-state-success-bg' | '--rt-color-state-success-text' | '--rt-color-state-warning' | '--rt-color-state-warning-bg' | '--rt-color-state-warning-text' | '--rt-color-stepper-current' | '--rt-color-stepper-current-subtle' | '--rt-color-stepper-progress' | '--rt-color-stepper-track' | '--rt-color-table-head-bg' | '--rt-color-text-disabled' | '--rt-color-text-inverse' | '--rt-color-text-link' | '--rt-color-text-link-hover' | '--rt-color-text-muted' | '--rt-color-text-primary' | '--rt-control-height-2xl' | '--rt-control-height-lg' | '--rt-control-height-md' | '--rt-control-height-sm' | '--rt-control-height-xl' | '--rt-control-max-width' | '--rt-control-panel-max-height' | '--rt-control-textarea-min-height-lg' | '--rt-control-textarea-min-height-md' | '--rt-control-textarea-min-height-sm' | '--rt-counter-gap' | '--rt-counter-row-color-border' | '--rt-counter-row-gap' | '--rt-counter-row-hint-color' | '--rt-counter-row-hint-font-size' | '--rt-counter-row-label-color' | '--rt-counter-row-label-font-size' | '--rt-counter-row-padding-y' | '--rt-counter-value-color' | '--rt-counter-value-font-size' | '--rt-counter-value-min-width' | '--rt-danger-50' | '--rt-danger-500' | '--rt-danger-600' | '--rt-danger-700' | '--rt-duration-base' | '--rt-duration-fast' | '--rt-duration-slow' | '--rt-duration-slower' | '--rt-field-error-color' | '--rt-field-error-font-size' | '--rt-field-gap' | '--rt-field-hint-color' | '--rt-field-hint-font-size' | '--rt-field-label-color' | '--rt-field-label-font-size' | '--rt-field-label-font-weight' | '--rt-field-label-help-gap' | '--rt-field-required-color' | '--rt-field-value-color' | '--rt-field-value-empty-color' | '--rt-field-value-font-size' | '--rt-focus-ring-color' | '--rt-focus-ring-color-danger' | '--rt-focus-ring-offset' | '--rt-focus-ring-width' | '--rt-font-family-mono' | '--rt-font-family-sans' | '--rt-font-weight-bold' | '--rt-font-weight-medium' | '--rt-font-weight-regular' | '--rt-font-weight-semibold' | '--rt-gray-350' | '--rt-icon-button-color-bg-hover' | '--rt-icon-button-disabled-color' | '--rt-icon-button-disabled-fill' | '--rt-icon-button-disabled-opacity' | '--rt-info-50' | '--rt-info-500' | '--rt-info-600' | '--rt-info-700' | '--rt-input-border-width' | '--rt-input-color-bg' | '--rt-input-color-bg-disabled' | '--rt-input-color-bg-hover' | '--rt-input-color-border' | '--rt-input-color-border-error' | '--rt-input-color-border-focus' | '--rt-input-color-text' | '--rt-input-color-text-placeholder' | '--rt-input-disabled-opacity' | '--rt-input-focus-outline-offset' | '--rt-input-focus-shadow' | '--rt-input-focus-shadow-error' | '--rt-input-font-size' | '--rt-input-gap' | '--rt-input-height' | '--rt-input-height-lg' | '--rt-input-height-md' | '--rt-input-height-sm' | '--rt-input-icon-color' | '--rt-input-icon-size' | '--rt-input-line-height' | '--rt-input-max-width' | '--rt-input-padding-x' | '--rt-input-padding-y' | '--rt-input-panel-max-height' | '--rt-input-radius' | '--rt-input-transition' | '--rt-leading-none' | '--rt-leading-normal' | '--rt-leading-relaxed' | '--rt-leading-snug' | '--rt-leading-tight' | '--rt-letter-spacing-wide' | '--rt-list-action-color' | '--rt-list-action-color-bg-hover' | '--rt-list-action-color-hover' | '--rt-list-action-divider-height' | '--rt-list-action-gap' | '--rt-list-action-icon-size' | '--rt-list-action-radius' | '--rt-list-action-shadow' | '--rt-list-action-shadow-hover' | '--rt-list-content-padding-bottom' | '--rt-list-copy-button-bg' | '--rt-list-copy-button-bg-hover' | '--rt-list-copy-button-color' | '--rt-list-copy-button-radius' | '--rt-list-copy-button-size' | '--rt-list-empty-icon-size' | '--rt-list-empty-icon-wrap-bg' | '--rt-list-empty-icon-wrap-size' | '--rt-list-empty-title-size' | '--rt-list-empty-title-weight' | '--rt-list-filter-line-height' | '--rt-list-placeholder-grow' | '--rt-list-placeholder-min-height' | '--rt-list-search-color-bg' | '--rt-list-search-color-border' | '--rt-list-search-color-placeholder' | '--rt-list-search-font-size' | '--rt-list-search-gap' | '--rt-list-search-height' | '--rt-list-search-icon-color' | '--rt-list-search-icon-size' | '--rt-list-search-padding-x' | '--rt-list-search-radius' | '--rt-list-search-width' | '--rt-list-selector-label-color' | '--rt-list-settings-icon-color' | '--rt-list-settings-item-bg' | '--rt-list-settings-item-radius' | '--rt-list-table-button-radius' | '--rt-list-table-button-size' | '--rt-list-table-head-divider-color' | '--rt-list-table-icon-color' | '--rt-list-table-icon-size' | '--rt-list-toolbar-gap' | '--rt-list-toolbar-padding-bottom' | '--rt-list-toolbar-padding-top' | '--rt-mat-blue-100' | '--rt-mat-blue-20' | '--rt-mat-blue-40' | '--rt-mat-blue-60' | '--rt-mat-blue-80' | '--rt-mat-blue-active' | '--rt-mat-blue-hover' | '--rt-mat-dark-10' | '--rt-mat-dark-20' | '--rt-mat-dark-30' | '--rt-mat-dark-40' | '--rt-mat-green-10' | '--rt-mat-green-100' | '--rt-mat-green-120' | '--rt-mat-green-20' | '--rt-mat-green-40' | '--rt-mat-green-60' | '--rt-mat-green-80' | '--rt-mat-green-active' | '--rt-mat-green-hover' | '--rt-mat-menu-min-width' | '--rt-mat-menu-sm-icon-size' | '--rt-mat-menu-sm-item-height' | '--rt-mat-navy-100' | '--rt-mat-neutral-0' | '--rt-mat-neutral-10' | '--rt-mat-neutral-100' | '--rt-mat-neutral-15' | '--rt-mat-neutral-20' | '--rt-mat-neutral-25' | '--rt-mat-neutral-30' | '--rt-mat-neutral-35' | '--rt-mat-neutral-40' | '--rt-mat-neutral-5' | '--rt-mat-neutral-60' | '--rt-mat-neutral-80' | '--rt-mat-neutral-active' | '--rt-mat-neutral-hover' | '--rt-mat-orange-10' | '--rt-mat-orange-100' | '--rt-mat-orange-20' | '--rt-mat-orange-40' | '--rt-mat-orange-5' | '--rt-mat-orange-60' | '--rt-mat-orange-70' | '--rt-mat-orange-80' | '--rt-mat-orange-active' | '--rt-mat-orange-hover' | '--rt-mat-overlay-black-32' | '--rt-mat-overlay-black-4' | '--rt-mat-overlay-blue-24' | '--rt-mat-overlay-blue-8' | '--rt-mat-radius-4' | '--rt-mat-radius-5' | '--rt-mat-red-10' | '--rt-mat-red-100' | '--rt-mat-red-20' | '--rt-mat-red-40' | '--rt-mat-red-60' | '--rt-mat-red-80' | '--rt-mat-red-active' | '--rt-mat-red-hover' | '--rt-mat-shadow-fab' | '--rt-mat-shadow-fab-hover' | '--rt-mat-shadow-level-2' | '--rt-mat-yellow-100' | '--rt-mist-50' | '--rt-nav-caret-size' | '--rt-nav-color-disabled' | '--rt-nav-color-focus' | '--rt-nav-header-color-bg' | '--rt-nav-header-padding' | '--rt-nav-item-color' | '--rt-nav-item-color-bg' | '--rt-nav-item-color-bg-active' | '--rt-nav-item-color-border' | '--rt-nav-item-color-caret' | '--rt-nav-item-color-hover' | '--rt-nav-item-color-pressed' | '--rt-nav-item-content-gap' | '--rt-nav-item-font-size' | '--rt-nav-item-font-weight' | '--rt-nav-item-gap' | '--rt-nav-item-height' | '--rt-nav-item-line-height' | '--rt-nav-item-padding' | '--rt-nav-marker-color' | '--rt-nav-marker-size' | '--rt-nav-panel-color-bg' | '--rt-nav-panel-color-border' | '--rt-nav-panel-column-gap' | '--rt-nav-panel-column-width' | '--rt-nav-panel-columns' | '--rt-nav-panel-group-color' | '--rt-nav-panel-group-content-gap' | '--rt-nav-panel-group-font-size' | '--rt-nav-panel-group-font-weight' | '--rt-nav-panel-group-gap' | '--rt-nav-panel-item-color' | '--rt-nav-panel-item-color-active' | '--rt-nav-panel-item-color-bg-active' | '--rt-nav-panel-item-color-bg-hover' | '--rt-nav-panel-item-content-gap' | '--rt-nav-panel-item-font-size' | '--rt-nav-panel-item-font-weight' | '--rt-nav-panel-item-gap' | '--rt-nav-panel-item-height' | '--rt-nav-panel-item-padding' | '--rt-nav-panel-padding' | '--rt-nav-panel-padding-y' | '--rt-nav-panel-shadow' | '--rt-navy-600' | '--rt-navy-900' | '--rt-neutral-0' | '--rt-neutral-100' | '--rt-neutral-200' | '--rt-neutral-300' | '--rt-neutral-400' | '--rt-neutral-50' | '--rt-neutral-500' | '--rt-neutral-600' | '--rt-neutral-700' | '--rt-neutral-800' | '--rt-neutral-900' | '--rt-neutral-950' | '--rt-opacity-disabled' | '--rt-overlay-amber-16' | '--rt-overlay-black-4' | '--rt-overlay-black-50' | '--rt-overlay-black-8' | '--rt-overlay-brand-24' | '--rt-overlay-brand-8' | '--rt-overlay-danger-16' | '--rt-overlay-menu-bg' | '--rt-overlay-menu-current-bg' | '--rt-overlay-menu-danger-color' | '--rt-overlay-menu-danger-label-color' | '--rt-overlay-menu-item-icon-size' | '--rt-overlay-menu-item-min-height' | '--rt-overlay-menu-item-padding-x' | '--rt-overlay-menu-item-padding-y' | '--rt-overlay-menu-item-weight' | '--rt-overlay-menu-min-width' | '--rt-overlay-menu-padding-y' | '--rt-overlay-menu-radius' | '--rt-overlay-menu-shadow' | '--rt-overlay-menu-sm-item-icon-size' | '--rt-overlay-menu-sm-item-min-height' | '--rt-overlay-navy-70' | '--rt-overlay-select-check-display' | '--rt-overlay-select-option-font-size' | '--rt-overlay-select-option-min-height' | '--rt-overlay-select-panel-border-width' | '--rt-overlay-select-radius' | '--rt-overlay-select-selected-bg' | '--rt-overlay-select-selected-weight' | '--rt-overlay-select-shadow' | '--rt-overlay-tooltip-radius' | '--rt-overlay-tooltip-shadow' | '--rt-overlay-white-25' | '--rt-overlay-white-4' | '--rt-overlay-white-40' | '--rt-overlay-white-50' | '--rt-overlay-white-8' | '--rt-pagination-arrow-color' | '--rt-pagination-arrow-radius' | '--rt-pagination-arrow-shadow' | '--rt-pagination-arrow-size' | '--rt-pagination-box-color-border' | '--rt-pagination-box-color-text' | '--rt-pagination-box-current-color-bg' | '--rt-pagination-box-current-color-border' | '--rt-pagination-box-current-color-text' | '--rt-pagination-box-current-font-weight' | '--rt-pagination-box-radius' | '--rt-pagination-box-size' | '--rt-pagination-field-color-bg' | '--rt-pagination-field-color-border' | '--rt-pagination-field-color-text' | '--rt-pagination-field-height' | '--rt-pagination-field-padding-x' | '--rt-pagination-field-radius' | '--rt-pagination-gap' | '--rt-pagination-justify' | '--rt-pagination-nav-gap' | '--rt-pagination-padding-x' | '--rt-pagination-padding-y' | '--rt-pagination-per-page-gap' | '--rt-pagination-per-page-label-white-space' | '--rt-pagination-range-display' | '--rt-profile-avatar-border-width' | '--rt-profile-avatar-font-size' | '--rt-profile-avatar-radius' | '--rt-profile-avatar-size' | '--rt-profile-item-content-gap' | '--rt-profile-item-font-size' | '--rt-profile-item-font-weight' | '--rt-profile-item-padding-y' | '--rt-profile-item-radius' | '--rt-profile-menu-border-width' | '--rt-profile-menu-min-width' | '--rt-profile-menu-padding' | '--rt-profile-menu-radius' | '--rt-profile-menu-shadow' | '--rt-profile-row-inset' | '--rt-profile-theme-icon-padding' | '--rt-profile-theme-icon-radius' | '--rt-radius-2xl' | '--rt-radius-control' | '--rt-radius-full' | '--rt-radius-lg' | '--rt-radius-md' | '--rt-radius-ms' | '--rt-radius-none' | '--rt-radius-sm' | '--rt-radius-xl' | '--rt-radius-xs' | '--rt-shadow-card' | '--rt-shadow-card-soft' | '--rt-shadow-dialog' | '--rt-shadow-focus-ring' | '--rt-shadow-focus-ring-danger' | '--rt-shadow-lg' | '--rt-shadow-md' | '--rt-shadow-nav-panel' | '--rt-shadow-none' | '--rt-shadow-profile-menu' | '--rt-shadow-service-logo-lg' | '--rt-shadow-service-logo-md' | '--rt-shadow-service-logo-sm' | '--rt-shadow-sm' | '--rt-shadow-status-dot' | '--rt-shadow-step-indicator' | '--rt-shadow-xl' | '--rt-size-1' | '--rt-size-10' | '--rt-size-100' | '--rt-size-12' | '--rt-size-16' | '--rt-size-2' | '--rt-size-20' | '--rt-size-24' | '--rt-size-3' | '--rt-size-30' | '--rt-size-4' | '--rt-size-40' | '--rt-size-5' | '--rt-size-6' | '--rt-size-60' | '--rt-size-64' | '--rt-size-8' | '--rt-slate-300' | '--rt-space-0' | '--rt-space-0-5' | '--rt-space-1' | '--rt-space-10' | '--rt-space-12' | '--rt-space-16' | '--rt-space-2' | '--rt-space-20' | '--rt-space-24' | '--rt-space-2xl' | '--rt-space-2xs' | '--rt-space-3xl' | '--rt-space-4' | '--rt-space-5' | '--rt-space-6' | '--rt-space-8' | '--rt-space-lg' | '--rt-space-md' | '--rt-space-sm' | '--rt-space-xl' | '--rt-space-xs' | '--rt-success-100' | '--rt-success-400' | '--rt-success-50' | '--rt-success-500' | '--rt-success-600' | '--rt-success-700' | '--rt-text-2xl' | '--rt-text-2xs' | '--rt-text-3xl' | '--rt-text-3xs' | '--rt-text-4xl' | '--rt-text-base' | '--rt-text-lg' | '--rt-text-md' | '--rt-text-sm' | '--rt-text-xl' | '--rt-text-xs' | '--rt-textarea-line-height' | '--rt-textarea-min-height' | '--rt-textarea-min-height-lg' | '--rt-textarea-min-height-md' | '--rt-textarea-min-height-sm' | '--rt-textarea-padding-y' | '--rt-toggle-color-border' | '--rt-toggle-color-icon' | '--rt-toggle-color-thumb' | '--rt-toggle-color-track' | '--rt-toggle-color-track-on' | '--rt-toggle-shadow-border' | '--rt-toggle-shadow-thumb' | '--rt-warning-50' | '--rt-warning-500' | '--rt-warning-600' | '--rt-warning-700' | '--rt-yellow-400' | '--rt-z-base' | '--rt-z-dropdown' | '--rt-z-fixed' | '--rt-z-modal' | '--rt-z-modal-backdrop' | '--rt-z-popover' | '--rt-z-sticky' | '--rt-z-tooltip';
 /** The name of a consumer's handle — a property the kit deliberately does not declare. */
 export type TRtConsumerHandleName = '--rt-action-bar-action-bg-hover' | '--rt-action-bar-action-color-danger' | '--rt-action-bar-action-focus-shadow' | '--rt-action-bar-action-font-size' | '--rt-action-bar-action-height' | '--rt-action-bar-action-padding-block' | '--rt-action-bar-action-padding-inline' | '--rt-action-bar-action-radius' | '--rt-action-bar-action-weight' | '--rt-action-bar-bg' | '--rt-action-bar-close-icon-size' | '--rt-action-bar-close-size' | '--rt-action-bar-color' | '--rt-action-bar-counter-font-size' | '--rt-action-bar-counter-weight' | '--rt-action-bar-font-size' | '--rt-action-bar-gap' | '--rt-action-bar-holder-bottom' | '--rt-action-bar-holder-enter-duration' | '--rt-action-bar-holder-inline' | '--rt-action-bar-holder-leave-duration' | '--rt-action-bar-icon-gap' | '--rt-action-bar-icon-size' | '--rt-action-bar-menu-bg' | '--rt-action-bar-menu-color' | '--rt-action-bar-menu-gap' | '--rt-action-bar-menu-item-font-size' | '--rt-action-bar-menu-padding' | '--rt-action-bar-menu-radius' | '--rt-action-bar-menu-shadow' | '--rt-action-bar-padding' | '--rt-action-bar-radius' | '--rt-action-bar-shadow' | '--rt-aside-bg' | '--rt-aside-content-inset' | '--rt-aside-error-margin-block' | '--rt-aside-footer-gap' | '--rt-aside-footer-inset' | '--rt-aside-footer-justify' | '--rt-aside-footer-margin' | '--rt-aside-header-back-icon-size' | '--rt-aside-header-back-size' | '--rt-aside-header-gap' | '--rt-aside-header-inset' | '--rt-aside-header-min-height' | '--rt-aside-header-subtitle-size' | '--rt-aside-header-title-leading' | '--rt-aside-header-title-size' | '--rt-aside-header-title-weight' | '--rt-aside-width' | '--rt-bottom-sheet-max-height' | '--rt-data-table-scrollbar-color' | '--rt-data-table-scrollbar-horizontal-height' | '--rt-data-table-scrollbar-vertical-width' | '--rt-data-table-scrollbar-width' | '--rt-dialog-bg' | '--rt-dialog-border' | '--rt-dialog-content-max-height' | '--rt-dialog-content-padding' | '--rt-dialog-footer-border' | '--rt-dialog-footer-padding' | '--rt-dialog-header-border' | '--rt-dialog-header-padding' | '--rt-dialog-title-font-size' | '--rt-dialog-title-transform' | '--rt-dialog-title-weight' | '--rt-dialog-width' | '--rt-dynamic-selector-list-actions-gap' | '--rt-dynamic-selector-list-actions-offset' | '--rt-dynamic-selector-list-actions-padding-end' | '--rt-dynamic-selector-list-add-color' | '--rt-dynamic-selector-list-controls-divider-color' | '--rt-dynamic-selector-list-controls-divider-width' | '--rt-dynamic-selector-list-controls-gap' | '--rt-dynamic-selector-list-handle-padding-end' | '--rt-dynamic-selector-list-handle-padding-start' | '--rt-dynamic-selector-list-row-padding-end' | '--rt-dynamic-selector-list-title-gap' | '--rt-dynamic-selector-popup-bg' | '--rt-dynamic-selector-popup-border-width' | '--rt-dynamic-selector-popup-button-font-size' | '--rt-dynamic-selector-popup-button-height' | '--rt-dynamic-selector-popup-empty-gap' | '--rt-dynamic-selector-popup-empty-icon-size' | '--rt-dynamic-selector-popup-empty-icon-wrap-bg' | '--rt-dynamic-selector-popup-empty-text-color' | '--rt-dynamic-selector-popup-empty-text-size' | '--rt-dynamic-selector-popup-empty-text-weight' | '--rt-dynamic-selector-popup-foot-border-width' | '--rt-dynamic-selector-popup-foot-padding' | '--rt-dynamic-selector-popup-highlight-bg' | '--rt-dynamic-selector-popup-highlight-color' | '--rt-dynamic-selector-popup-highlight-radius' | '--rt-dynamic-selector-popup-highlight-weight' | '--rt-dynamic-selector-popup-max-height' | '--rt-dynamic-selector-popup-min-height' | '--rt-dynamic-selector-popup-nav-color' | '--rt-dynamic-selector-popup-option-line-height' | '--rt-dynamic-selector-popup-option-min-height' | '--rt-dynamic-selector-popup-padding' | '--rt-dynamic-selector-popup-radius' | '--rt-dynamic-selector-popup-shadow' | '--rt-dynamic-selector-popup-width' | '--rt-header-content-max-width' | '--rt-header-height' | '--rt-icon-button-bg' | '--rt-icon-button-bg-hover' | '--rt-icon-button-size' | '--rt-icon-color-danger' | '--rt-icon-color-disabled' | '--rt-icon-color-info' | '--rt-icon-color-inverse' | '--rt-icon-color-muted' | '--rt-icon-color-primary' | '--rt-icon-color-success' | '--rt-icon-color-warning' | '--rt-icon-glyph-font' | '--rt-icon-glyph-grade' | '--rt-icon-glyph-opsz' | '--rt-icon-glyph-weight' | '--rt-icon-step-2xl' | '--rt-icon-step-3xl' | '--rt-icon-step-4xl' | '--rt-icon-step-lg' | '--rt-icon-step-md' | '--rt-icon-step-sm' | '--rt-icon-step-xl' | '--rt-icon-step-xs' | '--rt-logo-tagline' | '--rt-logo-tagline-dark' | '--rt-logo-wordmark' | '--rt-logo-wordmark-dark' | '--rt-page-header-bg' | '--rt-side-menu-sub-item-letter-spacing' | '--rt-table-actions-bg' | '--rt-tag-color-bg' | '--rt-tag-color-border' | '--rt-tag-color-text' | '--rt-tag-letter-spacing' | '--rt-tag-padding-block' | '--rt-tag-padding-inline' | '--rt-toast-action-color' | '--rt-toast-bg' | '--rt-toast-border-color' | '--rt-toast-close-color' | '--rt-toast-color' | '--rt-toast-filled-danger-bg' | '--rt-toast-filled-danger-border-color' | '--rt-toast-filled-danger-color' | '--rt-toast-filled-info-bg' | '--rt-toast-filled-info-border-color' | '--rt-toast-filled-info-color' | '--rt-toast-filled-success-bg' | '--rt-toast-filled-success-border-color' | '--rt-toast-filled-success-color' | '--rt-toast-filled-warning-bg' | '--rt-toast-filled-warning-border-color' | '--rt-toast-filled-warning-color' | '--rt-toast-icon-color' | '--rt-toast-progress-color' | '--rt-toast-progress-height' | '--rt-workspace-aside-size' | '--rt-workspace-list-size';
 /** All the styling properties declared by the kit. */