@rt-tools/ui-kit 0.0.19 → 0.0.21

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",
   "dependencies": {
     "tslib": "^2.8.0",
-    "@rt-tools/core": "^0.0.3",
-    "@rt-tools/store": "^0.0.4",
+    "@rt-tools/core": "^0.0.4",
+    "@rt-tools/store": "^0.0.5",
     "@rt-tools/utils": "^0.0.6"
   },
   "peerDependencies": {
-    "@rt-tools/core": "^0.0.3",
-    "@rt-tools/store": "^0.0.4",
+    "@rt-tools/core": "^0.0.4",
+    "@rt-tools/store": "^0.0.5",
     "@rt-tools/utils": "^0.0.6",
     "@angular/animations": "^21.0.0",
     "@angular/cdk": "^21.0.0",

package/src/lib/ui-kit/action-bar/components/bar/rtui-action-bar.component.scss

@@ -2,15 +2,15 @@
 @use '../../../../../styles/base/variables' as vars;
 
 .rtui-action-bar {
-    width: var(--rt-action-bar-bar-width);
     display: flex;
+    width: var(--rt-action-bar-bar-width);
     align-items: center;
-    gap: var(--rt-action-bar-bar-gap);
     padding: var(--rt-action-bar-bar-padding);
     border-radius: var(--rt-action-bar-bar-border-radius);
-    color: var(--rt-action-bar-bar-color);
     background-color: var(--rt-action-bar-bar-background-color);
     box-shadow: var(--rt-action-bar-bar-box-shadow);
+    color: var(--rt-action-bar-bar-color);
+    gap: var(--rt-action-bar-bar-gap);
 
     &__counter {
         font-size: var(--rt-action-bar-counter-font-size);
@@ -24,14 +24,14 @@
 
     &__action {
         display: flex;
-        justify-content: center;
         align-items: center;
-        gap: var(--rt-action-bar-action-gap);
-        font-size: var(--rt-action-bar-action-font-size);
-        font-weight: var(--rt-action-bar-action-font-weight);
+        justify-content: center;
         padding: var(--rt-action-bar-action-padding);
         border-radius: var(--rt-action-bar-action-border-radius);
         cursor: pointer;
+        font-size: var(--rt-action-bar-action-font-size);
+        font-weight: var(--rt-action-bar-action-font-weight);
+        gap: var(--rt-action-bar-action-gap);
 
         &:hover {
             background-color: var(--rt-action-bar-action-hover-background-color);
@@ -39,8 +39,8 @@
     }
 
     &__close-button {
-        cursor: pointer;
         margin-left: auto;
+        cursor: pointer;
 
         svg {
             transition: transform 0.2s ease;
@@ -52,16 +52,16 @@
     }
 
     @include mixins.media-breakpoint-down(vars.$device-md) {
-        gap: var(--rt-action-bar-bar-mobile-gap);
         padding: var(--rt-action-bar-bar-mobile-padding);
+        gap: var(--rt-action-bar-bar-mobile-gap);
 
         &__actions {
             gap: var(--rt-action-bar-actions-mobile-gap);
         }
 
         &__action {
-            gap: var(--rt-action-bar-action-mobile-gap);
             padding: var(--rt-action-bar-action-mobile-padding);
+            gap: var(--rt-action-bar-action-mobile-gap);
         }
     }
 }
@@ -69,23 +69,23 @@
 .rtui-action-bar-action-menu {
     display: flex;
     flex-direction: column;
-    gap: var(--rt-action-bar-action-menu-gap);
     padding: var(--rt-action-bar-action-menu-padding);
     border-radius: var(--rt-action-bar-action-border-radius);
-    color: var(--rt-action-bar-action-menu-color);
     background-color: var(--rt-action-bar-action-menu-background-color);
     box-shadow: var(--rt-action-bar-action-menu-box-shadow);
+    color: var(--rt-action-bar-action-menu-color);
+    gap: var(--rt-action-bar-action-menu-gap);
 
     &__action {
         display: flex;
-        justify-content: center;
         align-items: center;
-        gap: var(--rt-action-bar-action-menu-action-gap);
+        justify-content: center;
         padding: var(--rt-action-bar-action-menu-action-padding);
-        font-size: var(--rt-action-bar-action-menu-action-font-size);
-        font-weight: var(--rt-action-bar-action-menu-action-font-weight);
         border-radius: var(--rt-action-bar-action-menu-action-border-radius);
         cursor: pointer;
+        font-size: var(--rt-action-bar-action-menu-action-font-size);
+        font-weight: var(--rt-action-bar-action-menu-action-font-weight);
+        gap: var(--rt-action-bar-action-menu-action-gap);
 
         &:hover {
             background-color: var(--rt-action-bar-action-menu-action-hover-background-color);
@@ -93,12 +93,12 @@
     }
 
     @include mixins.media-breakpoint-down(vars.$device-md) {
-        gap: var(--rt-action-bar-action-menu-action-mobile-gap);
         padding: var(--rt-action-bar-action-menu-action-mobile-padding);
+        gap: var(--rt-action-bar-action-menu-action-mobile-gap);
 
         &__action {
-            gap: var(--rt-action-bar-action-menu-action-mobile-gap);
             padding: var(--rt-action-bar-action-menu-action-mobile-padding);
+            gap: var(--rt-action-bar-action-menu-action-mobile-gap);
         }
     }
 }

package/src/lib/ui-kit/action-bar/components/container/rtui-action-bar-container.component.scss

@@ -1,12 +1,10 @@
 :host {
-    width: var(--rt-action-bar-container-width);
     position: fixed;
-    top: var(--rt-action-bar-container-top);
-    bottom: var(--rt-action-bar-container-bottom);
-    left: var(--rt-action-bar-container-left);
-    right: var(--rt-action-bar-container-right);
+    z-index: var(--rt-action-bar-container-z-index);
     display: flex;
-    justify-content: center;
+    width: var(--rt-action-bar-container-width);
     align-items: center;
-    z-index: var(--rt-action-bar-container-z-index);
+    justify-content: center;
+    inset: var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom)
+        var(--rt-action-bar-container-left);
 }

package/src/lib/ui-kit/aside/components/container/aside-container.component.scss

@@ -3,6 +3,7 @@
         --rt-scrollable-header-padding: 0;
         --rt-scrollable-content-padding: 0;
         --rt-scrollable-footer-padding: 0;
+
         // TODO: fix styles affect x-scroll
         --rt-scrollable-content-flex-direction: row;
 

package/src/lib/ui-kit/aside/components/error-notification/aside-error-box.component.scss

@@ -4,28 +4,28 @@
 
     .aside-error-box {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
         width: 100%;
         height: var(--rt-aside-error-box-height);
+        align-items: center;
+        justify-content: space-between;
         padding: var(--rt-aside-error-box-padding);
-        margin: var(--rt-aside-error-box-margin);
         border: var(--rt-aside-error-box-border);
         border-radius: var(--rt-aside-error-box-border-radius);
+        margin: var(--rt-aside-error-box-margin);
 
         &__title {
-            font-size: var(--rt-aside-error-box-title-font-size);
             color: var(--rt-aside-error-box-title-font-color);
+            font-size: var(--rt-aside-error-box-title-font-size);
         }
 
         .aside-error-box-button {
             &__icon {
-                margin-right: 0.5rem;
+                margin-right: var(--rt-spacing-8);
             }
 
             &__title {
-                font-size: var(--rt-aside-error-box-button-font-size);
                 color: var(--rt-aside-error-box-button-font-color);
+                font-size: var(--rt-aside-error-box-button-font-size);
             }
 
             &.--complete {

package/src/lib/ui-kit/aside/components/panel/aside-panel.component.scss

@@ -4,7 +4,7 @@
 $aside: (
     host: (
         width: 33.75rem,
-        box-shadow: 0 0 1rem 0 rgba(#000, 0.1),
+        box-shadow: 0 0 1rem 0 var(--rt-color-dark-a10),
         background-color: var(--rt-bg-base-base),
     ),
     header: (
@@ -45,7 +45,7 @@ $aside: (
     ),
     footer: (
         padding: 2rem,
-        margin-left-betwen-buttons: 1rem,
+        margin-left-between-buttons: 1rem,
     ),
     footer-mobile: (
         padding: 1rem,
@@ -76,22 +76,19 @@ $aside: (
     ),
 );
 
+// NOTE: emitted at :root on purpose (ViewEncapsulation.None): consumers override
+// these vars from ancestor scopes (e.g. a consumer's `.dark-mode { --rt-aside-host-background-color: … }`).
+// Emitting at :host would set values on the element itself and silently win over
+// inherited overrides — do not "fix" this to :host.
 :root {
     @each $element, $elements in $aside {
         @each $style-token, $value in $elements {
             #{mixins.generateCssVar('aside', #{$element}, #{$style-token})}: #{$value};
         }
     }
-}
 
-.cdk-overlay-container,
-.cdk-overlay-pane {
-    z-index: 9999;
-}
-
-// TAB GROUP
-.mat-mdc-tab-group {
-    width: 100%;
+    // @deprecated — typo kept as alias for backward compatibility; use *-between-* instead.
+    --rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons);
 }
 
 // BADGE
@@ -100,8 +97,8 @@ $aside: (
 }
 
 .title-badge {
-    margin-left: 0.25rem;
     top: -0.5rem;
+    margin-left: var(--rt-spacing-4);
 }
 
 .icon-badge,
@@ -121,12 +118,11 @@ $aside: (
 // ASIDE
 .c-aside {
     position: relative;
+    width: var(--rt-aside-host-width);
     height: 100vh;
     max-height: 100vh;
-    width: var(--rt-aside-host-width);
-
-    box-shadow: var(--rt-aside-host-box-shadow);
     background-color: var(--rt-aside-host-background-color);
+    box-shadow: var(--rt-aside-host-box-shadow);
 
     // TAB GROUP
     .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
@@ -147,38 +143,38 @@ $aside: (
     }
 
     .c-aside-title {
-        height: 100%;
-        width: 100%;
         display: flex;
+        width: 100%;
+        height: 100%;
         flex-direction: column;
-        justify-content: center;
         align-items: flex-start;
+        justify-content: center;
 
         &__descr {
             margin-bottom: var(--rt-aside-header-description-margin-bottom);
-            font-size: var(--rt-aside-header-description-font-size);
             color: var(--rt-aside-header-description-color);
+            font-size: var(--rt-aside-header-description-font-size);
         }
 
         &__txt {
             font-size: var(--rt-aside-header-title-font-size);
-            line-height: var(--rt-aside-header-title-line-height);
             font-weight: var(--rt-aside-header-title-font-weight);
+            line-height: var(--rt-aside-header-title-line-height);
         }
 
         &__addition {
             margin-top: var(--rt-aside-header-addition-margin-top);
-            font-size: var(--rt-aside-header-addition-font-size);
             color: var(--rt-aside-header-addition-color);
+            font-size: var(--rt-aside-header-addition-font-size);
         }
 
         &__descr,
         &__txt,
         &__addition {
-            width: 100%;
-            white-space: nowrap;
             overflow: hidden;
+            width: 100%;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 
@@ -196,21 +192,19 @@ $aside: (
 } // c-aside-header
 
 .c-aside-content {
-    height: 100%;
-    width: 100%;
-
     display: flex;
+    width: 100%;
+    height: 100%;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-
     padding: var(--rt-aside-content-padding);
 
     // Change mat tab group styles
     .mat-mdc-tab-header {
-        top: 0;
-        z-index: 1000;
         position: sticky;
+        z-index: 1000;
+        top: 0;
         background: var(--rt-bg-base-base);
     }
 
@@ -222,9 +216,8 @@ $aside: (
 // ASIDE FOOTER
 .c-aside-footer {
     display: flex;
-    justify-content: flex-end;
     align-items: center;
-
+    justify-content: flex-end;
     padding: var(--rt-aside-footer-padding);
 
     .c-aside-footer-btn {
@@ -234,7 +227,7 @@ $aside: (
     }
 
     .c-aside-footer-btn + .c-aside-footer-btn {
-        margin-left: var(--rt-aside-footer-margin-left-betwen-buttons);
+        margin-left: var(--rt-aside-footer-margin-left-between-buttons);
     }
 
     @include mixins.media-breakpoint-down(vars.$device-xs) {

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

@@ -1,4 +1,4 @@
 :host {
-    height: 100%;
     width: 100%;
+    height: 100%;
 }

package/src/lib/ui-kit/buttons/multi-button/rtui-multi-button.component.scss

@@ -48,24 +48,24 @@ $rtui-multibutton: (
     .rtui-multibutton-actions {
         display: var(--rt-rtui-multibutton-base-display);
         flex-flow: var(--rt-rtui-multibutton-base-flex-flow);
-        border-radius: var(--rt-rtui-multibutton-base-radius);
         padding: var(--rt-rtui-multibutton-base-padding);
+        border-radius: var(--rt-rtui-multibutton-base-radius);
         background-color: var(--rt-rtui-multibutton-base-background-color);
 
         &__action {
             padding: var(--rt-rtui-multibutton-action-base-padding);
-            border-radius: var(--rt-rtui-multibutton-action-base-radius);
             border: var(--rt-rtui-multibutton-action-base-border);
+            border-radius: var(--rt-rtui-multibutton-action-base-radius);
+            background-color: var(--rt-rtui-multibutton-action-base-background-color);
+            color: var(--rt-rtui-multibutton-action-base-color);
+            cursor: var(--rt-rtui-multibutton-action-base-cursor);
             font-size: var(--rt-rtui-multibutton-action-base-font-size);
             font-weight: var(--rt-rtui-multibutton-action-base-font-weight);
-            color: var(--rt-rtui-multibutton-action-base-color);
-            background-color: var(--rt-rtui-multibutton-action-base-background-color);
             transition: var(--rt-rtui-multibutton-action-base-transition);
-            cursor: var(--rt-rtui-multibutton-action-base-cursor);
 
             &--active {
-                color: var(--rt-rtui-multibutton-action-active-color);
                 background-color: var(--rt-rtui-multibutton-action-active-background-color);
+                color: var(--rt-rtui-multibutton-action-active-color);
                 cursor: var(--rt-rtui-multibutton-action-active-cursor);
             }
 
@@ -83,9 +83,9 @@ $rtui-multibutton: (
             }
 
             &:disabled {
-                pointer-events: var(--rt-rtui-multibutton-action-disabled-pointer-events);
                 cursor: var(--rt-rtui-multibutton-action-disabled-cursor);
                 opacity: var(--rt-rtui-multibutton-action-disabled-opacity);
+                pointer-events: var(--rt-rtui-multibutton-action-disabled-pointer-events);
             }
         }
     }

package/src/lib/ui-kit/buttons/unified-button/rtui-button.component.scss

@@ -0,0 +1,247 @@
+:host {
+    display: inline-block;
+}
+
+:host(.rtui-button-full) {
+    display: block;
+    width: 100%;
+
+    .rtui-button {
+        width: 100%;
+    }
+}
+
+.rtui-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background-color: transparent;
+    color: var(--mat-sys-on-surface-variant);
+    cursor: pointer;
+    line-height: 1;
+    transition:
+        background-color 0.15s ease,
+        color 0.15s ease,
+        opacity 0.15s ease;
+
+    rtui-icon {
+        color: inherit;
+    }
+
+    rtui-spinner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+    }
+
+    &--loading {
+        cursor: wait;
+    }
+
+    /* ===================== icon / fab ===================== */
+    &--type-icon,
+    &--type-fab {
+        border-radius: 1.5rem;
+
+        &:hover:not(:disabled) {
+            background-color: var(--rt-bg-base-hover);
+        }
+    }
+
+    &--type-icon.rtui-button--size-xs,
+    &--type-fab.rtui-button--size-xs {
+        padding: 0.25rem;
+    }
+
+    &--type-icon.rtui-button--size-sm,
+    &--type-fab.rtui-button--size-sm {
+        padding: 0.375rem;
+    }
+
+    &--type-icon.rtui-button--size-md,
+    &--type-fab.rtui-button--size-md {
+        padding: 0.5rem;
+    }
+
+    &--type-icon.rtui-button--size-lg,
+    &--type-fab.rtui-button--size-lg {
+        padding: 0.625rem;
+    }
+
+    &--type-icon.rtui-button--variant-primary,
+    &--type-fab.rtui-button--variant-primary {
+        color: var(--rt-icon-accent-primary);
+    }
+
+    &--type-icon.rtui-button--variant-danger,
+    &--type-fab.rtui-button--variant-danger {
+        color: var(--rt-icon-accent-danger);
+    }
+
+    &--type-icon.rtui-button--variant-success,
+    &--type-fab.rtui-button--variant-success {
+        color: var(--rt-icon-accent-success);
+    }
+
+    &--type-icon.rtui-button--variant-warning,
+    &--type-fab.rtui-button--variant-warning {
+        color: var(--rt-icon-accent-warning);
+    }
+
+    &--type-icon.rtui-button--variant-accent,
+    &--type-fab.rtui-button--variant-accent {
+        color: var(--rt-icon-accent-info);
+    }
+
+    /* ===================== pill ===================== */
+    &--type-pill {
+        gap: 0.375rem;
+        border-radius: 1.5rem;
+        background-color: var(--mat-sys-surface-container-high);
+        color: var(--mat-sys-on-surface-variant);
+        font-weight: 500;
+
+        &:hover:not(:disabled) {
+            background-color: var(--mat-sys-surface-container-highest);
+        }
+
+        &:active:not(:disabled) {
+            background-color: var(--mat-sys-surface-dim);
+        }
+    }
+
+    /* pill sizes */
+    &--type-pill.rtui-button--size-xs {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.6875rem;
+    }
+
+    &--type-pill.rtui-button--size-sm {
+        padding: 0.375rem 0.625rem;
+        font-size: 0.75rem;
+    }
+
+    &--type-pill.rtui-button--size-md {
+        padding: 0.5rem 0.875rem;
+        font-size: 0.8125rem;
+    }
+
+    &--type-pill.rtui-button--size-lg {
+        padding: 0.625rem 1rem;
+        font-size: 0.875rem;
+    }
+
+    /* pill radius */
+    &--type-pill.rtui-button--radius-none {
+        border-radius: 0;
+    }
+
+    &--type-pill.rtui-button--radius-sm {
+        border-radius: 0.25rem;
+    }
+
+    &--type-pill.rtui-button--radius-md {
+        border-radius: 0.5rem;
+    }
+
+    &--type-pill.rtui-button--radius-lg {
+        border-radius: 0.75rem;
+    }
+
+    &--type-pill.rtui-button--radius-full {
+        border-radius: 1.5rem;
+    }
+
+    /* pill variants */
+    &--type-pill.rtui-button--variant-primary {
+        background-color: var(--rt-bg-accent-primary-subtle);
+        color: var(--rt-text-accent-primary);
+
+        &:hover:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-primary-subtle) 92%, var(--rt-color-neutral-100));
+        }
+
+        &:active:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-primary-subtle) 84%, var(--rt-color-neutral-100));
+        }
+    }
+
+    &--type-pill.rtui-button--variant-danger {
+        background-color: var(--rt-bg-accent-danger-subtle);
+        color: var(--rt-text-accent-danger);
+
+        &:hover:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-danger-subtle) 92%, var(--rt-color-neutral-100));
+        }
+
+        &:active:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-danger-subtle) 84%, var(--rt-color-neutral-100));
+        }
+    }
+
+    &--type-pill.rtui-button--variant-success {
+        background-color: var(--rt-bg-accent-success-subtle);
+        color: var(--rt-text-accent-success);
+
+        &:hover:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-success-subtle) 92%, var(--rt-color-neutral-100));
+        }
+
+        &:active:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-success-subtle) 84%, var(--rt-color-neutral-100));
+        }
+    }
+
+    &--type-pill.rtui-button--variant-warning {
+        background-color: var(--rt-bg-accent-warning-subtle);
+        color: var(--rt-text-accent-warning);
+
+        &:hover:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-warning-subtle) 92%, var(--rt-color-neutral-100));
+        }
+
+        &:active:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-warning-subtle) 84%, var(--rt-color-neutral-100));
+        }
+    }
+
+    &--type-pill.rtui-button--variant-accent {
+        background-color: var(--rt-bg-accent-info-subtle);
+        color: var(--rt-text-accent-info);
+
+        &:hover:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-info-subtle) 92%, var(--rt-color-neutral-100));
+        }
+
+        &:active:not(:disabled) {
+            background-color: color-mix(in srgb, var(--rt-bg-accent-info-subtle) 84%, var(--rt-color-neutral-100));
+        }
+    }
+
+    /* pill appearance: text — transparent, borderless inline-text look.
+       Radius is intentionally left to the `--radius-*` modifier (defaults to
+       full) so a text-appearance pill keeps its pill shape. */
+    &--type-pill.rtui-button--appearance-text {
+        min-height: 1.875rem;
+        padding: 0 0.625rem;
+        background-color: transparent;
+        color: var(--mat-sys-on-surface-variant);
+        font-size: 1rem;
+        font-weight: 400;
+
+        &:hover:not(:disabled) {
+            background-color: var(--rt-bg-base-hover);
+        }
+
+        &:active:not(:disabled) {
+            background-color: var(--rt-bg-base-hover);
+        }
+    }
+}