@ptsecurity/mosaic 15.1.0 → 15.2.1

package/_theming.scss

@@ -1060,15 +1060,24 @@ $description-list-dark-color-scheme-dd: #d7dee4;
 $description-list-size-grid-template-columns: repeat(4, 1fr);
 $description-list-size-dt-grid-column: 1;
 $description-list-size-dd-grid-column: 2 / span 3;
-$description-list-size-horizontal-column-gap: 16px;
-$description-list-size-horizontal-row-gap: 12px;
-$description-list-size-vertical-column-gap: 0;
-$description-list-size-vertical-row-gap: 2px;
-$description-list-size-vertical-dd-margin-bottom: 16px;
-$description-list-font-horizontal-dt: body;
-$description-list-font-horizontal-dd: body;
-$description-list-font-vertical-dt: caption;
-$description-list-font-vertical-dd: body;
+$description-list-size-default-horizontal-column-gap: 16px;
+$description-list-size-default-horizontal-row-gap: 12px;
+$description-list-size-default-vertical-column-gap: 0;
+$description-list-size-default-vertical-row-gap: 2px;
+$description-list-size-default-vertical-dd-margin-bottom: 16px;
+$description-list-size-small-horizontal-column-gap: 8px;
+$description-list-size-small-horizontal-row-gap: 8px;
+$description-list-size-small-vertical-column-gap: 0;
+$description-list-size-small-vertical-row-gap: 0;
+$description-list-size-small-vertical-dd-margin-bottom: 12px;
+$description-list-font-default-horizontal-dt: body;
+$description-list-font-default-horizontal-dd: body;
+$description-list-font-default-vertical-dt: caption;
+$description-list-font-default-vertical-dd: body;
+$description-list-font-small-horizontal-dt: caption;
+$description-list-font-small-horizontal-dd: caption;
+$description-list-font-small-vertical-dt: caption;
+$description-list-font-small-vertical-dd: caption;
 $dropdown-item-size-padding: 5px 15px;
 $dropdown-item-size-icon-padding: 0 8px 2px 0;
 $dropdown-item-font-default: body;
@@ -1087,19 +1096,23 @@ $dropdown-panel-size-border-width: 1px;
 $dropdown-panel-size-border-radius: 4px;
 $form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
+$form-field-light-color-scheme-states-autofill-background: #ebf8fd;
 $form-field-light-color-scheme-states-hover-border: #8c99a5;
 $form-field-light-color-scheme-states-invalid-border: #db3c55;
 $form-field-light-color-scheme-states-invalid-background: #fff3f3;
 $form-field-dark-color-scheme-border: #515e69;
 $form-field-dark-color-scheme-background: transparent;
+$form-field-dark-color-scheme-states-autofill-background: #143641;
 $form-field-dark-color-scheme-states-hover-border: #6d7a86;
 $form-field-dark-color-scheme-states-invalid-border: #b9023a;
