@rt-tools/ui-kit 0.0.19 → 0.0.20

package/src/styles/base/_variables.scss

@@ -1,11 +1,8 @@
 /* Material Theme */
 $main-theme: light;
-
-$styles-clr-prefix: 'clr';
 $styles-prefix: 'rt';
 
 /* Base */
-$avalon-color: var(--clr-avalon);
 $base-accent: var(--rt-text-accent-brand);
 
 /* Device Definitions */
@@ -21,14 +18,11 @@ $base-font-weight: 400;
 $base-font-size: 1rem;
 $base-text-color: var(--rt-text-base-primary);
 
-/* Colors */
-$clr-red-100: #eb5055;
-$clr-red-10: #fdedee;
-
-$clr-green-80: #00b894;
-$clr-green-10: #e5f8f4;
+/* Button palette seeds (static — fed to sass color.scale() for hover/active states) */
+$btn-danger: #eb5055;
+$btn-danger-soft: #fdedee;
+$btn-success: #00b894; // outlier: not on the --rt-color-green scale
+$btn-success-soft: #e5f8f4;
 
 /* Components */
-$side-panel-dynamic-clr: var(--rt-text-accent-brand);
-$pagination-dynamic-clr: var(--rt-text-accent-brand);
 $text-highlight-color: #0077bf;

package/src/styles/color-scheme.spec.ts

