@ptsecurity/mosaic 16.1.2 → 16.3.0

package/_theming.scss

@@ -6796,7 +6796,9 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 
 .mc-scrollbar {
     //firefox
-    scrollbar-width: auto;
+    @supports not selector(::-webkit-scrollbar) {
+        scrollbar-width: thin;
+    }
 
     // webkit
     &::-webkit-scrollbar,
@@ -6809,6 +6811,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
         width: var(--mc-scrollbar-size-thumb-width, $scrollbar-size-thumb-width);
         border-width: var(--mc-scrollbar-size-thumb-inset-border-width, $scrollbar-size-thumb-border-width);
         border-radius: var(--mc-scrollbar-size-thumb-inset-border-radius, $scrollbar-size-thumb-border-radius);
+        min-height: 20px;
     }
 
     &::-webkit-scrollbar-button,
@@ -6826,9 +6829,10 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     $arrow: map-get($scrollbar, arrow);
 
     .mc-scrollbar {
-
         // firefox
-        scrollbar-color: map-get($thumb, normal) map-get($scrollbar, track);
+        @supports not selector(::-webkit-scrollbar) {
+            scrollbar-color: map-get($thumb, normal) map-get($scrollbar, track);
+        }
 
         // webkit
         &::-webkit-scrollbar,
@@ -9823,7 +9827,11 @@ button {
             color: map-get($foreground, text-disabled);
 
             & .mc-toggle__overlay {
-                background: mc-color($background, overlay-disabled);
+                background: rgba(255, 255, 255, 0.3);
+            }
+
+            &.mc-active .mc-toggle__circle {
+                background: white;
             }
         }
     }
