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

package/src/lib/components/data-table/CONTEXT.md

@@ -0,0 +1,102 @@
+# `rt-data-table<ENTITY, SORT, KEY>`
+
+Таблица записей первого кита во втором: шапка, строка отбора, готовые ячейки, колонка выбора и
+полоса действий в конце строки. Она стоит рядом с [`rt-table`](../table/CONTEXT.md) и её не
+заменяет: приложение выбирает, какую брать на экране. Material тут нет вовсе — всё, что первый
+кит рисовал им, рисуют части кита.
+
+```html
+<rt-data-table
+    rtDataTableSelectors
+    [entities]="rows()"
+    [currentSortModel]="sort()"
+    [filterModel]="filters()"
+    [isFiltersShown]="true"
+    [isTableRowsClickable]="true"
+    [isSelectorColumnShown]="true"
+    (sortChange)="onSort($event)"
+    (filterChange)="onFilter($event)"
+    (rowClick)="onRow($event.row)">
+    <ng-template rtDataTableRowActions let-row>
+        <rt-menu-item label="Открыть" icon="ico-eye" (selected)="open(row)" />
+    </ng-template>
+</rt-data-table>
+```
+
+| вход                   | тип                  | умолчание      |
+| ---------------------- | -------------------- | -------------- |
+| `entities`             | `ENTITY[]`           | **обязателен** |
+| `currentSortModel`     | `ISortModel \| null` | **обязателен** |
+| `filterModel`          | `IFilterModel[]`     | `[]`           |
+| `isFiltersShown`       | `boolean`            | `false`        |
+| `isTableRowsClickable` | `boolean`            | `false`        |
+| `keyExp`               | `keyof ENTITY`       | `'id'`         |
+
+| выход            | тип                      |
+| ---------------- | ------------------------ |
+| `rowClick`       | `{ row: ENTITY, event }` |
+| `rowDoubleClick` | `ENTITY`                 |
+| `sortChange`     | `ISortModel`             |
+| `filterChange`   | `IFilterModel[]`         |
+
+## Главное, что нужно знать
+
+**Своего порядка, своего отбора и своей страницы таблица не ведёт.** Она просит о них приложение
+и рисует то, что придёт обратно: новый набор строк, новый порядок, новый набор условий. Поэтому
+сама по себе таблица ничего не «применяет» — ответ всегда за приложением.
+
+**Колонки приходят не входом, а от службы настроек** `RtDataTableConfigService`: порядок колонок,
+их видимость и два признака полос прокрутки она читает из базы браузера под ключом приложения и в
+той же форме, что писал первый кит. Службу приложение объявляет само — таблица её только читает.
+База браузера приходит от `provideRtIDBStorage()` из `@rt-tools/core`: без него в провайдерах
+приложения страница пустая, а в консоли стоит `NG0201: No provider found for _IDBStorageService`.
+
+**Отметки строк ведёт директива `rtDataTableSelectors`**, а таблица их рисует. Директива держит
+сами записи, а не только ключи: запись, отмеченная на странице, которой на экране уже нет,
+остаётся отмеченной и уходит приложению целиком. Без директивы колонки выбора нет вовсе.
+
+**Строки различаются ключом записи** (`keyExp`, по умолчанию `id`): им идёт слежение в цикле, и
+флажок строки принадлежит записи, а не месту в списке. Первый кит следил по месту, и при смене
+страницы флажок доставался соседней записи.
+
+**Нажатие на строку приходит по нажатию кнопки указателя, а не по отпусканию** — так двойное
+нажатие приходит после двух одинарных. Нажатие в ячейке выбора и на кнопке меню строки до строки
+не доходит: обе помечены признаком `rt-data-table-stop-row-click`. Тем же признаком приложение
+отмечает свои части строки — прямо в разметке или директивой `rtDataTableStopRowClick`.
+
+**Полоса действий висит над концом строки** и проявляется наведением; где наведения нет, она
+видна всегда. Действия приложения стоят перед кнопкой меню строки, а место под полосу держит
+пустая ячейка — её ширину таблица ставит сама по ширине полосы.
+
+**Значки из описаний колонок рисует набор кита** по перечню соответствий имён первого кита. Своё
+приложение отдаёт шаблоном `rtDataTableIcon` внутри таблицы: он получает имя значка, колонку и — в
+ячейке — строку, и тогда перечень кита не спрашивается вовсе. Имя без пары в перечне ячейка рисует
+глифом шрифта Material Symbols, как первый кит. Шрифт кит не везёт: глиф виден, где его подключило
+приложение.
+
+## Части семейства
+
+| Часть                             | Что делает                                                          |
+| --------------------------------- | ------------------------------------------------------------------- |
+| `rt-data-table-cell`              | готовая ячейка: значение, прочерк у пустого, подсказка, копирование |
+| `rt-data-table-header-cell`       | ячейка шапки: подпись, значок, стрелки порядка                      |
+| `rt-data-table-filter-cell`       | ячейка строки отбора: поле, число, дата, список и вид сравнения     |
+| `rtDataTableCustomCells`          | шаблоны ячеек приложения: колонка типа `custom` рисуется ими        |
+| `rtDataTableRowActions`           | пункты меню строки                                                  |
+| `rtDataTableAdditionalRowActions` | действия рядом с кнопкой меню                                       |
+| `rtDataTableSelectors`            | отметки строк, флажок страницы, признаки колонки выбора             |
+| `RtDataTableConfigService`        | настройки таблицы в базе браузера под ключом и в форме первого кита |
+
+## Края
+
+- Колонка типа `custom` без шаблона рисует пустую ячейку: готовую таблица в ней не берёт.
+- Признаки `filtering`, `filteringMultiple`, `href`, `className` и `fixed` описание колонки
+  принимает и ничего ими не меняет — так же, как в первом ките.
+- Флажок страницы таблица сама не пересчитывает при смене строк: состояние остаётся тем, каким
+  было на прежней странице. Пересчитать его просит список — `setExistingEntitiesState()`.
+- Размер полос прокрутки таблица берёт с корня страницы: туда его ставит список по сохранённой
+  настройке. Без списка полосы кита обычные. Скрытая полоса — нулевой размер, а не запрет
+  прокрутки: содержимое по-прежнему ездит.
+- Выбор по одной рисует радиокнопку, и флажка страницы в шапке нет.
+- Отметки, названные заранее (`selectedEntitiesKeys`), ставятся один раз — к первым непустым
+  строкам; позже присланный набор уже ничего не переписывает.

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

