@ptsecurity/mosaic 15.1.0 → 15.2.0

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,
@@ -7429,6 +7460,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 +7527,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 {
@@ -9861,21 +9903,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/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/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>;

package/dl/dl.scss

@@ -9,10 +9,12 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-dl {
     display: grid;
     column-gap: var(
-        --mc-description-list-size-horizontal-column-gap, map.get($tokens, description-list-size-horizontal-column-gap)
+        --mc-description-list-size-default-horizontal-column-gap,
+        map.get($tokens, description-list-size-default-horizontal-column-gap)
     );
     row-gap: var(
-        --mc-description-list-size-horizontal-row-gap, map.get($tokens, description-list-size-horizontal-row-gap)
+        --mc-description-list-size-default-horizontal-row-gap,
+        map.get($tokens, description-list-size-default-horizontal-row-gap)
     );
 
     grid-template-columns: repeat(4, 1fr);
@@ -29,6 +31,17 @@ $tokens: meta.module-variables(tokens) !default;
         );
     }
 
+    &.mc-dl_small {
+        column-gap: var(
+            --mc-description-list-size-small-horizontal-column-gap,
+            map.get($tokens, description-list-size-small-horizontal-column-gap)
+        );
+        row-gap: var(
+            --mc-description-list-size-small-horizontal-row-gap,
+            map.get($tokens, description-list-size-small-horizontal-row-gap)
+        );
+    }
+
     &.mc-dl_wide {
         grid-template-columns: repeat(2, 1fr);
 
@@ -45,10 +58,12 @@ $tokens: meta.module-variables(tokens) !default;
         grid-template-columns: repeat(1, 1fr);
 
         column-gap: var(
-            --mc-description-list-size-vertical-column-gap, map.get($tokens, description-list-size-vertical-column-gap)
+            --mc-description-list-size-default-vertical-column-gap,
+            map.get($tokens, description-list-size-default-vertical-column-gap)
         );
         row-gap: var(
-            --mc-description-list-size-vertical-row-gap, map.get($tokens, description-list-size-vertical-row-gap)
+            --mc-description-list-size-default-vertical-row-gap,
+            map.get($tokens, description-list-size-default-vertical-row-gap)
         );
 
         .mc-dt,
@@ -58,9 +73,27 @@ $tokens: meta.module-variables(tokens) !default;
 
         .mc-dd {
             margin-bottom: var(
-                --mc-description-list-size-vertical-dd-margin-bottom,
-                map.get($tokens, description-list-size-vertical-dd-margin-bottom)
+                --mc-description-list-size-default-vertical-dd-margin-bottom,
+                map.get($tokens, description-list-size-default-vertical-dd-margin-bottom)
             );
         }
+
+        &.mc-dl_small {
+            column-gap: var(
+                --mc-description-list-size-small-vertical-column-gap,
+                map.get($tokens, description-list-size-small-vertical-column-gap)
+            );
+            row-gap: var(
+                --mc-description-list-size-small-vertical-row-gap,
+                map.get($tokens, description-list-size-small-vertical-row-gap)
+            );
+
+            .mc-dd {
+                margin-bottom: var(
+                    --mc-description-list-size-small-vertical-dd-margin-bottom,
+                    map.get($tokens, description-list-size-small-vertical-dd-margin-bottom)
+                );
+            }
+        }
     }
 }