@rt-tools/ui-kit-v2 0.16.0 → 0.18.0

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

@@ -9,11 +9,6 @@
     rt-icon-button {
         display: inline-flex;
 
-        /* Дефолт = md; перезаписывается модификаторами sm/lg ниже либо inline стилем потребителя.
-           Ряд берётся из общей шкалы высот контролов: иконочная кнопка стоит в строке
-           рядом с кнопкой и полем и обязана совпадать с ними по высоте. */
-        --rt-icon-button-size: var(--rt-control-height-md);
-
         /* Цвет иконки объявлен здесь, а не приходил бы запасным значением на месте
            обращения: запасное переживает смену темы — переопределять нечего. Своё
            свойство блока перебивает тот, кому нужен другой цвет: так делает просмотр
@@ -38,20 +33,26 @@
             --rt-icon-button-color-hover: var(--rt-icon-button-color);
             --rt-icon-button-transition-duration: var(--rt-duration-fast);
 
-            /* Заливка покоя — своим свойством: неактивная кнопка берёт из неё долю, которую задаёт
-               набор оформления. */
-            --rt-icon-button-bg: transparent;
+            /* Размер и заливка покоя — частные шаги: их пишут модификаторы размера и вида, а кнопка
+               читает их под публичными `--rt-icon-button-size` и `--rt-icon-button-bg`. Публичные
+               кнопка не объявляет, поэтому значение на теге `<rt-icon-button>` или выше доходит до
+               неё; раньше модификатор объявлял публичное свойство на самой кнопке и перебивал тег.
+               Компоненты кита, которым нужен свой размер кнопки, тоже пишут шаг, а не публичное
+               свойство: последнее слово остаётся за приложением.
+               Ряд размеров — из общей шкалы высот контролов: кнопка стоит в строке рядом с полем. */
+            --rt-icon-button-bg-variant: transparent;
+            --rt-icon-button-size-step: var(--rt-control-height-md);
 
             position: relative;
             display: inline-flex;
-            width: var(--rt-icon-button-size);
-            height: var(--rt-icon-button-size);
+            width: var(--rt-icon-button-size, var(--rt-icon-button-size-step));
+            height: var(--rt-icon-button-size, var(--rt-icon-button-size-step));
             align-items: center;
             justify-content: center;
             padding: 0;
             border: 0;
             border-radius: var(--rt-icon-button-radius);
-            background-color: var(--rt-icon-button-bg);
+            background-color: var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant));
             box-shadow: var(--rt-icon-button-shadow);
             color: var(--rt-icon-button-color);
             cursor: pointer;
@@ -59,24 +60,34 @@
                 background-color var(--rt-icon-button-transition-duration) ease,
                 box-shadow var(--rt-icon-button-transition-duration) ease;
 
+            /* Два шага меньше `sm` — для плотных строк. У шкалы нет ступени 22px, и ступень ради одной
+               кнопки легла бы мимо её сетки в 4px: шаг `xs` записан на месте. */
+            &--2xs {
+                --rt-icon-button-size-step: var(--rt-size-5);
+            }
+
+            &--xs {
+                --rt-icon-button-size-step: 22px;
+            }
+
             &--sm {
-                --rt-icon-button-size: var(--rt-control-height-sm);
+                --rt-icon-button-size-step: var(--rt-control-height-sm);
             }
 
             &--md {
-                --rt-icon-button-size: var(--rt-control-height-md);
+                --rt-icon-button-size-step: var(--rt-control-height-md);
             }
 
             &--lg {
-                --rt-icon-button-size: var(--rt-control-height-lg);
+                --rt-icon-button-size-step: var(--rt-control-height-lg);
             }
 
             &--xl {
-                --rt-icon-button-size: var(--rt-control-height-xl);
+                --rt-icon-button-size-step: var(--rt-control-height-xl);
             }
 
             &--2xl {
-                --rt-icon-button-size: var(--rt-control-height-2xl);
+                --rt-icon-button-size-step: var(--rt-control-height-2xl);
             }
 
             /* Подъём под указателем — ручка для потребителя, как тень покоя; по умолчанию равен
@@ -85,9 +96,11 @@
                 box-shadow: var(--rt-icon-button-shadow-hover);
             }
 
+            /* Заливка под указателем читается под ручкой `--rt-icon-button-bg-hover`; без неё каждый
+               вид берёт свою, как прежде. */
             &--ghost {
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                     color: var(--rt-icon-button-color-hover);
                 }
 
