@ptsecurity/mosaic 14.7.1 → 15.0.0

package/datepicker/calendar-header.scss

@@ -0,0 +1,69 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-calendar-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    padding:
+        var(--mc-datepicker-calendar-size-padding-top, map.get($tokens, datepicker-calendar-size-padding-top))
+        var(
+            --mc-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        )
+        var(--mc-datepicker-calendar-size-padding-blocks, map.get($tokens, datepicker-calendar-size-padding-blocks))
+        var(
+            --mc-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        );
+}
+
+.mc-calendar-header__previous-button::after {
+    border-left-width: var(
+        --mc-datepicker-calendar-size-icon-border-width,
+        map.get($tokens, datepicker-calendar-size-icon-border-width)
+    );
+
+    transform: var(
+        --mc-datepicker-calendar-size-icon-prev-icon-transform,
+        map.get($tokens, datepicker-calendar-size-icon-prev-icon-transform)
+    );
+}
+
+.mc-calendar-header__next-button::after {
+    border-right-width: var(
+        --mc-datepicker-calendar-size-icon-border-width,
+        map.get($tokens, datepicker-calendar-size-icon-border-width)
+    );
+
+    transform: var(
+        --mc-datepicker-calendar-size-icon-nex-icon-transform,
+        map.get($tokens, datepicker-calendar-size-icon-nex-icon-transform)
+    );
+}
+
+.mc-calendar-header__select {
+    width: auto !important;
+}
+
+.mc-calendar-header__button-group,
+.mc-calendar-header__select-group {
+    display: flex;
+    flex-direction: row;
+}
+
+.mc-calendar-select-panel {
+    margin-top: 2px;
+
+    min-width: 98% !important;
+
+    & .mc-select__content {
+        max-height: 12 * 32px;
+    }
+}

package/datepicker/calendar.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
+import { DateAdapter, McDateFormats } from '@ptsecurity/mosaic/core';
 import { Subject } from 'rxjs';
 import { McCalendarCellCssClasses } from './calendar-body.component';
 import { McDatepickerIntl } from './datepicker-intl';
@@ -76,5 +76,5 @@ export declare class McCalendar<D> implements AfterContentInit, OnDestroy, OnCha
      */
     private getValidDateOrNull;
     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>;
+    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/datepicker/calendar.scss

@@ -0,0 +1,68 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-calendar {
+    display: block;
+}
+
+.mc-calendar__content {
+    padding:
+        0
+        var(
+            --mc-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        )
+        var(
+            --mc-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        )
+        var(
+            --mc-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        );
+    outline: none;
+}
+
+.mc-calendar__table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.mc-calendar__table-header th {
+    text-align: center;
+    height: 30px;
+
+    &.mc-calendar__table-header-divider {
+        position: relative;
+        height: calc(
+            var(
+                --mc-datepicker-calendar-size-padding-blocks,
+                #{map.get($tokens, datepicker-calendar-size-padding-blocks)}
+            ) - 2px
+        );
+
+        $horizontal-padding: map.get($tokens, datepicker-calendar-size-padding-horizontal);
+
+        // We use an absolutely positioned pseudo-element as the divider line for the table header so we
+        // can extend it all the way to the edge of the calendar.
+        &::after {
+            content: '';
+
+            position: absolute;
+            top: 0;
+            left: calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
+            right: calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
+
+            height: var(
+                --mc-datepicker-calendar-size-divider-width,
+                map.get($tokens, datepicker-calendar-size-divider-width)
+            );
+        }
+    }
+}

package/datepicker/datepicker-content.scss

@@ -0,0 +1,32 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+$mc-datepicker-non-touch-calendar-cell-size: 40px;
+$mc-datepicker-non-touch-calendar-width:
+    $mc-datepicker-non-touch-calendar-cell-size * 7 + map.get($tokens, datepicker-calendar-size-padding-horizontal) * 2;
+// Based on the natural height of the calendar in a month with 6 rows of dates
+// (largest the calendar will get).
+$mc-datepicker-non-touch-calendar-height: 348px;
+
+.mc-datepicker__content {
+    display: block;
+
+    border: {
+        width: 1px;
+        style: solid;
+        radius: var(
+            --mc-datepicker-calendar-size-border-radius,
+            map.get($tokens, datepicker-calendar-size-border-radius)
+        );
+    }
+
+    .mc-calendar {
+        width: $mc-datepicker-non-touch-calendar-width;
+        height: $mc-datepicker-non-touch-calendar-height;
+    }
+}

package/datepicker/datepicker-input.directive.d.ts

@@ -1,6 +1,6 @@
 import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
