@ptsecurity/mosaic 13.9.2 → 13.10.0

package/design-tokens/pt-2022/tokens.d.ts

@@ -5087,26 +5087,26 @@ export declare const DarkColorSchemeWarningPalette: {
         };
     };
 };
-export declare const DarkColorSchemeForegroundText = "#f2f5f9";
+export declare const DarkColorSchemeForegroundText = "#d7dee4";
 export declare const DarkColorSchemeForegroundTextLessContrast = "#8c99a5";
 export declare const DarkColorSchemeForegroundTextDisabled = "#6d7a86";
 export declare const DarkColorSchemeForegroundTextError = "#ea5868";
 export declare const DarkColorSchemeForegroundTextSuccess = "#319d5c";
-export declare const DarkColorSchemeForegroundDivider = "#333f4a";
+export declare const DarkColorSchemeForegroundDivider = "mix(#515e69, transparent, 50%)";
 export declare const DarkColorSchemeForegroundBorder = "#515e69";
 export declare const DarkColorSchemeForegroundIcon = "#8c99a5";
 export declare const DarkColorSchemeBackgroundBackground = "#19252f";
 export declare const DarkColorSchemeBackgroundBackgroundDisabled = "#333f4a";
 export declare const DarkColorSchemeBackgroundBackgroundLessContrast = "#27333e";
 export declare const DarkColorSchemeBackgroundBackgroundUnder = "#151e25";
-export declare const DarkColorSchemeBackgroundOverlayHover = "rgba(black, 0.05)";
-export declare const DarkColorSchemeBackgroundOverlayActive = "rgba(black, 0.1)";
+export declare const DarkColorSchemeBackgroundOverlayHover = "rgba(white, 0.05)";
+export declare const DarkColorSchemeBackgroundOverlayActive = "rgba(white, 0.1)";
 export declare const DarkColorSchemeBackgroundOverlayDisabled = "rgba(black, 0.2)";
 export declare const DarkColorSchemeStatesFocusedColor = "#4187ff";
 export declare const DarkColorSchemeStatesFocusedColorError = "#b9023a";
-export declare const DarkColorSchemeStatesSelectedColor = "#023c7f";
+export declare const DarkColorSchemeStatesSelectedColor = "rgba(3, 116, 235, 0.3)";
 export declare const DarkColorSchemeStatesPressedShadow = "inset 1px 2px 2px 0 rgba(black, 0.2)";
-export declare const DarkColorSchemeStatesDisabledOpacity = 0.3;
+export declare const DarkColorSchemeStatesDisabledOpacity = 0.45;
 export declare const FontFamilyAccent = "'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
 export declare const FontFamilyBase = "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
 export declare const FontFamilyMonospace = "'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace";
@@ -8677,7 +8677,7 @@ export declare const DatepickerToggleSizeHeight = "30px";
 export declare const DatepickerBodyLightColorSchemeStatesSelectedColor = "#0374eb";
 export declare const DatepickerBodyLightColorSchemeStatesSelectedBackground = "#e7f1ff";
 export declare const DatepickerBodyDarkColorSchemeStatesSelectedColor = "#4187ff";
-export declare const DatepickerBodyDarkColorSchemeStatesSelectedBackground = "#023c7f";
+export declare const DatepickerBodyDarkColorSchemeStatesSelectedBackground = "rgba(3, 116, 235, 0.3)";
 export declare const DatepickerBodySizeLabelPaddings = "8px 28px 12px 12px";
 export declare const DatepickerBodySizeCellMinSize = "32px";
 export declare const DatepickerBodySizeCellMargin = "5%";
@@ -8697,13 +8697,13 @@ export declare const DatepickerCalendarFontDefault = "body";
 export declare const DatepickerCalendarFontHeader = "caption";
 export declare const DatepickerInputSizeWidth = "130px";
 export declare const DividerLightColorSchemeColor = "#d7dee4";
-export declare const DividerDarkColorSchemeColor = "#333f4a";
+export declare const DividerDarkColorSchemeColor = "mix(#515e69, transparent, 50%)";
 export declare const DividerSizeWidth = "1px";
 export declare const DividerSizeInsetMargin = "80px";
 export declare const DescriptionListLightColorSchemeDt = "#6d7a86";
 export declare const DescriptionListLightColorSchemeDd = "#19252f";
 export declare const DescriptionListDarkColorSchemeDt = "#8c99a5";
-export declare const DescriptionListDarkColorSchemeDd = "#f2f5f9";
+export declare const DescriptionListDarkColorSchemeDd = "#d7dee4";
 export declare const DescriptionListSizeGridTemplateColumns = "repeat(4, 1fr)";
 export declare const DescriptionListSizeDtGridColumn = "1";
 export declare const DescriptionListSizeDdGridColumn = "2 / span 3";
@@ -8739,7 +8739,7 @@ export declare const FormFieldLightColorSchemeStatesInvalidBorder = "#db3c55";
 export declare const FormFieldLightColorSchemeStatesInvalidBackground = "#fff3f3";
 export declare const FormFieldDarkColorSchemeBorder = "#515e69";
 export declare const FormFieldDarkColorSchemeBackground = "transparent";
-export declare const FormFieldDarkColorSchemeStatesHoverBorder = "#515e69";
+export declare const FormFieldDarkColorSchemeStatesHoverBorder = "#6d7a86";
 export declare const FormFieldDarkColorSchemeStatesInvalidBorder = "#b9023a";
 export declare const FormFieldDarkColorSchemeStatesInvalidBackground = "mix(#41000b, transparent, 30%)";
 export declare const FormFieldSizeHeight = "32px";
@@ -8755,10 +8755,10 @@ export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidIconColor
 export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidTextColor = "#19252f";
 export declare const FormFieldPasswordHintLightColorSchemeStatesValidTextColor = "#016b37";
 export declare const FormFieldPasswordHintLightColorSchemeStatesValidIconColor = "#4ba96c";
-export declare const FormFieldPasswordHintDarkColorSchemeTextColor = "#f2f5f9";
+export declare const FormFieldPasswordHintDarkColorSchemeTextColor = "#d7dee4";
 export declare const FormFieldPasswordHintDarkColorSchemeIconColor = "#8c99a5";
 export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidIconColor = "#ee6f79";
-export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidTextColor = "#f2f5f9";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidTextColor = "#d7dee4";
 export declare const FormFieldPasswordHintDarkColorSchemeStatesValidTextColor = "#319d5c";
 export declare const FormFieldPasswordHintDarkColorSchemeStatesValidIconColor = "#4ba96c";
 export declare const FormFieldPasswordHintSizeMarginTop = "8px";
@@ -8767,7 +8767,7 @@ export declare const FormFieldPasswordHintFontDefault = "caption";
 export declare const FormsLightColorSchemeLabel = "#6d7a86";
 export declare const FormsLightColorSchemeLegend = "#19252f";
 export declare const FormsDarkColorSchemeLabel = "#8c99a5";
-export declare const FormsDarkColorSchemeLegend = "#f2f5f9";
+export declare const FormsDarkColorSchemeLegend = "#d7dee4";
 export declare const FormsSizeHorizontalRowMarginBottom = "20px";
 export declare const FormsSizeHorizontalLabelPaddingTop = "6px";
 export declare const FormsSizeHorizontalLabelPaddingBottom = "0";
@@ -8862,7 +8862,7 @@ export declare const LoaderOverlayLightColorSchemeBackground = "mix(white, trans
 export declare const LoaderOverlayLightColorSchemeText = "#19252f";
 export declare const LoaderOverlayLightColorSchemeCaption = "#6d7a86";
 export declare const LoaderOverlayDarkColorSchemeBackground = "mix(#19252f, transparent, 90%)";
-export declare const LoaderOverlayDarkColorSchemeText = "#f2f5f9";
+export declare const LoaderOverlayDarkColorSchemeText = "#d7dee4";
 export declare const LoaderOverlayDarkColorSchemeCaption = "#8c99a5";
 export declare const LoaderOverlaySizeTextMaxWidth = "480px";
 export declare const LoaderOverlaySizeFixedTopPadding = "72px";