-$form-field-dark-color-scheme-states-invalid-background: mix(#41000b, transparent, 30%);
+$form-field-dark-color-scheme-states-invalid-background: rgba(#41000b, 0.3);
 $form-field-size-height: 32px;
 $form-field-size-border-width: 1px;
 $form-field-size-border-radius: 4px;
 $form-field-size-button-width: 32px;
 $form-field-font-default: body;
+$form-field-hint-light-color-scheme-text-color: #6d7a86;
+$form-field-hint-dark-color-scheme-text-color: #8c99a5;
 $form-field-hint-size-margin-top: 4px;
 $form-field-hint-font-default: caption;
 $form-field-password-hint-light-color-scheme-text-color: #19252f;
@@ -3770,7 +3783,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
         state-hover-border: $form-field-light-color-scheme-states-hover-border,
         state-invalid-border: $form-field-light-color-scheme-states-invalid-border,
-        state-invalid-background: $form-field-light-color-scheme-states-invalid-background
+        state-invalid-background: $form-field-light-color-scheme-states-invalid-background,
+        state-autofill-background: $form-field-light-color-scheme-states-autofill-background
     );
 
     $form-field-password-hint: (
@@ -3784,6 +3798,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-valid-icon-color: $form-field-password-hint-light-color-scheme-states-valid-icon-color
     );
 
+    $form-field-hint: (
+        text-color: $form-field-hint-light-color-scheme-text-color
+    );
+
     $forms: (
         label: $forms-light-color-scheme-label,
         legend: $forms-light-color-scheme-legend,
@@ -4071,6 +4089,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         icon: $icon,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
+        form-field-hint: $form-field-hint,
         forms: $forms,
         link: $link,
         loader-overlay: $loader-overlay,
@@ -4484,7 +4503,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
         state-hover-border: $form-field-dark-color-scheme-states-hover-border,
         state-invalid-border: $form-field-dark-color-scheme-states-invalid-border,
-        state-invalid-background: $form-field-dark-color-scheme-states-invalid-background
+        state-invalid-background: $form-field-dark-color-scheme-states-invalid-background,
+        state-autofill-background: $form-field-dark-color-scheme-states-autofill-background
     );
 
     $form-field-password-hint: (
@@ -4498,6 +4518,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-valid-icon-color: $form-field-password-hint-dark-color-scheme-states-valid-icon-color
     );
 
+    $form-field-hint: (
+        text-color: $form-field-password-hint-dark-color-scheme-text-color
+    );
+
     $forms: (
         label: $forms-dark-color-scheme-label,
         legend: $forms-dark-color-scheme-legend,
@@ -4785,6 +4809,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         icon: $icon,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
+        form-field-hint: $form-field-hint,
         forms: $forms,
         link: $link,
         loader-overlay: $loader-overlay,
@@ -5168,7 +5193,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
         state-hover-border: map-get($tokens, 'form-field-#{$scheme}-states-hover-border'),
         state-invalid-border: map-get($tokens, 'form-field-#{$scheme}-states-invalid-border'),
-        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background')
+        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background'),
+        state-autofill-background: map-get($tokens, 'form-field-#{$scheme}-states-autofill-background')
     );
 
     $form-field-password-hint: (
@@ -5182,6 +5208,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-valid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-icon-color')
     );
 
+    $form-field-hint: (
+        text-color: map-get($tokens, 'form-field-hint-#{$scheme}-text-color'),
+    );
+
     $forms: (
         label: map-get($tokens, 'forms-#{$scheme}-label'),
         legend: map-get($tokens, 'forms-#{$scheme}-legend'),
@@ -5507,6 +5537,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         dl: $dl,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
+        form-field-hint: $form-field-hint,
         forms: $forms,
         icon: $icon,
         link: $link,
@@ -6846,8 +6877,6 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     $checkbox: map-get(map-get($theme, components), checkbox);
 
     .mc-checkbox {
-        color: map-get($foreground, text);
-
         &:not(.mc-disabled) {
             .mc-checkbox-overlay:hover {
                 background-color: map-get($background, overlay-hover);
@@ -6856,10 +6885,14 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 
         &.mc-primary {
             @include mc-checkbox-color(map-get($checkbox, default));
+
+            color: map-get($foreground, text) !important;
         }
 
         &.mc-error {
             @include mc-checkbox-color(map-get($checkbox, error));
+
+            color: map-get($foreground, text) !important;
         }
 
         &.mc-disabled,
@@ -7429,6 +7462,15 @@ $mc-datepicker-today-fade-amount: 0.2;
     $form-field: map-get(map-get($theme, components), form-field);
 
     .mc-form-field {
+        & .mc-input {
+            //https://css-tricks.com/almanac/selectors/a/autofill/
+            &:-webkit-autofill,
+            &:-webkit-autofill:hover,
+            &:-webkit-autofill:focus {
+                -webkit-box-shadow: 0 0 0 40rem map-get($form-field, state-autofill-background) inset;
+            }
+        }
+
         & .mc-form-field__container {
             background-color: map-get($form-field, background);
         }
@@ -7487,12 +7529,14 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-hint {
+        $hint: map-get(map-get($theme, components), form-field-hint);
+
         &.mc-primary {
-            color: mc-color($primary);
+            color: map-get($hint, text-color);
         }
 
         &.mc-secondary {
-            color: mc-color($secondary);
+            color: map-get($hint, text-color);
         }
 
         &.mc-error {
@@ -7740,7 +7784,8 @@ $mc-datepicker-today-fade-amount: 0.2;
         @include mc-typography-level-to-styles($config, $input-font-default);
     }
 
-    .mc-input.mc-input_monospace {
+    .mc-input.mc-input_monospace,
+    .mc-input.mc-input-password[type="password"] {
         @include mc-typography-level-to-styles($config, $input-font-monospace);
     }
 }
@@ -9861,21 +9906,41 @@ button {
 @mixin mc-dl-typography($config) {
     .mc-dl {
         & .mc-dt {
-            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dt);
+            @include mc-typography-level-to-styles($config, $description-list-font-default-horizontal-dt);
         }
 
         & .mc-dd {
-            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dd);
+            @include mc-typography-level-to-styles($config, $description-list-font-default-horizontal-dd);
+        }
+
+        &.mc-dl_small {
+            & .mc-dt {
+                @include mc-typography-level-to-styles($config, $description-list-font-small-horizontal-dt);
+            }
+
+            & .mc-dd {
+                @include mc-typography-level-to-styles($config, $description-list-font-small-horizontal-dd);
+            }
         }
     }
 
     .mc-dl.mc-dl_vertical {
         & .mc-dt {
-            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dt);
+            @include mc-typography-level-to-styles($config, $description-list-font-default-vertical-dt);
         }
 
         & .mc-dd {
-            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dd);
+            @include mc-typography-level-to-styles($config, $description-list-font-default-vertical-dd);
+        }
+
+        &.mc-dl_small {
+            & .mc-dt {
+                @include mc-typography-level-to-styles($config, $description-list-font-small-vertical-dt);
+            }
+
+            & .mc-dd {
+                @include mc-typography-level-to-styles($config, $description-list-font-small-vertical-dd);
+            }
         }
     }
 }

package/_visual.scss

@@ -1014,15 +1014,24 @@ $description-list-dark-color-scheme-dd: #d7dee4;
 $description-list-size-grid-template-columns: repeat(4, 1fr);
 $description-list-size-dt-grid-column: 1;
 $description-list-size-dd-grid-column: 2 / span 3;
-$description-list-size-horizontal-column-gap: 16px;
-$description-list-size-horizontal-row-gap: 12px;
-$description-list-size-vertical-column-gap: 0;
-$description-list-size-vertical-row-gap: 2px;
-$description-list-size-vertical-dd-margin-bottom: 16px;
-$description-list-font-horizontal-dt: body;
-$description-list-font-horizontal-dd: body;
-$description-list-font-vertical-dt: caption;
-$description-list-font-vertical-dd: body;
+$description-list-size-default-horizontal-column-gap: 16px;
+$description-list-size-default-horizontal-row-gap: 12px;
+$description-list-size-default-vertical-column-gap: 0;
+$description-list-size-default-vertical-row-gap: 2px;
+$description-list-size-default-vertical-dd-margin-bottom: 16px;
+$description-list-size-small-horizontal-column-gap: 8px;
+$description-list-size-small-horizontal-row-gap: 8px;
+$description-list-size-small-vertical-column-gap: 0;
+$description-list-size-small-vertical-row-gap: 0;
+$description-list-size-small-vertical-dd-margin-bottom: 12px;
+$description-list-font-default-horizontal-dt: body;
+$description-list-font-default-horizontal-dd: body;
+$description-list-font-default-vertical-dt: caption;
+$description-list-font-default-vertical-dd: body;
+$description-list-font-small-horizontal-dt: caption;
+$description-list-font-small-horizontal-dd: caption;
+$description-list-font-small-vertical-dt: caption;
+$description-list-font-small-vertical-dd: caption;
 $dropdown-item-size-padding: 5px 15px;
 $dropdown-item-size-icon-padding: 0 8px 2px 0;
 $dropdown-item-font-default: body;
@@ -1041,19 +1050,23 @@ $dropdown-panel-size-border-width: 1px;
 $dropdown-panel-size-border-radius: 4px;
 $form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
+$form-field-light-color-scheme-states-autofill-background: #ebf8fd;
 $form-field-light-color-scheme-states-hover-border: #8c99a5;
 $form-field-light-color-scheme-states-invalid-border: #db3c55;
 $form-field-light-color-scheme-states-invalid-background: #fff3f3;
 $form-field-dark-color-scheme-border: #515e69;
 $form-field-dark-color-scheme-background: transparent;
+$form-field-dark-color-scheme-states-autofill-background: #143641;
 $form-field-dark-color-scheme-states-hover-border: #6d7a86;
 $form-field-dark-color-scheme-states-invalid-border: #b9023a;
-$form-field-dark-color-scheme-states-invalid-background: mix(#41000b, transparent, 30%);
+$form-field-dark-color-scheme-states-invalid-background: rgba(#41000b, 0.3);
 $form-field-size-height: 32px;
 $form-field-size-border-width: 1px;
 $form-field-size-border-radius: 4px;
 $form-field-size-button-width: 32px;
 $form-field-font-default: body;
+$form-field-hint-light-color-scheme-text-color: #6d7a86;
+$form-field-hint-dark-color-scheme-text-color: #8c99a5;
 $form-field-hint-size-margin-top: 4px;
 $form-field-hint-font-default: caption;
 $form-field-password-hint-light-color-scheme-text-color: #19252f;

package/autocomplete/autocomplete.scss

@@ -15,7 +15,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: relative;
 
-    overflow: auto;
+    overflow: hidden auto;
     -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 
     margin-top: -1px;

package/button/_button-base.scss

@@ -60,4 +60,10 @@ $tokens: meta.module-variables(tokens) !default;
             --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
         );
     }
+
+    & .mc-icon_right {
+        margin-left: var(
+            --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
+        );
+    }
 }

package/button/button.component.d.ts

@@ -1,17 +1,22 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
 import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor } from '@ptsecurity/mosaic/core';
 import { McIcon } from '@ptsecurity/mosaic/icon';
 import * as i0 from "@angular/core";
+export declare const leftIconClassName = "mc-icon_left";
+export declare const rightIconClassName = "mc-icon_right";
+export declare const buttonLeftIconClassName = "mc-icon-button_left";
+export declare const buttonRightIconClassName = "mc-icon-button_right";
 export declare class McButtonCssStyler implements AfterContentInit {
     private renderer;
+    private cdr;
     icons: QueryList<McIcon>;
     nativeElement: HTMLElement;
     isIconButton: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngAfterContentInit(): void;
     updateClassModifierForIcons(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McButtonCssStyler, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McButtonCssStyler, [null, null, { skipSelf: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonCssStyler, "[mc-button]", never, {}, {}, ["icons"], never, false, never>;
 }
 /** @docs-private */
@@ -23,11 +28,12 @@ export declare class McButtonBase {
 export declare const McButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof McButtonBase;
 export declare class McButton extends McButtonMixinBase implements OnDestroy, CanDisable, CanColor {
     private focusMonitor;
+    private styler;
     hasFocus: boolean;
     get disabled(): any;
     set disabled(value: any);
     private _disabled;
-    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor);
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, styler: McButtonCssStyler);
     ngOnDestroy(): void;
     onFocus($event: any): void;
     onBlur(): void;
@@ -35,6 +41,7 @@ export declare class McButton extends McButtonMixinBase implements OnDestroy, Ca
     focus(): void;
     focusViaKeyboard(): void;
     haltDisabledEvents(event: Event): void;
+    projectContentChanged(): void;
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButton, never>;

package/button/button.module.d.ts

@@ -3,8 +3,9 @@ import * as i1 from "./button.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@angular/cdk/platform";
+import * as i5 from "@angular/cdk/observers";
 export declare class McButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonModule, [typeof i1.McButton, typeof i1.McButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McButton, typeof i1.McButtonCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonModule, [typeof i1.McButton, typeof i1.McButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule, typeof i5.ObserversModule], [typeof i1.McButton, typeof i1.McButtonCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McButtonModule>;
 }

package/checkbox/_checkbox-theme.scss

@@ -68,13 +68,15 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         &.mc-primary {
-            color: map.get($foreground, primary);
             @include mc-checkbox-color(map.get($checkbox, default));
+
+            color: map-get($foreground, text) !important;
         }
 
         &.mc-error {
-            color: map.get($foreground, error);
             @include mc-checkbox-color(map.get($checkbox, error));
+
+            color: map-get($foreground, text) !important;
         }
 
         &.mc-disabled,

package/core/styles/_mosaic-theme.scss

@@ -110,7 +110,7 @@
     @include mc-base-typography($config);
     @include mc-markdown-base-typography($md-config);
 
-    @include alert-theme($config);
+    @include mc-alert-typography($config);
     @include mc-badge-typography($config);
     @include mc-button-typography($config);
     @include mc-checkbox-typography($config);

package/core/styles/theming/_components-theming.scss

@@ -359,7 +359,8 @@
 
         state-hover-border: map-get($tokens, 'form-field-#{$scheme}-states-hover-border'),
         state-invalid-border: map-get($tokens, 'form-field-#{$scheme}-states-invalid-border'),
-        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background')
+        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background'),
+        state-autofill-background: map-get($tokens, 'form-field-#{$scheme}-states-autofill-background')
     );
 
     $form-field-password-hint: (
@@ -373,6 +374,10 @@
         state-valid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-icon-color')
     );
 
+    $form-field-hint: (
+        text-color: map-get($tokens, 'form-field-hint-#{$scheme}-text-color'),
+    );
+
     $forms: (
         label: map-get($tokens, 'forms-#{$scheme}-label'),
         legend: map-get($tokens, 'forms-#{$scheme}-legend'),
@@ -698,6 +703,7 @@
         dl: $dl,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
+        form-field-hint: $form-field-hint,
         forms: $forms,
         icon: $icon,
         link: $link,

package/core/styles/typography/_typography.scss

@@ -8,30 +8,32 @@
     $typography: map.get(map.get($tokens, mosaic), typography);
 
     $config: (
-        display-1:          map.get($typography, display-1),
-        display-2:          map.get($typography, display-2),
-        display-3:          map.get($typography, display-3),
-
-        headline:           map.get($typography, headline),
-        subheading:         map.get($typography, subheading),
-        title:              map.get($typography, title),
-
-        body:               map.get($typography, body),
-        body-strong:        map.get($typography, body-strong),
-        body-caps:          map.get($typography, body-caps),
-        body-mono:          map.get($typography, body-mono),
-        body-tabular:       map.get($typography, body-tabular),
-
-        caption:            map.get($typography, caption),
-        caption-strong:     map.get($typography, caption-strong),
-        caption-caps:       map.get($typography, caption-caps),
-        caption-mono:       map.get($typography, caption-mono),
-        caption-tabular:    map.get($typography, caption-tabular),
-
-        small-text:         map.get($typography, small-text),
-        extra-small-text:   map.get($typography, extra-small-text),
-        extra-small-text-caps:   map.get($typography, extra-small-text-caps),
-        extra-small-text-mono:   map.get($typography, extra-small-text-mono)
+        display-1:              map.get($typography, display-1),
+        display-2:              map.get($typography, display-2),
+        display-3:              map.get($typography, display-3),
+
+        headline:               map.get($typography, headline),
+        subheading:             map.get($typography, subheading),
+        title:                  map.get($typography, title),
+
+        body:                   map.get($typography, body),
+        body-strong:            map.get($typography, body-strong),
+        body-caps:              map.get($typography, body-caps),
+        body-mono:              map.get($typography, body-mono),
+        body-mono-strong:       map.get($typography, body-mono-strong),
+        body-tabular:           map.get($typography, body-tabular),
+
+        caption:                map.get($typography, caption),
+        caption-strong:         map.get($typography, caption-strong),
+        caption-caps:           map.get($typography, caption-caps),
+        caption-mono:           map.get($typography, caption-mono),
+        caption-mono-strong:    map.get($typography, caption-mono-strong),
+        caption-tabular:        map.get($typography, caption-tabular),
+
+        small-text:             map.get($typography, small-text),
+        extra-small-text:       map.get($typography, extra-small-text),
+        extra-small-text-caps:  map.get($typography, extra-small-text-caps),
+        extra-small-text-mono:  map.get($typography, extra-small-text-mono)
     );
 
     @each $key, $level in $config {
@@ -121,6 +123,10 @@
         @include mc-typography-level-to-styles($config, body-mono);
     }
 
+    .mc-body_mono_strong {
+        @include mc-typography-level-to-styles($config, body-mono-strong);
+    }
+
     .mc-caption {
         @include mc-typography-level-to-styles($config, caption);
     }
@@ -140,6 +146,10 @@
     .mc-caption_mono {
         @include mc-typography-level-to-styles($config, caption-mono);
     }
+    
+    .mc-caption_mono_strong {
+        @include mc-typography-level-to-styles($config, caption-mono-strong);
+    }
 
     .mc-small-text {
         @include mc-typography-level-to-styles($config, small-text);

package/datepicker/calendar-header.scss

@@ -65,5 +65,11 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .mc-select__content {
         max-height: 12 * 32px;
+        overflow-x: hidden;
+        scrollbar-gutter: stable;
+
+        .mc-option {
+            min-width: 65px;
+        }
     }
 }

package/datepicker/calendar.component.d.ts

@@ -31,10 +31,10 @@ export declare class McCalendar<D> implements AfterContentInit, OnDestroy, OnCha
     private _maxDate;
     /**
      * The current active date. This determines which time period is shown and which date is
-     * highlighted when using keyboard navigation.
+     * highlighted and used as the anchor on  when using keyboard navigation.
      */
     get activeDate(): D;
-    set activeDate(value: D);
+    set activeDate(value: D | null);
     private _activeDate;
     /** Function used to filter which dates are selectable. */
     dateFilter: (date: D) => boolean;
@@ -75,6 +75,7 @@ export declare class McCalendar<D> implements AfterContentInit, OnDestroy, OnCha
      * @returns The given object if it is both a date instance and valid, otherwise null.
      */
     private getValidDateOrNull;
+    private getActiveDateDefault;
     static ɵfac: i0.ɵɵFactoryDeclaration<McCalendar<any>, [null, { optional: true; }, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McCalendar<any>, "mc-calendar", ["mcCalendar"], { "startAt": "startAt"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "userSelection": "userSelection"; }, never, never, false, never>;
 }

package/dl/_dl-theme.scss

@@ -23,21 +23,66 @@ $tokens: meta.module-variables(tokens) !default;
 @mixin mc-dl-typography($config) {
     .mc-dl {
         & .mc-dt {
-            @include mc-typography-level-to-styles($config, map.get($tokens, description-list-font-horizontal-dt));
+            @include mc-typography-level-to-styles(
+                $config,
+                map.get($tokens, description-list-font-default-horizontal-dt)
+            );
         }
 
         & .mc-dd {
-            @include mc-typography-level-to-styles($config, map.get($tokens, description-list-font-horizontal-dd));
+            @include mc-typography-level-to-styles(
+                $config,
+                map.get($tokens, description-list-font-default-horizontal-dd)
+            );
+        }
+
+        &.mc-dl_small {
+            & .mc-dt {
+                @include mc-typography-level-to-styles(
+                    $config,
+                    map.get($tokens, description-list-font-small-horizontal-dt)
+                );
+            }
+
+            & .mc-dd {
+                @include mc-typography-level-to-styles(
+                    $config,
+                    map.get($tokens, description-list-font-small-horizontal-dd)
+                );
+            }
         }
     }
 
+
     .mc-dl.mc-dl_vertical {
         & .mc-dt {
-            @include mc-typography-level-to-styles($config, map.get($tokens, description-list-font-vertical-dt));
+            @include mc-typography-level-to-styles(
+                $config,
+                map.get($tokens, description-list-font-default-vertical-dt)
+            );
         }
 
         & .mc-dd {
-            @include mc-typography-level-to-styles($config, map.get($tokens, description-list-font-vertical-dd));
+            @include mc-typography-level-to-styles(
+                $config,
+                map.get($tokens, description-list-font-default-vertical-dd)
+            );
+        }
+
+        &.mc-dl_small {
+            & .mc-dt {
+                @include mc-typography-level-to-styles(
+                    $config,
+                    map.get($tokens, description-list-font-small-vertical-dt)
+                );
+            }
+
+            & .mc-dd {
+                @include mc-typography-level-to-styles(
+                    $config,
+                    map.get($tokens, description-list-font-small-vertical-dd)
+                );
+            }
         }
     }
 }

package/dl/dl.component.d.ts

@@ -5,6 +5,7 @@ export declare class McDlComponent implements AfterContentInit, OnDestroy {
     protected elementRef: ElementRef;
     minWidth: number;
     wide: boolean;
+    small: boolean;
     vertical: boolean | null;
     readonly resizeStream: Subject<Event>;
     private readonly resizeDebounceInterval;
@@ -14,7 +15,7 @@ export declare class McDlComponent implements AfterContentInit, OnDestroy {
     ngOnDestroy(): void;
     updateState: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDlComponent, "mc-dl", never, { "minWidth": "minWidth"; "wide": "wide"; "vertical": "vertical"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDlComponent, "mc-dl", never, { "minWidth": "minWidth"; "wide": "wide"; "small": "small"; "vertical": "vertical"; }, {}, never, ["*"], false, never>;
 }
 export declare class McDtComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<McDtComponent, never>;