@@ -0,0 +1,115 @@
+@layer rt-kit.components {
+    /* rt-data-table-cell — готовая ячейка таблицы первого кита. Размеры первого кита лежат на
+       шкале: промежуток и поля 8px — ступень sm, отступ кнопки копирования 4px — ступень xs,
+       значок 24px — размер lg набора. Кнопка копирования стоит поверх края ячейки и
+       проявляется наведением; где наведения нет, она видна всегда. */
+
+    .rt-data-table-cell {
+        --rt-data-table-cell-transition-duration: var(--rt-duration-fast);
+        --rt-data-table-cell-glyph-size: var(--rt-size-6);
+
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        gap: var(--rt-space-sm);
+
+        /* Глиф Material Symbols для имени без пары в перечне соответствий — лигатура шрифта,
+           которую подключает приложение. Размер 24px — размер lg значка кита. */
+        &__glyph {
+            display: inline-block;
+            overflow: hidden;
+            width: var(--rt-data-table-cell-glyph-size);
+            font-family: 'Material Symbols Outlined', sans-serif;
+            font-feature-settings: 'liga';
+            font-size: var(--rt-data-table-cell-glyph-size);
+            font-style: normal;
+            font-weight: var(--rt-font-weight-regular);
+            letter-spacing: normal;
+            line-height: 1;
+            text-transform: none;
+            white-space: nowrap;
+
+            &--filled {
+                font-variation-settings: 'FILL' 1;
+            }
+        }
+
+        &__prefix,
+        &__suffix {
+            display: inline-flex;
+            min-width: fit-content;
+            flex: 0 0 auto;
+        }
+
+        /* Значение длиннее места обрезается многоточием: раскладка fixed даёт тексту ширину
+           ячейки, а не ширину значения. Подсказку с целым значением получает только обрезанное. */
+        &__title {
+            display: table;
+            width: 100%;
+            table-layout: fixed;
+
+            &--align--left {
+                text-align: left;
+            }
+
+            &--align--center {
+                text-align: center;
+            }
+
+            &--align--right {
+                text-align: right;
+            }
+        }
+
+        &__text {
+            overflow: hidden;
+            width: 100%;
+            padding: var(--rt-space-sm) var(--rt-space-sm) var(--rt-space-sm) 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__copy-button {
+            position: absolute;
+            transition: visibility var(--rt-data-table-cell-transition-duration) linear;
+            visibility: hidden;
+
+            // Постоянно видна там, где наведения нет, — а не по ширине окна: у первого кита она
+            // появлялась сама только на телефоне, а порог узкого экрана второго кита 1080px, и на
+            // ноутбуке с боковой панелью кнопки стояли во всех ячейках сразу.
+            @media (hover: none) {
+                visibility: visible;
+            }
+
+            // Вид — через кнопки списка: материальный набор рисует плашку первого кита.
+            --rt-icon-button-color: var(--rt-list-copy-button-color);
+
+            .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-color-hover: var(--rt-color-text-primary);
+                --rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);
+
+                background-color: var(--rt-list-copy-button-bg);
+            }
+
+            &--position--left {
+                left: var(--rt-space-xs);
+            }
+
+            &--position--right {
+                right: var(--rt-space-xs);
+            }
+
+            &--complete {
+                cursor: not-allowed;
+            }
+
+            &--visible {
+                visibility: visible;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+@layer rt-kit.components {
+    /* rt-data-table-filter-cell — ячейка строки отбора первого кита: кнопка вида сравнения или
+       очистки, за ней поле во всю оставшуюся ширину. Промежуток 8px — ступень sm. Длинное значение
+       не выходит за ячейку: поле кита сжимается и режет текст само. */
+
+    .rt-data-table-filter-cell {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: flex-start;
+        gap: var(--rt-space-sm);
+
+        // Поле отбора первого кита — то же обведённое поле Material, что поиск списка, и берёт его
+        // имена: материальный набор даёт ему 52px, шрифт 16px и цвета темы, свой вид — малое поле.
+        &__field {
+            --rt-input-height-sm: var(--rt-list-search-height);
+            --rt-input-font-size: var(--rt-list-search-font-size);
+            --rt-input-color-border: var(--rt-list-search-color-border);
+            --rt-input-color-bg: var(--rt-list-search-color-bg);
+            --rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);
+            --rt-input-line-height: var(--rt-list-filter-line-height);
+
+            min-width: 0;
+            flex-grow: 1;
+        }
+
+        // Желаемая ширина поля первого кита: середина поля Material — 180px, по краям поля 16px.
+        // По ней таблица делит строку между колонками; места меньше — поле сжимается, как там.
+        // Правило идёт от ячейки к полю: поле само ставит себе ширину 100% тем же весом селектора,
+        // и спор решал бы порядок, в котором страница подключила стили компонентов.
+        & &__field {
+            width: calc(180px + 2 * var(--rt-space-4));
+        }
+
+        // Кнопки вида сравнения и очистки берут размер, форму и цвет кнопок таблицы: материальный
+        // набор рисует их, как первый кит, свой вид оставляет прежними.
+        rt-icon-button {
+            --rt-icon-button-color: var(--rt-list-table-icon-color);
+        }
+
+        .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__icon {
+            min-width: var(--rt-list-table-icon-size);
+            min-height: var(--rt-list-table-icon-size);
+        }
+    }
+}

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

@@ -0,0 +1,111 @@
+@layer rt-kit.components {
+    /* rt-data-table-header-cell — ячейка шапки таблицы первого кита. Размеры первого кита лежат на
+       шкале: промежуток 8px — ступень sm, отступ стрелок 16px — ступень md, значок 24px — размер lg
+       набора. Стрелки порядка — два треугольника первого кита: бока 3px — ступень толстой
+       рамки, высота 5.2px округлена к ступени габарита 4px, зазор между ними — ступень 2xs. */
+
+    .rt-data-table-header-cell {
+        --rt-data-table-header-cell-arrow-side: var(--rt-border-width-thick);
+        --rt-data-table-header-cell-arrow-height: var(--rt-size-1);
+        --rt-data-table-header-cell-focus-shadow: var(--rt-shadow-focus-ring);
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+
+        // Фокус с клавиатуры показывает то же, что наведение: стрелки порядка и кольцо фокуса.
+        &:hover .rt-data-table-header-cell__arrows,
+        &:focus-visible .rt-data-table-header-cell__arrows {
+            visibility: visible;
+        }
+
+        &:focus-visible {
+            box-shadow: var(--rt-data-table-header-cell-focus-shadow);
+            outline: none;
+        }
+
+        &__label {
+            display: flex;
+            flex-grow: 1;
+            align-items: center;
+            gap: var(--rt-space-sm);
+
+            &--align--left {
+                justify-content: flex-start;
+            }
+
+            &--align--center {
+                justify-content: center;
+            }
+
+            &--align--right {
+                justify-content: flex-end;
+            }
+        }
+
+        &__prefix,
+        &__suffix {
+            display: inline-flex;
+            min-width: fit-content;
+        }
+
+        /* Глиф Material Symbols для имени без пары — лигатура шрифта, который подключает
+           приложение; размер 24px — размер lg значка кита, как у ячейки. */
+        &__glyph {
+            display: inline-block;
+            overflow: hidden;
+            width: var(--rt-size-6);
+            font-family: 'Material Symbols Outlined', sans-serif;
+            font-feature-settings: 'liga';
+            font-size: var(--rt-size-6);
+            font-style: normal;
+            font-weight: var(--rt-font-weight-regular);
+            letter-spacing: normal;
+            line-height: 1;
+            text-transform: none;
+            white-space: nowrap;
+
+            &--filled {
+                font-variation-settings: 'FILL' 1;
+            }
+        }
+
+        /* Подпись длиннее места обрезается многоточием; целиком её читают в подсказке колонки. */
+        &__text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &__arrows {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-left: var(--rt-space-md);
+            visibility: hidden;
+
+            &--active {
+                visibility: visible;
+            }
+        }
+
+        &__arrow {
+            width: 0;
+            height: 0;
+            border-right: var(--rt-data-table-header-cell-arrow-side) solid transparent;
+            border-bottom: var(--rt-data-table-header-cell-arrow-height) solid var(--rt-color-text-muted);
+            border-left: var(--rt-data-table-header-cell-arrow-side) solid transparent;
+
+            &--second {
+                margin-top: var(--rt-space-2xs);
+                transform: scaleY(-1);
+            }
+
+            &--active {
+                border-bottom-color: var(--rt-color-text-primary);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,263 @@
+@layer rt-kit.components {
+    /* rt-data-table — таблица первого кита во втором. Размеры первого кита положены на шкалу:
+       высота строки 48px — ступень роста контрола lg, поля ячейки 10px собраны из ступеней 2 и 0-5,
+       место под полосу действий 64px — ступень 3xl, поля ячейки отбора 4px и 8px — ступени xs и
+       sm. Подпись шапки 16px — ступень md при межстрочном tight, значение строки 14px — sm.
+       Шапка стоит над строками ярусом sticky шкалы, полоса действий — ярусом base: она в
+       разметке идёт после ячеек и потому рисуется поверх них. */
+
+    .rt-data-table {
+        --rt-data-table-row-height: var(--rt-control-height-lg);
+        --rt-data-table-head-height: calc(var(--rt-control-height-lg) - var(--rt-space-1));
+        --rt-data-table-border-width: var(--rt-border-width-thin);
+        --rt-data-table-cell-padding: calc(var(--rt-space-2) + var(--rt-space-0-5));
+        --rt-data-table-row-transition-duration: var(--rt-duration-base);
+
+        /* Нижний отступ списка стоит внутри прокрутки: таблица и есть область прокрутки. */
+        --rt-data-table-padding-bottom: var(--rt-list-content-padding-bottom);
+
+        /* Шапку перекрашивает приложение, как в первом ките: цвет и насыщенность подписи, фон
+           строки отбора. Фон строки отбора, как в первом ките, считается от фона шапки: половина
+           шапки, половина поверхности — перекрашенная шапка тянет строку отбора за собой. */
+        --rt-data-table-head-color: var(--rt-color-text-primary);
+        --rt-data-table-head-font-weight: var(--rt-font-weight-medium);
+        --rt-data-table-filter-bg: color-mix(in srgb, var(--rt-color-table-head-bg), var(--rt-color-bg-surface) 50%);
+
+        display: block;
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        padding-bottom: var(--rt-data-table-padding-bottom);
+
+        /* Стандартные свойства полосы тоже приходят с корня. Chrome при заданном стандартном
+           свойстве не читает `::-webkit-scrollbar`, и нулевой размер оттуда полосу не прятал: список
+           ставит `none`, когда скрыты обе полосы, и `auto`, когда одна. Без его выбора — тихая
+           полоса основы кита, повторённая здесь с теми же приметами наведения и фокуса. */
+        scrollbar-color: var(--rt-data-table-scrollbar-color, transparent transparent);
+        scrollbar-width: var(--rt-data-table-scrollbar-width, thin);
+
+        /* Размер полос прокрутки приходит с корня страницы: туда его ставит список по
+           сохранённой настройке. Своего объявления на блоке нет намеренно — оно победило бы
+           унаследованное, и выбор человека до таблицы не дошёл бы. Без списка полосы кита
+           обычные: запасное значение — та же ступень, что в основе. */
+        &::-webkit-scrollbar {
+            width: var(--rt-data-table-scrollbar-vertical-width, var(--rt-size-3));
+            height: var(--rt-data-table-scrollbar-horizontal-height, var(--rt-size-3));
+        }
+
+        &:hover,
+        &:focus-within {
+            scrollbar-color: var(--rt-data-table-scrollbar-color, var(--rt-color-border-default) transparent);
+        }
+
+        @media (hover: none) {
+            scrollbar-color: var(--rt-data-table-scrollbar-color, var(--rt-color-border-default) transparent);
+        }
+
+        &__table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        thead {
+            position: sticky;
+            z-index: var(--rt-z-sticky);
+            top: 0;
+
+            /* Шапка первого кита — 44px: ступени такой нет, и она собрана из ступени lg без ступени 1.
+               Высоту держит строка, а не поля ячейки: поля первого кита 10px на шкалу не ложатся. */
+            tr:first-child {
+                height: var(--rt-data-table-head-height);
+            }
+
+            tr:last-child {
+                border-bottom: var(--rt-data-table-border-width) solid var(--rt-color-border-default);
+            }
+        }
+
+        tbody {
+            font-size: var(--rt-text-sm);
+        }
+
+        &__row {
+            height: var(--rt-data-table-row-height);
+            border-bottom: var(--rt-data-table-border-width) solid var(--rt-color-border-subtle);
+            color: var(--rt-color-text-primary);
+            transform: translate(0);
+
+            &:hover {
+                border-bottom-color: var(--rt-color-state-info);
+                transition: border-bottom-color var(--rt-data-table-row-transition-duration);
+            }
+
+            &:hover .rt-data-table-actions {
+                visibility: visible;
+            }
+
+            &--active {
+                border-bottom-color: var(--rt-color-state-info);
+            }
+
+            &--clickable {
+                cursor: pointer;
+            }
+        }
+
+        /* Ячейка шапки не ловит указатель вовсе: у первого кита нажимаются только сортируемая
+           ячейка, ячейка отбора и ячейка выбора. */
+        &__cell {
+            width: fit-content;
+            height: 100%;
+            padding: var(--rt-data-table-cell-padding);
+
+            &--head {
+                position: relative;
+                background-color: var(--rt-color-table-head-bg);
+                color: var(--rt-data-table-head-color);
+                font-size: var(--rt-text-md);
+                font-weight: var(--rt-data-table-head-font-weight);
+                line-height: var(--rt-leading-tight);
+                pointer-events: none;
+                text-align: start;
+            }
+
+            &--sortable,
+            &--selectable,
+            &--filterable {
+                pointer-events: auto;
+            }
+
+            /* Чекбокс и радиокнопка — строчные хосты: в строке текста они встают на базовую линию,
+               и место под выносными поднимает их на 2px над серединой ячейки. Блочный хост строки
+               текста не заводит, и ячейка ставит его по своей середине. */
+            &--selectable > rt-checkbox,
+            &--selectable > rt-radio-button {
+                display: flex;
+            }
+
+            &--filterable {
+                padding: var(--rt-space-xs) var(--rt-space-sm);
+                background-color: var(--rt-data-table-filter-bg);
+            }
+
+            /* Поля отбора первого кита — обведённые поля Material со скруглением 4px, а не
+               скругление контрола материального набора: то круглее, и поля выходили таблетками. */
+            :is(.rt-preset-material, [data-preset='material']) &--filterable {
+                --rt-input-radius: var(--rt-radius-sm);
+            }
+
+            /* Разделитель между ячейками шапки — полоса в половину высоты, как у первого кита. Цвет —
+               имя таблицы списка: материальный набор берёт его из темы Material, иначе под тёмной
+               темой Material разделитель сливается с фоном шапки. */
+            &--head:not(:last-child, .rt-data-table__cell--selectable, .rt-data-table__cell--empty):after {
+                position: absolute;
+                top: 25%;
+                right: 0;
+                height: 50%;
+                border-right: var(--rt-data-table-border-width) solid var(--rt-list-table-head-divider-color);
+                content: '';
+                pointer-events: none;
+            }
+
+            /* Место под полосу действий: ширину ячейке ставит сама таблица по ширине полосы. */
+            &--spacer {
+                padding: 0;
+            }
+        }
+    }
+
+    /* Полоса действий висит над концом строки и проявляется наведением; там, где наведения нет,
+       она видна всегда. Левый край растворяется в фоне — приём первого кита. */
+    // Полоса действий занимает строку целиком: строка с картинкой или длинной подписью выше обычной,
+    // и полоса высотой в обычную строку оставляла её низ открытым.
+    // Фон полосы — ручка приложения `--rt-table-actions-bg`, как
+    // `--rt-table-actions-container-background-color` первого кита: полоса стоит на фоне строки, а
+    // фон строки приложение задаёт своим. Без ручки полоса берёт фон поверхности.
+    .rt-data-table-actions {
+        --rt-data-table-actions-bg: var(--rt-table-actions-bg, var(--rt-color-bg-surface));
+
+        position: absolute;
+        z-index: var(--rt-z-base);
+        top: 0;
+        right: 0;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: flex-end;
+        pointer-events: none;
+
+        &__container {
+            position: sticky;
+            right: 0;
+            display: flex;
+            overflow: hidden;
+            width: fit-content;
+            height: calc(100% - var(--rt-data-table-border-width) * 2);
+            align-items: center;
+            justify-content: flex-end;
+            padding: 0 var(--rt-space-xs) 0 var(--rt-space-5);
+            background: linear-gradient(
+                to right,
+                transparent 0%,
+                color-mix(in srgb, var(--rt-data-table-actions-bg) 30%, transparent) 10%,
+                var(--rt-data-table-actions-bg) 20%,
+                var(--rt-data-table-actions-bg) 100%
+            );
+            gap: var(--rt-space-xs);
+            pointer-events: none;
+        }
+
+        /* Сама полоса указателя не ловит — нажатие сквозь неё доходит до строки; ловят его
+           кнопки, которые в ней стоят: и меню строки, и действия приложения рядом с ним. */
+        &__container > * {
+            pointer-events: auto;
+        }
+
+        &__action {
+            position: sticky;
+        }
+
+        // Действия строки — меню кита и кнопки приложения — берут размер, форму и цвет кнопок таблицы.
+        rt-icon-button {
+            --rt-icon-button-color: var(--rt-list-table-icon-color);
+        }
+
+        .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__icon {
+            min-width: var(--rt-list-table-icon-size);
+            min-height: var(--rt-list-table-icon-size);
+        }
+
+        /* Полоса прячется прозрачностью, а не `visibility`: скрытая так кнопка остаётся в порядке
+           обхода, и фокус с клавиатуры до неё доходит — фокус с клавиатуры внутри строки полосу и
+           показывает. Фокус после мыши — не повод: меню строки, закрывшись, возвращает фокус на
+           свою кнопку, нажатие ставит его на флажок строки, и полоса, открытая по `:focus-within`,
+           висела бы над строкой, от которой указатель давно ушёл. Нажатий прозрачная полоса не
+           ловит, пока её не видно. */
+        @media (hover: hover) {
+            &--hidden {
+                opacity: 0;
+            }
+
+            &--hidden &__container > * {
+                pointer-events: none;
+            }
+
+            .rt-data-table__row:hover &--hidden,
+            .rt-data-table__row:has(:focus-visible) &--hidden {
+                opacity: 1;
+            }
+
+            .rt-data-table__row:hover &--hidden &__container > *,
+            .rt-data-table__row:has(:focus-visible) &--hidden &__container > * {
+                pointer-events: auto;
+            }
+        }
+    }
+}

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

@@ -1,5 +1,7 @@
 @layer rt-kit.components {
     .rt-date-picker {
+        --rt-date-picker-fill-radius: var(--rt-radius-sm);
+
         position: relative;
         display: inline-flex;
         width: 100%;
@@ -30,6 +32,17 @@
             border-color: transparent;
         }
 
+        /* Вид «fill» — залитое поле с чертой снизу, как у материального поля первого кита: скругление
+           у него своё и малое — скругление поля бывает «таблеткой», а у залитого поля низ прямой.
+           Объявлен до блоков состояний: фокус, ошибка и «только чтение» идут ниже и
+           перекрывают его рамку. */
+        &--appearance--fill {
+            border-color: transparent;
+            border-radius: var(--rt-date-picker-fill-radius) var(--rt-date-picker-fill-radius) 0 0;
+            border-bottom-color: var(--rt-color-field-fill-underline);
+            background-color: var(--rt-color-bg-surface-subtle-2);
+        }
+
         &--invalid {
             border-color: var(--rt-input-color-border-error);