@@ -8885,7 +8885,7 @@ export declare const ModalSizeCloseWidth = "56px";
 export declare const ModalSizeBorderRadius = "4px";
 export declare const ModalSizeBorderWidth = "1px";
 export declare const ModalHeaderLightColorSchemeBorder = "#d7dee4";
-export declare const ModalHeaderDarkColorSchemeBorder = "#333f4a";
+export declare const ModalHeaderDarkColorSchemeBorder = "mix(#515e69, transparent, 50%)";
 export declare const ModalHeaderSizeBorderRadius = "4px 4px 0 0";
 export declare const ModalHeaderSizeHeight = "56px";
 export declare const ModalHeaderSizePadding = "0 16px";
@@ -8894,7 +8894,7 @@ export declare const ModalBodySizeMaxHeight = "calc(100vh - 260px)";
 export declare const ModalBodySizePadding = "16px 24px 24px";
 export declare const ModalBodyFontDefault = "body";
 export declare const ModalFooterLightColorSchemeBorder = "#f2f5f9";
-export declare const ModalFooterDarkColorSchemeBorder = "#333f4a";
+export declare const ModalFooterDarkColorSchemeBorder = "mix(#515e69, transparent, 50%)";
 export declare const ModalFooterSizeBorderRadius = "0 0 4px 4px";
 export declare const ModalFooterSizeHeight = "64px";
 export declare const ModalFooterSizePadding = "0 16px";
@@ -8940,7 +8940,7 @@ export declare const PopoverLightColorSchemeText = "#19252f";
 export declare const PopoverLightColorSchemeShadow = "0 3px 8px 0 rgba(39, 51, 62, 0.2)";
 export declare const PopoverLightColorSchemeBorder = "#d7dee4";
 export declare const PopoverDarkColorSchemeBackground = "#333f4a";
-export declare const PopoverDarkColorSchemeText = "#f2f5f9";
+export declare const PopoverDarkColorSchemeText = "#d7dee4";
 export declare const PopoverDarkColorSchemeShadow = "0 3px 8px 0 rgba(0, 0, 0, 0.2)";
 export declare const PopoverDarkColorSchemeBorder = "#333f4a";
 export declare const PopoverSizeMaxHeight = "480px";
@@ -8957,7 +8957,7 @@ export declare const PopoverHeaderLightColorSchemeBorder = "#d7dee4";
 export declare const PopoverHeaderLightColorSchemeText = "#19252f";
 export declare const PopoverHeaderLightColorSchemeBackground = "white";
 export declare const PopoverHeaderDarkColorSchemeBorder = "#434f5a";
-export declare const PopoverHeaderDarkColorSchemeText = "#f2f5f9";
+export declare const PopoverHeaderDarkColorSchemeText = "#d7dee4";
 export declare const PopoverHeaderDarkColorSchemeBackground = "#333f4a";
 export declare const PopoverHeaderSizeHeight = "40px";
 export declare const PopoverHeaderSizePadding = "0 16px";
@@ -9017,13 +9017,13 @@ export declare const SidepanelLightColorSchemeBorder = "#bdc7d1";
 export declare const SidepanelDarkColorSchemeBorder = "#19252f";
 export declare const SidepanelFontDefault = "body";
 export declare const SidepanelHeaderLightColorSchemeBorder = "#d7dee4";
-export declare const SidepanelHeaderDarkColorSchemeBorder = "#333f4a";
+export declare const SidepanelHeaderDarkColorSchemeBorder = "mix(#515e69, transparent, 50%)";
 export declare const SidepanelHeaderSizeHeight = "56px";
 export declare const SidepanelHeaderSizePadding = "0 16px";
 export declare const SidepanelHeaderSizeClosePadding = "0 0 0 8px";
 export declare const SidepanelHeaderFontDefault = "title";
 export declare const SidepanelFooterLightColorSchemeBorder = "#f2f5f9";
-export declare const SidepanelFooterDarkColorSchemeBorder = "#333f4a";
+export declare const SidepanelFooterDarkColorSchemeBorder = "mix(#515e69, transparent, 50%)";
 export declare const SidepanelFooterSizeHeight = "64px";
 export declare const SidepanelFooterSizePadding = "0 16px";
 export declare const SidepanelFooterFontDefault = "body";
@@ -9045,9 +9045,9 @@ export declare const TabsLightColorSchemeStateDisabledText = "#8c99a5";
 export declare const TabsLightColorSchemeStateDisabledMarkerOpacity = "0.3";
 export declare const TabsDarkColorSchemeBorder = "#333f4a";
 export declare const TabsDarkColorSchemeStateNormalIcon = "#8c99a5";
-export declare const TabsDarkColorSchemeStateNormalText = "#f2f5f9";
+export declare const TabsDarkColorSchemeStateNormalText = "#d7dee4";
 export declare const TabsDarkColorSchemeStateHoverIcon = "#6d7a86";
-export declare const TabsDarkColorSchemeStateHoverText = "#f2f5f9";
+export declare const TabsDarkColorSchemeStateHoverText = "#d7dee4";
 export declare const TabsDarkColorSchemeStateActiveMarkerColor = "#0059b8";
 export declare const TabsDarkColorSchemeStateEmptyIcon = "mix(#8c99a5, transparent, 30%)";
 export declare const TabsDarkColorSchemeStateEmptyText = "#6d7a86";
@@ -9066,9 +9066,9 @@ export declare const VerticalTabsLightColorSchemeStateSelectedBackground = "#e7f
 export declare const VerticalTabsLightColorSchemeStateHoverBackground = "rgba(black, 0.05)";
 export declare const VerticalTabsLightColorSchemeStateHoverSelectedBackground = "adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%)";
 export declare const VerticalTabsDarkColorSchemeStateNormalBackground = "transparent";
