@rt-tools/ui-kit-v2 0.3.0 → 0.5.0

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

@@ -32,8 +32,8 @@
   вовсе — радиус берётся из `shape`.
 - Палитра дублируется атрибутом `data-severity` — по нему тег находят проверки и внешние стили,
   не завязываясь на BEM-класс.
-- Подпись крестика для скринридера берётся из словаря кита (`rtKit.uiRemove`). Без
-  `provideRtKitTranslations()` там будет пусто.
+- Подпись крестика для скринридера берётся из словаря кита (`uiRemove`). Без
+  `provideRtKitLabels()` там будет пусто.
 
 ## Края
 

package/src/lib/components/theme-toggle/CONTEXT.md

@@ -23,6 +23,6 @@
 
 ## Края
 
-- Подпись берётся из словаря кита (`rtKit.themeToggleLabel`) и вычисляется один раз при создании.
+- Подпись берётся из словаря кита (`themeToggleLabel`) и вычисляется один раз при создании.
 - В тестах между случаями надо чистить хранилище: иначе выбор предыдущего теста становится
   начальным состоянием следующего.

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

@@ -43,6 +43,14 @@ this.#notifications.error('Не удалось сохранить', 'danger', {
 - `meta` — приписка над сообщением (номер заявки), `description` — вторая строка под ним.
 - Положение раскладывается на два модификатора: `rt-toaster--y--bottom` и `rt-toaster--x--right`.
 
+## Края
+
+- **Нулевая длительность не значит «висит, пока не закроют».** `duration: 0` — это таймер на
+  ноль миллисекунд: тост гасит себя сразу после первой отрисовки. Держать его открытым умеет
+  только пауза таймера — признак `interacting` либо развёрнутая стопка.
+- **В матрице каждому тосту ставится `[interacting]="true"`.** Иначе ячейки гаснут одна за
+  другой, пока смотришь на показ, и кадр снимается с пустой сетки.
+
 ## Доступность
 
 Стопка — `role="region"` с переведённой подписью, каждый тост — `role="status"` с

package/src/lib/components/toggle-switch/rt-toggle-switch.component.scss

@@ -63,7 +63,11 @@ rt-toggle-switch .rt-toggle-switch {
             box-shadow var(--rt-duration-fast) ease;
     }
 
-    &--on &__track {
+    /* Элемент адресуется классом, а не вторым `&`: родитель здесь составной
+       (`rt-toggle-switch .rt-toggle-switch`), и второй `&` развернулся бы в него целиком —
+       то есть в селектор, требующий вложенного переключателя. Включённое состояние
+       из-за этого не применялось: трек оставался серым, бегунок — слева. */
+    &--on .rt-toggle-switch__track {
         background: var(--rt-toggle-color-track-on);
         box-shadow: none;
     }
@@ -97,7 +101,7 @@ rt-toggle-switch .rt-toggle-switch {
         transition: transform var(--rt-duration-fast) ease;
     }
 
-    &--on &__thumb {
+    &--on .rt-toggle-switch__thumb {
         transform: translateX(var(--rt-toggle-thumb-travel));
     }
 }

package/src/styles/_semantic.scss

@@ -1,6 +1,11 @@
-/* Semantic design tokens — light defaults. */
+/* Semantic design tokens — light defaults.
 
-:root {
+   Тело вынесено в @mixin по той же причине, что и у тёмной темы: набор нужен не
+   только на `:root`, но и на отдельном контейнере. Без этого светлую половину
+   пары «светлая ↔ тёмная» нельзя показать, пока приложение стоит в тёмной теме, —
+   контейнер унаследует тёмные значения, и обе половины покажут одно и то же. */
+
+@mixin rt-theme-light-tokens {
     /* Background */
     --rt-color-bg-page: var(--rt-neutral-50);
     --rt-color-bg-surface: var(--rt-neutral-0);
@@ -287,6 +292,10 @@
     --rt-field-value-empty-color: var(--rt-color-text-muted);
 }
 
+:root {
+    @include rt-theme-light-tokens;
+}
+
 /* На тач-устройствах инпут не меньше 16px: WebKit (весь iOS, включая Chrome)
    зумит страницу при фокусе на поле с font-size < 16px — отсюда горизонтальный
    сдвиг вёрстки. Десктоп сохраняет плотный 14px. */

package/styles/tokens.css

@@ -192,7 +192,12 @@
   --rt-bp-xl: 1380px;
 }
 
-/* Semantic design tokens — light defaults. */
+/* Semantic design tokens — light defaults.
+
+   Тело вынесено в @mixin по той же причине, что и у тёмной темы: набор нужен не
+   только на `:root`, но и на отдельном контейнере. Без этого светлую половину
+   пары «светлая ↔ тёмная» нельзя показать, пока приложение стоит в тёмной теме, —
+   контейнер унаследует тёмные значения, и обе половины покажут одно и то же. */
 :root {
   /* Background */
   --rt-color-bg-page: var(--rt-neutral-50);
@@ -653,10 +658,16 @@ html.rt-theme-dark .rt-logo {
   --rt-btn-color: var(--rt-color-on-disabled, #6b7280);
   cursor: not-allowed;
 }
+.rt-button {
+  /* `flex-shrink: 0` — иконке заданного размера. Без него в кнопке, которой ширину
+     навязали снаружи (пункт меню `rt-split-button` берёт её от панели), лейбл давит
+     на иконку, и та сжимается до нуля: место занято, а иконки не видно. */
+}
 .rt-button__icon {
   display: inline-flex;
   width: var(--rt-btn-icon-size);
   height: var(--rt-btn-icon-size);
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   font-size: var(--rt-btn-icon-size);