@rt-tools/ui-kit-v2 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/components/CONTEXT.md

@@ -37,7 +37,7 @@ tag/
 | иконка, кольцо, заглушка | `icon`, `spinner`, `skeleton`, `skeleton-wrapper`                                                                                              |
 | статус, счётчик, метка   | `tag`, `live-badge`, `info-item`, `stat-tile`, `delta-view`                                                                                    |
 | кнопки                   | `button` (директива), `icon-button`, `split-button`, `toggle-button-group`                                                                     |
-| поля ввода               | `input`, `textarea`, `input-number`, `counter`, `checkbox`, `toggle-switch`, `date-picker`, `file-input`, `rich-editor`                        |
+| поля ввода               | `input`, `textarea`, `input-number`, `counter`, `checkbox`, `toggle-switch`, `date-picker`, `date-range`, `file-input`, `rich-editor`          |
 | списки выбора            | `select`, `multiselect`, `autocomplete`, `filter-control`                                                                                      |
 | обёртка поля             | `field`, `form-control` (основа)                                                                                                               |
 | плавающие панели         | `popover`, `tooltip`, `confirm-popover`, `menu`, `toast`                                                                                       |

package/src/lib/components/action-bar/rt-action-bar.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-action-bar — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
        `.rt-action-bar` — сам хост (шаблон начинается с ng-container, класс ставит host). */
@@ -118,5 +120,8 @@
                 display: none;
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление панели; действия и меню держат своё. */
+        @include kv.radius-steps('--rt-action-bar-radius');
     }
 }

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

@@ -1,5 +1,9 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-autocomplete {
+        --rt-autocomplete-radius: var(--rt-input-radius);
+
         position: relative;
         display: block;
         width: 100%;
@@ -14,7 +18,7 @@
             align-items: center;
             padding: var(--rt-input-padding-y) var(--rt-input-padding-x);
             border: var(--rt-input-border-width) solid var(--rt-input-color-border);
-            border-radius: var(--rt-input-radius);
+            border-radius: var(--rt-autocomplete-radius);
             background-color: var(--rt-input-color-bg);
             color: var(--rt-input-color-text);
             cursor: text;
@@ -145,5 +149,8 @@
             color: var(--rt-input-color-text-placeholder);
             font-style: italic;
         }
+
+        /* Шаг входа `radius` переназначает скругление поля; панель в оверлее держит своё. */
+        @include kv.radius-steps('--rt-autocomplete-radius');
     }
 }

package/src/lib/components/bottom-sheet/rt-bottom-sheet.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-bottom-sheet — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
        `.rt-bottom-sheet` — сам хост (шаблон начинается с ng-container, класс и
@@ -74,5 +76,8 @@
                 transform: translateY(0);
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление панели. */
+        @include kv.radius-steps('--rt-bottom-sheet-radius');
     }
 }

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

@@ -18,7 +18,7 @@
 | `theme`       | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'`                   |
 | `appearance`  | `'filled' \| 'outlined' \| 'text'`                                         | настройки кита или `'filled'` |
 | `size`        | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (30 / 40 / 50 / 60 / 70 px)        | настройки кита или `'md'`     |
-| `rounded`     | `boolean`                                                                  | настройки кита или `false`    |
+| `radius`      | `TRtRadius \| null` — шаг общей шкалы                                      | настройки кита или `null`     |
 | `loading`     | `boolean`                                                                  | `false`                       |
 | `loadingIcon` | `string \| null`                                                           | `null` → встроенное кольцо    |
 