-export declare const VerticalTabsDarkColorSchemeStateSelectedBackground = "#023c7f";
-export declare const VerticalTabsDarkColorSchemeStateHoverBackground = "rgba(black, 0.05)";
-export declare const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(#023c7f, $lightness:-1%)";
+export declare const VerticalTabsDarkColorSchemeStateSelectedBackground = "rgba(3, 116, 235, 0.3)";
+export declare const VerticalTabsDarkColorSchemeStateHoverBackground = "rgba(white, 0.05)";
+export declare const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(rgba(3, 116, 235, 0.3), $lightness:-1%)";
 export declare const TagsLightColorSchemePrimaryBackground = "#e7f1ff";
 export declare const TagsLightColorSchemePrimaryBorder = "transparent";
 export declare const TagsLightColorSchemePrimaryText = "#0374eb";
@@ -9152,7 +9152,7 @@ export declare const ToastLightColorSchemeIconSuccess = "#4ba96c";
 export declare const ToastLightColorSchemeIconWarning = "#e19f12";
 export declare const ToastDarkColorSchemeBackground = "#333f4a";
 export declare const ToastDarkColorSchemeBorder = "rgba(25, 37, 47, 0.1)";
-export declare const ToastDarkColorSchemeText = "#f2f5f9";
+export declare const ToastDarkColorSchemeText = "#d7dee4";
 export declare const ToastDarkColorSchemeTextCaption = "#8c99a5";
 export declare const ToastDarkColorSchemeShadow = "0 8px 16px 0 rgba(#27333e, 0.2)";
 export declare const ToastDarkColorSchemeIconInfo = "#18a5c5";
@@ -9204,7 +9204,7 @@ export declare const ToggleSmallSizeWidth = "24px";
 export declare const ToggleSmallSizeBorderRadius = "8px";
 export declare const ToggleSmallFontDefault = "caption";
 export declare const TooltipLightColorSchemeBackground = "#333f4a";
-export declare const TooltipLightColorSchemeText = "#f2f5f9";
+export declare const TooltipLightColorSchemeText = "#d7dee4";
 export declare const TooltipLightColorSchemeBorder = "transparent";
 export declare const TooltipLightColorSchemeShadow = "0 2px 4px 0 rgba(39, 51, 62, 0.2)";
 export declare const TooltipLightColorSchemeWarningBackground = "#fff4dd";
@@ -9215,7 +9215,7 @@ export declare const TooltipDarkColorSchemeText = "#19252f";
 export declare const TooltipDarkColorSchemeBorder = "transparent";
 export declare const TooltipDarkColorSchemeShadow = "0 2px 4px 0 rgba(39, 51, 62, 0.2)";
 export declare const TooltipDarkColorSchemeWarningBackground = "#7e5406";
-export declare const TooltipDarkColorSchemeWarningText = "#f2f5f9";
+export declare const TooltipDarkColorSchemeWarningText = "#d7dee4";
 export declare const TooltipDarkColorSchemeWarningBorder = "#7e5406";
 export declare const TooltipSizeMaxWidth = "300px";
 export declare const TooltipSizeBorderWidth = "1px";
@@ -9229,7 +9229,7 @@ export declare const ExtendedTooltipLightColorSchemeText = "#19252f";
 export declare const ExtendedTooltipLightColorSchemeBorder = "#d7dee4";
 export declare const ExtendedTooltipLightColorSchemeShadow = "0 2px 4px 0 rgba(39, 51, 62, 0.2)";
 export declare const ExtendedTooltipDarkColorSchemeBackground = "#333f4a";
-export declare const ExtendedTooltipDarkColorSchemeText = "#f2f5f9";
+export declare const ExtendedTooltipDarkColorSchemeText = "#d7dee4";
 export declare const ExtendedTooltipDarkColorSchemeBorder = "#333f4a";
 export declare const ExtendedTooltipDarkColorSchemeShadow = "0 2px 4px 0 rgba(39, 51, 62, 0.2)";
 export declare const ExtendedTooltipSizeBorderRadius = "4px";
@@ -9242,7 +9242,7 @@ export declare const ExtendedTooltipHeaderLightColorSchemeBorder = "#d7dee4";
 export declare const ExtendedTooltipHeaderLightColorSchemeText = "#19252f";
 export declare const ExtendedTooltipHeaderLightColorSchemeBackground = "white";
 export declare const ExtendedTooltipHeaderDarkColorSchemeBorder = "#434f5a";
-export declare const ExtendedTooltipHeaderDarkColorSchemeText = "#f2f5f9";
+export declare const ExtendedTooltipHeaderDarkColorSchemeText = "#d7dee4";
 export declare const ExtendedTooltipHeaderDarkColorSchemeBackground = "#333f4a";
 export declare const ExtendedTooltipHeaderSizeHeight = "40px";
 export declare const ExtendedTooltipHeaderSizePadding = "8px 16px";

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -110,14 +110,14 @@ export class McAutocomplete {
 /** @nocollapse */ /** @nocollapse */ McAutocomplete.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McAutocomplete, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: MC_AUTOCOMPLETE_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
 /** @nocollapse */ /** @nocollapse */ McAutocomplete.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McAutocomplete, selector: "mc-autocomplete", inputs: { displayWith: "displayWith", panelWidth: "panelWidth", classList: ["class", "classList"], autoActiveFirstOption: "autoActiveFirstOption", openOnFocus: "openOnFocus" }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed" }, host: { classAttribute: "mc-autocomplete" }, providers: [{
             provide: MC_OPTION_PARENT_COMPONENT, useExisting: McAutocomplete
-        }], queries: [{ propertyName: "options", predicate: McOption, descendants: true }, { propertyName: "optionGroups", predicate: McOptgroup }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], exportAs: ["mcAutocomplete"], ngImport: i0, template: "<ng-template>\n    <div class=\"mc-autocomplete-panel\" role=\"listbox\" [id]=\"id\" [ngClass]=\"classList\" #panel>\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [".mc-autocomplete-trigger{text-overflow:ellipsis}.mc-autocomplete-panel{visibility:hidden;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;margin-top:-1px;min-width:100%;width:100%;max-width:none;max-height:var(--mc-autocomplete-size-panel-max-height, 256px);border-width:1px;border-style:solid;border-bottom-left-radius:var(--mc-autocomplete-size-panel-border-radius, 4px);border-bottom-right-radius:var(--mc-autocomplete-size-panel-border-radius, 4px);padding:var(--mc-autocomplete-size-panel-padding, 4px 0)}.mc-autocomplete-panel.mc-autocomplete_visible{visibility:visible}.mc-autocomplete-panel.mc-autocomplete_hidden{visibility:hidden}.mc-autocomplete-panel-above .mc-autocomplete-panel{border-radius:var(--mc-autocomplete-size-panel-border-radius, 4px) var(--mc-autocomplete-size-panel-border-radius, 4px) 0 0}.mc-autocomplete-panel .mc-divider-horizontal{margin-top:-1px}.cdk-high-contrast-active .mc-autocomplete-panel{outline:solid 1px}.cdk-high-contrast-active :host .mc-autocomplete-panel{outline:solid 1px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        }], queries: [{ propertyName: "options", predicate: McOption, descendants: true }, { propertyName: "optionGroups", predicate: McOptgroup }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], exportAs: ["mcAutocomplete"], ngImport: i0, template: "<ng-template>\n    <div class=\"mc-autocomplete-panel\" role=\"listbox\" [id]=\"id\" [ngClass]=\"classList\" #panel>\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [".mc-autocomplete-trigger{text-overflow:ellipsis}.mc-autocomplete-panel{visibility:hidden;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;margin-top:-1px;min-width:100%;width:100%;max-width:none;max-height:256px;max-height:var(--mc-autocomplete-size-panel-max-height, 256px);border-width:1px;border-style:solid;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mc-autocomplete-size-panel-border-radius, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-autocomplete-size-panel-border-radius, 4px);padding:4px 0;padding:var(--mc-autocomplete-size-panel-padding, 4px 0)}.mc-autocomplete-panel.mc-autocomplete_visible{visibility:visible}.mc-autocomplete-panel.mc-autocomplete_hidden{visibility:hidden}.mc-autocomplete-panel-above .mc-autocomplete-panel{border-radius:4px 4px 0 0;border-radius:var(--mc-autocomplete-size-panel-border-radius, 4px) var(--mc-autocomplete-size-panel-border-radius, 4px) 0 0}.mc-autocomplete-panel .mc-divider-horizontal{margin-top:-1px}.cdk-high-contrast-active .mc-autocomplete-panel{outline:solid 1px}.cdk-high-contrast-active :host .mc-autocomplete-panel{outline:solid 1px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'mc-autocomplete', exportAs: 'mcAutocomplete', host: {
                         class: 'mc-autocomplete'
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: MC_OPTION_PARENT_COMPONENT, useExisting: McAutocomplete
-                        }], template: "<ng-template>\n    <div class=\"mc-autocomplete-panel\" role=\"listbox\" [id]=\"id\" [ngClass]=\"classList\" #panel>\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [".mc-autocomplete-trigger{text-overflow:ellipsis}.mc-autocomplete-panel{visibility:hidden;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;margin-top:-1px;min-width:100%;width:100%;max-width:none;max-height:var(--mc-autocomplete-size-panel-max-height, 256px);border-width:1px;border-style:solid;border-bottom-left-radius:var(--mc-autocomplete-size-panel-border-radius, 4px);border-bottom-right-radius:var(--mc-autocomplete-size-panel-border-radius, 4px);padding:var(--mc-autocomplete-size-panel-padding, 4px 0)}.mc-autocomplete-panel.mc-autocomplete_visible{visibility:visible}.mc-autocomplete-panel.mc-autocomplete_hidden{visibility:hidden}.mc-autocomplete-panel-above .mc-autocomplete-panel{border-radius:var(--mc-autocomplete-size-panel-border-radius, 4px) var(--mc-autocomplete-size-panel-border-radius, 4px) 0 0}.mc-autocomplete-panel .mc-divider-horizontal{margin-top:-1px}.cdk-high-contrast-active .mc-autocomplete-panel{outline:solid 1px}.cdk-high-contrast-active :host .mc-autocomplete-panel{outline:solid 1px}\n"] }]
+                        }], template: "<ng-template>\n    <div class=\"mc-autocomplete-panel\" role=\"listbox\" [id]=\"id\" [ngClass]=\"classList\" #panel>\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [".mc-autocomplete-trigger{text-overflow:ellipsis}.mc-autocomplete-panel{visibility:hidden;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;margin-top:-1px;min-width:100%;width:100%;max-width:none;max-height:256px;max-height:var(--mc-autocomplete-size-panel-max-height, 256px);border-width:1px;border-style:solid;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mc-autocomplete-size-panel-border-radius, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-autocomplete-size-panel-border-radius, 4px);padding:4px 0;padding:var(--mc-autocomplete-size-panel-padding, 4px 0)}.mc-autocomplete-panel.mc-autocomplete_visible{visibility:visible}.mc-autocomplete-panel.mc-autocomplete_hidden{visibility:hidden}.mc-autocomplete-panel-above .mc-autocomplete-panel{border-radius:4px 4px 0 0;border-radius:var(--mc-autocomplete-size-panel-border-radius, 4px) var(--mc-autocomplete-size-panel-border-radius, 4px) 0 0}.mc-autocomplete-panel .mc-divider-horizontal{margin-top:-1px}.cdk-high-contrast-active .mc-autocomplete-panel{outline:solid 1px}.cdk-high-contrast-active :host .mc-autocomplete-panel{outline:solid 1px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MC_AUTOCOMPLETE_DEFAULT_OPTIONS]

