@rt-tools/ui-kit 0.0.19 → 0.0.21

package/src/lib/ui-kit/checkbox/rtui-checkbox.component.scss

@@ -5,22 +5,22 @@
     gap: var(--rt-checkbox-container-gap);
 
     &__input {
-        @include mixins.visually-hidden();
+        @include mixins.visually-hidden;
     }
 
     &__box {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
         width: var(--rt-checkbox-box-width);
         height: var(--rt-checkbox-box-height);
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
         border: var(--rt-checkbox-box-border);
         border-radius: var(--rt-checkbox-box-border-radius);
-        color: var(--rt-checkbox-box-inactive-color);
         background-color: var(--rt-checkbox-box-background-color);
-        transition: border-color 0.15s linear;
+        color: var(--rt-checkbox-box-inactive-color);
         cursor: pointer;
+        transition: border-color 0.15s linear;
 
         svg {
             opacity: 0;
@@ -30,8 +30,8 @@
 
     &__input:checked + &__box,
     &__input:indeterminate + &__box {
-        color: var(--rt-checkbox-box-active-color);
         border-color: var(--rt-checkbox-box-active-color);
+        color: var(--rt-checkbox-box-active-color);
 
         svg {
             opacity: 1;
@@ -39,8 +39,8 @@
     }
 
     &__input:disabled + &__box {
-        color: var(--rt-text-base-disabled);
         border-color: var(--rt-border-neutral-strong);
+        color: var(--rt-text-base-disabled);
         cursor: default;
     }
 
@@ -54,15 +54,15 @@
     }
 
     &__label {
+        color: var(--rt-checkbox-label-color);
         font-size: var(--rt-checkbox-label-font-size);
         font-weight: var(--rt-checkbox-label-font-weight);
-        color: var(--rt-checkbox-label-color);
     }
 
     &__description {
         margin-top: var(--rt-checkbox-description-margin-top);
+        color: var(--rt-checkbox-description-color);
         font-size: var(--rt-checkbox-description-font-size);
         font-weight: var(--rt-checkbox-description-font-weight);
-        color: var(--rt-checkbox-description-color);
     }
 }

package/src/lib/ui-kit/checkbox/stories/component/test-checkbox.component.scss

@@ -1,9 +1,9 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     margin: -1rem;
 }

package/src/lib/ui-kit/dynamic-selectors/components/actions/rtui-dynamic-selector-list-actions.component.scss