-import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
+import { DateAdapter, McDateFormats } from '@ptsecurity/mosaic/core';
 import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
 import { McWarningTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
 import { Subject } from 'rxjs';
@@ -171,5 +171,5 @@ export declare class McDatepickerInput<D> implements McFormFieldControl<D>, Cont
     private createDateTime;
     private correctCursorPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerInput<any>, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerInput<any>, "input[mcDatepicker]", ["mcDatepickerInput"], { "placeholder": "placeholder"; "required": "required"; "mcDatepicker": "mcDatepicker"; "mcDatepickerFilter": "mcDatepickerFilter"; "value": "value"; "min": "min"; "max": "max"; "disabled": "disabled"; "id": "id"; "mcValidationTooltip": "mcValidationTooltip"; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerInput<any>, "input[mcDatepicker]", ["mcDatepickerInput"], { "placeholder": "placeholder"; "required": "required"; "mcDatepicker": "mcDatepicker"; "mcDatepickerFilter": "mcDatepickerFilter"; "value": "value"; "min": "min"; "max": "max"; "disabled": "disabled"; "id": "id"; "mcValidationTooltip": "mcValidationTooltip"; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
 }

package/datepicker/datepicker-input.scss

@@ -0,0 +1,15 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-form-field-type-datepicker {
+    width: auto;
+}
+
+.mc-datepicker {
+    width: var(--mc-datepicker-input-size-width, map.get($tokens, datepicker-input-size-width));
+}

package/datepicker/datepicker-toggle.component.d.ts

@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
 /** Can be used to override the icon of a `mcDatepickerToggle`. */
 export declare class McDatepickerToggleIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerToggleIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerToggleIcon, "[mcDatepickerToggleIcon]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerToggleIcon, "[mcDatepickerToggleIcon]", never, {}, {}, never, never, false, never>;
 }
 export declare class McDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
     intl: McDatepickerIntl;
@@ -31,5 +31,5 @@ export declare class McDatepickerToggle<D> implements AfterContentInit, OnChange
     open(event: Event): void;
     private watchStateChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerToggle<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerToggle<any>, "mc-datepicker-toggle", ["mcDatepickerToggle"], { "disabled": "disabled"; "datepicker": "for"; "tabIndex": "tabIndex"; }, {}, ["customIcon"], ["[mcDatepickerToggleIcon]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerToggle<any>, "mc-datepicker-toggle", ["mcDatepickerToggle"], { "disabled": "disabled"; "datepicker": "for"; "tabIndex": "tabIndex"; }, {}, ["customIcon"], ["[mcDatepickerToggleIcon]"], false, never>;
 }

package/datepicker/datepicker-toggle.scss

@@ -0,0 +1,41 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-datepicker-toggle:focus {
+    outline: 0;
+}
+
+.mc-datepicker-toggle__button.mc-icon-button {
+    width: var(--mc-datepicker-toggle-size-width, map.get($tokens, datepicker-toggle-size-width));
+    height: var(--mc-datepicker-toggle-size-height, map.get($tokens, datepicker-toggle-size-height));
+    margin-left: 2px;
+}
+
+.mc-form-field-appearance-legacy {
+    .mc-form-field-prefix,
+    .mc-form-field-suffix {
+        .mc-datepicker-toggle__default-icon {
+            width: 1em;
+        }
+    }
+}
+
+.mc-form-field:not(.mc-form-field-appearance-legacy) {
+    .mc-form-field-prefix,
+    .mc-form-field-suffix {
+        .mc-datepicker-toggle__default-icon {
+            display: block;
+            width: 1.5em;
+            height: 1.5em;
+        }
+
+        .mc-icon-button .mc-datepicker-toggle__default-icon {
+            margin: auto;
+        }
+    }
+}

package/datepicker/datepicker.component.d.ts

@@ -1,7 +1,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayRef, ScrollStrategy } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, EventEmitter, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
-import { DateAdapter } from '@ptsecurity/cdk/datetime';
+import { DateAdapter } from '@ptsecurity/mosaic/core';
 import { Subject } from 'rxjs';
 import { McCalendarCellCssClasses } from './calendar-body.component';
 import { McCalendar } from './calendar.component';
