@ptsecurity/mosaic 14.7.2 → 15.0.0

package/progress-bar/progress-bar.scss

@@ -0,0 +1,42 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/functions/timing';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@keyframes mc-progress-bar-indeterminate {
+    0% {
+        transform: scaleX(0.25) translateX(-150%);
+    }
+
+    100% {
+        transform: scaleX(0.4) translateX(250%);
+    }
+}
+
+.mc-progress-bar {
+    display: block;
+    height: var(--mc-progress-bar-size-height, map.get($tokens, progress-bar-size-height));
+    overflow: hidden;
+
+    &__inner {
+        height: 100%;
+    }
+
+    &__line {
+        height: 100%;
+        transform-origin: top left;
+
+        &_determinate {
+            transition: transform 0.3s;
+        }
+
+        &_indeterminate {
+            animation: mc-progress-bar-indeterminate 2.1s timing.$ease-in-out-quad infinite;
+        }
+    }
+}

package/progress-spinner/_progress-spinner-theme.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+
+
+@mixin mc-progress-spinner-theme($theme) {
+    $primary: map.get($theme, primary);
+    $secondary: map.get($theme, secondary);
+    $error: map.get($theme, error);
+
+    .mc-progress-spinner {
+        &.mc-primary .mc-progress-spinner__circle {
+            stroke: mc-color($primary);
+        }
+
+        &.mc-secondary .mc-progress-spinner__circle {
+            stroke: mc-color($secondary);
+        }
+
+        &.mc-error .mc-progress-spinner__circle {
+            stroke: mc-color($error);
+        }
+    }
+}

package/progress-spinner/progress-spinner.component.d.ts

@@ -22,5 +22,5 @@ export declare class McProgressSpinner extends McProgressSpinnerMixinBase implem
     get percentage(): number;
     get dashOffsetPercent(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<McProgressSpinner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McProgressSpinner, "mc-progress-spinner", never, { "color": "color"; "id": "id"; "value": "value"; "mode": "mode"; "size": "size"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McProgressSpinner, "mc-progress-spinner", never, { "color": "color"; "id": "id"; "value": "value"; "mode": "mode"; "size": "size"; }, {}, never, never, false, never>;
 }

package/progress-spinner/progress-spinner.scss

@@ -0,0 +1,70 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/functions/timing';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@keyframes mc-progress-spinner-indeterminate {
+    100% {
+        transform: rotateZ(270deg);
+    }
+}
+
+.mc-progress-spinner {
+    display: inline-block;
+    overflow: hidden;
+
+    width: var(--mc-progress-spinner-size-default-size, map.get($tokens, progress-spinner-size-default-size));
+    height: var(--mc-progress-spinner-size-default-size, map.get($tokens, progress-spinner-size-default-size));
+}
+
+.mc-progress-spinner__circle {
+    fill: none;
+    stroke: black;
+    stroke-dasharray: 295%;
+    stroke-width: var(
+        --mc-progress-spinner-size-default-svg-stroke-width,
+        map.get($tokens, progress-spinner-size-default-svg-stroke-width)
+    );
+    transition: stroke-dashoffset 0.3s;
+    transform-origin: center center;
+}
+
+.mc-progress-spinner_large {
+    width: var(--mc-progress-spinner-size-large-size, map.get($tokens, progress-spinner-size-large-size));
+    height: var(--mc-progress-spinner-size-large-size, map.get($tokens, progress-spinner-size-large-size));
+
+    & .mc-progress-spinner__circle {
+        stroke-width: var(
+            --mc-progress-spinner-size-large-svg-stroke-width,
+            map.get($tokens, progress-spinner-size-large-svg-stroke-width)
+        );
+    }
+}
+
+.mc-progress-spinner__inner {
+    width: 100%;
+    height: 100%;
+
+    transform: rotateZ(-90deg);
+
+    font-size: 0;
+
+    &.mc-progress-spinner__inner_indeterminate {
+        animation: mc-progress-spinner-indeterminate 1.5s timing.$ease-in-out-quad infinite;
+
+        // TODO: rework this place
+        .mc-progress-spinner__circle {
+            stroke-dashoffset: 80%;
+        }
+    }
+}
+
+.mc-progress-spinner__svg {
+    width: 100%;
+    height: 100%;
+}