@@ -0,0 +1,236 @@
+import * as path from 'path';
+import * as sass from 'sass';
+
+/**
+ * Build-time guarantees for the custom color-scheme mechanism:
+ *   1. Δ0 — moving the accent tier onto the `--rt-color-{role}-{N}` indirection
+ *      keeps every accent semantic token byte-for-byte identical (own palette).
+ *   2. The `rt.color-scheme` Sass mixin emits a scoped `[data-rt-scheme]` block.
+ *   3. Input validation rejects unknown roles / out-of-range tones.
+ *   4. The teal case: a custom teal ramp drives `--rt-bg-accent-primary-solid` to teal.
+ */
+
+const STYLES_DIR: string = __dirname;
+
+/** Frozen resolved (own-palette) values of every accent token BEFORE the indirection refactor. */
+const BASELINE: Record<string, string> = {
+    '--rt-bg-accent-primary-subtle': 'light-dark(#eaedfc, color-mix(in srgb, #4284d7 18%, #1c1b1e))',
+    '--rt-bg-accent-primary-solid': '#4284d7',
+    '--rt-bg-accent-primary-hover': 'light-dark(color-mix(in srgb, #4284d7 90%, #000), color-mix(in srgb, #4284d7 90%, #fff))',
+    '--rt-bg-accent-primary-disabled': 'color-mix(in srgb, #4284d7 38%, transparent)',
+    '--rt-bg-accent-success-subtle': 'light-dark(#e5f8f4, color-mix(in srgb, #01af8d 18%, #1c1b1e))',
+    '--rt-bg-accent-success-solid': '#21b18e',
+    '--rt-bg-accent-success-hover': 'light-dark(color-mix(in srgb, #21b18e 90%, #000), color-mix(in srgb, #21b18e 90%, #fff))',
+    '--rt-bg-accent-success-disabled': 'color-mix(in srgb, #21b18e 38%, transparent)',
+    '--rt-bg-accent-warning-subtle': 'light-dark(#e8cbbf, color-mix(in srgb, #ef7128 18%, #1c1b1e))',
+    '--rt-bg-accent-warning-solid': '#ee7a34',
+    '--rt-bg-accent-warning-hover': 'light-dark(color-mix(in srgb, #ee7a34 90%, #000), color-mix(in srgb, #ee7a34 90%, #fff))',
+    '--rt-bg-accent-warning-disabled': 'color-mix(in srgb, #ee7a34 38%, transparent)',
+    '--rt-bg-accent-danger-subtle': 'light-dark(#fdedee, color-mix(in srgb, #eb5055 18%, #1c1b1e))',
+    '--rt-bg-accent-danger-solid': '#eb5055',
+    '--rt-bg-accent-danger-hover': 'light-dark(color-mix(in srgb, #eb5055 90%, #000), color-mix(in srgb, #eb5055 90%, #fff))',
+    '--rt-bg-accent-danger-disabled': 'color-mix(in srgb, #eb5055 38%, transparent)',
+    '--rt-bg-accent-info-subtle': 'light-dark(#eaedfc, color-mix(in srgb, #4284d7 18%, #1c1b1e))',
+    '--rt-bg-accent-info-solid': '#4284d7',
+    '--rt-bg-accent-info-hover': 'light-dark(color-mix(in srgb, #4284d7 90%, #000), color-mix(in srgb, #4284d7 90%, #fff))',
+    '--rt-bg-accent-info-disabled': 'color-mix(in srgb, #4284d7 38%, transparent)',
+    '--rt-text-accent-brand': 'light-dark(#0d1c2b, #e8e8e8)',
+    '--rt-text-accent-primary': 'light-dark(#4284d7, #6d96e8)',
+    '--rt-text-accent-success': '#01af8d',
+    '--rt-text-accent-success-soft': '#21b18e',
+    '--rt-text-accent-warning': '#ef7128',
+    '--rt-text-accent-warning-soft': '#ee7a34',
+    '--rt-text-accent-danger': '#eb5055',
+    '--rt-text-accent-danger-soft': '#e88487',
+    '--rt-text-accent-info': '#4284d7',
+    '--rt-text-accent-info-soft': '#4285f4',
+    '--rt-icon-accent-brand': 'light-dark(#0d1c2b, #e8e8e8)',
+    '--rt-icon-accent-primary': 'light-dark(#4284d7, #6d96e8)',
+    '--rt-icon-accent-success': '#01af8d',
+    '--rt-icon-accent-warning': '#ef7128',
+    '--rt-icon-accent-danger': '#eb5055',
+    '--rt-icon-accent-info': '#4284d7',
+    '--rt-border-accent-primary': 'light-dark(#4284d7, #6d96e8)',
+    '--rt-border-accent-success': '#01af8d',
+    '--rt-border-accent-warning': '#ef7128',
+    '--rt-border-accent-danger': '#eb5055',
+    '--rt-border-accent-danger-soft': '#e88487',
+    '--rt-border-accent-info': '#4284d7',
+    '--rt-border-focus': 'light-dark(#b3ceef, #6d96e8)',
+};
+
+/** Resolve `var(--mat-sys-X, FALLBACK)` to its fallback (own-palette, no Material configured). */
+function stripMat(input: string): string {
+    let value: string = input;
+    let index: number = value.indexOf('var(--mat-sys-');
+
+    while (index >= 0) {
+        let depth: number = 0;
+        let j: number = index + 4;
+
+        for (; j < value.length; j++) {
+            if (value[j] === '(') {
+                depth++;
+            } else if (value[j] === ')') {
+                if (depth === 0) {
+                    break;
+                }
+                depth--;
+            }
+        }
+
+        const inner: string = value.slice(index + 4, j);
+        const comma: number = inner.indexOf(',');
+        value = value.slice(0, index) + inner.slice(comma + 1).trim() + value.slice(j + 1);
+        index = value.indexOf('var(--mat-sys-');
+    }
+
+    return value;
+}
+
+/** Collapse `light-dark(X, X)` to `X` (identical branches render the same in both modes). */
+function normalize(input: string): string {
+    let value: string = input.replace(/\s+/g, ' ').trim();
+    let prev: string = '';
+
+    while (value !== prev) {
+        prev = value;
+        value = value.replace(/light-dark\(\s*([^,()]+?)\s*,\s*\1\s*\)/g, '$1');
+    }
+
+    return value.replace(/\s+/g, ' ').trim();
+}
+
+/** Extract `--name: value;` declarations matching a name pattern from compiled CSS. */
+function extractDeclarations(css: string, namePattern: string): Record<string, string> {
+    const out: Record<string, string> = {};
+    const re: RegExp = new RegExp(`(${namePattern}):\\s*([^;]+);`, 'g');
+    let match: RegExpExecArray | null = re.exec(css);
+
+    while (match !== null) {
+        out[match[1]] = match[2].trim();
+        match = re.exec(css);
+    }
+
+    return out;
+}
+
+function compileTokens(): string {
+    return sass.compile(path.join(STYLES_DIR, 'tokens.scss')).css;
+}
+
+function compileWithMixin(body: string): sass.CompileResult {
+    return sass.compileString(`@use 'main' as rt;\n${body}`, { loadPaths: [STYLES_DIR] });
+}
+
+describe('rt-tools color schemes', () => {
+    describe('Δ0 regression — accent indirection keeps the own palette byte-for-byte', () => {
+        it('every accent semantic token resolves to its pre-refactor value', () => {
+            const css: string = compileTokens();
+            const ramp: Record<string, string> = extractDeclarations(css, '--rt-color-(?:primary|info|success|warning|danger|brand)-\\d+');
+            const semantic: Record<string, string> = extractDeclarations(
+                css,
+                '--rt-(?:bg|text|icon|border)-accent[\\w-]*|--rt-border-focus'
+            );
+
+            const resolveRamp: (value: string) => string = (value: string): string => {
+                let resolved: string = value;
+                let prev: string = '';
+
+                while (resolved !== prev) {
+                    prev = resolved;
+                    for (const key of Object.keys(ramp)) {
+                        resolved = resolved.split(`var(${key})`).join(stripMat(ramp[key]));
+                    }
+                }
+
+                return normalize(stripMat(resolved));
+            };
+
+            for (const token of Object.keys(BASELINE)) {
+                expect(semantic[token]).toBeDefined();
+                expect(resolveRamp(semantic[token])).toBe(BASELINE[token]);
+            }
+        });
+    });
+
+    describe('Material hybrid — default honors --mat-sys-*, a scheme overrides it', () => {
+        it('default ramp tones carry the --mat-sys-* fallback where the original token did', () => {
+            const ramp: Record<string, string> = extractDeclarations(
+                compileTokens(),
+                '--rt-color-(?:primary|info|success|warning|danger|brand)-\\d+'
+            );
+
+            // tones that mapped to a Material system color carry the fallback (default honors Material)
+            expect(ramp['--rt-color-primary-100']).toBe('var(--mat-sys-primary, #4284d7)');
+            expect(ramp['--rt-color-primary-20']).toBe('var(--mat-sys-primary-container, #eaedfc)');
+            expect(ramp['--rt-color-danger-100']).toBe('var(--mat-sys-error, #eb5055)');
+            expect(ramp['--rt-color-brand-100']).toBe('var(--mat-sys-primary, #0d1c2b)');
+
+            // roles with no Material mapping stay raw — and a scheme overriding ANY tone with a raw
+            // value drops the fallback entirely, so the scheme wins over an active Material theme.
+            expect(ramp['--rt-color-info-100']).toBe('#4284d7');
+            expect(ramp['--rt-color-success-100']).toBe('#01af8d');
+            expect(ramp['--rt-color-warning-100']).toBe('#ef7128');
+        });
+    });
+
+    describe('dark mode — a scheme drives both modes via distinct ramp tones', () => {
+        it('accent tokens pick tone-100 in light and tone-60 in dark (scheme controls each)', () => {
+            const semantic: Record<string, string> = extractDeclarations(
+                compileTokens(),
+                '--rt-text-accent-primary|--rt-border-accent-primary|--rt-icon-accent-primary'
+            );
+
+            // light-dark(primary-100, primary-60): the kit fixes WHICH tone per mode; the scheme
+            // supplies the VALUE of each tone → a scheme can set a different dark tone (tone-60) than light.
+            for (const token of Object.keys(semantic)) {
+                expect(semantic[token]).toContain('var(--rt-color-primary-100)');
+                expect(semantic[token]).toContain('var(--rt-color-primary-60)');
+                expect(semantic[token].indexOf('primary-100')).toBeLessThan(semantic[token].indexOf('primary-60'));
+            }
+        });
+    });
+
+    describe('rt.color-scheme mixin', () => {
+        it('emits a scoped [data-rt-scheme] block with only raw role rows', () => {
+            const css: string = compileWithMixin(
+                '@include rt.color-scheme(\'teal\', (primary: (20: #b3e3e1, 100: #008582), brand: (100: #008582)));'
+            ).css;
+
+            const block: string = css.slice(css.indexOf('[data-rt-scheme=teal]'));
+
+            expect(block).toContain('[data-rt-scheme=teal]');
+            expect(block).toContain('--rt-color-primary-100: #008582');
+            expect(block).toContain('--rt-color-primary-20: #b3e3e1');
+            expect(block).toContain('--rt-color-brand-100: #008582');
+            // schemes never duplicate the semantic derivation layer
+            expect(block).not.toContain('--rt-bg-accent-primary-solid:');
+        });
+
+        it('rejects an unknown role', () => {
+            expect(() => compileWithMixin('@include rt.color-scheme(\'x\', (foo: (100: #000000)));')).toThrow(/unknown role/i);
+        });
+
+        it('rejects an out-of-range tone', () => {
+            expect(() => compileWithMixin('@include rt.color-scheme(\'x\', (primary: (150: #000000)));')).toThrow(/integer 0–100/i);
+        });
+
+        it('rejects an empty role map', () => {
+            expect(() => compileWithMixin('@include rt.color-scheme(\'x\', ());')).toThrow(/non-empty map/i);
+        });
+    });
+
+    describe('teal reference case', () => {
+        it('a teal primary ramp recolors --rt-bg-accent-primary-solid to teal', () => {
+            const css: string = compileWithMixin(
+                '@include rt.color-scheme(\'teal\', (primary: (20: #b3e3e1, 40: #5cb8b5, 60: #1a9d99, 100: #008582)));'
+            ).css;
+
+            const scheme: Record<string, string> = extractDeclarations(css, '--rt-color-primary-\\d+');
+            // bg-accent-primary-solid === var(--rt-color-primary-100); under the teal scheme that is #008582
+            expect(scheme['--rt-color-primary-100']).toBe('#008582');
+            expect(normalize(stripMat(css.match(/--rt-bg-accent-primary-solid:\s*([^;]+);/)![1]))).toBe('var(--rt-color-primary-100)');
+        });
+    });
+});