@@ -40,7 +40,7 @@ export declare class McDatepickerContent<D> implements OnDestroy {
     ngOnDestroy(): void;
     startExitAnimation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerContent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerContent<any>, "mc-datepicker__content", ["mcDatepickerContent"], {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerContent<any>, "mc-datepicker__content", ["mcDatepickerContent"], {}, {}, never, never, false, never>;
 }
 /** Component responsible for managing the datepicker popup/dialog. */
 export declare class McDatepicker<D> implements OnDestroy {
@@ -144,5 +144,5 @@ export declare class McDatepicker<D> implements OnDestroy {
     /** Create the popup PositionStrategy. */
     private createPopupPositionStrategy;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDatepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepicker<any>, "mc-datepicker", ["mcDatepicker"], { "hasBackdrop": "hasBackdrop"; "startAt": "startAt"; "disabled": "disabled"; "opened": "opened"; "minDate": "minDate"; "maxDate": "maxDate"; "panelClass": "panelClass"; "dateClass": "dateClass"; "backdropClass": "backdropClass"; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepicker<any>, "mc-datepicker", ["mcDatepicker"], { "hasBackdrop": "hasBackdrop"; "startAt": "startAt"; "disabled": "disabled"; "opened": "opened"; "minDate": "minDate"; "maxDate": "maxDate"; "panelClass": "panelClass"; "dateClass": "dateClass"; "backdropClass": "backdropClass"; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
 }

package/datepicker/month-view.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
+import { DateAdapter, McDateFormats } from '@ptsecurity/mosaic/core';
 import { McCalendarBody, McCalendarCell, McCalendarCellCssClasses } from './calendar-body.component';
 import * as i0 from "@angular/core";
 /**
@@ -70,5 +70,5 @@ export declare class McMonthView<D> implements AfterContentInit {
     /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
     private hasSameMonthAndYear;
     static ɵfac: i0.ɵɵFactoryDeclaration<McMonthView<any>, [null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McMonthView<any>, "mc-month-view", ["mcMonthView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "activeDateChange": "activeDateChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McMonthView<any>, "mc-month-view", ["mcMonthView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
 }

package/divider/_divider-theme.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+
+@mixin mc-divider-theme($theme) {
+    $divider: map.get(map.get($theme, components), divider);
+
+    .mc-divider_horizontal {
+        border-top-color: map.get($divider, color);
+    }
+
+    .mc-divider_vertical {
+        border-right-color: map.get($divider, color);
+    }
+}

package/divider/divider.component.d.ts

@@ -7,5 +7,5 @@ export declare class McDivider {
     set inset(value: boolean);
     private _inset;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDivider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDivider, "mc-divider", never, { "vertical": "vertical"; "inset": "inset"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDivider, "mc-divider", never, { "vertical": "vertical"; "inset": "inset"; }, {}, never, never, false, never>;
 }

package/divider/divider.scss

@@ -0,0 +1,47 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+// This mixin provides the correct offset for an inset divider based on the
+// size of the parent class (e.g. avatar vs icon)
+@mixin mc-inset-divider-offset($offset, $padding) {
+    $mc-inset-divider-offset: (2 * $padding) + $offset;
+
+    margin-left: $mc-inset-divider-offset;
+    width: 100% - $mc-inset-divider-offset;
+
+    [dir='rtl'] & {
+        margin-left: auto;
+        margin-right: $mc-inset-divider-offset;
+    }
+}
+
+.mc-divider {
+    display: block;
+    margin: 0;
+
+    &.mc-divider_horizontal {
+        border-top-width: var(--mc-divider-size-width, map.get($tokens, divider-size-width));
+        border-top-style: solid;
+    }
+
+    &.mc-divider_vertical {
+        height: 100%;
+
+        border-right-width: var(--mc-divider-size-width, map.get($tokens, divider-size-width));
+        border-right-style: solid;
+    }
+
+    &.mc-divider_inset {
+        margin-left: var(--mc-divider-size-inset-margin, map.get($tokens, divider-size-inset-margin));
+
+        [dir='rtl'] & {
+            margin-left: auto;
+            margin-right: var(--mc-divider-size-inset-margin, map.get($tokens, divider-size-inset-margin));
+        }
+    }
+}

package/dl/_dl-theme.scss

@@ -0,0 +1,44 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-dl-theme($theme) {
+    $dl: map.get(map.get($theme, components), dl);
+
+    .mc-dt {
+        color: map.get($dl, dt);
+    }
+
+    .mc-dd {
+        color: map.get($dl, dd);
+    }
+}
+
+@mixin mc-dl-typography($config) {
+    .mc-dl {
+        & .mc-dt {
+            @include mc-typography-level-to-styles($config, map.get($tokens, description-list-font-horizontal-dt));
+        }
+
+        & .mc-dd {
+            @include mc-typography-level-to-styles($config, map.get($tokens, description-list-font-horizontal-dd));
+        }
+    }
+
+    .mc-dl.mc-dl_vertical {
+        & .mc-dt {
+            @include mc-typography-level-to-styles($config, map.get($tokens, description-list-font-vertical-dt));
+        }
+
+        & .mc-dd {
+            @include mc-typography-level-to-styles($config, map.get($tokens, description-list-font-vertical-dd));
+        }
+    }
+}
+

package/dl/dl.component.d.ts

@@ -14,13 +14,13 @@ 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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDlComponent, "mc-dl", never, { "minWidth": "minWidth"; "wide": "wide"; "vertical": "vertical"; }, {}, never, ["*"], false, never>;
 }
 export declare class McDtComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<McDtComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDtComponent, "mc-dt", never, {}, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDtComponent, "mc-dt", never, {}, {}, never, ["*"], false, never>;
 }
 export declare class McDdComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<McDdComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDdComponent, "mc-dd", never, {}, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDdComponent, "mc-dd", never, {}, {}, never, ["*"], false, never>;
 }

package/dl/dl.scss

@@ -0,0 +1,66 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$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)
+    );
+    row-gap: var(
+        --mc-description-list-size-horizontal-row-gap, map.get($tokens, description-list-size-horizontal-row-gap)
+    );
+
+    grid-template-columns: repeat(4, 1fr);
+
+    .mc-dt {
+        grid-column: var(
+            --mc-description-list-size-dt-grid-column, map.get($tokens, description-list-size-dt-grid-column)
+        );
+    }
+
+    .mc-dd {
+        grid-column: var(
+            --mc-description-list-size-dd-grid-column, map.get($tokens, description-list-size-dd-grid-column)
+        );
+    }
+
+    &.mc-dl_wide {
+        grid-template-columns: repeat(2, 1fr);
+
+        .mc-dt {
+            grid-column: 1;
+        }
+
+        .mc-dd {
+            grid-column: 2;
+        }
+    }
+
+    &.mc-dl_vertical {
+        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)
+        );
+        row-gap: var(
+            --mc-description-list-size-vertical-row-gap, map.get($tokens, description-list-size-vertical-row-gap)
+        );
+
+        .mc-dt,
+        .mc-dd {
+            grid-column: 1;
+        }
+
+        .mc-dd {
+            margin-bottom: var(
+                --mc-description-list-size-vertical-dd-margin-bottom,
+                map.get($tokens, description-list-size-vertical-dd-margin-bottom)
+            );
+        }
+    }
+}

package/dropdown/_dropdown-theme.scss

@@ -0,0 +1,87 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/popup' as *;
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-dropdown-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+    $secondary: map.get($theme, secondary);
+
+    .mc-dropdown__panel {
+        @include popup-params($theme);
+    }
+
+    .mc-dropdown-item {
+        color: map.get($foreground, text);
+
+        background: transparent;
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+        }
+
+        &.cdk-keyboard-focused {
+            outline: map.get(map.get($theme, states), focused-color) solid 2px;
+            outline-offset: -2px !important;
+        }
+
+        &.mc-selected {
+            background: map.get(map.get($theme, states), selected-color);
+        }
+
+        &[disabled] {
+            color: map.get($foreground, text-disabled);
+
+            background: transparent;
+        }
+
+        .mc-dropdown-item__caption {
+            color: map.get($foreground, text-less-contrast);
+        }
+    }
+
+    .mc-dropdown-item_highlighted {
+        background: map.get($background, overlay-hover);
+    }
+
+    .mc-dropdown-item-overlay {
+        background: transparent;
+    }
+
+    .mc-dropdown__divider {
+        background-color: map.get($foreground, divider);
+    }
+
+    .mc-dropdown-trigger.mc-pressed {
+        & .mc-button-overlay {
+            background: mc-color($secondary, A100);
+        }
+    }
+}
+
+@mixin mc-dropdown-typography($config) {
+    .mc-dropdown-item,
+    .mc-dropdown__content {
+        @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-item-font-default));
+    }
+
+    .mc-dropdown-item__caption {
+        @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-item-font-caption));
+    }
+
+    .mc-dropdown__group-header {
+        @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-group-header-font-default));
+
+        &.mc-dropdown__group-header_small {
+            @include mc-typography-level-to-styles($config, map.get($tokens, dropdown-group-header-font-small));
+        }
+    }
+}

package/dropdown/dropdown-content.directive.d.ts

@@ -28,5 +28,5 @@ export declare class McDropdownContent implements OnDestroy {
     detach(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDropdownContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McDropdownContent, "ng-template[mcDropdownContent]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McDropdownContent, "ng-template[mcDropdownContent]", never, {}, {}, never, never, false, never>;
 }

package/dropdown/dropdown-item.component.d.ts

@@ -46,6 +46,6 @@ export declare class McDropdownItem extends McDropdownItemMixinBase implements I
     getLabel(): string;
     haltDisabledEvents(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDropdownItem, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDropdownItem, "mc-dropdown-item, [mc-dropdown-item]", ["mcDropdownItem"], { "disabled": "disabled"; }, {}, ["icon"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDropdownItem, "mc-dropdown-item, [mc-dropdown-item]", ["mcDropdownItem"], { "disabled": "disabled"; }, {}, ["icon"], ["*"], false, never>;
 }
 export {};