package/esm2020/button/button.component.mjs

@@ -122,7 +122,7 @@ export class McButton extends McButtonMixinBase {
     }
 }
 /** @nocollapse */ /** @nocollapse */ McButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McButton, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McButton, selector: "[mc-button]", inputs: { color: "color", tabIndex: "tabIndex", disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()" }, properties: { "attr.disabled": "disabled || null", "attr.tabIndex": "tabIndex" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:var(--mc-button-size-height, 32px);height:var(--mc-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:var(--mc-button-size-border-radius, 4px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-icon-button .mc-button-wrapper,.mc-light-button .mc-button-wrapper,.mc-button .mc-button-wrapper{display:flex;align-items:center}.mc-icon-button .mc-icon_left,.mc-light-button .mc-icon_left,.mc-button .mc-icon_left{margin-right:var(--mc-icon-button-size-left-icon-padding, 6px)}.mc-button{padding-left:var(--mc-button-size-horizontal-padding, 12px);padding-right:var(--mc-button-size-horizontal-padding, 12px)}.mc-icon-button{padding-left:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px));padding-right:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ McButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McButton, selector: "[mc-button]", inputs: { color: "color", tabIndex: "tabIndex", disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()" }, properties: { "attr.disabled": "disabled || null", "attr.tabIndex": "tabIndex" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:32px;min-height:var(--mc-button-size-height, 32px);height:32px;height:var(--mc-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:1px solid transparent;border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:4px;border-radius:var(--mc-button-size-border-radius, 4px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-icon-button .mc-button-wrapper,.mc-light-button .mc-button-wrapper,.mc-button .mc-button-wrapper{display:flex;align-items:center}.mc-icon-button .mc-icon_left,.mc-light-button .mc-icon_left,.mc-button .mc-icon_left{margin-right:6px;margin-right:var(--mc-icon-button-size-left-icon-padding, 6px)}.mc-button{padding-left:12px;padding-left:var(--mc-button-size-horizontal-padding, 12px);padding-right:12px;padding-right:var(--mc-button-size-horizontal-padding, 12px)}.mc-icon-button{padding-left:7px;padding-left:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px));padding-right:7px;padding-right:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McButton, decorators: [{
             type: Component,
             args: [{ selector: '[mc-button]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color', 'tabIndex'], host: {
@@ -130,7 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[attr.tabIndex]': 'tabIndex',
                         '(focus)': 'onFocus($event)',
                         '(blur)': 'onBlur()'
-                    }, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:var(--mc-button-size-height, 32px);height:var(--mc-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:var(--mc-button-size-border-radius, 4px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-icon-button .mc-button-wrapper,.mc-light-button .mc-button-wrapper,.mc-button .mc-button-wrapper{display:flex;align-items:center}.mc-icon-button .mc-icon_left,.mc-light-button .mc-icon_left,.mc-button .mc-icon_left{margin-right:var(--mc-icon-button-size-left-icon-padding, 6px)}.mc-button{padding-left:var(--mc-button-size-horizontal-padding, 12px);padding-right:var(--mc-button-size-horizontal-padding, 12px)}.mc-icon-button{padding-left:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px));padding-right:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:inherit}\n"] }]
+                    }, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:32px;min-height:var(--mc-button-size-height, 32px);height:32px;height:var(--mc-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:1px solid transparent;border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:4px;border-radius:var(--mc-button-size-border-radius, 4px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-icon-button .mc-button-wrapper,.mc-light-button .mc-button-wrapper,.mc-button .mc-button-wrapper{display:flex;align-items:center}.mc-icon-button .mc-icon_left,.mc-light-button .mc-icon_left,.mc-button .mc-icon_left{margin-right:6px;margin-right:var(--mc-icon-button-size-left-icon-padding, 6px)}.mc-button{padding-left:12px;padding-left:var(--mc-button-size-horizontal-padding, 12px);padding-right:12px;padding-right:var(--mc-button-size-horizontal-padding, 12px)}.mc-icon-button{padding-left:7px;padding-left:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px));padding-right:7px;padding-right:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FocusMonitor }]; }, propDecorators: { disabled: [{
                 type: Input
             }] } });

package/esm2020/button-toggle/button-toggle.component.mjs