package/src/styles/components/_button.scss

@@ -1,3 +1,10 @@
+/// @deprecated — legacy `.c-button` system. New code uses `.rtui-btn` (_rtui_button.scss);
+/// ~60% of this module duplicates it. Kept because consumers still apply `.c-button`
+/// classes AND override `--rt-button-*` vars directly (incl. dark mode) — rerouting these rules
+/// onto `--rt-rtui-btn-*` would silently kill those overrides. Removal plan (next major):
+/// map classes `--fill-green→success`, `--fill-red→error`, `--fill-blue→accent-light`,
+/// `--outline-*→*-outline`; `--txt-*`/`--fab` first need a text/icon appearance in .rtui-btn.
+/// See TOKENS.md "Buttons: legacy vs rtui".
 @use '../base/mixin' as mixins;
 @use '../base/variables' as vars;
 @use 'sass:color' as color;
@@ -20,7 +27,8 @@ $button: (
         background: var(--rt-color-neutral-25),
     ),
     text-active: (
-        background: var(--clr-black-30),
+        background: #b2cbca,
+        // palette outlier, no neutral-scale equivalent
     ),
     text-base: (
         color: var(--rt-color-neutral-60),
@@ -57,36 +65,36 @@ $button: (
         color: var(--rt-color-neutral-0),
     ),
     fill-green: (
-        border: 1px solid color.scale(vars.$clr-green-80, $lightness: -10%),
+        border: 1px solid color.scale(vars.$btn-success, $lightness: -10%),
         color: var(--rt-color-neutral-0),
         background-color: var(--rt-color-green-80),
     ),
     fill-green-hover: (
-        background-color: color.scale(vars.$clr-green-80, $lightness: -10%),
+        background-color: color.scale(vars.$btn-success, $lightness: -10%),
     ),
     fill-green-light: (
-        border-color: color.scale(vars.$clr-green-10, $lightness: -10%),
+        border-color: color.scale(vars.$btn-success-soft, $lightness: -10%),
         color: var(--rt-color-green-100),
         background-color: var(--rt-color-green-10),
     ),
     fill-green-light-hover: (
-        background-color: color.scale(vars.$clr-green-10, $lightness: -10%),
+        background-color: color.scale(vars.$btn-success-soft, $lightness: -10%),
     ),
     fill-red: (
-        border: 1px solid color.scale(vars.$clr-red-100, $lightness: -10%),
+        border: 1px solid color.scale(vars.$btn-danger, $lightness: -10%),
         color: var(--rt-color-neutral-0),
-        background-color: vars.$clr-red-100,
+        background-color: vars.$btn-danger,
     ),
     fill-red-hover: (
-        background-color: color.scale(vars.$clr-red-100, $lightness: -10%),
+        background-color: color.scale(vars.$btn-danger, $lightness: -10%),
     ),
     fill-red-light: (
-        border-color: color.scale(vars.$clr-red-10, $lightness: -10%),
+        border-color: color.scale(vars.$btn-danger-soft, $lightness: -10%),
         color: var(--rt-color-red-100),
         background-color: var(--rt-color-red-10),
     ),
     fill-red-light-hover: (
-        background-color: color.scale(vars.$clr-red-10, $lightness: -10%),
+        background-color: color.scale(vars.$btn-danger-soft, $lightness: -10%),
     ),
     outline: (
         border: 1px solid var(--rt-color-blue-40),
@@ -112,22 +120,22 @@ $button: (
 }
 
 button {
-    line-height: 1;
     cursor: pointer;
+    line-height: 1;
 }
 
 .c-button {
+    position: relative;
     display: inline-flex;
     align-items: center;
-    font-family: var(--rt-button-base-font-family);
-    line-height: 1;
-    position: relative;
     justify-content: center;
-    font-size: 1rem;
     color: var(--rt-button-base-color);
+    font-family: var(--rt-button-base-font-family);
+    font-size: 1rem;
+    line-height: 1;
     transition: all 0.15s linear;
 
-    //FAB
+    // FAB
     &[class*='--fab'] {
         border: 0;
         background-color: transparent;
@@ -149,8 +157,8 @@ button {
     // TEXT
     &[class*='--txt-'] {
         border: 0;
-        background-color: transparent;
         border-radius: 5px;
+        background-color: transparent;
 
         &:hover {
             background: var(--rt-button-text-hover-background);
@@ -239,9 +247,9 @@ button {
         &[class*='green'] {
             border: var(--rt-button-fill-green-border);
             border-radius: 2px;
-            color: var(--rt-button-fill-green-color);
-            box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
             background-color: var(--rt-button-fill-green-background-color);
+            box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
+            color: var(--rt-button-fill-green-color);
 
             &:hover {
                 background-color: var(--rt-button-fill-green-hover-background-color);
@@ -249,8 +257,8 @@ button {
 
             &[class*='-light'] {
                 border-color: var(--rt-button-fill-green-light-border-color);
-                color: var(--rt-button-fill-green-light-color);
                 background-color: var(--rt-button-fill-green-light-background-color);
+                color: var(--rt-button-fill-green-light-color);
 
                 &:hover {
                     background-color: var(--rt-button-fill-green-light-hover-background-color);
@@ -261,9 +269,9 @@ button {
         &[class*='red'] {
             border: var(--rt-button-fill-red-border);
             border-radius: 2px;
-            color: var(--rt-button-fill-red-color);
-            box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
             background-color: var(--rt-button-fill-red-background-color);
+            box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
+            color: var(--rt-button-fill-red-color);
 
             &:hover {
                 background-color: var(--rt-button-fill-red-hover-background-color);
@@ -271,8 +279,8 @@ button {
 
             &[class*='-light'] {
                 border-color: var(--rt-button-fill-red-light-border-color);
-                color: var(--rt-button-fill-red-light-color);
                 background-color: var(--rt-button-fill-red-light-background-color);
+                color: var(--rt-button-fill-red-light-color);
 
                 &:hover {
                     background-color: var(--rt-button-fill-red-light-hover-background-color);
@@ -348,7 +356,7 @@ button {
 
     // SHADOW
     &[class*='--shadow'] {
-        box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
+        box-shadow: 0 2px 4px rgb(24 24 24 / 10%);
     }
 
     // --shadow

package/src/styles/components/_dynamic-selectors.scss

@@ -46,15 +46,14 @@ $dynamic-selector: (
 
 .rtui-dynamic-selector {
     &__item {
-        height: var(--rt-dynamic-selector-item-height);
         display: flex;
-        justify-content: flex-start;
+        height: var(--rt-dynamic-selector-item-height);
         align-items: center;
-
-        background-color: var(--rt-dynamic-selector-item-background-color);
+        justify-content: flex-start;
+        padding: var(--rt-dynamic-selector-item-padding);
         border-radius: var(--rt-dynamic-selector-item-border-radius);
         margin-bottom: var(--rt-dynamic-selector-item-margin-bottom);
-        padding: var(--rt-dynamic-selector-item-padding);
+        background-color: var(--rt-dynamic-selector-item-background-color);
 
         &::-webkit-scrollbar {
             display: none;
@@ -66,17 +65,17 @@ $dynamic-selector: (
 
         &-mover {
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
             padding: var(--rt-dynamic-selector-item-mover-padding);
             border-right: var(--rt-dynamic-selector-item-mover-border-right);
             margin-right: var(--rt-dynamic-selector-item-mover-margin-right);
         }
 
         &-title {
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         &-input {
@@ -92,11 +91,11 @@ $dynamic-selector: (
 
         &-control {
             display: flex;
-            justify-content: center;
             align-items: center;
-            gap: var(--rt-dynamic-selector-item-control-gap);
+            justify-content: center;
             padding: var(--rt-dynamic-selector-item-control-padding);
             border-right: var(--rt-dynamic-selector-item-control-border-right);
+            gap: var(--rt-dynamic-selector-item-control-gap);
 
             &:last-child {
                 padding: var(--rt-dynamic-selector-item-control-last-child-padding);
@@ -105,8 +104,8 @@ $dynamic-selector: (
 
             &-button {
                 display: flex;
-                justify-content: center;
                 align-items: center;
+                justify-content: center;
 
                 .mat-icon {
                     width: var(--rt-dynamic-selector-item-control-icon-size);

package/src/styles/components/_form.scss

@@ -3,30 +3,28 @@
 
 // FORM
 .c-form {
-    width: 100%;
-
     display: flex;
+    width: 100%;
+    flex: 1 1 100%;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: flex-start;
-    flex: 1 1 100%;
+    justify-content: flex-start;
 
     &__title {
         font-size: 1.5rem;
-        line-height: 1.1;
         font-weight: 600;
+        line-height: 1.1;
     }
 
     &__title-descr {
         margin-top: 0.75rem;
-        font-size: 1rem;
         color: var(--rt-text-base-secondary);
+        font-size: 1rem;
     }
 
     &__item {
-        width: 100%;
-
         display: flex;
+        width: 100%;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
@@ -38,18 +36,15 @@
 
     &__controls {
         position: relative;
-        width: 100%;
-
         display: flex;
+        width: 100%;
         flex-direction: column;
-
         margin-top: 2rem;
     }
 
     &__control-item {
-        width: 100%;
-
         display: flex;
+        width: 100%;
         align-items: center;
         justify-content: flex-start;
 

package/src/styles/components/_material-bridge.scss

@@ -0,0 +1,30 @@
+/// Material bridge — the single global touch-point between rt-tools and Angular Material.
+///
+/// Rule: every GLOBAL override of Material internals (--mat-* / --mdc-* vars, .mat-* / .cdk-* selectors
+/// that is not scoped to a component's own DOM) lives here, so a Material upgrade is reviewed in one file.
+///
+/// Scoped piercings stay next to their component (they target Material nodes inside the component's
+/// own template) — current inventory, revisit on every Angular Material major:
+///   - snack-bar:            styles/components/_snackbar.scss (panelClass .snack-bar-*: --mat-snack-bar-*, --mdc-snackbar-*)
+///   - table:                styles/components/_table.scss (consumes --mat-form-field-filled-container-color)
+///   - checkbox:             styles/components/_checkbox.scss (consumes --mat-button-text-label-text-color)
+///   - dynamic-selectors:    styles/components/_dynamic-selectors.scss (+ ::ng-deep .mat-mdc-form-field-* in
+///                           multi-selector-popup / selected-list component scss)
+///   - side-menu:            menu-sub-item component scss (::ng-deep .mat-expansion-*)
+///   - modal:                modal.component.scss (::ng-deep .mat-icon)
+///   - spinner:              spinner.component.scss (::ng-deep circle of mat-spinner SVG)
+///   - aside:                aside-panel.component.scss (.mat-mdc-tab-header, .mat-badge-content — encapsulation: None)
+///   - toolbar:              toolbar.component.scss (--mat-tab-*, --mdc-secondary-navigation-tab-*)
+
+/* Keep CDK overlays (aside drawer, selector popups, modals) above app chrome.
+   Moved from aside-panel.component.scss — applies app-wide by design. */
+.cdk-overlay-container,
+.cdk-overlay-pane {
+    z-index: 9999;
+}
+
+/* Mat tab groups stretch to their container (aside tabs rely on it).
+   Moved from aside-panel.component.scss. */
+.mat-mdc-tab-group {
+    width: 100%;
+}

package/src/styles/components/_rtui_button.scss

@@ -171,27 +171,27 @@ $rtui-button: (
     --shadow: var(--rt-rtui-btn-base-shadow);
     --shadow-blur: var(--rt-rtui-btn-base-shadow-blur);
 
+    display: var(--display);
     width: var(--width);
     align-items: center;
-    background-color: var(--bg);
+    justify-content: center;
+    padding: var(--padding);
     border: var(--border);
     border-radius: 6px;
+    background-color: var(--bg);
     box-shadow: var(--shadow);
     color: var(--color);
     cursor: pointer;
-    display: var(--display);
     font-size: var(--font-size);
     font-weight: 600;
     gap: var(--gap);
-    justify-content: center;
     line-height: 1;
-    padding: var(--padding);
+    text-decoration: none;
     transition:
         background-color 0.15s linear,
         color 0.15s linear,
         box-shadow 0.15s linear,
         border-color 0.15s linear;
-    text-decoration: none;
 
     &:focus {
         outline: none;