@@ -9832,10 +9840,18 @@ button {
 @mixin mc-toggle-typography($config) {
     .mc-toggle:not(.mc-toggle_small) {
         @include mc-typography-level-to-styles($config, $toggle-font-default);
+
+        .mc-toggle-bar-outer-container {
+            height: mc-line-height($config, $toggle-font-default);
+        }
     }
 
     .mc-toggle.mc-toggle_small {
         @include mc-typography-level-to-styles($config, $toggle-small-font-default);
+
+        .mc-toggle-bar-outer-container {
+            height: mc-line-height($config, $toggle-small-font-default);
+        }
     }
 }
 
@@ -10244,8 +10260,109 @@ button {
 
 
 
+@mixin mc-form-geometry() {
+    .mc-form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mc-form__row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .mc-form-horizontal {
+        $config: mc-typography-config();
+
+        $line-height: mc-line-height($config, body);
+
+        $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-horizontal-row-margin-bottom, $forms-size-horizontal-row-margin-bottom
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(--mc-forms-size-horizontal-label-padding-top, $label-padding-top);
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: var(
+                --mc-forms-size-horizontal-control-padding-left,
+                $forms-size-horizontal-control-padding-left
+            );
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-horizontal-legend-margin-top, $forms-size-horizontal-legend-margin-top
+            );
+            margin-bottom: var(
+                --mc-forms-size-horizontal-legend-margin-bottom,
+                $forms-size-horizontal-legend-margin-bottom
+            );
+        }
+    }
+
+    .mc-form-vertical {
+        & .mc-form__row {
+            flex-direction: column;
+        }
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-vertical-row-margin-bottom, $forms-size-vertical-row-margin-bottom
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(
+                --mc-forms-size-vertical-label-padding-top, $forms-size-vertical-label-padding-top
+            );
+            padding-bottom: var(
+                --mc-forms-size-vertical-label-padding-bottom, $forms-size-vertical-label-padding-bottom
+            );
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: 0;
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-vertical-legend-margin-top, $forms-size-vertical-legend-margin-top
+            );
+            margin-bottom: var(
+                --mc-forms-size-vertical-legend-margin-bottom, $forms-size-vertical-legend-margin-bottom
+            );
+        }
+    }
+
+    .mc-form__fieldset {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mc-form__fieldset.mc-horizontal {
+        flex-direction: row;
+
+        & .mc-form__row:not(:first-child) {
+            padding-left: var(
+                --mc-forms-size-vertical-control-padding-left, $forms-size-vertical-control-padding-left
+            );
+        }
+    }
+}
 
 @mixin mc-forms-theme($theme) {
+    @include mc-form-geometry();
+
     $foreground: map-get($theme, foreground);
 
     $forms: map-get(map-get($theme, components), forms);

package/checkbox/checkbox.scss

@@ -22,18 +22,15 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-checkbox-checkmark,
 .mc-checkbox-mixedmark {
     display: none;
-
-    position: absolute;
-
-    top: -1px;
-    left: -1px;
-    right: 0;
-    bottom: 0;
 }
 
 .mc-checkbox-frame {
     @extend %mc-checkbox-outer-box;
 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     background-color: transparent;
     border: {
         width: var(--mc-checkbox-size-border-width, map.get($tokens, checkbox-size-border-width));

package/core/forms/_forms-theme.scss

@@ -3,7 +3,119 @@
 
 @use '../styles/typography' as *;
 
+@mixin mc-form-geometry($tokens) {
+    .mc-form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mc-form__row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .mc-form-horizontal {
+        $config: mc-typography-config($tokens);
+
+        $line-height: mc-line-height($config, body);
+
+        $form-field-size-height: map.get($tokens, form-field-size-height);
+
+        $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-horizontal-row-margin-bottom,
+                #{map.get($tokens, forms-size-horizontal-row-margin-bottom)}
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(--mc-forms-size-horizontal-label-padding-top, #{$label-padding-top});
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: var(
+                --mc-forms-size-horizontal-control-padding-left,
+                #{map.get($tokens, forms-size-horizontal-control-padding-left)}
+            );
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-horizontal-legend-margin-top,
+                #{map.get($tokens, forms-size-horizontal-legend-margin-top)}
+            );
+            margin-bottom: var(
+                --mc-forms-size-horizontal-legend-margin-bottom,
+                #{map.get($tokens, forms-size-horizontal-legend-margin-bottom)}
+            );
+        }
+    }
+
+    .mc-form-vertical {
+        & .mc-form__row {
+            flex-direction: column;
+        }
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-vertical-row-margin-bottom,
+                #{map.get($tokens, forms-size-vertical-row-margin-bottom)}
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(
+                --mc-forms-size-vertical-label-padding-top,
+                #{map.get($tokens, forms-size-vertical-label-padding-top)}
+            );
+            padding-bottom: var(
+                --mc-forms-size-vertical-label-padding-bottom,
+                #{map.get($tokens, forms-size-vertical-label-padding-bottom)}
+            );
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: 0;
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-vertical-legend-margin-top,
+                #{map.get($tokens, forms-size-vertical-legend-margin-top)}
+            );
+            margin-bottom: var(
+                --mc-forms-size-vertical-legend-margin-bottom,
+                #{map.get($tokens, forms-size-vertical-legend-margin-bottom)}
+            );
+        }
+    }
+
+    .mc-form__fieldset {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mc-form__fieldset.mc-horizontal {
+        flex-direction: row;
+
+        & .mc-form__row:not(:first-child) {
+            padding-left: var(
+                --mc-forms-size-vertical-control-padding-left,
+                #{map.get($tokens, forms-size-vertical-control-padding-left)}
+            );
+        }
+    }
+}
+
 @mixin mc-forms-theme($theme) {
+    @include mc-form-geometry(map.get($theme, tokens));
+
     $foreground: map.get($theme, foreground);
 
     $forms: map.get(map.get($theme, components), forms);

package/core/locales/index.d.ts

@@ -1,4 +1,2 @@
-import { InjectionToken } from '@angular/core';
 export * from './locale-service';
 export * from './locale-service.module';
-export declare const MC_LOCALE_ID: InjectionToken<string>;

package/core/pop-up/pop-up.d.ts

@@ -7,6 +7,9 @@ export declare abstract class McPopUp implements OnDestroy {
     private changeDetectorRef;
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
+    context: {
+        $implicit: any;
+    } | null;
     classMap: {};
     warning: boolean;
     visibility: PopUpVisibility;

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -8,7 +8,7 @@ $tokens: meta.module-variables(tokens) !default;
 
 .mc-pseudo-checkbox {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
     box-sizing: border-box;
 
     width: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
@@ -24,14 +24,12 @@ $tokens: meta.module-variables(tokens) !default;
 
     vertical-align: middle;
     flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
 
     & .mc-checkbox-checkmark,
     & .mc-checkbox-mixedmark {
         display: none;
-
-        position: absolute;
-        top: calc(-1 * var(--mc-checkbox-size-border-width, #{map.get($tokens, checkbox-size-border-width)}));
-        left: calc(-1 * var(--mc-checkbox-size-border-width, #{map.get($tokens, checkbox-size-border-width)}));
     }
 
     &.mc-pseudo-checkbox-checked,

package/core/styles/_core.scss

@@ -3,7 +3,6 @@
 @use 'common/overlay' as *;
 @use 'common/visually-hidden' as *;
 
-
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin mc-core() {
     @include a11y-visually-hidden();

package/core/styles/theming/_scrollbars.scss

@@ -5,7 +5,9 @@
 
 .mc-scrollbar {
     //firefox
-    scrollbar-width: auto;
+    @supports not selector(::-webkit-scrollbar) {
+        scrollbar-width: thin;
+    }
 }
 
 @mixin mc-scrollbar-theme($theme) {
@@ -14,8 +16,12 @@
     $arrow: map.get($scrollbar, arrow);
 
     .mc-scrollbar {
+        @include mc-scrollbar-geometry(map.get($theme, tokens));
+
         // firefox
-        scrollbar-color: map.get($thumb, normal) map.get($scrollbar, track);
+        @supports not selector(::-webkit-scrollbar) {
+            scrollbar-color: map-get($thumb, normal) map-get($scrollbar, track);
+        }
 
         // webkit
         &::-webkit-scrollbar,
@@ -84,7 +90,6 @@
             }
         }
         /* stylelint-enable */
-        @include mc-scrollbar-geometry(map.get($theme, tokens));
     }
 }
 
@@ -106,6 +111,7 @@
             --mc-scrollbar-size-thumb-inset-border-radius,
             map.get($tokens, scrollbar-size-thumb-border-radius)
         );
+        min-height: 20px;
     }
 
     &::-webkit-scrollbar-button,