@@ -97,22 +110,22 @@
             }
 
             &--primary {
-                --rt-icon-button-bg: var(--rt-color-action-primary);
+                --rt-icon-button-bg-variant: var(--rt-color-action-primary);
 
                 color: var(--rt-color-action-on-primary);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-color-action-primary-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-color-action-primary-hover));
                 }
             }
 
             &--secondary {
-                --rt-icon-button-bg: var(--rt-color-bg-surface-subtle);
+                --rt-icon-button-bg-variant: var(--rt-color-bg-surface-subtle);
 
                 color: var(--rt-color-text-primary);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
             }
 
@@ -120,7 +133,7 @@
                 color: var(--rt-color-state-danger);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -132,7 +145,7 @@
                 color: var(--rt-color-state-success);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -144,7 +157,7 @@
                 color: var(--rt-color-state-warning);
 
                 &:hover:not(:disabled) {
-                    background-color: var(--rt-icon-button-color-bg-hover);
+                    background-color: var(--rt-icon-button-bg-hover, var(--rt-icon-button-color-bg-hover));
                 }
 
                 &.rt-icon-button--active {
@@ -157,7 +170,11 @@
                встроенным стилем, и правилом его не перебить. Заливка остаётся долей заливки покоя: по умолчанию
                вся, и свой вид прежний. */
             &:disabled {
-                background-color: color-mix(in srgb, var(--rt-icon-button-bg) var(--rt-icon-button-disabled-fill), transparent);
+                background-color: color-mix(
+                    in srgb,
+                    var(--rt-icon-button-bg, var(--rt-icon-button-bg-variant)) var(--rt-icon-button-disabled-fill),
+                    transparent
+                );
                 cursor: not-allowed;
                 opacity: var(--rt-icon-button-disabled-opacity);
 
@@ -172,6 +189,15 @@
                 outline-offset: 2px;
             }
 
+            /* Своё содержимое вместо значка по имени: встаёт по центру и берёт цвет кнопки. */
+            &__content {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                color: inherit;
+                line-height: 1;
+            }
+
             &__spinner {
                 --rt-icon-button-spin-duration: 1s;
 

package/src/lib/components/image-upload/CONTEXT.md

@@ -12,20 +12,23 @@
     (imageChanged)="upload($event)" />
 ```
 
-| вход            | тип                                 | умолчание                    |
-| --------------- | ----------------------------------- | ---------------------------- |
-| `imageUrl`      | `string \| null`                    | `null`                       |
-| `fileName`      | `string`                            | `'image'`                    |
-| `tooltip`       | `string`                            | `''` → `uiImageUploadChange` |
-| `downloadable`  | `boolean`                           | `false`                      |
-| `downloadShape` | `'circle' \| 'square'`              | `'circle'`                   |
-| `autoApply`     | `boolean`                           | `false`                      |
-| `loading`       | `boolean`                           | `false`                      |
-| `disabled`      | `boolean`                           | `false`                      |
-| `ratio`         | `number \| null`                    | `null`                       |
-| `round`         | `boolean`                           | `false`                      |
-| `format`        | `'png' \| 'jpeg' \| 'webp' \| null` | `null`                       |
-| `quality`       | `number`                            | `92`                         |
+| вход               | тип                                                     | умолчание                    |
+| ------------------ | ------------------------------------------------------- | ---------------------------- |
+| `imageUrl`         | `string \| null`                                        | `null`                       |
+| `fileName`         | `string`                                                | `'image'`                    |
+| `tooltip`          | `string`                                                | `''` → `uiImageUploadChange` |
+| `downloadable`     | `boolean`                                               | `false`                      |
+| `downloadShape`    | `'circle' \| 'square'`                                  | `'circle'`                   |
+| `downloadIconSize` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| null` | `null` → по размеру кнопки   |
+| `chooseAppearance` | `'filled' \| 'outlined' \| 'text'`                      | `'outlined'`                 |
+| `chooseIcon`       | `string \| null`                                        | `'ico-upload'`               |
+| `autoApply`        | `boolean`                                               | `false`                      |
+| `loading`          | `boolean`                                               | `false`                      |
+| `disabled`         | `boolean`                                               | `false`                      |
+| `ratio`            | `number \| null`                                        | `null`                       |
+| `round`            | `boolean`                                               | `false`                      |
+| `format`           | `'png' \| 'jpeg' \| 'webp' \| null`                     | `null`                       |
+| `quality`          | `number`                                                | `92`                         |
 
 Выходы: `imageChanged` (`File`), `downloaded`.
 
@@ -48,7 +51,9 @@
 Свойства блока: `--rt-image-upload-image-max-height`, `--rt-image-upload-image-radius`,
 `--rt-image-upload-hover-opacity`, `--rt-image-upload-focus-shadow`,
 `--rt-image-upload-download-overhang`, `--rt-image-upload-download-bg`,
-`--rt-image-upload-download-radius`. Они объявлены на самом блоке, поэтому переопределяются
+`--rt-image-upload-download-radius`, `--rt-image-upload-download-size` (размер кнопки скачивания,
+по умолчанию шаг `--rt-control-height-md`), `--rt-image-upload-download-blur` (размытие под ней,
+8px). Они объявлены на самом блоке, поэтому переопределяются
 правилом на `.rt-image-upload`, а не на `:root`. Зона загрузки берёт свойства
 `--rt-empty-state-frame-*`, обрезка — `--rt-image-cropper-*`.
 

package/src/lib/components/image-upload/rt-image-upload.component.scss

@@ -10,6 +10,8 @@
         --rt-image-upload-download-overhang: var(--rt-space-sm);
         --rt-image-upload-download-bg: color-mix(in srgb, var(--rt-color-bg-surface) 75%, transparent);
         --rt-image-upload-download-radius: var(--rt-radius-md);
+        --rt-image-upload-download-blur: 8px;
+        --rt-image-upload-download-size: var(--rt-control-height-md);
 
         display: block;
         width: 100%;
@@ -36,6 +38,9 @@
             max-width: 100%;
             box-sizing: border-box;
             padding: var(--rt-image-upload-download-overhang);
+
+            /* На верх строки: на базовой линии под картинкой оставался зазор под нижние выносные. */
+            vertical-align: top;
         }
 
         &__download {
@@ -44,13 +49,20 @@
             right: 0;
             border-radius: var(--rt-image-upload-download-radius);
             /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 */
-            -webkit-backdrop-filter: blur(8px);
-            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(var(--rt-image-upload-download-blur));
+            backdrop-filter: blur(var(--rt-image-upload-download-blur));
             background: var(--rt-image-upload-download-bg);
 
             &--round {
                 --rt-image-upload-download-radius: var(--rt-radius-full);
             }
+
+            /* Размер отдаётся кнопке её частным шагом, а не публичным `--rt-icon-button-size`: так
+               последнее слово остаётся за приложением. Шаг кнопка объявляет на корне своего
+               шаблона, а не на хосте, поэтому правило адресует тот же корень. */
+            .rt-icon-button {
+                --rt-icon-button-size-step: var(--rt-image-upload-download-size);
+            }
         }
 
         &__image {

package/src/lib/components/pagination/rt-pagination.component.scss

@@ -25,7 +25,7 @@
         }
 
         .rt-icon-button {
-            --rt-icon-button-size: var(--rt-pagination-arrow-size);
+            --rt-icon-button-size-step: var(--rt-pagination-arrow-size);
             --rt-icon-button-radius: var(--rt-pagination-arrow-radius);
             --rt-icon-button-shadow: var(--rt-pagination-arrow-shadow);
         }

package/src/lib/components/scroll-area/CONTEXT.md

@@ -46,6 +46,8 @@
 - Нажатие на значок уводит тело к самому низу и в содержимое под значком не уходит.
 - Полоса не ловит указатель — нажатия по списку под ней проходят насквозь; значок ловит сам.
 - Перекрасить растушёвку можно свойством `--rt-scroll-area-hint-color` на блоке.
+- Отступы и фоны шапки, тела и подвала — свойства блока `--rt-scroll-area-*-padding` и
+  `--rt-scroll-area-*-bg`; фоны по умолчанию прозрачные.
 
 ## Договорённость
 

package/src/lib/components/scroll-area/rt-scroll-area.component.scss

@@ -1,8 +1,22 @@
 @layer rt-kit.components {
+    /* Фон хоста — с нулевой специфичностью. Хост области часто сам элемент чужого блока со своим
+       фоном (столбец бокового меню), и правило той же силы перебивало его порядком в файле:
+       столбец терял подложку. Под `:where` любое правило по классу сильнее. */
+    :where(.rt-scroll-area) {
+        background: var(--rt-scroll-area-bg);
+    }
+
     .rt-scroll-area {
         --rt-scroll-area-hint-height: var(--rt-space-10);
         --rt-scroll-area-hint-color: var(--rt-color-bg-surface);
         --rt-scroll-area-hint-radius: var(--rt-radius-full);
+        --rt-scroll-area-header-padding: var(--rt-space-2) var(--rt-space-4);
+        --rt-scroll-area-body-padding: var(--rt-space-4);
+        --rt-scroll-area-footer-padding: var(--rt-space-4);
+        --rt-scroll-area-bg: transparent;
+        --rt-scroll-area-header-bg: transparent;
+        --rt-scroll-area-body-bg: transparent;
+        --rt-scroll-area-footer-bg: transparent;
 
         // Полоса растушёвки считает своё место от хоста: тело обрезает всё по своему краю, а
         // полоса обязана дойти до содержимого подвала.
@@ -15,7 +29,8 @@
 
         &__header {
             flex: 0 0 auto;
-            padding: var(--rt-space-2) var(--rt-space-4);
+            padding: var(--rt-scroll-area-header-padding);
+            background: var(--rt-scroll-area-header-bg);
         }
 
         &__body {
@@ -23,13 +38,15 @@
             overflow: auto;
             flex: 1 1 auto;
             flex-direction: column;
-            padding: var(--rt-space-4);
+            padding: var(--rt-scroll-area-body-padding);
+            background: var(--rt-scroll-area-body-bg);
             min-block-size: 0;
         }
 
         &__footer {
             flex: 0 0 auto;
-            padding: var(--rt-space-4);
+            padding: var(--rt-scroll-area-footer-padding);
+            background: var(--rt-scroll-area-footer-bg);
         }
 
         // Полоса стоит поверх стыка тела и подвала и не ловит указатель: под ней живой список,

package/src/lib/components/select/rt-select.component.scss

@@ -82,6 +82,10 @@
             border-color: transparent;
             background-color: transparent;
 
+            /* Высота строки поля рассчитана на подпись поля, а здесь разметка потребителя: с ней
+               кнопка вырастала бы на пару точек и сдвигала панель. Строка остаётся прежней. */
+            line-height: var(--rt-leading-none);
+
             &:focus {
                 border-color: transparent;
                 box-shadow: none;

package/src/lib/components/side-menu/CONTEXT.md

@@ -17,10 +17,15 @@
 
 **Режим и ширину подменю хранит сервис, а не меню.** `provideRtSideMenuSettings()` включает
 хранение под номером меню; без провайдера меню ничего не помнит, и режим с шириной приходят
-входами. Вход важнее сохранённого.
+входами. Вход важнее сохранённого. `pinShown="false"` убирает кнопку закрепления, и сохранённое
+закрепление тогда не читается: иначе человек не открепил бы меню.
+
+**Подсказки строк подменю гасит `subMenuTooltipsShown="false"`.** Имена кнопок для чтения экрана
+остаются.
 
 **Значок вне набора — шаблон `rtSideMenuIcon`.** Имя Material первого кита меню переводит парой
-из перечня кита, как `rt-menu`. Имя без пары берёт свой шаблон меню, один на все пункты; без
+из перечня кита, как `rt-menu`. Имя без пары берёт свой шаблон меню, один на все пункты и кнопки строк;
+контекст — строка (`$implicit`), имя (`icon`) и место (`slot`: `'icon'` или `'iconButton'`). Без
 шаблона на его месте пусто, а в режиме разработки консоль называет такое имя.
 
 **Раздел и запрос меню держит само.** Их не задать входом: раздел открывает нажатие или наведение

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

@@ -4,17 +4,24 @@
 <rt-spinner color="primary" [diameter]="32" />
 ```
 
-| вход       | тип                                      | умолчание   |
-| ---------- | ---------------------------------------- | ----------- |
-| `diameter` | `number \| string` (px)                  | `32`        |
-| `color`    | `'primary' \| 'neutral' \| 'on-primary'` | `'primary'` |
-
-Выходов нет. Собственной разметки нет — кольцо рисуется на host-е.
+| вход         | тип                                      | умолчание   |
+| ------------ | ---------------------------------------- | ----------- |
+| `diameter`   | `number \| string` (px)                  | `32`        |
+| `color`      | `'primary' \| 'neutral' \| 'on-primary'` | `'primary'` |
+| `appearance` | `'border' \| 'arc'`                      | `'border'`  |
+| `overlay`    | `boolean`                                | `false`     |
+| `backdrop`   | `boolean` — только вместе с `overlay`    | `false`     |
+| `plate`      | `boolean`                                | `false`     |
+
+Выходов нет. Без `overlay`, `plate` и `arc` собственной разметки нет — кольцо рисуется на host-е,
+и так спиннер стоит в компонентах кита. Любой из этих входов включает внутреннюю разметку.
 
 ## Главное, что нужно знать
 
-**Спиннер не решает, показывать ли себя.** Ни условной отрисовки, ни подложки внутри нет: и то,
-и другое — дело вмещающего. Таблица рисует свой sticky-overlay и кладёт спиннер внутрь, кнопка
+**Спиннер не решает, показывать ли себя.** Условной отрисовки внутри нет — это дело вмещающего.
+Подложку и накрытие блока он рисует по просьбе: `overlay` занимает позиционированного родителя,
+`backdrop` приглушает его содержимое. Слой оверлея — `sticky`, переназначается свойством
+`--rt-spinner-overlay-z`. Таблица рисует свой sticky-overlay и кладёт спиннер внутрь, кнопка
 подменяет им иконку.
 
 Диаметр едет свойством оформления `--rt-spinner-diameter`, а не классом, — поэтому размер

package/src/lib/components/spinner/rt-spinner.component.scss

@@ -7,15 +7,28 @@
         --rt-spinner-rotation-duration: 1s;
         --rt-spinner-rotation-duration-reduced: 4s;
         --rt-spinner-radius: var(--rt-radius-full);
+        --rt-spinner-overlay-z: var(--rt-z-sticky);
+        --rt-spinner-plate-size: calc(var(--rt-spinner-diameter) + 2 * var(--rt-space-2));
+        --rt-spinner-plate-bg: var(--rt-color-bg-surface);
+        --rt-spinner-plate-shadow: var(--rt-shadow-md);
+        --rt-spinner-plate-radius: var(--rt-radius-full);
+        --rt-spinner-backdrop-bg: color-mix(in srgb, var(--rt-color-bg-subtle) 85%, transparent);
+        --rt-spinner-arc-duration: 1.4s;
+        --rt-spinner-arc-duration-reduced: 5.6s;
 
-        display: inline-block;
-        width: var(--rt-spinner-diameter);
-        height: var(--rt-spinner-diameter);
-        box-sizing: border-box;
-        border: var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);
-        border-radius: var(--rt-spinner-radius);
-        border-right-color: var(--rt-spinner-progress-color);
-        animation: rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite;
+        /* Кольцо: border с одной цветной стороной и вращение. Его рисует host без новых режимов,
+           а в них — элемент `__ring` внутри, теми же правилами. */
+        &,
+        &__ring {
+            display: inline-block;
+            width: var(--rt-spinner-diameter);
+            height: var(--rt-spinner-diameter);
+            box-sizing: border-box;
+            border: var(--rt-spinner-border-width) solid var(--rt-spinner-track-color);
+            border-radius: var(--rt-spinner-radius);
+            border-right-color: var(--rt-spinner-progress-color);
+            animation: rt-spinner-rotate var(--rt-spinner-rotation-duration) linear infinite;
+        }
 
         &--primary {
             --rt-spinner-progress-color: var(--rt-color-action-primary);
@@ -29,6 +42,61 @@
             --rt-spinner-track-color: var(--rt-overlay-white-25);
             --rt-spinner-progress-color: var(--rt-color-action-on-primary);
         }
+
+        /* В новых режимах host — коробка, а кольцо внутри: border и вращение с host-а снимаются. */
+        &--framed {
+            display: inline-flex;
+            width: auto;
+            height: auto;
+            align-items: center;
+            justify-content: center;
+            border: 0;
+            border-radius: 0;
+            animation: none;
+        }
+
+        /* Слой — ступень sticky: выше закреплённых частей самого блока, ниже всего, что открывается
+           поверх страницы; приложение переназначает слой свойством `--rt-spinner-overlay-z`. Родитель
+           должен быть позиционирован — его спиннер не трогает. */
+        &--overlay {
+            position: absolute;
+            z-index: var(--rt-spinner-overlay-z);
+            display: flex;
+            inset: 0;
+        }
+
+        &--backdrop {
+            background: var(--rt-spinner-backdrop-bg);
+        }
+
+        &__plate {
+            display: inline-flex;
+            width: var(--rt-spinner-plate-size);
+            height: var(--rt-spinner-plate-size);
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-spinner-plate-radius);
+            background: var(--rt-spinner-plate-bg);
+            box-shadow: var(--rt-spinner-plate-shadow);
+        }
+
+        /* Дуга как у Material: контейнер вращается, а длина дуги растёт и сокращается. Дорожки нет. */
+        &__arc {
+            display: block;
+            width: var(--rt-spinner-diameter);
+            height: var(--rt-spinner-diameter);
+            animation: rt-spinner-rotate var(--rt-spinner-arc-duration) linear infinite;
+        }
+
+        &__arc-circle {
+            animation: rt-spinner-arc-dash var(--rt-spinner-arc-duration) ease-in-out infinite;
+            fill: none;
+            stroke: var(--rt-spinner-progress-color);
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+            stroke-linecap: round;
+            stroke-width: 4;
+        }
     }
 
     @keyframes rt-spinner-rotate {
@@ -37,9 +105,40 @@
         }
     }
 
+    /* Цикл Material — точка, длинная дуга, дуга уходит в точку — начат с длинной дуги. Движение то
+       же, а кадр с остановленным движением показывает дугу, а не точку. В середине дуга уже точка, и
+       переход к началу её длины глазу не виден. */
+    @keyframes rt-spinner-arc-dash {
+        0% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+        }
+
+        50% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -124;
+        }
+
+        50.01% {
+            stroke-dasharray: 1 200;
+            stroke-dashoffset: 0;
+        }
+
+        100% {
+            stroke-dasharray: 89 200;
+            stroke-dashoffset: -35;
+        }
+    }
+
     @media (prefers-reduced-motion: reduce) {
-        .rt-spinner {
+        .rt-spinner,
+        .rt-spinner__ring {
             animation-duration: var(--rt-spinner-rotation-duration-reduced);
         }
+
+        .rt-spinner__arc,
+        .rt-spinner__arc-circle {
+            animation-duration: var(--rt-spinner-arc-duration-reduced);
+        }
     }
 }