@@ -326,7 +326,7 @@ export class McButtonToggle {
             (click)="onToggleClick()">
             <ng-content></ng-content>
         </button>
-    `, isInline: true, styles: [".mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-button-toggle-group{display:flex;flex-direction:row}.mc-button-toggle-group .mc-button-toggle:first-of-type:not(:last-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:first-of-type:not(:last-of-type)>.mc-icon-button{border-bottom-right-radius:0;border-top-right-radius:0;border-bottom-left-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle-group .mc-button-toggle:last-of-type:not(:first-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:last-of-type:not(:first-of-type)>.mc-icon-button{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-right-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle-group .mc-button-toggle:not(:first-of-type):not(:last-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:not(:first-of-type):not(:last-of-type)>.mc-icon-button{border-radius:0}.mc-button-toggle-group .mc-button-toggle[disabled]{outline:0}.mc-button-toggle-group:not(.mc-button-toggle_vertical) .mc-button-toggle:not([disabled])+.mc-button-toggle:not([disabled]){margin-left:calc(-1 * var(--mc-button-toggle-size-border-size, 1px))}.mc-button-toggle_vertical{flex-direction:column}.mc-button-toggle_vertical .mc-button-toggle+.mc-button-toggle{border-left:none;border-right:none}.mc-button-toggle_vertical .mc-button-toggle:not([disabled])+.mc-button-toggle:not([disabled]){margin-top:calc(-1 * var(--mc-button-toggle-size-border-size, 1px))}.mc-button-toggle_vertical .mc-button-toggle .mc-button,.mc-button-toggle_vertical .mc-button-toggle .mc-icon-button{width:100%}.mc-button-toggle_vertical .mc-button-toggle:first-child:not(:last-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:first-child:not(:last-child)>.mc-icon-button{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle_vertical .mc-button-toggle:last-child:not(:first-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:last-child:not(:first-child)>.mc-icon-button{border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-bottom-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle_vertical .mc-button-toggle:not(:first-child):not(:last-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:not(:first-child):not(:last-child)>.mc-icon-button{border-radius:0}.mc-button-toggle-standalone{box-shadow:none}\n"], components: [{ type: i2.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }], directives: [{ type: i2.McButtonCssStyler, selector: "[mc-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:-1px;margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:-1px;margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-button-toggle-group{display:flex;flex-direction:row}.mc-button-toggle-group .mc-button-toggle:first-of-type:not(:last-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:first-of-type:not(:last-of-type)>.mc-icon-button{border-bottom-right-radius:0;border-top-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-left-radius:4px;border-top-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle-group .mc-button-toggle:last-of-type:not(:first-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:last-of-type:not(:first-of-type)>.mc-icon-button{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle-group .mc-button-toggle:not(:first-of-type):not(:last-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:not(:first-of-type):not(:last-of-type)>.mc-icon-button{border-radius:0}.mc-button-toggle-group .mc-button-toggle[disabled]{outline:0}.mc-button-toggle-group:not(.mc-button-toggle_vertical) .mc-button-toggle:not([disabled])+.mc-button-toggle:not([disabled]){margin-left:-1px;margin-left:calc(-1 * var(--mc-button-toggle-size-border-size, 1px))}.mc-button-toggle_vertical{flex-direction:column}.mc-button-toggle_vertical .mc-button-toggle+.mc-button-toggle{border-left:none;border-right:none}.mc-button-toggle_vertical .mc-button-toggle:not([disabled])+.mc-button-toggle:not([disabled]){margin-top:-1px;margin-top:calc(-1 * var(--mc-button-toggle-size-border-size, 1px))}.mc-button-toggle_vertical .mc-button-toggle .mc-button,.mc-button-toggle_vertical .mc-button-toggle .mc-icon-button{width:100%}.mc-button-toggle_vertical .mc-button-toggle:first-child:not(:last-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:first-child:not(:last-child)>.mc-icon-button{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-left-radius:4px;border-top-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle_vertical .mc-button-toggle:last-child:not(:first-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:last-child:not(:first-child)>.mc-icon-button{border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-bottom-left-radius:4px;border-bottom-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle_vertical .mc-button-toggle:not(:first-child):not(:last-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:not(:first-child):not(:last-child)>.mc-icon-button{border-radius:0}.mc-button-toggle-standalone{box-shadow:none}\n"], components: [{ type: i2.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }], directives: [{ type: i2.McButtonCssStyler, selector: "[mc-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McButtonToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mc-button-toggle', exportAs: 'mcButtonToggle', template: `
@@ -342,7 +342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'mc-button-toggle',
                         '[class.mc-button-toggle-standalone]': '!buttonToggleGroup'
-                    }, styles: [".mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-button-toggle-group{display:flex;flex-direction:row}.mc-button-toggle-group .mc-button-toggle:first-of-type:not(:last-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:first-of-type:not(:last-of-type)>.mc-icon-button{border-bottom-right-radius:0;border-top-right-radius:0;border-bottom-left-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle-group .mc-button-toggle:last-of-type:not(:first-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:last-of-type:not(:first-of-type)>.mc-icon-button{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-right-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle-group .mc-button-toggle:not(:first-of-type):not(:last-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:not(:first-of-type):not(:last-of-type)>.mc-icon-button{border-radius:0}.mc-button-toggle-group .mc-button-toggle[disabled]{outline:0}.mc-button-toggle-group:not(.mc-button-toggle_vertical) .mc-button-toggle:not([disabled])+.mc-button-toggle:not([disabled]){margin-left:calc(-1 * var(--mc-button-toggle-size-border-size, 1px))}.mc-button-toggle_vertical{flex-direction:column}.mc-button-toggle_vertical .mc-button-toggle+.mc-button-toggle{border-left:none;border-right:none}.mc-button-toggle_vertical .mc-button-toggle:not([disabled])+.mc-button-toggle:not([disabled]){margin-top:calc(-1 * var(--mc-button-toggle-size-border-size, 1px))}.mc-button-toggle_vertical .mc-button-toggle .mc-button,.mc-button-toggle_vertical .mc-button-toggle .mc-icon-button{width:100%}.mc-button-toggle_vertical .mc-button-toggle:first-child:not(:last-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:first-child:not(:last-child)>.mc-icon-button{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle_vertical .mc-button-toggle:last-child:not(:first-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:last-child:not(:first-child)>.mc-icon-button{border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-bottom-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle_vertical .mc-button-toggle:not(:first-child):not(:last-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:not(:first-child):not(:last-child)>.mc-icon-button{border-radius:0}.mc-button-toggle-standalone{box-shadow:none}\n"] }]
+                    }, styles: [".mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:-1px;margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:-1px;margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-button-toggle-group{display:flex;flex-direction:row}.mc-button-toggle-group .mc-button-toggle:first-of-type:not(:last-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:first-of-type:not(:last-of-type)>.mc-icon-button{border-bottom-right-radius:0;border-top-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-left-radius:4px;border-top-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle-group .mc-button-toggle:last-of-type:not(:first-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:last-of-type:not(:first-of-type)>.mc-icon-button{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle-group .mc-button-toggle:not(:first-of-type):not(:last-of-type)>.mc-button,.mc-button-toggle-group .mc-button-toggle:not(:first-of-type):not(:last-of-type)>.mc-icon-button{border-radius:0}.mc-button-toggle-group .mc-button-toggle[disabled]{outline:0}.mc-button-toggle-group:not(.mc-button-toggle_vertical) .mc-button-toggle:not([disabled])+.mc-button-toggle:not([disabled]){margin-left:-1px;margin-left:calc(-1 * var(--mc-button-toggle-size-border-size, 1px))}.mc-button-toggle_vertical{flex-direction:column}.mc-button-toggle_vertical .mc-button-toggle+.mc-button-toggle{border-left:none;border-right:none}.mc-button-toggle_vertical .mc-button-toggle:not([disabled])+.mc-button-toggle:not([disabled]){margin-top:-1px;margin-top:calc(-1 * var(--mc-button-toggle-size-border-size, 1px))}.mc-button-toggle_vertical .mc-button-toggle .mc-button,.mc-button-toggle_vertical .mc-button-toggle .mc-icon-button{width:100%}.mc-button-toggle_vertical .mc-button-toggle:first-child:not(:last-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:first-child:not(:last-child)>.mc-icon-button{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-top-left-radius:4px;border-top-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle_vertical .mc-button-toggle:last-child:not(:first-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:last-child:not(:first-child)>.mc-icon-button{border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-bottom-right-radius:var(--mc-button-toggle-size-border-radius, 4px);border-bottom-left-radius:4px;border-bottom-left-radius:var(--mc-button-toggle-size-border-radius, 4px)}.mc-button-toggle_vertical .mc-button-toggle:not(:first-child):not(:last-child)>.mc-button,.mc-button-toggle_vertical .mc-button-toggle:not(:first-child):not(:last-child)>.mc-icon-button{border-radius:0}.mc-button-toggle-standalone{box-shadow:none}\n"] }]
         }], ctorParameters: function () { return [{ type: McButtonToggleGroup, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { checked: [{

package/esm2020/card/card.component.mjs

@@ -57,7 +57,7 @@ export class McCard extends McCardBaseMixin {
     }
 }
 /** @nocollapse */ /** @nocollapse */ McCard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCard, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McCard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McCard, selector: "mc-card", inputs: { color: "color", readonly: "readonly", selected: "selected", tabIndex: "tabIndex" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class.mc-card_readonly": "readonly", "class.mc-selected": "selected", "attr.tabindex": "tabIndex" }, classAttribute: "mc-card" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"mc-card__overlay\"></div>\n", styles: [".mc-card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;cursor:pointer;border-left-width:var(--mc-card-size-vertical-line, 4px);border-left-style:solid;border-left-color:transparent}.mc-card:focus{outline:none}.mc-card .mc-card__overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;background:transparent}.mc-card.mc-card_readonly{cursor:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ McCard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McCard, selector: "mc-card", inputs: { color: "color", readonly: "readonly", selected: "selected", tabIndex: "tabIndex" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class.mc-card_readonly": "readonly", "class.mc-selected": "selected", "attr.tabindex": "tabIndex" }, classAttribute: "mc-card" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"mc-card__overlay\"></div>\n", styles: [".mc-card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;cursor:pointer;border-left-width:4px;border-left-width:var(--mc-card-size-vertical-line, 4px);border-left-style:solid;border-left-color:transparent}.mc-card:focus{outline:none}.mc-card .mc-card__overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;background:transparent}.mc-card.mc-card_readonly{cursor:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCard, decorators: [{
             type: Component,
             args: [{ selector: 'mc-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color'], host: {
@@ -67,7 +67,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[attr.tabindex]': 'tabIndex',
                         '(keydown)': 'onKeyDown($event)',
                         '(click)': 'onClick($event)'
-                    }, template: "<ng-content></ng-content>\n<div class=\"mc-card__overlay\"></div>\n", styles: [".mc-card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;cursor:pointer;border-left-width:var(--mc-card-size-vertical-line, 4px);border-left-style:solid;border-left-color:transparent}.mc-card:focus{outline:none}.mc-card .mc-card__overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;background:transparent}.mc-card.mc-card_readonly{cursor:auto}\n"] }]
+                    }, template: "<ng-content></ng-content>\n<div class=\"mc-card__overlay\"></div>\n", styles: [".mc-card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;cursor:pointer;border-left-width:4px;border-left-width:var(--mc-card-size-vertical-line, 4px);border-left-style:solid;border-left-color:transparent}.mc-card:focus{outline:none}.mc-card .mc-card__overlay{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;background:transparent}.mc-card.mc-card_readonly{cursor:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FocusMonitor }]; }, propDecorators: { readonly: [{
                 type: Input
             }], selected: [{

package/esm2020/checkbox/checkbox.mjs

@@ -265,7 +265,7 @@ export class McCheckbox extends McCheckboxMixinBase {
     }
 }
 /** @nocollapse */ /** @nocollapse */ McCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckbox, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: MC_CHECKBOX_CLICK_ACTION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McCheckbox, selector: "mc-checkbox", inputs: { color: "color", tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], id: "id", labelPosition: "labelPosition", name: "name", value: "value", required: "required", checked: "checked", disabled: "disabled", indeterminate: "indeterminate" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "id": "id", "attr.id": "id", "attr.disabled": "disabled", "class.mc-indeterminate": "indeterminate", "class.mc-checked": "checked", "class.mc-disabled": "disabled", "class.mc-checkbox-label-before": "labelPosition == \"before\"" }, classAttribute: "mc-checkbox" }, providers: [MC_CHECKBOX_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["mcCheckbox"], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"inputId\" class=\"mc-checkbox-layout\" #label>\n    <div class=\"mc-checkbox-inner-container\"\n         [class.mc-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"mc-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-label]=\"ariaLabel || null\"\n               [attr.aria-labelledby]=\"ariaLabelledby\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"mc-checkbox-frame\">\n            <i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <span class=\"mc-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".mc-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:3px;box-sizing:border-box;pointer-events:none}.mc-checkbox-checkmark,.mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;left:-1px;right:0;bottom:0}.mc-checkbox-frame{background-color:transparent;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;box-shadow:var(--mc-checkbox-size-toggle-box-shadow, inset 0 0 1px 0 rgba(0, 0, 0, .2))}.mc-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.mc-checkbox.mc-checked .mc-checkbox-checkmark{display:block}.mc-checkbox.mc-checked .mc-checkbox-mixedmark,.mc-checkbox.mc-indeterminate .mc-checkbox-checkmark{display:none}.mc-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:block}.mc-checkbox.mc-disabled{cursor:default}.mc-checkbox.mc-disabled .mc-checkbox-frame{box-shadow:none}.mc-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap;width:100%}.mc-checkbox-inner-container{display:inline-block;height:var(--mc-checkbox-size-width, 16px);line-height:0;margin-right:8px;order:0;position:relative;align-self:center;white-space:nowrap;width:var(--mc-checkbox-size-width, 16px);flex-shrink:0}[dir=rtl] .mc-checkbox-inner-container{margin-left:8px;margin-right:auto}.mc-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mc-checkbox-label-before .mc-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mc-checkbox-label-before .mc-checkbox-inner-container{margin-left:auto;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ McCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McCheckbox, selector: "mc-checkbox", inputs: { color: "color", tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], id: "id", labelPosition: "labelPosition", name: "name", value: "value", required: "required", checked: "checked", disabled: "disabled", indeterminate: "indeterminate" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "id": "id", "attr.id": "id", "attr.disabled": "disabled", "class.mc-indeterminate": "indeterminate", "class.mc-checked": "checked", "class.mc-disabled": "disabled", "class.mc-checkbox-label-before": "labelPosition == \"before\"" }, classAttribute: "mc-checkbox" }, providers: [MC_CHECKBOX_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["mcCheckbox"], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"inputId\" class=\"mc-checkbox-layout\" #label>\n    <div class=\"mc-checkbox-inner-container\"\n         [class.mc-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"mc-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-label]=\"ariaLabel || null\"\n               [attr.aria-labelledby]=\"ariaLabelledby\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"mc-checkbox-frame\">\n            <i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <span class=\"mc-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".mc-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:3px;box-sizing:border-box;pointer-events:none}.mc-checkbox-checkmark,.mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;left:-1px;right:0;bottom:0}.mc-checkbox-frame{background-color:transparent;border-width:1px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;box-shadow:inset 0 0 1px #0003;box-shadow:var(--mc-checkbox-size-toggle-box-shadow, inset 0 0 1px 0 rgba(0, 0, 0, .2))}.mc-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.mc-checkbox.mc-checked .mc-checkbox-checkmark{display:block}.mc-checkbox.mc-checked .mc-checkbox-mixedmark,.mc-checkbox.mc-indeterminate .mc-checkbox-checkmark{display:none}.mc-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:block}.mc-checkbox.mc-disabled{cursor:default}.mc-checkbox.mc-disabled .mc-checkbox-frame{box-shadow:none}.mc-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap;width:100%}.mc-checkbox-inner-container{display:inline-block;height:16px;height:var(--mc-checkbox-size-width, 16px);line-height:0;margin-right:8px;order:0;position:relative;align-self:center;white-space:nowrap;width:16px;width:var(--mc-checkbox-size-width, 16px);flex-shrink:0}[dir=rtl] .mc-checkbox-inner-container{margin-left:8px;margin-right:auto}.mc-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mc-checkbox-label-before .mc-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mc-checkbox-label-before .mc-checkbox-inner-container{margin-left:auto;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'mc-checkbox', exportAs: 'mcCheckbox', host: {
@@ -277,7 +277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[class.mc-checked]': 'checked',
                         '[class.mc-disabled]': 'disabled',
                         '[class.mc-checkbox-label-before]': 'labelPosition == "before"'
-                    }, providers: [MC_CHECKBOX_CONTROL_VALUE_ACCESSOR], inputs: ['color', 'tabIndex'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"inputId\" class=\"mc-checkbox-layout\" #label>\n    <div class=\"mc-checkbox-inner-container\"\n         [class.mc-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"mc-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-label]=\"ariaLabel || null\"\n               [attr.aria-labelledby]=\"ariaLabelledby\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"mc-checkbox-frame\">\n            <i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <span class=\"mc-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".mc-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:3px;box-sizing:border-box;pointer-events:none}.mc-checkbox-checkmark,.mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;left:-1px;right:0;bottom:0}.mc-checkbox-frame{background-color:transparent;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;box-shadow:var(--mc-checkbox-size-toggle-box-shadow, inset 0 0 1px 0 rgba(0, 0, 0, .2))}.mc-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.mc-checkbox.mc-checked .mc-checkbox-checkmark{display:block}.mc-checkbox.mc-checked .mc-checkbox-mixedmark,.mc-checkbox.mc-indeterminate .mc-checkbox-checkmark{display:none}.mc-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:block}.mc-checkbox.mc-disabled{cursor:default}.mc-checkbox.mc-disabled .mc-checkbox-frame{box-shadow:none}.mc-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap;width:100%}.mc-checkbox-inner-container{display:inline-block;height:var(--mc-checkbox-size-width, 16px);line-height:0;margin-right:8px;order:0;position:relative;align-self:center;white-space:nowrap;width:var(--mc-checkbox-size-width, 16px);flex-shrink:0}[dir=rtl] .mc-checkbox-inner-container{margin-left:8px;margin-right:auto}.mc-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mc-checkbox-label-before .mc-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mc-checkbox-label-before .mc-checkbox-inner-container{margin-left:auto;margin-right:8px}\n"] }]
+                    }, providers: [MC_CHECKBOX_CONTROL_VALUE_ACCESSOR], inputs: ['color', 'tabIndex'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"inputId\" class=\"mc-checkbox-layout\" #label>\n    <div class=\"mc-checkbox-inner-container\"\n         [class.mc-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"mc-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-label]=\"ariaLabel || null\"\n               [attr.aria-labelledby]=\"ariaLabelledby\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"mc-checkbox-frame\">\n            <i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <span class=\"mc-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".mc-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:3px;box-sizing:border-box;pointer-events:none}.mc-checkbox-checkmark,.mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;left:-1px;right:0;bottom:0}.mc-checkbox-frame{background-color:transparent;border-width:1px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;box-shadow:inset 0 0 1px #0003;box-shadow:var(--mc-checkbox-size-toggle-box-shadow, inset 0 0 1px 0 rgba(0, 0, 0, .2))}.mc-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.mc-checkbox.mc-checked .mc-checkbox-checkmark{display:block}.mc-checkbox.mc-checked .mc-checkbox-mixedmark,.mc-checkbox.mc-indeterminate .mc-checkbox-checkmark{display:none}.mc-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:block}.mc-checkbox.mc-disabled{cursor:default}.mc-checkbox.mc-disabled .mc-checkbox-frame{box-shadow:none}.mc-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap;width:100%}.mc-checkbox-inner-container{display:inline-block;height:16px;height:var(--mc-checkbox-size-width, 16px);line-height:0;margin-right:8px;order:0;position:relative;align-self:center;white-space:nowrap;width:16px;width:var(--mc-checkbox-size-width, 16px);flex-shrink:0}[dir=rtl] .mc-checkbox-inner-container{margin-left:8px;margin-right:auto}.mc-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mc-checkbox-label-before .mc-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mc-checkbox-label-before .mc-checkbox-inner-container{margin-left:auto;margin-right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
                     type: Optional
                 }, {

package/esm2020/core/option/action.mjs

@@ -93,7 +93,7 @@ export class McOptionActionComponent extends McOptionActionMixinBase {
             <i class="mc mc-icon mc-ellipsis_16" *ngSwitchCase="false"></i>
             <ng-content select="[mc-icon]" *ngSwitchCase="true"></ng-content>
         </ng-container>
-    `, isInline: true, styles: [".mc-option-action{box-sizing:unset;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:28px;height:100%;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.mc-option-action[disabled]{cursor:default}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".mc-option-action{box-sizing:content-box;box-sizing:initial;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:28px;height:100%;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.mc-option-action[disabled]{cursor:default}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McOptionActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mc-option-action', exportAs: 'mcOptionAction', template: `
@@ -110,7 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '(blur)': 'onBlur()',
                         '(click)': 'onClick($event)',
                         '(keydown)': 'onKeyDown($event)'
-                    }, inputs: ['disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mc-option-action{box-sizing:unset;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:28px;height:100%;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.mc-option-action[disabled]{cursor:default}\n"] }]
+                    }, inputs: ['disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mc-option-action{box-sizing:content-box;box-sizing:initial;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:28px;height:100%;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.mc-option-action[disabled]{cursor:default}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MC_OPTION_ACTION_PARENT]

package/esm2020/core/option/optgroup.mjs

@@ -18,13 +18,13 @@ export class McOptgroup extends McOptgroupMixinBase {
     }
 }
 /** @nocollapse */ /** @nocollapse */ McOptgroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McOptgroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McOptgroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McOptgroup, selector: "mc-optgroup", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "class.mc-disabled": "disabled" }, classAttribute: "mc-optgroup" }, exportAs: ["mcOptgroup"], usesInheritance: true, ngImport: i0, template: "<label class=\"mc-optgroup-label\" [id]=\"labelId\">{{ label }}</label>\n<ng-content select=\"mc-option, mc-list-option, ng-container\"></ng-content>\n", styles: [".mc-optgroup-label{padding-left:var(--mc-optgroup-size-padding-left, 17px);-webkit-user-select:none;user-select:none;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ McOptgroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McOptgroup, selector: "mc-optgroup", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "class.mc-disabled": "disabled" }, classAttribute: "mc-optgroup" }, exportAs: ["mcOptgroup"], usesInheritance: true, ngImport: i0, template: "<label class=\"mc-optgroup-label\" [id]=\"labelId\">{{ label }}</label>\n<ng-content select=\"mc-option, mc-list-option, ng-container\"></ng-content>\n", styles: [".mc-optgroup-label{padding-left:17px;padding-left:var(--mc-optgroup-size-padding-left, 17px);-webkit-user-select:none;user-select:none;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McOptgroup, decorators: [{
             type: Component,
             args: [{ selector: 'mc-optgroup', exportAs: 'mcOptgroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], host: {
                         class: 'mc-optgroup',
                         '[class.mc-disabled]': 'disabled'
-                    }, template: "<label class=\"mc-optgroup-label\" [id]=\"labelId\">{{ label }}</label>\n<ng-content select=\"mc-option, mc-list-option, ng-container\"></ng-content>\n", styles: [".mc-optgroup-label{padding-left:var(--mc-optgroup-size-padding-left, 17px);-webkit-user-select:none;user-select:none;cursor:default}\n"] }]
+                    }, template: "<label class=\"mc-optgroup-label\" [id]=\"labelId\">{{ label }}</label>\n<ng-content select=\"mc-option, mc-list-option, ng-container\"></ng-content>\n", styles: [".mc-optgroup-label{padding-left:17px;padding-left:var(--mc-optgroup-size-padding-left, 17px);-webkit-user-select:none;user-select:none;cursor:default}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }] } });

package/esm2020/core/option/option.mjs

@@ -182,7 +182,7 @@ export class McOption {
     }
 }
 /** @nocollapse */ /** @nocollapse */ McOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MC_OPTION_PARENT_COMPONENT, optional: true }, { token: i1.McOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McOption, selector: "mc-option", inputs: { value: "value", showCheckbox: "showCheckbox", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.mc-selected": "selected", "class.mc-option-multiple": "multiple", "class.mc-active": "active", "class.mc-disabled": "disabled", "id": "id" }, classAttribute: "mc-option" }, viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTextElement"], descendants: true }], exportAs: ["mcOption"], ngImport: i0, template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<span #mcTextElement class=\"mc-option-text\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--mc-option-size-height, 32px);border:var(--mc-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:var(--mc-option-size-horizontal-padding, 12px);padding-right:var(--mc-option-size-horizontal-padding, 12px);-webkit-tap-highlight-color:transparent}.mc-option.mc-disabled{cursor:default}.mc-option .mc-pseudo-checkbox{margin-right:8px}.mc-option .mc-option-overlay{position:absolute;top:calc(-1 * var(--mc-option-size-border-width, 2px));left:calc(-1 * var(--mc-option-size-border-width, 2px));right:calc(-1 * var(--mc-option-size-border-width, 2px));bottom:calc(-1 * var(--mc-option-size-border-width, 2px));pointer-events:none;border-radius:inherit}.mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i2.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["color", "state", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ McOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McOption, selector: "mc-option", inputs: { value: "value", showCheckbox: "showCheckbox", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.mc-selected": "selected", "class.mc-option-multiple": "multiple", "class.mc-active": "active", "class.mc-disabled": "disabled", "id": "id" }, classAttribute: "mc-option" }, viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTextElement"], descendants: true }], exportAs: ["mcOption"], ngImport: i0, template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<span #mcTextElement class=\"mc-option-text\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:32px;height:var(--mc-option-size-height, 32px);border:2px solid transparent;border:var(--mc-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:12px;padding-left:var(--mc-option-size-horizontal-padding, 12px);padding-right:12px;padding-right:var(--mc-option-size-horizontal-padding, 12px);-webkit-tap-highlight-color:transparent}.mc-option.mc-disabled{cursor:default}.mc-option .mc-pseudo-checkbox{margin-right:8px}.mc-option .mc-option-overlay{position:absolute;top:-2px;top:calc(-1 * var(--mc-option-size-border-width, 2px));left:-2px;left:calc(-1 * var(--mc-option-size-border-width, 2px));right:-2px;right:calc(-1 * var(--mc-option-size-border-width, 2px));bottom:-2px;bottom:calc(-1 * var(--mc-option-size-border-width, 2px));pointer-events:none;border-radius:inherit}.mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i2.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["color", "state", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McOption, decorators: [{
             type: Component,
             args: [{ selector: 'mc-option', exportAs: 'mcOption', host: {
@@ -195,7 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[id]': 'id',
                         '(click)': 'selectViaInteraction()',
                         '(keydown)': 'handleKeydown($event)'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<span #mcTextElement class=\"mc-option-text\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--mc-option-size-height, 32px);border:var(--mc-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:var(--mc-option-size-horizontal-padding, 12px);padding-right:var(--mc-option-size-horizontal-padding, 12px);-webkit-tap-highlight-color:transparent}.mc-option.mc-disabled{cursor:default}.mc-option .mc-pseudo-checkbox{margin-right:8px}.mc-option .mc-option-overlay{position:absolute;top:calc(-1 * var(--mc-option-size-border-width, 2px));left:calc(-1 * var(--mc-option-size-border-width, 2px));right:calc(-1 * var(--mc-option-size-border-width, 2px));bottom:calc(-1 * var(--mc-option-size-border-width, 2px));pointer-events:none;border-radius:inherit}.mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<span #mcTextElement class=\"mc-option-text\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:32px;height:var(--mc-option-size-height, 32px);border:2px solid transparent;border:var(--mc-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:12px;padding-left:var(--mc-option-size-horizontal-padding, 12px);padding-right:12px;padding-right:var(--mc-option-size-horizontal-padding, 12px);-webkit-tap-highlight-color:transparent}.mc-option.mc-disabled{cursor:default}.mc-option .mc-pseudo-checkbox{margin-right:8px}.mc-option .mc-option-overlay{position:absolute;top:-2px;top:calc(-1 * var(--mc-option-size-border-width, 2px));left:-2px;left:calc(-1 * var(--mc-option-size-border-width, 2px));right:-2px;right:calc(-1 * var(--mc-option-size-border-width, 2px));bottom:-2px;bottom:calc(-1 * var(--mc-option-size-border-width, 2px));pointer-events:none;border-radius:inherit}.mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {

package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.mjs

@@ -32,7 +32,7 @@ export class McPseudoCheckbox extends McPseudoCheckboxMixinBase {
     }
 }
 /** @nocollapse */ /** @nocollapse */ McPseudoCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McPseudoCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McPseudoCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: { color: "color", state: "state", disabled: "disabled" }, host: { properties: { "class.mc-indeterminate": "state === \"indeterminate\"", "class.mc-checked": "state === \"checked\"", "class.mc-disabled": "disabled" }, classAttribute: "mc-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n", styles: [".mc-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;width:var(--mc-checkbox-size-width, 16px);height:var(--mc-checkbox-size-width, 16px);border-radius:3px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.mc-pseudo-checkbox .mc-checkbox-checkmark,.mc-pseudo-checkbox .mc-checkbox-mixedmark{display:none;position:absolute;top:calc(-1 * var(--mc-checkbox-size-border-width, 1px));left:calc(-1 * var(--mc-checkbox-size-border-width, 1px))}.mc-pseudo-checkbox.mc-pseudo-checkbox-checked,.mc-pseudo-checkbox.mc-pseudo-checkbox-indeterminate{border-color:transparent}.mc-pseudo-checkbox.mc-checked .mc-checkbox-checkmark,.mc-pseudo-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:inline-block}.mc-pseudo-checkbox.mc-disabled{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ McPseudoCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: { color: "color", state: "state", disabled: "disabled" }, host: { properties: { "class.mc-indeterminate": "state === \"indeterminate\"", "class.mc-checked": "state === \"checked\"", "class.mc-disabled": "disabled" }, classAttribute: "mc-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n", styles: [".mc-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;width:16px;width:var(--mc-checkbox-size-width, 16px);height:16px;height:var(--mc-checkbox-size-width, 16px);border-radius:3px;border-width:1px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.mc-pseudo-checkbox .mc-checkbox-checkmark,.mc-pseudo-checkbox .mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;top:calc(-1 * var(--mc-checkbox-size-border-width, 1px));left:-1px;left:calc(-1 * var(--mc-checkbox-size-border-width, 1px))}.mc-pseudo-checkbox.mc-pseudo-checkbox-checked,.mc-pseudo-checkbox.mc-pseudo-checkbox-indeterminate{border-color:transparent}.mc-pseudo-checkbox.mc-checked .mc-checkbox-checkmark,.mc-pseudo-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:inline-block}.mc-pseudo-checkbox.mc-disabled{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McPseudoCheckbox, decorators: [{
             type: Component,
             args: [{ selector: 'mc-pseudo-checkbox', host: {
@@ -40,7 +40,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[class.mc-indeterminate]': 'state === "indeterminate"',
                         '[class.mc-checked]': 'state === "checked"',
                         '[class.mc-disabled]': 'disabled'
-                    }, preserveWhitespaces: false, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n", styles: [".mc-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;width:var(--mc-checkbox-size-width, 16px);height:var(--mc-checkbox-size-width, 16px);border-radius:3px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.mc-pseudo-checkbox .mc-checkbox-checkmark,.mc-pseudo-checkbox .mc-checkbox-mixedmark{display:none;position:absolute;top:calc(-1 * var(--mc-checkbox-size-border-width, 1px));left:calc(-1 * var(--mc-checkbox-size-border-width, 1px))}.mc-pseudo-checkbox.mc-pseudo-checkbox-checked,.mc-pseudo-checkbox.mc-pseudo-checkbox-indeterminate{border-color:transparent}.mc-pseudo-checkbox.mc-checked .mc-checkbox-checkmark,.mc-pseudo-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:inline-block}.mc-pseudo-checkbox.mc-disabled{cursor:default}\n"] }]
+                    }, preserveWhitespaces: false, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n", styles: [".mc-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;width:16px;width:var(--mc-checkbox-size-width, 16px);height:16px;height:var(--mc-checkbox-size-width, 16px);border-radius:3px;border-width:1px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.mc-pseudo-checkbox .mc-checkbox-checkmark,.mc-pseudo-checkbox .mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;top:calc(-1 * var(--mc-checkbox-size-border-width, 1px));left:-1px;left:calc(-1 * var(--mc-checkbox-size-border-width, 1px))}.mc-pseudo-checkbox.mc-pseudo-checkbox-checked,.mc-pseudo-checkbox.mc-pseudo-checkbox-indeterminate{border-color:transparent}.mc-pseudo-checkbox.mc-checked .mc-checkbox-checkmark,.mc-pseudo-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:inline-block}.mc-pseudo-checkbox.mc-disabled{cursor:default}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { state: [{
                 type: Input
             }], disabled: [{