@@ -29,14 +29,14 @@ $dynamic-selector-list-actions: (
 
     display: flex;
     align-items: center;
-    margin-left: auto;
     padding-right: var(--rt-dynamic-selector-list-actions-host-padding-right);
+    margin-left: auto;
 
     .rtui-dynamic-selector-list-actions {
         display: flex;
         align-items: center;
-        margin-left: auto;
         padding-right: var(--rt-dynamic-selector-list-actions-padding-right);
+        margin-left: auto;
 
         &__control {
             padding: var(--rt-dynamic-selector-list-actions-control-padding);

package/src/lib/ui-kit/dynamic-selectors/components/dynamic-selector/rtui-dynamic-selector.component.scss

@@ -1,7 +1,7 @@
 :host {
-    height: 100%;
-    width: 100%;
     display: flex;
-    flex-direction: column;
     overflow: hidden;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
 }

package/src/lib/ui-kit/dynamic-selectors/components/multi-selector-popup/rtui-multi-selector-popup.component.scss

@@ -73,13 +73,13 @@ $multi-selector: (
     }
 
     display: flex;
-    flex-direction: column;
     width: var(--rt-multi-selector-host-width);
     height: var(--rt-multi-selector-host-height);
+    flex-direction: column;
     padding: var(--rt-multi-selector-host-padding);
-    box-shadow: var(--rt-multi-selector-host-box-shadow);
     border-radius: var(--rt-multi-selector-host-border-radius);
     background-color: var(--rt-multi-selector-host-background-color);
+    box-shadow: var(--rt-multi-selector-host-box-shadow);
 
     &::ng-deep {
         // radiobutton
@@ -141,8 +141,8 @@ $multi-selector: (
 
                 &-info {
                     margin-left: var(--rt-multi-selector-header-controls-item-info-margin-left);
-                    font-size: var(--rt-multi-selector-header-controls-item-info-font-size);
                     color: var(--rt-multi-selector-header-controls-item-info-color);
+                    font-size: var(--rt-multi-selector-header-controls-item-info-font-size);
                 }
             }
         }
@@ -150,19 +150,19 @@ $multi-selector: (
 
     .rtui-multi-selector-options {
         display: flex;
-        flex-direction: column;
-        flex: 1 1 100%;
-        height: 100%;
         width: 100%;
+        height: 100%;
+        flex: 1 1 100%;
+        flex-direction: column;
         overflow-y: auto;
 
         &__item {
             &-title {
+                overflow: hidden;
                 width: 100%;
                 max-width: var(--rt-multi-selector-options-item-title-max-width);
-                white-space: nowrap;
-                overflow: hidden;
                 text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
             &--separated {
@@ -172,38 +172,38 @@ $multi-selector: (
 
         &__loader {
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
         }
     }
 
     .rtui-multi-selector-placeholder {
         display: flex;
+        flex: 1 1 100%;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
-        flex: 1 1 100%;
-        gap: var(--rt-multi-selector-placeholder-gap);
+        justify-content: center;
         padding-right: var(--rt-multi-selector-placeholder-padding-right);
+        gap: var(--rt-multi-selector-placeholder-gap);
         overflow-y: auto;
 
         &__icon {
             width: var(--rt-multi-selector-placeholder-icon-size);
             height: var(--rt-multi-selector-placeholder-icon-size);
-            font-size: var(--rt-multi-selector-placeholder-icon-size);
             color: var(--rt-multi-selector-placeholder-icon-color);
+            font-size: var(--rt-multi-selector-placeholder-icon-size);
         }
 
         &__title {
-            font-size: var(--rt-multi-selector-placeholder-title-font-size);
             color: var(--rt-multi-selector-placeholder-title-color);
+            font-size: var(--rt-multi-selector-placeholder-title-font-size);
         }
     }
 
     .rtui-multi-selector-footer {
         display: flex;
-        justify-content: flex-end;
         align-items: center;
+        justify-content: flex-end;
         padding: var(--rt-multi-selector-footer-padding);
         gap: var(--rt-multi-selector-footer-gap);
 
@@ -212,9 +212,9 @@ $multi-selector: (
         }
 
         &__nav-action {
-            text-decoration: none;
-            font-size: var(--rt-multi-selector-footer-nav-action-font-size);
             color: var(--rt-multi-selector-footer-nav-action-color);
+            font-size: var(--rt-multi-selector-footer-nav-action-font-size);
+            text-decoration: none;
 
             &:hover {
                 color: var(--rt-multi-selector-footer-nav-action-hover-color);

package/src/lib/ui-kit/dynamic-selectors/components/placeholder/rtui-dynamic-selector-placeholder.component.scss

@@ -28,11 +28,10 @@ $dynamic-selector-placeholder: (
         }
     }
 
+    display: flex;
     width: var(--rt-dynamic-selector-placeholder-host-width);
     height: var(--rt-dynamic-selector-placeholder-host-height);
     min-height: var(--rt-dynamic-selector-placeholder-host-min-height);
-
-    display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -42,8 +41,8 @@ $dynamic-selector-placeholder: (
         &__icon {
             width: var(--rt-dynamic-selector-placeholder-icon-size);
             height: var(--rt-dynamic-selector-placeholder-icon-size);
-            font-size: var(--rt-dynamic-selector-placeholder-icon-size);
             color: var(--rt-dynamic-selector-placeholder-icon-color);
+            font-size: var(--rt-dynamic-selector-placeholder-icon-size);
 
             &--warn {
                 color: var(--rt-dynamic-selector-placeholder-icon-warn-color);
@@ -51,9 +50,9 @@ $dynamic-selector-placeholder: (
         }
 
         &__description {
+            color: var(--rt-dynamic-selector-placeholder-description-color);
             font-size: var(--rt-dynamic-selector-placeholder-description-font-size);
             line-height: var(--rt-dynamic-selector-placeholder-description-line-height);
-            color: var(--rt-dynamic-selector-placeholder-description-color);
         }
     }
 }

package/src/lib/ui-kit/dynamic-selectors/components/selected-list/rtui-dynamic-selector-selected-list.component.scss

@@ -27,9 +27,9 @@
 }
 
 .cdk-drag-preview {
-    border: none;
     box-sizing: border-box;
+    border: none;
     border-radius: var(--rt-dynamic-selector-item-border-radius);
-    box-shadow: var(--rt-dynamic-selector-item-drag-preview-box-shadow);
     background: var(--mat-option-selected-state-layer-color);
+    box-shadow: var(--rt-dynamic-selector-item-drag-preview-box-shadow);
 }

package/src/lib/ui-kit/dynamic-selectors/strories/component/input/test-dynamic-input.component.scss

@@ -1,11 +1,10 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-
-    display: flex;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: center;
+    justify-content: flex-start;
     margin: -1rem;
 
     rtui-dynamic-input {

package/src/lib/ui-kit/dynamic-selectors/strories/component/selector/test-selector.component.scss

@@ -1,11 +1,10 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-
-    display: flex;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: center;
+    justify-content: flex-start;
     margin: -1rem;
 
     rtui-dynamic-selector {
@@ -23,13 +22,13 @@
     .custom-title {
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
         font-size: 0.875rem;
+        gap: 0.5rem;
 
         &__icon {
-            font-size: 1.125rem;
             width: 1.125rem;
             height: 1.125rem;
+            font-size: 1.125rem;
         }
 
         &__id {

package/src/lib/ui-kit/file-uploader/rtui-file-upload.component.scss

@@ -35,18 +35,18 @@ $file-upload: (
         }
     }
 
+    display: var(--rt-file-upload-host-display);
     width: var(--rt-file-upload-host-width);
     max-width: var(--rt-file-upload-host-max-width);
     height: var(--rt-file-upload-host-height);
     max-height: var(--rt-file-upload-host-max-height);
-    display: var(--rt-file-upload-host-display);
     flex-direction: var(--rt-file-upload-host-flex-direction);
-    justify-content: var(--rt-file-upload-host-justify-content);
     align-items: var(--rt-file-upload-host-align-items);
-    gap: var(--rt-file-upload-host-gap);
+    justify-content: var(--rt-file-upload-host-justify-content);
     padding: var(--rt-file-upload-host-padding);
     border: var(--rt-file-upload-host-border);
     border-radius: var(--rt-file-upload-host-border-radius);
+    gap: var(--rt-file-upload-host-gap);
     transition: border-color 0.3s ease-in-out;
 
     &.--dragged {
@@ -57,13 +57,13 @@ $file-upload: (
         &__icon {
             width: var(--rt-file-upload-icon-size);
             height: var(--rt-file-upload-icon-size);
-            font-size: var(--rt-file-upload-icon-size);
             color: var(--rt-file-upload-icon-color);
+            font-size: var(--rt-file-upload-icon-size);
         }
 
         &__title {
-            font-size: var(--rt-file-upload-title-font-size);
             color: var(--rt-file-upload-title-color);
+            font-size: var(--rt-file-upload-title-font-size);
         }
     }
 }

package/src/lib/ui-kit/file-uploader/stories/component/test-file-upload.component.scss

@@ -1,6 +1,6 @@
 :host {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 }

package/src/lib/ui-kit/header/header.component.scss

@@ -0,0 +1 @@
+// Intentionally empty — header is styled entirely via host bindings and Material theme vars.

package/src/lib/ui-kit/header/stories/component/test-header.component.scss

@@ -1,14 +1,14 @@
 :host {
+    display: flex;
     width: 100vw;
     height: 100vh;
-    display: flex;
     flex-direction: column;
     margin: -1rem;
 
     .content {
-        flex-grow: 1;
         display: flex;
-        justify-content: center;
+        flex-grow: 1;
         align-items: center;
+        justify-content: center;
     }
 }

package/src/lib/ui-kit/icon/rtui-icon.component.scss

@@ -0,0 +1,110 @@
+.rtui-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &--loading {
+        visibility: hidden;
+    }
+
+    &--rotate {
+        animation: rt-icon-rotation 1s linear infinite;
+    }
+
+    .mat-icon {
+        width: inherit;
+        height: inherit;
+        color: inherit;
+        font-size: inherit;
+    }
+
+    &--size-xs {
+        width: 0.875rem;
+        height: 0.875rem;
+        font-size: 0.875rem;
+    }
+
+    &--size-sm {
+        width: 1rem;
+        height: 1rem;
+        font-size: 1rem;
+    }
+
+    &--size-md {
+        width: 1.5rem;
+        height: 1.5rem;
+        font-size: 1.5rem;
+    }
+
+    &--size-lg {
+        width: 2rem;
+        height: 2rem;
+        font-size: 2rem;
+    }
+
+    &--size-xl {
+        width: 2.5rem;
+        height: 2.5rem;
+        font-size: 2.5rem;
+    }
+
+    &--size-xxl {
+        width: 3rem;
+        height: 3rem;
+        font-size: 3rem;
+    }
+
+    &--size-3xl {
+        width: 3.5rem;
+        height: 3.5rem;
+        font-size: 3.5rem;
+    }
+
+    &--theme-inherit {
+        color: inherit;
+    }
+
+    &--theme-primary {
+        color: var(--rt-icon-accent-primary);
+    }
+
+    &--theme-primary-strong {
+        color: var(--rt-icon-accent-primary);
+    }
+
+    &--theme-neutral {
+        color: var(--rt-icon-neutral-soft);
+    }
+
+    &--theme-disabled {
+        color: var(--rt-icon-neutral-disabled);
+    }
+
+    &--theme-muted {
+        color: var(--rt-icon-neutral-soft);
+    }
+
+    &--theme-white {
+        color: var(--rt-icon-static-light);
+    }
+
+    &--theme-danger {
+        color: var(--rt-icon-accent-danger);
+    }
+
+    &--theme-success {
+        color: var(--rt-icon-accent-success);
+    }
+}
+
+/* Inside a text-appearance button, every projected icon renders at a single
+   uniform size regardless of the `size` modifier it was given, so labelled
+   text buttons read consistently (e.g. report-header currency/hotels/period
+   triggers). This component is ViewEncapsulation.None, so the rule is global
+   and reaches the projected icon; specificity (0,2,0) wins over the icon's own
+   `--size-*` (0,1,0). */
+.rtui-button--appearance-text .rtui-icon {
+    width: 1.375rem;
+    height: 1.375rem;
+    font-size: 1.375rem;
+}

package/src/lib/ui-kit/image-uploader/image-uploader/rtui-image-upload.component.scss

@@ -40,15 +40,15 @@ $image-upload: (
         }
     }
 
+    display: var(--rt-image-upload-host-display);
     width: var(--rt-image-upload-host-width);
     min-width: var(--rt-image-upload-host-min-height);
     max-width: var(--rt-image-upload-host-max-width);
     height: var(--rt-image-upload-host-height);
     min-height: var(--rt-image-upload-host-min-height);
     max-height: var(--rt-image-upload-host-max-height);
-    display: var(--rt-image-upload-host-display);
-    justify-content: var(--rt-image-upload-host-justify-content);
     align-items: var(--rt-image-upload-host-align-items);
+    justify-content: var(--rt-image-upload-host-justify-content);
 
     .rtui-image-cropper {
         padding: var(--rt-image-upload-image-cropper-padding);
@@ -56,8 +56,8 @@ $image-upload: (
         &__actions {
             display: var(--rt-image-upload-image-cropper-actions-display);
             justify-content: var(--rt-image-upload-image-cropper-actions-justify-content);
-            gap: var(--rt-image-upload-image-cropper-actions-gap);
             margin-top: var(--rt-image-upload-image-cropper-actions-justify-margin-top);
+            gap: var(--rt-image-upload-image-cropper-actions-gap);
         }
     }
 
@@ -73,8 +73,8 @@ $image-upload: (
             pointer-events: none;
 
             &--active {
-                pointer-events: initial;
                 cursor: pointer;
+                pointer-events: initial;
 
                 &:hover {
                     opacity: 0.6;
@@ -84,9 +84,9 @@ $image-upload: (
 
         &__action {
             position: absolute;
+            z-index: 999;
             top: 0;
             right: 0;
-            z-index: 999;
             backdrop-filter: blur(1.25rem);
         }
     }

package/src/lib/ui-kit/image-uploader/stories/component/test-image-upload.component.scss

@@ -1,9 +1,9 @@
 :host {
+    display: flex;
     width: 20rem;
     height: 30rem;
-    display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     margin: 1rem;
 }

package/src/lib/ui-kit/info-badge/info-badge.component.scss

@@ -1,62 +1,63 @@
 :host {
-    border-radius: 9999px;
     display: block;
-    line-height: normal;
     max-width: fit-content;
+    border-radius: var(--rt-radius-full);
 
-    // default values
-    background-color: #005cbb;
-    color: #ffffff;
+    // default values (overridable by consumers; runtime variants set inline styles via InfoBadgeDirective)
+    /* stylelint-disable-next-line color-no-hex -- default brand blue has no palette token on purpose */
+    background-color: var(--rt-info-badge-background-color, #005cbb);
+    color: var(--rt-info-badge-color, var(--rt-text-static-light));
+    line-height: normal;
 
     .c-info-badge {
         display: flex;
-        gap: 0.15rem;
+        box-sizing: border-box;
         align-items: center;
         justify-content: center;
-        box-sizing: border-box;
+        gap: var(--rt-spacing-2);
         line-height: normal;
 
         &__content {
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 
     .size-l {
-        font-size: 1.125rem;
-        padding: 0.3rem 0.65rem;
+        padding: var(--rt-spacing-4) var(--rt-spacing-12);
+        font-size: var(--rt-font-size-md);
 
         .mat-icon {
-            font-size: 1.5rem;
+            font-size: var(--rt-font-size-xl);
         }
     }
 
     .size-m {
-        font-size: 0.875rem;
-        padding: 0.22rem 0.65rem;
+        padding: var(--rt-spacing-4) var(--rt-spacing-12);
+        font-size: var(--rt-font-size-sm);
 
         .mat-icon {
-            font-size: 1.05rem;
+            font-size: var(--rt-font-size-md);
         }
     }
 
     .size-s {
-        font-size: 0.75rem;
-        padding: 0.2rem 0.65rem;
+        padding: var(--rt-spacing-4) var(--rt-spacing-12);
+        font-size: var(--rt-font-size-xs);
         letter-spacing: 0.025rem;
 
         .mat-icon {
-            font-size: 0.75rem;
+            font-size: var(--rt-font-size-xs);
         }
     }
 
     .mat-icon {
-        height: unset;
         width: unset;
+        height: unset;
     }
 
     .bold {
-        font-weight: 700;
+        font-weight: var(--rt-font-weight-bold);
     }
 }

package/src/lib/ui-kit/info-badge/stories/component/test-info-badge/test-info-badge.component.scss

@@ -4,8 +4,8 @@
     gap: 10px;
 
     &__container {
-        border: 1px grey dashed;
         max-width: 200px;
         padding: 5px;
+        border: 1px grey dashed;
     }
 }

package/src/lib/ui-kit/modal/modal.component.scss

@@ -47,23 +47,23 @@ $modal: (
     ::ng-deep {
         .--highlighted {
             display: inline;
-            font-weight: var(--rt-modal-text-highlited-font-weight);
             color: var(--rt-modal-text-highlited-color);
+            font-weight: var(--rt-modal-text-highlited-font-weight);
         }
 
         .--warn {
             display: inline;
+            color: var(--rt-modal-text-warn-color);
             font-size: var(--rt-modal-text-warn-font-size);
             font-weight: var(--rt-modal-text-warn-font-weight);
-            color: var(--rt-modal-text-warn-color);
         }
     }
 
     .rtui-modal {
         &__title {
             h1 {
-                font-size: var(--rt-modal-title-font-size);
                 color: var(--rt-modal-title-color);
+                font-size: var(--rt-modal-title-font-size);
                 font-weight: var(--rt-modal-title-font-weight);
             }
 
@@ -93,7 +93,7 @@ $modal: (
         height: auto;
     }
 
-    .mdc-dialog__title::before {
+    .mdc-dialog__title:before {
         height: 100%;
     }
 
@@ -101,8 +101,8 @@ $modal: (
         padding: var(--rt-modal-content-padding);
         color: var(--rt-modal-content-color);
         font-size: var(--rt-modal-content-font-size);
+        overflow-wrap: var(--rt-modal-content-word-wrap);
         text-align: var(--rt-modal-content-text-align);
-        word-wrap: var(--rt-modal-content-word-wrap);
 
         mat-form-field {
             width: 100%;