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

package/src/lib/components/toggle-button-group/rt-toggle-button-group-chips.scss

@@ -0,0 +1,151 @@
+@layer rt-kit.components {
+    /* Признак набора — на предке или на самой группе: приложение ставит его и на тег компонента. */
+    $preset: ':is(.rt-preset-material *, [data-preset="material"] *, .rt-preset-material, [data-preset="material"])';
+
+    /* Вид «чипы», галочка выбранного и недоступный сегмент под набором — отдельный лист стилей
+       компонента: одним листом с основным он перешёл бы порог в 8 КБ на лист, который Angular по
+       умолчанию ставит приложению. Лист подключается после основного, и при равной точности его
+       правила главнее. Свойства значения не дублируют: лист входит в первый пакет приложения, и
+       каждое промежуточное имя стоит ему места.
+
+       Свой вид кита держит высоту, отступы и шрифт сегмента своего размера; набор переназначает их
+       правилом сильнее. Цвета — свойства оформления корня, `--rt-toggle-chip-*`. */
+    rt-toggle-button-group .rt-toggle-button-group__check {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        block-size: var(--rt-size-4);
+        inline-size: var(--rt-size-4);
+    }
+
+    rt-toggle-button-group .rt-toggle-button-group__check-svg {
+        display: block;
+        block-size: 100%;
+        inline-size: 100%;
+        stroke-width: 2px;
+    }
+
+    /* Дорожки нет: пункты стоят отдельно, с просветом и в строку, и между строками. Отключённая
+       группа не бледнеет целиком: каждый её пункт уже нарисован недоступным. */
+    rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group {
+        height: auto;
+        padding: 0;
+        border-radius: 0;
+        background-color: transparent;
+        gap: var(--rt-space-2);
+        opacity: 1;
+    }
+
+    /* Столбик чипов — столбик Material: пункты тянутся на ширину места, а не по своей подписи.
+       Растягивание на всю ширину их высоту не делит: в столбике ось растягивания — высота. В
+       строчном гибком родителе группа берёт его свободную ширину сама. */
+    rt-toggle-button-group.rt-toggle-button-group--chips.rt-toggle-button-group--column {
+        display: flex;
+        flex: 1 1 auto;
+
+        .rt-toggle-button-group {
+            flex: 1 1 auto;
+        }
+
+        .rt-toggle-button-group__button {
+            flex: none;
+        }
+    }
+
+    /* Обводка — внутренней тенью, а не рамкой: у выбранного чипа Material её нет, и рамка сузила
+       бы его на две точки против соседей. Цвет обводки состояние переназначает на самом пункте —
+       там же, где тень собрана, поэтому она его видит. Слой наведения — 8 % цвета текста пункта,
+       обводка недоступного — 32 % его бледного текста, то есть 12 % основного: так их считает
+       Material, и своих имён в наборе токенов им не нужно — каждое имя повторяется там по разу на
+       тему и набор. */
+    rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button {
+        --rt-toggle-chip-edge: var(--rt-toggle-chip-color-border);
+        --rt-toggle-chip-outline: inset 0 0 0 var(--rt-border-width-thin) var(--rt-toggle-chip-edge);
+
+        height: var(--rt-toggle-button-group-height);
+        min-height: 0;
+        box-sizing: border-box;
+        border-radius: var(--rt-toggle-button-group-track-radius);
+        background-color: transparent;
+        box-shadow: var(--rt-toggle-chip-outline);
+        color: var(--rt-toggle-chip-color-text);
+
+        &:hover:not(:disabled) {
+            --rt-toggle-chip-hover: color-mix(in srgb, currentcolor 8%, transparent);
+
+            background-image: linear-gradient(var(--rt-toggle-chip-hover), var(--rt-toggle-chip-hover));
+        }
+
+        /* Наведение сегмента красит текст в основной; чип под курсором держит свой. */
+        &:hover:not(:disabled, .rt-toggle-button-group__button--active) {
+            color: var(--rt-toggle-chip-color-text);
+        }
+
+        &.rt-toggle-button-group__button--active {
+            background-color: var(--rt-toggle-chip-color-bg-selected);
+            color: var(--rt-color-action-primary-on-surface);
+        }
+
+        &:focus-visible {
+            --rt-toggle-chip-focus: var(--rt-toggle-chip-outline), var(--rt-toggle-button-group-focus-shadow);
+
+            box-shadow: var(--rt-toggle-chip-focus);
+        }
+
+        /* Состояние ниже вариантов: недоступный выбранный тоже бледнеет. */
+        &:disabled {
+            --rt-toggle-chip-edge: color-mix(in srgb, currentcolor 32%, transparent);
+
+            color: var(--rt-color-text-disabled);
+        }
+    }
+
+    /* Набор: фильтр-чип Material — 28 px, отступы 12 px, шрифт 14 px / 500 с разрядкой 0.1 px, у
+       выбранного слот галочки 36 px: 6 px, значок 24 px, 6 px. Размер у чипа Material один, и под
+       набором все три размера группы рисуют его. */
+    rt-toggle-button-group.rt-toggle-button-group--chips#{$preset} {
+        /* У чипа Material поле 8 px сверху и снизу, и поля соседних строк не схлопываются: группа
+           на 16 px выше своих строк, строки — через 16 px, пункты в строке — через 8 px. */
+        .rt-toggle-button-group {
+            padding-block: var(--rt-space-2);
+            row-gap: var(--rt-space-4);
+        }
+
+        .rt-toggle-button-group__button {
+            height: 28px;
+            padding: 0 calc(3 * var(--rt-space-1));
+            font-size: var(--rt-text-sm);
+            font-weight: var(--rt-font-weight-medium);
+            letter-spacing: 0.1px;
+            line-height: var(--rt-size-5);
+        }
+
+        /* У выбранного чипа Material обводки нет, текст — on-secondary-container темы; недоступный
+           выбранный сохраняет обводку и бледный текст. */
+        .rt-toggle-button-group__button--active:not(:disabled) {
+            --rt-toggle-chip-edge: transparent;
+
+            color: var(--rt-sys-on-secondary-container, var(--rt-color-text-primary));
+        }
+
+        .rt-toggle-button-group__check {
+            block-size: var(--rt-size-6);
+            inline-size: var(--rt-size-6);
+            margin-inline: calc(-1.5 * var(--rt-space-1)) calc(1.5 * var(--rt-space-1) - var(--rt-toggle-button-group-btn-gap));
+        }
+
+        .rt-toggle-button-group__check-svg {
+            block-size: var(--rt-size-5);
+            inline-size: var(--rt-size-5);
+        }
+    }
+
+    /* Недоступный сегмент под набором бледнеет текстом, как недоступный пункт Material; в своём
+       виде кита он прежний. В отключённой группе бледнеет вся группа, и правило её не трогает. */
+    rt-toggle-button-group#{$preset}:not(.rt-toggle-button-group--chips)
+        .rt-toggle-button-group:not(.rt-toggle-button-group--disabled)
+        .rt-toggle-button-group__button:disabled {
+        color: var(--rt-color-text-disabled);
+    }
+}

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -115,12 +115,47 @@
             &--disabled {
                 opacity: 0.5;
             }