package/radio/_radio-theme.scss

@@ -0,0 +1,99 @@
+@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-radio-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $radio: map.get(map.get($theme, components), radio);
+
+    .mc-radio-group {
+        color: map.get($foreground, text);
+    }
+
+    .mc-radio-button {
+        & .mc-radio-button__outer-circle {
+            border-color: map.get($radio, outer-circle_border);
+            background: map.get($background, background);
+        }
+
+        & .mc-radio-button__inner-circle {
+            border-color: map.get($radio, inner-circle_border);
+        }
+
+        &:hover {
+            & .mc-radio-button__outer-circle {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &.cdk-keyboard-focused {
+            & .mc-radio-button__outer-circle {
+                border-color: map.get($radio, outer-circle_focused-state_border);
+                box-shadow: map.get($radio, outer-circle_focused-state_shadow);
+                background: map.get($background, background);
+            }
+
+            & .mc-radio-button__inner-circle {
+                box-shadow: map.get($radio, inner-circle_focused-state_shadow);
+            }
+        }
+
+        &.mc-disabled {
+            color: map.get($foreground, text-disabled);
+
+            & .mc-radio-label {
+                cursor: default;
+            }
+
+            & .mc-radio-button__outer-circle {
+                border-color: map.get($foreground, border);
+                background: map.get($background, background-disabled);
+            }
+
+            & .mc-radio-button__inner-circle {
+                border-color: map.get($background, background-disabled);
+                background: map.get($background, background-disabled);
+
+                & .mc-radio-button__inner-circle-cap {
+                    background: map.get($background, background-disabled);
+                }
+            }
+
+            &.mc-selected {
+                & .mc-radio-button__inner-circle-cap {
+                    background: map.get($foreground, border);
+                }
+            }
+        }
+
+        &.mc-selected:not(.mc-disabled) {
+            & .mc-radio-button__outer-circle {
+                border-color: map.get($radio, outer-circle_checked-state_border);
+                background: map.get($radio, inner-circle_checked-state_border);
+            }
+
+            & .mc-radio-button__inner-circle {
+                display: flex;
+                background-color: map.get($radio, inner-circle_checked-state_border);
+
+                & .mc-radio-button__inner-circle-cap {
+                    background: map.get($radio, cap-color);
+                }
+            }
+        }
+    }
+}
+
+@mixin mc-radio-typography($config) {
+    .mc-radio-group {
+        @include mc-typography-level-to-styles($config, map.get($tokens, radio-font-default));
+    }
+}

package/radio/radio.component.d.ts

@@ -123,7 +123,7 @@ export declare class McRadioGroup extends McRadioGroupMixinBase implements After
     /** Updates the `selected` radio button from the internal _value state. */
     private updateSelectedRadioFromValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<McRadioGroup, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McRadioGroup, "mc-radio-group", ["mcRadioGroup"], { "name": "name"; "labelPosition": "labelPosition"; "value": "value"; "selected": "selected"; "disabled": "disabled"; "required": "required"; }, { "change": "change"; }, ["radios"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McRadioGroup, "mc-radio-group", ["mcRadioGroup"], { "name": "name"; "labelPosition": "labelPosition"; "value": "value"; "selected": "selected"; "disabled": "disabled"; "required": "required"; }, { "change": "change"; }, ["radios"], never, false, never>;
 }
 /** @docs-private */
 declare abstract class McRadioButtonBase {
@@ -198,6 +198,6 @@ export declare class McRadioButton extends McRadioButtonMixinBase implements OnI
     /** Dispatch change event with current value. */
     private emitChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<McRadioButton, [{ optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McRadioButton, "mc-radio-button", ["mcRadioButton"], { "color": "color"; "tabIndex": "tabIndex"; "checked": "checked"; "value": "value"; "disabled": "disabled"; "required": "required"; "labelPosition": "labelPosition"; "name": "name"; "isFocused": "isFocused"; "id": "id"; }, { "change": "change"; }, never, ["*", "mc-hint"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McRadioButton, "mc-radio-button", ["mcRadioButton"], { "color": "color"; "tabIndex": "tabIndex"; "checked": "checked"; "value": "value"; "disabled": "disabled"; "required": "required"; "labelPosition": "labelPosition"; "name": "name"; "isFocused": "isFocused"; "id": "id"; }, { "change": "change"; }, never, ["*", "mc-hint"], false, never>;
 }
 export {};

package/radio/radio.scss

@@ -0,0 +1,110 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+// Top-level host container.
+.mc-radio-button {
+    display: inline-block;
+}
+
+.mc-radio-label {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+
+    cursor: pointer;
+
+    white-space: nowrap;
+    // for maximum clickable area.
+    width: 100%;
+}
+
+.mc-radio-label-content {
+    display: inline-block;
+
+    position: relative;
+
+    order: 0;
+    line-height: inherit;
+
+    padding-left: calc(
+        var(--mc-radio-size-outer-size, map.get($tokens, radio-size-outer-size)) +
+        var(--mc-radio-size-padding, map.get($tokens, radio-size-label-margin))
+    );
+    padding-right: 0;
+
+    .mc-radio-button__outer-circle,
+    .mc-radio-button__inner-circle {
+        box-sizing: content-box;
+        position: absolute;
+        display: flex;
+
+        content: '';
+
+        border: {
+            style: solid;
+            radius: 50%;
+        }
+    }
+
+    .mc-radio-button__outer-circle {
+        left: 0;
+        top: 2px;
+
+        width: var(--mc-radio-size-outer-size, map.get($tokens, radio-size-outer-size));
+        height: var(--mc-radio-size-outer-size, map.get($tokens, radio-size-outer-size));
+
+        border: {
+            width: 1px;
+        }
+    }
+
+    .mc-radio-button__inner-circle {
+        position: relative;
+        margin: auto;
+
+        width: var(--mc-radio-size-inner-size, map.get($tokens, radio-size-inner-size));
+        height: var(--mc-radio-size-inner-size, map.get($tokens, radio-size-inner-size));
+
+        border: {
+            width: 1px;
+        }
+
+        .mc-radio-button__inner-circle-cap {
+            margin: auto;
+
+            width: var(--mc-radio-size-cap-size, map.get($tokens, radio-size-cap-size));
+            height: var(--mc-radio-size-cap-size, map.get($tokens, radio-size-cap-size));
+
+            border-radius: 50%;
+        }
+    }
+
+    .mc-radio__text-container {
+        display: flex;
+        flex-direction: column;
+
+        & .mc-radio__text {
+
+        }
+
+        & .mc-hint {
+            margin-top: 2px;
+        }
+    }
+
+    [dir='rtl'] & {
+        padding-right: var(--mc-radio-size-padding, map.get($tokens, radio-size-label-margin));
+        padding-left: 0;
+    }
+}
+
+.mc-radio-input {
+    position: absolute;
+    outline: none;
+    opacity: 0;
+}

package/select/_select-theme.scss

@@ -0,0 +1,57 @@
+@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-select-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $error: map.get($theme, error);
+
+    $popup: map.get(map.get($theme, components), popup);
+
+    .mc-select {
+        color: map.get($foreground, text);
+
+        &.ng-invalid {
+            color: mc-color($error);
+        }
+
+        &.mc-disabled {
+            color: map.get($foreground, text-disabled);
+        }
+    }
+
+    .mc-select__placeholder {
+        color: map.get($foreground, text-disabled);
+    }
+
+    .mc-select__panel {
+        @include popup-params($theme);
+    }
+
+    .mc-select__search-container {
+        border-bottom-color: map.get($popup, border);
+    }
+
+    .mc-select__no-options-message {
+        color: map.get($foreground, text-less-contrast);
+    }
+}
+
+@mixin mc-select-typography($config) {
+    .mc-select {
+        @include mc-typography-level-to-styles($config, map.get($tokens, select-font-default));
+    }
+
+    .mc-select__panel {
+        @include mc-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
+    }
+}

package/select/select-option.directive.d.ts

@@ -16,5 +16,5 @@ export declare class McOptionTooltip extends McTooltipTrigger implements AfterVi
     onMouseEnter(): void;
     onMouseLeave(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McOptionTooltip, [null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McOptionTooltip, "mc-option", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McOptionTooltip, "mc-option", never, {}, {}, never, never, false, never>;
 }

package/select/select.component.d.ts

@@ -27,19 +27,19 @@ export declare class McSelectSearch implements AfterContentInit, OnDestroy {
     ngOnDestroy(): void;
     handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSelectSearch, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectSearch, "[mcSelectSearch]", ["mcSelectSearch"], {}, {}, ["input"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectSearch, "[mcSelectSearch]", ["mcSelectSearch"], {}, {}, ["input"], never, false, never>;
 }
 export declare class McSelectSearchEmptyResult {
     static ɵfac: i0.ɵɵFactoryDeclaration<McSelectSearchEmptyResult, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectSearchEmptyResult, "[mc-select-search-empty-result]", ["mcSelectSearchEmptyResult"], {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectSearchEmptyResult, "[mc-select-search-empty-result]", ["mcSelectSearchEmptyResult"], {}, {}, never, never, false, never>;
 }
 export declare class McSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<McSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectTrigger, "mc-select-trigger, [mc-select-trigger]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectTrigger, "mc-select-trigger, [mc-select-trigger]", never, {}, {}, never, never, false, never>;
 }
 export declare class McSelectMatcher {
     static ɵfac: i0.ɵɵFactoryDeclaration<McSelectMatcher, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectMatcher, "mc-select-matcher, [mc-select-matcher]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSelectMatcher, "mc-select-matcher, [mc-select-matcher]", never, {}, {}, never, never, false, never>;
 }
 /** @docs-private */
 export declare class McSelectBase {
@@ -316,6 +316,6 @@ export declare class McSelect extends McSelectMixinBase implements AfterContentI
     /** Comparison function to specify which option is displayed. Defaults to object equality. */
     private _compareWith;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSelect, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McSelect, "mc-select", ["mcSelect"], { "disabled": "disabled"; "tabIndex": "tabIndex"; "hiddenItemsText": "hiddenItemsText"; "panelClass": "panelClass"; "backdropClass": "backdropClass"; "errorStateMatcher": "errorStateMatcher"; "sortComparator": "sortComparator"; "hasBackdrop": "hasBackdrop"; "placeholder": "placeholder"; "required": "required"; "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "id": "id"; "hiddenItemsTextFormatter": "hiddenItemsTextFormatter"; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "customMatcher", "cleaner", "search", "options", "optionGroups"], ["mc-select-trigger, [mc-select-trigger]", "mc-cleaner", "mc-select-matcher, [mc-select-matcher]", "[mcSelectSearch]", "[mc-select-search-empty-result]", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McSelect, "mc-select", ["mcSelect"], { "disabled": "disabled"; "tabIndex": "tabIndex"; "hiddenItemsText": "hiddenItemsText"; "panelClass": "panelClass"; "backdropClass": "backdropClass"; "errorStateMatcher": "errorStateMatcher"; "sortComparator": "sortComparator"; "hasBackdrop": "hasBackdrop"; "placeholder": "placeholder"; "required": "required"; "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "id": "id"; "hiddenItemsTextFormatter": "hiddenItemsTextFormatter"; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "customMatcher", "cleaner", "search", "options", "optionGroups"], ["mc-select-trigger, [mc-select-trigger]", "mc-cleaner", "mc-select-matcher, [mc-select-matcher]", "[mcSelectSearch]", "[mc-select-search-empty-result]", "*"], false, never>;
 }
 export {};

package/select/select.scss

@@ -0,0 +1,197 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/vendor-prefixes';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.mc-select__matcher {
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    & > span {
+        width: 100%;
+    }
+}
+
+.mc-select {
+    box-sizing: border-box;
+
+    display: inline-block;
+
+    width: 100%;
+
+    outline: none;
+
+    & .mc-select__trigger {
+        display: flex;
+        box-sizing: border-box;
+        position: relative;
+
+        height: calc(
+            var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) -
+            (var(--mc-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+        );
+
+        cursor: pointer;
+
+        & .mc-select__matcher {
+            padding-left: calc(
+                var(--mc-select-size-left-padding, #{map.get($tokens, select-size-left-padding)}) -
+                var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
+            );
+            padding-right: calc(
+                var(--mc-select-size-right-padding, #{map.get($tokens, select-size-right-padding)}) -
+                var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
+            );
+        }
+
+        &.mc-select__trigger_multiple .mc-select__matcher {
+            padding-left: calc(
+                var(--mc-select-size-left-padding-multiple, #{map.get($tokens, select-size-left-padding-multiple)}) -
+                var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
+            );
+
+            & .mc-tag.mc-disabled .mc-tag__text {
+                margin-right: 7px;
+            }
+        }
+    }
+
+    &.mc-disabled {
+        & .mc-select__trigger {
+            @include vendor-prefixes.user-select(none);
+
+            cursor: default;
+        }
+    }
+}
+
+.mc-select__no-options-message {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+
+    position: relative;
+
+    max-width: 100%;
+    height: var(--mc-option-size-height, map.get($tokens, option-size-height));
+
+    cursor: default;
+    outline: none;
+
+    padding-left: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+    padding-right: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+}
+
+.mc-select__match-list {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+
+    max-height: calc(
+        var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) -
+        (var(--mc-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+    );
+
+    & .mc-tag {
+        margin-right: 4px;
+    }
+}
+
+.mc-select__match-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    width: 100%;
+
+    & .mc-select__match-hidden-text {
+        flex: 0 0 70px;
+        align-self: center;
+        padding: 0 8px;
+
+        text-align: right;
+    }
+}
+
+.mc-select__arrow-wrapper {
+    display: flex;
+    align-self: center;
+
+    // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
+    .mc-form-field-appearance-fill &,
+    .mc-form-field-appearance-standard & {
+        transform: translateY(-50%);
+    }
+
+    // When used in a outline form-field the arrow should be shifted up 25%.
+    .mc-form-field-appearance-outline & {
+        transform: translateY(-25%);
+    }
+}
+
+.mc-select__panel {
+    min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
+    max-width: var(--mc-select-panel-size-max-width, map.get($tokens, select-panel-size-max-width));
+
+    overflow: hidden;
+
+    border: {
+        width: var(--mc-select-panel-size-border-width, map.get($tokens, select-panel-size-border-width));
+        style: solid;
+    }
+
+    border-bottom-left-radius: var(
+        --mc-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
+    );
+    border-bottom-right-radius: var(
+        --mc-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
+    );
+
+    // Override optgroup and option to scale based on font-size of the trigger.
+    .mc-optgroup-label,
+    .mc-option {
+        font-size: inherit;
+        line-height: var(--mc-option-size-height, map.get($tokens, option-size-height));
+        height: var(--mc-option-size-height, map.get($tokens, option-size-height));
+    }
+}
+
+.mc-select__content {
+    max-height: var(--mc-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
+    padding: var(--mc-select-panel-size-vertical-padding, map.get($tokens, select-panel-size-vertical-padding)) 0;
+    overflow: auto;
+
+    & .cdk-virtual-scroll-viewport {
+        $paddings: (map.get($tokens, select-panel-size-vertical-padding) * 2);
+
+        min-height: var(--mc-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height)) - $paddings;
+        max-height: var(--mc-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height)) - $paddings;
+    }
+}
+
+.mc-form-field-type-select {
+    &:not(.mc-disabled) .mc-form-field-flex {
+        cursor: pointer;
+    }
+}
+
+.mc-select__search-container {
+    border-bottom: {
+        width: 1px;
+        style: solid;
+    }
+}