package/src/lib/components/button/rt-button.directive.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     .rt-button {
         /* Высота приходит общей шкалой контролов, а не своим числом: кнопка, поле и
@@ -215,10 +217,6 @@
             --rt-btn-color: var(--rt-color-action-info-on-surface);
         }
 
-        &--rounded {
-            --rt-btn-radius: 999px;
-        }
-
         &--sm {
             --rt-btn-height: var(--rt-control-height-sm);
             --rt-btn-padding: 0 0.875rem;
@@ -257,9 +255,9 @@
             gap: 0;
         }
 
-        &--icon-only#{&}--rounded {
-            --rt-btn-radius: 50%;
-        }
+        /* Шаг входа `radius` переназначает собственное свойство кнопки. Класс блока стоит на
+           самом хосте, поэтому правило шага — на нём же. */
+        @include kv.radius-steps('--rt-btn-radius');
 
         &--loading {
             cursor: wait;

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

@@ -20,8 +20,12 @@
 | `canPrev` / `canNext`             | `boolean`           | `false`        |
 | `prevAriaLabel` / `nextAriaLabel` | `string`            | `''`           |
 | `sublabelsLoading`                | `boolean`           | `false`        |
+| `grid`                            | `boolean`           | `false`        |
+| `activeKey`                       | `string \| null`    | `null`         |
+| `titleAction` / `headerTitle`     | `boolean`           | `false`        |
 
-Выходы: `prevMonth`, `nextMonth`, `dayClick`. Слот `[calendarHint]` — подсказка в шапке.
+Выходы: `prevMonth`, `nextMonth`, `dayClick`, `dayHover`, `gridKey`, `titleClick`. Слот
+`[calendarHint]` — подсказка в шапке.
 
 ## Главное, что нужно знать
 
@@ -31,11 +35,21 @@
 и для выбора дат, и для витрины занятости.
 
 **Это не поле ввода.** Значение он не хранит и в форму не пишет; для ввода даты есть
-[`rt-date-picker`](../date-picker/CONTEXT.md).
+[`rt-date-picker`](../date-picker/CONTEXT.md), для периода — [`rt-date-range`](../date-range/CONTEXT.md).
+
+**Одиночный выбор и клавиши — по входам.** День с `state: chosen` залит, день с `today: true`
+обведён рамкой. Вход `grid` оставляет в обходе Tab один день и отдаёт стрелки, PageUp/PageDown,
+Home и End событием `gridKey`; куда встать, решает потребитель и ставит `activeKey`. Так
+календарь держит панель поля даты и остаётся без своей логики дат.
 
 ## Края
 
 - Недоступный день не кликается — `dayClick` для него не поднимается.
+- `dayHover` отдаёт день под указателем или с фокусом и `null`, когда указатель ушёл с месяцев;
+  по нему поле диапазона рисует будущий диапазон. Недоступный день его не поднимает.
 - `sublabelsLoading` подменяет подписи под числами заглушками, оставляя сами числа.
+- `--rt-calendar-column-gap` и `--rt-calendar-range-inner-radius` — зазор колонок и скругление
+  внутренних углов диапазона. По умолчанию это прежние зазор и скругление дня; поле диапазона ставит
+  оба в ноль, и полоса диапазона идёт сплошной.
 - Стрелки отключены, пока не разрешены явно: календарь не знает границ диапазона.
 - Подписи стрелок задаёт приложение — своих слов у календаря здесь нет.

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-calendar — ViewEncapsulation.None: правила таргетируют BEM-класс блока.
        `.rt-calendar` — сам хост (шаблон начинается с ng-container, класс ставит host). */
@@ -5,6 +7,24 @@
     .rt-calendar {
         --rt-calendar-day-radius: var(--rt-radius-md);
 
+        /* Наименьшая высота дня: панель поля даты поднимает её до размера под палец. */
+        --rt-calendar-day-size: auto;
+
+        /* Где число стоит в клетке по высоте: сверху, чтобы подписи ряда шли одной строкой. */
+        --rt-calendar-day-justify: flex-start;
+
+        /* Число колонок сетки месяцев: два месяца рядом. Панель поля даты ставит одну колонку. */
+        --rt-calendar-month-count: 2;
+
+        /* Зазор между колонками дней. Поле диапазона ставит ноль, и полоса диапазона идёт сплошной. */
+        --rt-calendar-column-gap: var(--rt-space-0-5);
+
+        /* Скругление внутренних углов диапазона: у дней между краями и у стыков начала и конца. */
+        --rt-calendar-range-inner-radius: var(--rt-calendar-day-radius);
+
+        /* Рамка сегодняшнего дня: тонкая линия цвета действия внутри клетки. */
+        --rt-calendar-today-ring: inset 0 0 0 var(--rt-border-width-thin) var(--rt-color-action-primary);
+
         display: block;
 
         &__header {
@@ -19,26 +39,53 @@
             flex: 0 0 auto;
         }
 
+        /* Заголовок в шапке стоит между стрелками и не держит нижнего отступа сетки. */
+        &__header &__month-title {
+            width: auto;
+            padding: var(--rt-space-1) var(--rt-space-2);
+            margin: 0;
+        }
+
         &__months {
             display: grid;
             gap: var(--rt-space-6);
-            grid-template-columns: repeat(2, 1fr);
+            grid-template-columns: repeat(var(--rt-calendar-month-count), 1fr);
         }
 
         &__month-title {
+            display: block;
+            width: 100%;
+            padding: 0;
+            border: none;
             margin: 0 0 var(--rt-space-2);
+            background: none;
             color: var(--rt-color-text-primary);
+            font: inherit;
             font-weight: var(--rt-font-weight-semibold);
             text-align: center;
 
             &:first-letter {
                 text-transform: uppercase;
             }
+
+            &:is(button) {
+                border-radius: var(--rt-calendar-day-radius);
+                cursor: pointer;
+
+                &:hover {
+                    color: var(--rt-color-text-link);
+                }
+
+                &:focus-visible {
+                    outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                    outline-offset: var(--rt-focus-ring-offset);
+                }
+            }
         }
 
         &__grid {
             display: grid;
-            gap: var(--rt-space-0-5);
+            gap: var(--rt-space-0-5) var(--rt-calendar-column-gap);
             grid-template-columns: repeat(7, 1fr);
         }
 
@@ -53,6 +100,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
+            justify-content: var(--rt-calendar-day-justify);
             padding: var(--rt-space-2) var(--rt-space-0-5);
             border: none;
             border-radius: var(--rt-calendar-day-radius);
@@ -61,13 +109,18 @@
             cursor: pointer;
             font: inherit;
             gap: var(--rt-space-0-5);
+            min-block-size: var(--rt-calendar-day-size);
 
-            &:hover:not(:disabled, [data-state='start'], [data-state='end'], [data-state='in-range']) {
+            &:hover:not(:disabled, [data-state='start'], [data-state='end'], [data-state='in-range'], [data-state='chosen']) {
                 background: var(--rt-color-bg-subtle);
             }
 
+            /* Выключенный день приглушён сам, без состояния: границы панели поля даты выключают
+               дни, не называя их прошедшими. */
             &:disabled {
+                color: var(--rt-color-text-muted);
                 cursor: not-allowed;
+                opacity: 0.45;
             }
 
             &[data-state='past'],
@@ -82,13 +135,34 @@
                 text-decoration: line-through;
             }
 
+            &[data-today] {
+                box-shadow: var(--rt-calendar-today-ring);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+
             &[data-state='start'],
-            &[data-state='end'] {
+            &[data-state='end'],
+            &[data-state='chosen'] {
                 background: var(--rt-color-action-primary);
                 color: var(--rt-color-action-on-primary);
             }
 
+            &[data-state='start'] {
+                border-end-end-radius: var(--rt-calendar-range-inner-radius);
+                border-start-end-radius: var(--rt-calendar-range-inner-radius);
+            }
+
+            &[data-state='end'] {
+                border-end-start-radius: var(--rt-calendar-range-inner-radius);
+                border-start-start-radius: var(--rt-calendar-range-inner-radius);
+            }
+
             &[data-state='in-range'] {
+                border-radius: var(--rt-calendar-range-inner-radius);
                 background: var(--rt-color-action-primary-soft);
                 color: var(--rt-color-text-link);
                 font-weight: var(--rt-font-weight-semibold);
@@ -129,5 +203,8 @@
                 font-size: var(--rt-text-3xs);
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление дня. */
+        @include kv.radius-steps('--rt-calendar-day-radius');
     }
 }

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-card — контейнер карточки в common/ui. ViewEncapsulation.None.
        Хост адресуется по имени элемента, а не по классу блока: класс `.rt-card` висит
@@ -64,5 +66,8 @@
                 }
             }
         }
+
+        /* Шаг входа `radius` переназначает скругление карточки. */
+        @include kv.radius-steps('--rt-card-radius', '> .rt-card');
     }
 }

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

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as kv;
+
 @layer rt-kit.components {
     /* rt-checkbox — чекбокс в common/ui. ViewEncapsulation.None.
        Хост адресуется по имени элемента, а не по классу блока: класс `.rt-checkbox` висит
@@ -6,6 +8,9 @@
 
     rt-checkbox {
         display: inline-block;
+
+        /* Шаг входа `radius` переназначает скругление квадрата, кольцо фокуса держит своё. */
+        @include kv.radius-steps('--rt-checkbox-box-radius', '> .rt-checkbox');
     }
 
     /* Корень — `<button>`, а кнопке браузер даёт свой шрифт, а не шрифт страницы: `font: inherit`
@@ -27,6 +32,12 @@
         gap: var(--rt-space-sm);
         text-align: start;
 
+        /* Кнопка строчная и по умолчанию стоит на базовой линии строки хоста. Эту линию задаёт
+           первый её потомок с текстом: у пустого флажка подпись, у отмеченного значок галочки.
+           Линия съезжает, хост меняет высоту, и флажок вздрагивает при каждой отметке. Кнопка
+           стоит по верху строки, и высота хоста от содержимого квадрата больше не зависит. */
+        vertical-align: top;
+
         &:focus-visible {
             border-radius: var(--rt-checkbox-focus-radius);
             box-shadow: var(--rt-checkbox-focus-shadow);

package/src/lib/components/data-list/settings/rt-data-list-settings-aside.component.scss

@@ -147,7 +147,7 @@
         .rt-aside-header__back .rt-icon-button {
             --rt-icon-button-size: var(--rt-data-list-settings-aside-control-size);
             --rt-icon-button-color: var(--rt-list-settings-icon-color);
-            --rt-icon-button-square-radius: var(--rt-radius-full);
+            --rt-icon-button-radius: var(--rt-radius-full);
         }
 
         .rt-aside-header__back .rt-icon {

package/src/lib/components/data-list/toolbar/rt-data-list-toolbar.component.scss

@@ -54,7 +54,7 @@
             }
 
             .rt-icon-button {
-                --rt-icon-button-square-radius: var(--rt-list-action-radius);
+                --rt-icon-button-radius: var(--rt-list-action-radius);
                 --rt-icon-button-shadow: var(--rt-list-action-shadow);
                 --rt-icon-button-shadow-hover: var(--rt-list-action-shadow-hover);
                 --rt-icon-button-color-hover: var(--rt-list-action-color-hover);

package/src/lib/components/data-table/cell/rt-data-table-cell.component.scss

@@ -88,7 +88,7 @@
 
             .rt-icon-button {
                 --rt-icon-button-size: var(--rt-list-copy-button-size);
-                --rt-icon-button-square-radius: var(--rt-list-copy-button-radius);
+                --rt-icon-button-radius: var(--rt-list-copy-button-radius);
                 --rt-icon-button-color-hover: var(--rt-color-text-primary);
                 --rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);
 

package/src/lib/components/data-table/filter-cell/rt-data-table-filter-cell.component.scss

@@ -40,7 +40,7 @@
 
         .rt-icon-button {
             --rt-icon-button-size: var(--rt-list-table-button-size);
-            --rt-icon-button-square-radius: var(--rt-list-table-button-radius);
+            --rt-icon-button-radius: var(--rt-list-table-button-radius);
         }
 
         .rt-icon-button__icon {

package/src/lib/components/data-table/rt-data-table.component.scss

@@ -226,7 +226,7 @@
 
         .rt-icon-button {
             --rt-icon-button-size: var(--rt-list-table-button-size);
-            --rt-icon-button-square-radius: var(--rt-list-table-button-radius);
+            --rt-icon-button-radius: var(--rt-list-table-button-radius);
         }
 
         .rt-icon-button__icon {

package/src/lib/components/date-picker/CONTEXT.md

@@ -11,31 +11,50 @@
 | вход          | тип                                    | умолчание |
 | ------------- | -------------------------------------- | --------- |
 | `type`        | `'date' \| 'time' \| 'datetime-local'` | `'date'`  |
-| `min` / `max` | `string \| null` (ISO)                 | `null`    |
+| `min` / `max` | `string \| null` (форма значения)      | `null`    |
+| `minuteStep`  | `number`                               | `5`       |
 
-Значение — **строка ISO**, ровно та, что отдаёт нативное поле (`2026-03-15`, `09:30`,
-`2026-03-15T09:30`).
+Значение — **строка** той же формы, что отдавало нативное поле: `2026-03-15`, `09:30`,
+`2026-03-15T09:30`; пусто — `''`.
 
 ## Главное, что нужно знать
 
-**Своего календаря кит не везёт — рисует его браузер.** Отсюда всё остальное: раскладка,
-формат ввода и клавиатура всегда совпадают с системными, а вид поля на разных платформах
-отличается. Если нужен единый календарь во всех браузерах, этот компонент не подойдёт.
+**Панель своя, одна во всех браузерах.** Кнопка в конце поля открывает `rt-date-panel`: месяц с
+листанием и выбором месяца и года, колонки часов и минут, подвал «Сегодня», «Сейчас» и «Готово»
+или «Применить». На широком экране панель стоит в поповере, на узком — в нижней шторке. Признак
+узкого экрана даёт `BreakpointsService.narrow`. Договорённость — `docs/specs/ui-kit-v2/date-panel/`.
 
-**Значение — строка, а не `Date`.** Разбор и часовые пояса остаются на стороне потребителя;
-компонент не трогает ни то, ни другое.
+**Текст в поле — дата в порядке языка интерфейса.** Под `ru` это `01.08.2026`, под `en-US` —
+«08/01/2026», время всегда `HH:mm`. Язык берётся из `RT_KIT_LOCALE`: приложение, меняющее язык на
+ходу, меняет и порядок. Подсказка в пустом поле — та же форма буквами кита (`дд.мм.гггг`). Набранный
+текст читается в том же порядке, вставленная форма значения (`2026-08-01`) тоже. Текст, который
+читается как значение в границах, становится значением. Любой другой оставляет значение прежним и
+помечает поле ошибкой: поле ничего не исправляет молча и не отдаёт в форму нечитаемую строку.
+
+**Значение — строка, а не `Date`.** Разбор и часовые пояса остаются на стороне потребителя.
+
+**Вся арифметика дат — в чистых модулях.** `rt-date-panel.logic.ts` — чтение и запись значения,
+месяц по локали, границы, колонки времени и клавиши сетки; `rt-date-text.logic.ts` — текст поля и
+его разбор. Панель и поле — тонкие обёртки.
 
 ## Края
 
+- В узком поле подсказка обрезается многоточием. Пока поле пустое, форма значения целиком видна
+  при наведении.
+- `min`/`max` выключают дни и время за границами и останавливают листание на месяце границы.
+- Для даты клик по дню выбирает его и закрывает панель. Для времени и даты со временем выбор —
+  черновик: значение меняется только кнопкой «Готово» или «Применить», закрытие панели его
+  сбрасывает.
+- «Сегодня» выключено, когда сегодняшний день лежит за границами. «Сейчас» ставит время,
+  округлённое вниз до `minuteStep`.
+- Клавиши в месяце: стрелки двигают день, PageUp/PageDown — месяц, Home/End — края недели,
+  Enter выбирает, Escape закрывает панель.
+- На узком экране у даты со временем переключатель «Дата | Время» показывает месяц или колонки.
 - В плоском режиме чтения (включает [`rt-field`](../field/CONTEXT.md)) значение переписывается
   на язык интерфейса через `Intl.DateTimeFormat`: `2026-03-15` → `15 мар. 2026 г.` под `ru`.
-- Нераспознанная строка в этом режиме показывается **как есть**, а не исчезает: значение может
-  прийти из формы, минуя нативное поле.
-- Пустое значение рисуется прочерком.
-- `min`/`max` уезжают на нативное поле; проверку выхода за границы делает браузер, отдельного
-  валидатора здесь нет.
+  Нераспознанная строка показывается как есть, пустое значение — прочерком.
 
 ## Рядом
 
 - [`rt-input`](../input/CONTEXT.md) с `type="time"` — когда нужно только время без обёртки.
-- [`rt-calendar`](../calendar/CONTEXT.md) — календарь-витрина, а не поле ввода.
+- [`rt-calendar`](../calendar/CONTEXT.md) — сетка месяца, на которой стоит панель.

package/src/lib/components/date-picker/panel/rt-date-panel.component.scss

@@ -0,0 +1,155 @@
+@layer rt-kit.components {
+    /* rt-date-panel — ViewEncapsulation.None: правила таргетируют BEM-класс блока, класс ставит host. */
+
+    .rt-date-panel {
+        /* Высота ячейки колонок времени и месяцев. */
+        --rt-date-panel-cell-size: var(--rt-control-height-sm);
+
+        /* Скругление ячеек колонок времени и месяцев. */
+        --rt-date-panel-cell-radius: var(--rt-radius-md);
+
+        /* Толщина черты над подвалом. */
+        --rt-date-panel-divider-width: var(--rt-border-width-thin);
+
+        /* Видимая высота колонки времени: семь ячеек с шестью зазорами, остальное прокручивается. */
+        --rt-date-panel-column-height: calc(var(--rt-date-panel-cell-size) * 7 + var(--rt-space-0-5) * 6);
+
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-space-4);
+        gap: var(--rt-space-4);
+
+        &__body {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--rt-space-4);
+        }
+
+        /* Панель показывает один месяц: сетка календаря не держит пустую вторую колонку.
+           Свойство ставится на сам узел календаря — корень его блока объявляет своё, и правило
+           вложено в блок панели, чтобы быть сильнее его, а не зависеть от порядка подключения. */
+        & &__calendar {
+            --rt-calendar-month-count: 1;
+            --rt-calendar-day-justify: center;
+        }
+
+        &__calendar,
+        &__months {
+            flex: 1 1 auto;
+            min-inline-size: calc(var(--rt-size-10) * 7);
+        }
+
+        &__months-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: var(--rt-space-4);
+        }
+
+        &__year {
+            color: var(--rt-color-text-primary);
+            font-weight: var(--rt-font-weight-semibold);
+        }
+
+        &__month-grid {
+            display: grid;
+            gap: var(--rt-space-1);
+            grid-template-columns: repeat(3, 1fr);
+        }
+
+        &__time {
+            display: flex;
+            gap: var(--rt-space-1);
+        }
+
+        &__column {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-0-5);
+            max-block-size: var(--rt-date-panel-column-height);
+            overflow-y: auto;
+            overscroll-behavior: contain;
+            scrollbar-width: thin;
+        }
+
+        &__cell {
+            flex: 0 0 auto;
+            padding: 0 var(--rt-space-2);
+            border: none;
+            border-radius: var(--rt-date-panel-cell-radius);
+            background: none;
+            color: var(--rt-color-text-primary);
+            cursor: pointer;
+            font: inherit;
+            font-size: var(--rt-text-sm);
+            font-variant-numeric: tabular-nums;
+            min-block-size: var(--rt-date-panel-cell-size);
+            min-inline-size: var(--rt-control-height-md);
+
+            &:hover:not(:disabled, [aria-pressed='true']) {
+                background: var(--rt-color-bg-subtle);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);
+                outline-offset: var(--rt-focus-ring-offset);
+            }
+
+            &[aria-pressed='true'] {
+                background: var(--rt-color-action-primary);
+                color: var(--rt-color-action-on-primary);
+            }
+
+            &:disabled {
+                color: var(--rt-color-text-muted);
+                cursor: not-allowed;
+                opacity: 0.45;
+            }
+        }
+
+        &__footer {
+            display: flex;
+            justify-content: flex-end;
+            padding-top: var(--rt-space-2);
+            border-top: var(--rt-date-panel-divider-width) solid var(--rt-color-border-subtle);
+            gap: var(--rt-space-2);
+        }
+
+        /* Дата без времени: «Сегодня» стоит по центру под месяцем. */
+        &:not(&--with-time) &__footer {
+            justify-content: center;
+        }
+
+        /* Нижняя шторка: дни и ячейки под палец, всё — в одну колонку на всю ширину. */
+        &--sheet {
+            --rt-date-panel-cell-size: calc(var(--rt-size-10) + var(--rt-size-1));
+
+            padding-inline: 0;
+        }
+
+        /* Календарь объявляет размер дня на корне своего блока, поэтому свойство ставится на сам
+           узел календаря — унаследованное от панели корень календаря перекрыл бы. */
+        &--sheet &__calendar {
+            --rt-calendar-day-size: var(--rt-date-panel-cell-size);
+        }
+
+        &--sheet &__body {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        &--sheet &__calendar,
+        &--sheet &__months {
+            min-inline-size: 0;
+        }
+
+        &--sheet &__time {
+            justify-content: center;
+        }
+
+        &--sheet &__column {
+            flex: 1 1 0;
+        }
+    }
+}