+
+            /* Перенос и столбик: дорожка растёт по сегментам, а сегмент держит высоту строки
+               прежней раскладки. Между строками — тот же просвет, что и внутри дорожки. */
+            &--wrap,
+            &--column {
+                height: auto;
+                gap: var(--rt-toggle-button-group-track-padding);
+
+                .rt-toggle-button-group__button {
+                    min-height: calc(var(--rt-toggle-button-group-height) - 2 * var(--rt-toggle-button-group-track-padding));
+                }
+            }
+
+            &--wrap {
+                flex-wrap: wrap;
+            }
+
+            &--column {
+                flex-direction: column;
+
+                .rt-toggle-button-group__button {
+                    justify-content: flex-start;
+                }
+            }
         }
 
         /* Шаг входа `radius` переназначает скругление дорожки; сегменты держат своё. */
         @include kv.radius-steps('--rt-toggle-button-group-track-radius');
     }
 
+    /* Перенос: хост занимает строку контейнера, и дорожка, не влезшая в неё, сжимается до его
+       ширины — тогда сегменты уходят на следующую строку. Фон дорожки по-прежнему по сегментам. */
+    rt-toggle-button-group.rt-toggle-button-group--wrap {
+        display: flex;
+
+        .rt-toggle-button-group {
+            min-width: 0;
+            flex: 0 1 auto;
+        }
+    }
+
     /* full-width: группа растягивается на контейнер, опции делят ширину поровну. */
     rt-toggle-button-group.rt-toggle-button-group--full-width {
         display: flex;

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

@@ -11,6 +11,7 @@
 | `rtTooltipPlacement`     | `'top' \| 'bottom' \| 'left' \| 'right' \| null` | `null` — сверху, под материальным набором снизу |
 | `rtTooltipWhenTruncated` | `boolean`                                        | `false` — подсказка только у обрезанного текста |
 | `rtTooltipHideOnClick`   | `boolean`                                        | `true` — клик прячет открытую подсказку         |
+| `rtTooltipShowDelay`     | `number \| null`                                 | `null` — задержка из настроек кита, без них 300 |
 
 Выходов нет. Панель — `rt-tooltip` в оверлее CDK, `role="tooltip"`.
 
@@ -22,7 +23,8 @@ no-op, а не пустая панель под курсором. Поэтому
 сам — так `[rtTooltip]="value | date"` не ломает строгую типизацию шаблона.
 
 **Подсказка появляется с задержкой 300 мс.** Она гасит мелькание при быстром проходе курсора по
-ряду кнопок. Уход курсора до истечения задержки не показывает ничего.
+ряду кнопок. Уход курсора до истечения задержки не показывает ничего. Общую задержку меняет
+`showDelay` в настройках кита, задержку одной подсказки — `rtTooltipShowDelay`.
 
 ## Как этим пользоваться
 
@@ -31,6 +33,10 @@ no-op, а не пустая панель под курсором. Поэтому
 - У переключателя ставят `rtTooltipHideOnClick="false"`: клик оставляет подсказку, а новый текст
   `[rtTooltip]` («Включить» → «Выключить») появляется в открытой панели на месте. Отложенный показ клик
   снимает при любом значении, поэтому касание на тач-экране подсказку не показывает.
+- Приложение, которому клик не должен прятать ни одну подсказку, задаёт это один раз:
+  `provideRtKit({ components: { tooltip: { hideOnClick: false } } })`. Там же `placement` и
+  `showDelay`. Вход на элементе перебивает настройку. Сторона из настроек применяется и тогда, когда
+  обёртка кита передала `null`: настройка читается при выборе стороны, а не умолчанием входа.
 - Смена текста при открытой подсказке меняет его на месте при любом значении входа; пустой текст её
   прячет.
 - Фокус, поставленный мышью или кодом, подсказку не показывает: меню возвращает фокус кнопке после

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

@@ -75,7 +75,7 @@
             --rt-tree-row-min-height: var(--rt-size-8);
             --rt-tree-row-box-sizing: border-box;
             --rt-tree-row-radius: var(--rt-radius-ms);
-            --rt-tree-guide-color: var(--mat-sys-outline-variant, var(--rt-color-border-subtle));
+            --rt-tree-guide-color: var(--rt-sys-outline-variant, var(--rt-color-border-subtle));
             --rt-tree-toggle-color: var(--rt-color-action-primary);
             --rt-tree-leaf-space-display: none;
             --rt-tree-check-size: calc(var(--rt-size-4) - 2 * var(--rt-input-border-width));
@@ -83,7 +83,7 @@
             --rt-tree-match-bg: var(--rt-mat-yellow-100);
             --rt-tree-match-font-weight: var(--rt-font-weight-semibold);
             --rt-tree-count-bg: var(--rt-color-action-primary);
-            --rt-tree-count-color: var(--mat-sys-on-primary, var(--rt-color-text-inverse));
+            --rt-tree-count-color: var(--rt-sys-on-primary, var(--rt-color-text-inverse));
             --rt-tree-count-font-size: var(--rt-text-xs);
             --rt-tree-count-padding-inline: calc(var(--rt-space-1) + var(--rt-space-0-5));
             --rt-tree-count-min-size: var(--rt-size-5);

package/src/styles/_color-scheme.scss

@@ -14,7 +14,7 @@
    and the assignments are declared on the root: a scheme on an inner node would change the steps under
    assignments already resolved, and the piece would keep the old accent.
 
-   A Material theme of the application wins over the scheme in the material set: its `--mat-sys-primary`
+   A Material theme of the application wins over the scheme in the material set: its `--rt-sys-primary`
    stands in front of the step in that set's assignments.
 
    Usage:

package/src/styles/_density.scss

@@ -0,0 +1,48 @@
+/* Плотность полей материального набора — как плотность Material: каждый шаг вниз снимает с
+   высоты поля 4 px, от 56 px при нуле до 36 px при −5. Шаг назначает атрибут `data-rt-density`
+   на самом поле или на любом его предке: на предке он действует на все поля внутри.
+
+   Атрибут ставит не высоту, а число шагов — свойство `--rt-input-density`, и оно наследуется.
+   Высоту считает материальный набор на своём узле из унаследованного шага. Поэтому атрибут на корне
+   приложения доходит и до поля, у которого свой признак набора: набор на поле пересчитывает высоту
+   из того же шага, а не возвращает 56 px.
+
+   Узел с атрибутом ниже узла с набором пересчитывает высоту сам: набор вычислил её на своём узле, и
+   шаг, назначенный ниже, туда не доходит. Высоту поля читает десяток компонентов, и все они получают
+   её отсюда, не зная о плотности.
+
+   В своём виде кита атрибут ничего не делает: шкалу высот там задаёт вход `size`, а шаг без набора
+   никто не читает. */
+
+@use 'sass:math';
+
+$-material-flag: ".rt-preset-material, [data-preset='material']";
+$-material-height: var(--rt-input-height-app, calc(var(--rt-size-12) + var(--rt-size-2) - var(--rt-input-density) * var(--rt-size-1)));
+
+/* Шаг плотности не объявлен в наборе назначений: островок набора объявляет весь набор заново на своём
+   узле и сбросил бы шаг, пришедший с предка, в ноль. Начальный ноль даёт регистрация свойства — она
+   ничего не объявляет на узлах, и шаг предка наследуется сквозь любой признак набора. */
+@property --rt-input-density {
+    inherits: true;
+    initial-value: 0;
+    syntax: '<number>';
+}
+
+/* rt-layer-outside: высоту объявляет материальный набор вне слоёв, в `_preset-material.scss`, а
+   объявление вне слоя сильнее любого слоистого. В слое `rt-kit.components` плотность проигрывала бы
+   набору на том же узле — атрибут рядом с признаком набора ничего бы не менял. Плотность стоит вне
+   слоя и после набора, поэтому выигрывает местом. Островок темы с набором на том же узле объявляет
+   назначения правилом с `:not(:root)` — на один шаг сильнее; третий селектор равен ему по силе и
+   выигрывает тем же местом. */
+@each $step in (0, -1, -2, -3, -4, -5) {
+    [data-rt-density='#{$step}'] {
+        --rt-input-density: #{math.abs($step)};
+    }
+}
+
+:where(#{$-material-flag}) [data-rt-density],
+:is(#{$-material-flag})[data-rt-density],
+:is(#{$-material-flag})[data-rt-density]:not(:root) {
+    --rt-input-height-md: #{$-material-height};
+    --rt-input-height: var(--rt-input-height-md);
+}

package/src/styles/_index.scss

@@ -29,6 +29,10 @@
 // Местный кусок темы стоит последним из наборов свойств: его правила обязаны выигрывать у
 // корневых, а выигрывают они местом, а не силой селектора.
 @forward './theme-scope';
+
+// Плотность полей материального набора: атрибут на поле или на предке переобъявляет высоту на
+// своём узле. Без этой строки атрибут ставится в разметку и ничего не меняет.
+@forward './density';
 @forward './scrollbar';
 
 // Раскладка экрана входа: она объявлена классами, а не компонентом, поэтому доехать до
@@ -51,3 +55,7 @@
 // Стили волны нажатия — по той же причине: директива своего представления не имеет.
 // Без этой строки узел волны ставится в разметку и остаётся невидимым.
 @forward '../lib/components/ripple/rt-ripple.directive';
+
+// Стили пузырька `rtBadge` — по той же причине: директива ставит узел, а правил у него без этой
+// строки нет, и число рисуется голым текстом в конце хоста.
+@forward '../lib/components/badge/rt-badge.directive';