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

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

@@ -11,13 +11,13 @@
 Свои входы поверх общих из [`RtFormControlBase`](../form-control/CONTEXT.md)
 (`size`, `disabled`, `controlId`, `ariaLabel`, `clearable`, `bordered`):
 
-| вход                     | тип                                         | умолчание |
-| ------------------------ | ------------------------------------------- | --------- |
-| `type`                   | `'text' \| 'password' \| 'email' \| 'time'` | `'text'`  |
-| `placeholder`            | `string`                                    | `''`      |
-| `iconLeft` / `iconRight` | `IRtIcon.Name \| null`                      | `null`    |
-| `passwordToggle`         | `boolean`                                   | `false`   |
-| `autocomplete`           | `string \| null`                            | `null`    |
+| вход                     | тип                                                  | умолчание |
+| ------------------------ | ---------------------------------------------------- | --------- |
+| `type`                   | `'text' \| 'password' \| 'email' \| 'time' \| 'url'` | `'text'`  |
+| `placeholder`            | `string`                                             | `''`      |
+| `iconLeft` / `iconRight` | `IRtIcon.Name \| null`                               | `null`    |
+| `passwordToggle`         | `boolean`                                            | `false`   |
+| `autocomplete`           | `string \| null`                                     | `null`    |
 
 Значение — `string`.
 
@@ -32,6 +32,8 @@
 
 ## Как этим пользоваться
 
+- `type="url"` объявляет браузеру род значения, а не требование к нему: на телефоне он даёт
+  клавиатуру для адреса и разбор вставленного, а проверка введённого остаётся за приложением.
 - `type="time"` заведён намеренно: браузер сам отдаёт `HH:MM` и раскладку под локаль, а разбор
   строки руками означал бы своё поле ввода времени рядом с китом.
 - Клик по рамке (падинги принадлежат host-у, а не `<input>`) переводит фокус в поле — кроме

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

@@ -1,120 +1,124 @@
-.rt-input {
-    position: relative;
-    display: inline-flex;
-    width: 100%;
-    min-height: var(--rt-input-height);
-    box-sizing: border-box;
-    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);
-    background-color: var(--rt-input-color-bg);
-    color: var(--rt-input-color-text);
-    cursor: text;
-    font-size: var(--rt-input-font-size);
-    gap: var(--rt-space-sm);
-    line-height: var(--rt-input-line-height);
-    transition: var(--rt-input-transition);
-
-    &:focus-within {
-        border-color: var(--rt-input-color-border-focus);
-        box-shadow: var(--rt-input-focus-shadow);
-        outline: 2px solid transparent;
-        outline-offset: var(--rt-input-focus-outline-offset);
-    }
-
-    /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
-       ниже по source-order и перекрывают её своей рамкой. */
-    &--borderless {
-        border-color: transparent;
-    }
+@layer rt-kit.components {
+    .rt-input {
+        --rt-input-toggle-radius: var(--rt-radius-sm);
 
-    &--invalid {
-        border-color: var(--rt-input-color-border-error);
+        position: relative;
+        display: inline-flex;
+        width: 100%;
+        min-height: var(--rt-input-height);
+        box-sizing: border-box;
+        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);
+        background-color: var(--rt-input-color-bg);
+        color: var(--rt-input-color-text);
+        cursor: text;
+        font-size: var(--rt-input-font-size);
+        gap: var(--rt-space-sm);
+        line-height: var(--rt-input-line-height);
+        transition: var(--rt-input-transition);
 
         &:focus-within {
-            box-shadow: var(--rt-input-focus-shadow-error);
+            border-color: var(--rt-input-color-border-focus);
+            box-shadow: var(--rt-input-focus-shadow);
+            outline: 2px solid transparent;
+            outline-offset: var(--rt-input-focus-outline-offset);
         }
-    }
 
-    &--disabled {
-        cursor: not-allowed;
-        opacity: var(--rt-input-disabled-opacity);
-    }
+        /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
+           ниже по source-order и перекрывают её своей рамкой. */
+        &--borderless {
+            border-color: transparent;
+        }
 
-    &--size--sm {
-        min-height: var(--rt-input-height-sm);
-    }
+        &--invalid {
+            border-color: var(--rt-input-color-border-error);
 
-    &--size--lg {
-        min-height: var(--rt-input-height-lg);
-    }
+            &:focus-within {
+                box-shadow: var(--rt-input-focus-shadow-error);
+            }
+        }
 
-    /* Read-only: контрол превращается в плоский текст — снимаем рамку/фон/паддинги,
-       чтобы значение читалось как обычный текст под label'ом rt-field. */
-    &--readonly {
-        padding-right: 0;
-        padding-left: 0;
-        border-color: transparent;
-        background-color: transparent;
-        cursor: default;
-    }
+        &--disabled {
+            cursor: not-allowed;
+            opacity: var(--rt-input-disabled-opacity);
+        }
 
-    &__readonly {
-        color: var(--rt-field-value-color);
-        font-size: var(--rt-field-value-font-size);
+        &--size--sm {
+            min-height: var(--rt-input-height-sm);
+        }
 
-        &--empty {
-            color: var(--rt-field-value-empty-color);
+        &--size--lg {
+            min-height: var(--rt-input-height-lg);
         }
-    }
 
-    &__field {
-        min-width: 0;
-        flex: 1 1 auto;
-        padding: 0;
-        border: none;
-        background: transparent;
-        color: inherit;
-        font: inherit;
-        outline: none;
-
-        &::placeholder {
-            color: var(--rt-input-color-text-placeholder);
-            opacity: 1;
+        /* Read-only: контрол превращается в плоский текст — снимаем рамку/фон/паддинги,
+           чтобы значение читалось как обычный текст под label'ом rt-field. */
+        &--readonly {
+            padding-right: 0;
+            padding-left: 0;
+            border-color: transparent;
+            background-color: transparent;
+            cursor: default;
         }
 
-        &:disabled {
-            cursor: not-allowed;
+        &__readonly {
+            color: var(--rt-field-value-color);
+            font-size: var(--rt-field-value-font-size);
+
+            &--empty {
+                color: var(--rt-field-value-empty-color);
+            }
         }
-    }
 
-    &__icon-left,
-    &__icon-right,
-    &__clear {
-        flex-shrink: 0;
-    }
+        &__field {
+            min-width: 0;
+            flex: 1 1 auto;
+            padding: 0;
+            border: none;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            outline: none;
+
+            &::placeholder {
+                color: var(--rt-input-color-text-placeholder);
+                opacity: 1;
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+            }
+        }
 
-    &__toggle {
-        display: inline-flex;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: center;
-        padding: var(--rt-space-1);
-        border: none;
-        border-radius: var(--rt-radius-sm);
-        margin: 0;
-        background: transparent;
-        color: inherit;
-        cursor: pointer;
-
-        &:hover {
-            background-color: var(--rt-input-color-bg-hover);
+        &__icon-left,
+        &__icon-right,
+        &__clear {
+            flex-shrink: 0;
         }
 
-        &:focus-visible {
-            outline: var(--rt-input-border-width) solid var(--rt-input-color-border-focus);
-            outline-offset: var(--rt-input-focus-outline-offset);
+        &__toggle {
+            display: inline-flex;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-space-1);
+            border: none;
+            border-radius: var(--rt-input-toggle-radius);
+            margin: 0;
+            background: transparent;
+            color: inherit;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--rt-input-color-bg-hover);
+            }
+
+            &:focus-visible {
+                outline: var(--rt-input-border-width) solid var(--rt-input-color-border-focus);
+                outline-offset: var(--rt-input-focus-outline-offset);
+            }
         }
     }
 }

package/src/lib/components/input-number/rt-input-number.component.scss

@@ -1,102 +1,104 @@
-.rt-input-number {
-    position: relative;
-    display: inline-flex;
-    width: 100%;
-    min-height: var(--rt-input-height);
-    box-sizing: border-box;
-    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);
-    background-color: var(--rt-input-color-bg);
-    color: var(--rt-input-color-text);
-    cursor: text;
-    font-size: var(--rt-input-font-size);
-    gap: var(--rt-space-sm);
-    line-height: var(--rt-input-line-height);
-    transition: var(--rt-input-transition);
+@layer rt-kit.components {
+    .rt-input-number {
+        position: relative;
+        display: inline-flex;
+        width: 100%;
+        min-height: var(--rt-input-height);
+        box-sizing: border-box;
+        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);
+        background-color: var(--rt-input-color-bg);
+        color: var(--rt-input-color-text);
+        cursor: text;
+        font-size: var(--rt-input-font-size);
+        gap: var(--rt-space-sm);
+        line-height: var(--rt-input-line-height);
+        transition: var(--rt-input-transition);
 
-    &:focus-within {
-        border-color: var(--rt-input-color-border-focus);
-        box-shadow: var(--rt-input-focus-shadow);
-        outline: 2px solid transparent;
-        outline-offset: var(--rt-input-focus-outline-offset);
-    }
+        &:focus-within {
+            border-color: var(--rt-input-color-border-focus);
+            box-shadow: var(--rt-input-focus-shadow);
+            outline: 2px solid transparent;
+            outline-offset: var(--rt-input-focus-outline-offset);
+        }
 
-    /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
-       ниже по source-order и перекрывают её своей рамкой. */
-    &--borderless {
-        border-color: transparent;
-    }
+        /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
+           ниже по source-order и перекрывают её своей рамкой. */
+        &--borderless {
+            border-color: transparent;
+        }
 
-    &--invalid {
-        border-color: var(--rt-input-color-border-error);
+        &--invalid {
+            border-color: var(--rt-input-color-border-error);
 
-        &:focus-within {
-            box-shadow: var(--rt-input-focus-shadow-error);
+            &:focus-within {
+                box-shadow: var(--rt-input-focus-shadow-error);
+            }
         }
-    }
 
-    &--disabled {
-        cursor: not-allowed;
-        opacity: var(--rt-input-disabled-opacity);
-    }
+        &--disabled {
+            cursor: not-allowed;
+            opacity: var(--rt-input-disabled-opacity);
+        }
 
-    &--size--sm {
-        min-height: var(--rt-input-height-sm);
-    }
+        &--size--sm {
+            min-height: var(--rt-input-height-sm);
+        }
 
-    &--size--lg {
-        min-height: var(--rt-input-height-lg);
-    }
+        &--size--lg {
+            min-height: var(--rt-input-height-lg);
+        }
 
-    /* Read-only: плоский текст вместо input — снимаем рамку/фон/паддинги. */
-    &--readonly {
-        padding-right: 0;
-        padding-left: 0;
-        border-color: transparent;
-        background-color: transparent;
-        cursor: default;
-    }
+        /* Read-only: плоский текст вместо input — снимаем рамку/фон/паддинги. */
+        &--readonly {
+            padding-right: 0;
+            padding-left: 0;
+            border-color: transparent;
+            background-color: transparent;
+            cursor: default;
+        }
 
-    &__readonly {
-        color: var(--rt-field-value-color);
-        font-size: var(--rt-field-value-font-size);
+        &__readonly {
+            color: var(--rt-field-value-color);
+            font-size: var(--rt-field-value-font-size);
 
-        &--empty {
-            color: var(--rt-field-value-empty-color);
+            &--empty {
+                color: var(--rt-field-value-empty-color);
+            }
         }
-    }
 
-    &__field {
-        min-width: 0;
-        flex: 1 1 auto;
-        padding: 0;
-        border: none;
-        background: transparent;
-        color: inherit;
-        font: inherit;
-        outline: none;
+        &__field {
+            min-width: 0;
+            flex: 1 1 auto;
+            padding: 0;
+            border: none;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            outline: none;
 
-        &::placeholder {
-            color: var(--rt-input-color-text-placeholder);
-            opacity: 1;
-        }
+            &::placeholder {
+                color: var(--rt-input-color-text-placeholder);
+                opacity: 1;
+            }
 
-        &:disabled {
-            cursor: not-allowed;
+            &:disabled {
+                cursor: not-allowed;
+            }
         }
-    }
 
-    &__icon-left,
-    &__prefix,
-    &__clear {
-        flex-shrink: 0;
-    }
+        &__icon-left,
+        &__prefix,
+        &__clear {
+            flex-shrink: 0;
+        }
 
-    /* Текстовый префикс (напр. «₽»): приглушён, неинтерактивен. */
-    &__prefix {
-        color: var(--rt-color-text-muted);
-        user-select: none;
+        /* Текстовый префикс (напр. «₽»): приглушён, неинтерактивен. */
+        &__prefix {
+            color: var(--rt-color-text-muted);
+            user-select: none;
+        }
     }
 }

package/src/lib/components/live-badge/rt-live-badge.component.scss

@@ -1,31 +1,35 @@
-/* rt-live-badge — пилюля живого счётчика в common/ui. ViewEncapsulation.None.
-   Хост адресуется по имени элемента, а не по классу блока: класс `.rt-live-badge` висит
-   и на `<rt-live-badge>`, и на корне шаблона, поэтому правила блока вложены в хост —
-   так они достаются только корню шаблона. */
+@layer rt-kit.components {
+    /* rt-live-badge — пилюля живого счётчика в common/ui. ViewEncapsulation.None.
+       Хост адресуется по имени элемента, а не по классу блока: класс `.rt-live-badge` висит
+       и на `<rt-live-badge>`, и на корне шаблона, поэтому правила блока вложены в хост —
+       так они достаются только корню шаблона. */
 
-rt-live-badge {
-    display: inline-flex;
-
-    .rt-live-badge {
+    rt-live-badge {
         display: inline-flex;
-        align-items: center;
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-sm);
-        gap: var(--rt-space-1);
 
-        &--active .rt-live-badge__dot {
-            background: var(--rt-color-state-success);
-        }
+        .rt-live-badge {
+            --rt-live-badge-dot-radius: var(--rt-radius-full);
 
-        &__dot {
-            width: 8px;
-            height: 8px;
-            border-radius: var(--rt-radius-full);
-            background: var(--rt-color-border-subtle);
-        }
+            display: inline-flex;
+            align-items: center;
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-sm);
+            gap: var(--rt-space-1);
+
+            &--active .rt-live-badge__dot {
+                background: var(--rt-color-state-success);
+            }
+
+            &__dot {
+                width: 8px;
+                height: 8px;
+                border-radius: var(--rt-live-badge-dot-radius);
+                background: var(--rt-color-border-subtle);
+            }
 
-        &__count {
-            color: var(--rt-color-text-primary);
+            &__count {
+                color: var(--rt-color-text-primary);
+            }
         }
     }
 }

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

@@ -1,62 +1,64 @@
-/* rt-logo — логотип приложения.
- *
- * Размеры host'а задаются inline через style.height/width (см. rt-logo.component.ts),
- * а сами начертания приходят свойствами оформления от приложения: кит своего
- * логотипа не имеет и умолчаний тут не ставит.
- *
- * Внутри host'а начертание сверху, слоган под ним ужат по ширине. Начертания
- * лежат фоном, а не в <img>: у тёмной темы своя пара файлов, и подмена
- * background-image — единственный способ переключить их одним правилом.
- */
-.rt-logo {
-    display: inline-block;
-    line-height: 0;
-
-    &__wordmark,
-    &__tagline {
-        display: block;
-        width: 100%;
-        background-position: left center;
-        background-repeat: no-repeat;
-        background-size: contain;
-    }
+@layer rt-kit.components {
+    /* rt-logo — логотип приложения.
+     *
+     * Размеры host'а задаются inline через style.height/width (см. rt-logo.component.ts),
+     * а сами начертания приходят свойствами оформления от приложения: кит своего
+     * логотипа не имеет и умолчаний тут не ставит.
+     *
+     * Внутри host'а начертание сверху, слоган под ним ужат по ширине. Начертания
+     * лежат фоном, а не в <img>: у тёмной темы своя пара файлов, и подмена
+     * background-image — единственный способ переключить их одним правилом.
+     */
+    .rt-logo {
+        display: inline-block;
+        line-height: 0;
 
-    &__wordmark {
-        height: 100%;
-        background-image: var(--rt-logo-wordmark, none);
-    }
+        &__wordmark,
+        &__tagline {
+            display: block;
+            width: 100%;
+            background-position: left center;
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
 
-    &__tagline {
-        background-image: var(--rt-logo-tagline, none);
-    }
-}
+        &__wordmark {
+            height: 100%;
+            background-image: var(--rt-logo-wordmark, none);
+        }
 
-/* Тёмная тема: тёмная надпись на тёмной поверхности не читается, поэтому берётся
-   вариант со светлым ink. Не задали пару — остаётся то же начертание. */
-[data-theme='dark'] .rt-logo {
-    &__wordmark {
-        background-image: var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none));
+        &__tagline {
+            background-image: var(--rt-logo-tagline, none);
+        }
     }
 
-    &__tagline {
-        background-image: var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none));
+    /* Тёмная тема: тёмная надпись на тёмной поверхности не читается, поэтому берётся
+       вариант со светлым ink. Не задали пару — остаётся то же начертание. */
+    [data-theme='dark'] .rt-logo {
+        &__wordmark {
+            background-image: var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none));
+        }
+
+        &__tagline {
+            background-image: var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none));
+        }
     }
-}
 
-/* Композиция lockup: начертание и слоган стоят колонкой и делят высоту host'а.
-   Пропорция та же, что у пары в макете: ~66.7% начертанию, ~22.1% слогану,
-   остальное — зазор между ними. */
-.rt-logo:has(.rt-logo__tagline) {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: space-between;
-}
+    /* Композиция lockup: начертание и слоган стоят колонкой и делят высоту host'а.
+       Пропорция та же, что у пары в макете: ~66.7% начертанию, ~22.1% слогану,
+       остальное — зазор между ними. */
+    .rt-logo:has(.rt-logo__tagline) {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: space-between;
+    }
 
-.rt-logo:has(.rt-logo__tagline) .rt-logo__wordmark {
-    height: 66.7%;
-}
+    .rt-logo:has(.rt-logo__tagline) .rt-logo__wordmark {
+        height: 66.7%;
+    }
 
-.rt-logo:has(.rt-logo__tagline) .rt-logo__tagline {
-    height: 22.1%;
+    .rt-logo:has(.rt-logo__tagline) .rt-logo__tagline {
+        height: 22.1%;
+    }
 }