@kirbydesign/designsystem 4.0.9 → 4.0.10

package/bundles/kirbydesign-designsystem.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ionic/angular'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('highcharts'), require('chart.js'), require('chartjs-plugin-annotation'), require('highcharts/highstock'), require('highcharts/modules/annotations'), require('date-fns'), require('date-fns-tz'), require('date-fns/locale'), require('@angular/forms'), require('inputmask/lib/extensions/inputmask.date.extensions'), require('inputmask/lib/inputmask'), require('inputmask/lib/extensions/inputmask.numeric.extensions'), require('@angular/animations'), require('ngx-ui-scroll')) :
-    typeof define === 'function' && define.amd ? define('@kirbydesign/designsystem', ['exports', '@angular/core', '@ionic/angular', '@angular/router', 'rxjs', 'rxjs/operators', '@angular/common', 'highcharts', 'chart.js', 'chartjs-plugin-annotation', 'highcharts/highstock', 'highcharts/modules/annotations', 'date-fns', 'date-fns-tz', 'date-fns/locale', '@angular/forms', 'inputmask/lib/extensions/inputmask.date.extensions', 'inputmask/lib/inputmask', 'inputmask/lib/extensions/inputmask.numeric.extensions', '@angular/animations', 'ngx-ui-scroll'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.kirbydesign = global.kirbydesign || {}, global.kirbydesign.designsystem = {}), global.ng.core, global.ionic, global.ng.router, global.rxjs, global.rxjs.operators, global.ng.common, global.highcharts, global.chart_js, global.annotationPlugin, global['highcharts/highstock'], global.highcharts, global['date-fns'], global['date-fns-tz'], global.locale, global.ng.forms, null, global.inputmask, null, global.ng.animations, global['ngx-ui-scroll']));
-}(this, (function (exports, i0, i1, i1$1, rxjs, operators, common, Highcharts, chart_js, annotationPlugin, Highcharts$1, AnnotationsModule, dateFns, dateFnsTz, locale, forms, inputmask_date_extensions, Inputmask, inputmask_numeric_extensions, animations, ngxUiScroll) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@kirbydesign/core'), require('@angular/core'), require('@ionic/angular'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('highcharts'), require('chart.js'), require('chartjs-plugin-annotation'), require('highcharts/highstock'), require('highcharts/modules/annotations'), require('date-fns'), require('date-fns-tz'), require('date-fns/locale'), require('@angular/forms'), require('inputmask/lib/extensions/inputmask.date.extensions'), require('inputmask/lib/inputmask'), require('inputmask/lib/extensions/inputmask.numeric.extensions'), require('@angular/animations'), require('ngx-ui-scroll'), require('@kirbydesign/core/loader')) :
+    typeof define === 'function' && define.amd ? define('@kirbydesign/designsystem', ['exports', '@kirbydesign/core', '@angular/core', '@ionic/angular', '@angular/router', 'rxjs', 'rxjs/operators', '@angular/common', 'highcharts', 'chart.js', 'chartjs-plugin-annotation', 'highcharts/highstock', 'highcharts/modules/annotations', 'date-fns', 'date-fns-tz', 'date-fns/locale', '@angular/forms', 'inputmask/lib/extensions/inputmask.date.extensions', 'inputmask/lib/inputmask', 'inputmask/lib/extensions/inputmask.numeric.extensions', '@angular/animations', 'ngx-ui-scroll', '@kirbydesign/core/loader'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.kirbydesign = global.kirbydesign || {}, global.kirbydesign.designsystem = {}), global.core, global.ng.core, global.ionic, global.ng.router, global.rxjs, global.rxjs.operators, global.ng.common, global.highcharts, global.chart_js, global.annotationPlugin, global['highcharts/highstock'], global.highcharts, global['date-fns'], global['date-fns-tz'], global.locale, global.ng.forms, null, global.inputmask, null, global.ng.animations, global['ngx-ui-scroll'], global.loader));
+}(this, (function (exports, core, i0, i1, i1$1, rxjs, operators, common, Highcharts, chart_js, annotationPlugin, Highcharts$1, AnnotationsModule, dateFns, dateFnsTz, locale, forms, inputmask_date_extensions, Inputmask, inputmask_numeric_extensions, animations, ngxUiScroll, loader) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,95 +32,16 @@
     var AnnotationsModule__default = /*#__PURE__*/_interopDefaultLegacy(AnnotationsModule);
     var Inputmask__default = /*#__PURE__*/_interopDefaultLegacy(Inputmask);
 
-    var styles = {
-        sizes: {
-            xxxl: '56px',
-            xxl: '48px',
-            xl: '40px',
-            l: '32px',
-            m: '24px',
-            s: '16px',
-            xs: '12px',
-            xxs: '8px',
-            xxxs: '4px',
-            xxxxs: '2px',
-        },
-        fontSizes: {
-            xxxxl: '72px',
-            xxxl: '56px',
-            xxl: '40px',
-            xl: '32px',
-            l: '22px',
-            m: '18px',
-            n: '16px',
-            s: '14px',
-            xs: '12px',
-            xxs: '10px',
-        },
-        lineHeight: { xl: '38px', l: '28px', m: '24px', n: '24px', s: '20px', xs: '16px', xxs: '11px' },
-        fontWeight: { light: '300', normal: '400', bold: '700', black: '900' },
-        iconFontSizes: { xs: '16px', sm: '24px', md: '32px', lg: '56px' },
-        zLayers: {
-            default: '1',
-            segmentBadge: '2',
-            dropdown: '800',
-            popover: '850',
-            modalOverlay: '900',
-            modal: '901',
-            loadingOverlay: '1001',
-        },
-        borderRadius: '16px',
-        borderRadiusRound: '999px',
-        breakpoints: {
-            small: '321px',
-            medium: '721px',
-            large: '1025px',
-            xlarge: '60em',
-            xxlarge: '80em',
-        },
-        elevations: {
-            2: 'rgba(28, 28, 28, 0.3) 0px 5px 10px -10px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
-            4: 'rgba(28, 28, 28, 0.3) 0px 10px 15px -10px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
-            8: 'rgba(28, 28, 28, 0.3) 0px 20px 30px -15px, rgba(28, 28, 28, 0.08) 0px 0px 5px 0px',
-        },
-        avatarSizes: { xs: '32px', s: '40px', m: '56px', l: '96px' },
-        avatarBadgeSize: '16px',
-        pageContentMaxWidth: '720px',
-        alertMaxWidth: '359px',
-        compactModalMaxWidth: '359px',
-        modalMaxWidth: '720px',
-        modalHeights: { s: '288px', m: '460px', l: '576px' },
-        modalDefaultHeight: '460px',
-        drawerDefaultHeight: '288px',
-        itemHeights: { m: '56px', s: '44px', xs: '32px' },
-        dropdownItemHeight: '44px',
-        fatFingerSize: '44px',
-        checkboxRadioSizes: { xs: '32px', sm: '44px', md: '56px' },
-        checkboxRadioSpacing: { toEdge: '16px', toLabel: '12px' },
-        softKeyboardTransitionEnter: '250ms ease-out 1ms',
-        softKeyboardTransitionLeave: '150ms ease-out',
-        transitionDurations: { quick: '200ms', short: '300ms', long: '500ms', extraLong: '1000ms' },
-        transitionEasings: {
-            static: 'linear',
-            enter: 'ease-out',
-            exit: 'ease-in',
-            enterExit: 'ease',
-            motion: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
-            modal: { enter: 'cubic-bezier(0.32, 0.72, 0, 1)', exit: 'cubic-bezier(0.32, 0.72, 0, 1)' },
-        },
-        loadingOverlayBackdropOpacity: '0.8',
-    };
-
     (function (KirbyAnimation) {
         var Duration;
         (function (Duration) {
             // Duration in milliseconds
-            Duration[Duration["QUICK"] = parseInt(styles.transitionDurations.quick)] = "QUICK";
-            Duration[Duration["SHORT"] = parseInt(styles.transitionDurations.short)] = "SHORT";
-            Duration[Duration["LONG"] = parseInt(styles.transitionDurations.long)] = "LONG";
-            Duration[Duration["EXTRA_LONG"] = parseInt(styles.transitionDurations.extraLong)] = "EXTRA_LONG";
+            Duration[Duration["QUICK"] = parseInt(core.DesignTokenHelper.transitionDuration('quick'))] = "QUICK";
+            Duration[Duration["SHORT"] = parseInt(core.DesignTokenHelper.transitionDuration('short'))] = "SHORT";
+            Duration[Duration["LONG"] = parseInt(core.DesignTokenHelper.transitionDuration('long'))] = "LONG";
+            Duration[Duration["EXTRA_LONG"] = parseInt(core.DesignTokenHelper.transitionDuration('extraLong'))] = "EXTRA_LONG";
         })(Duration = KirbyAnimation.Duration || (KirbyAnimation.Duration = {}));
-        KirbyAnimation.Easing = styles.transitionEasings;
+        KirbyAnimation.Easing = core.DesignTokenHelper.transitionEasings();
     })(exports.KirbyAnimation || (exports.KirbyAnimation = {}));
 
     var RouterOutletComponent = /** @class */ (function () {
@@ -1191,451 +1112,6 @@
         onFocusChange: [{ type: i0.HostListener, args: ['window:focus',] }, { type: i0.HostListener, args: ['window:focusout',] }]
     };
 
-    var styles$1 = {
-        brandColors: { primary: '#00e89a', secondary: '#005c3c', tertiary: '#01352c' },
-        notificationColors: { success: '#2cf287', warning: '#ffca3a', danger: '#ff595e' },
-        systemColors: {
-            backgroundColor: '#f6f6f6',
-            white: '#ffffff',
-            light: '#f2f2f2',
-            semiLight: '#ebebeb',
-            medium: '#d1d1d1',
-            semiDark: '#8e8e8e',
-            dark: '#353535',
-            black: '#1c1c1c',
-        },
-        textColors: { white: '#ffffff', semiDark: '#707070', black: '#1c1c1c', danger: '#ee0d0d' },
-        focusRingColor: '#4d90fe',
-        mainColors: {
-            primary: '#00e89a',
-            secondary: '#005c3c',
-            tertiary: '#01352c',
-            success: '#2cf287',
-            warning: '#ffca3a',
-            danger: '#ff595e',
-            light: '#f2f2f2',
-            medium: '#d1d1d1',
-            dark: '#353535',
-        },
-        kirbyColors: {
-            black: '#1c1c1c',
-            blackRgb: '28, 28, 28',
-            blackContrast: '#ffffff',
-            blackContrastRgb: '255, 255, 255',
-            blackShade: '#191919',
-            blackShadeRgb: '25, 25, 25',
-            blackTint: '#333333',
-            blackTintRgb: '51, 51, 51',
-            blackColorBrightness: 'dark',
-            dark: '#353535',
-            darkRgb: '53, 53, 53',
-            darkContrast: '#ffffff',
-            darkContrastRgb: '255, 255, 255',
-            darkShade: '#2f2f2f',
-            darkShadeRgb: '47, 47, 47',
-            darkTint: '#494949',
-            darkTintRgb: '73, 73, 73',
-            darkColorBrightness: 'dark',
-            semiDark: '#8e8e8e',
-            semiDarkRgb: '142, 142, 142',
-            semiDarkContrast: '#1c1c1c',
-            semiDarkContrastRgb: '28, 28, 28',
-            semiDarkShade: '#7d7d7d',
-            semiDarkShadeRgb: '125, 125, 125',
-            semiDarkTint: '#999999',
-            semiDarkTintRgb: '153, 153, 153',
-            semiDarkColorBrightness: 'light',
-            medium: '#d1d1d1',
-            mediumRgb: '209, 209, 209',
-            mediumContrast: '#1c1c1c',
-            mediumContrastRgb: '28, 28, 28',
-            mediumShade: '#b8b8b8',
-            mediumShadeRgb: '184, 184, 184',
-            mediumTint: '#d6d6d6',
-            mediumTintRgb: '214, 214, 214',
-            mediumColorBrightness: 'light',
-            semiLight: '#ebebeb',
-            semiLightRgb: '235, 235, 235',
-            semiLightContrast: '#1c1c1c',
-            semiLightContrastRgb: '28, 28, 28',
-            semiLightShade: '#cfcfcf',
-            semiLightShadeRgb: '207, 207, 207',
-            semiLightTint: '#ededed',
-            semiLightTintRgb: '237, 237, 237',
-            semiLightColorBrightness: 'light',
-            light: '#f2f2f2',
-            lightRgb: '242, 242, 242',
-            lightContrast: '#1c1c1c',
-            lightContrastRgb: '28, 28, 28',
-            lightShade: '#d5d5d5',
-            lightShadeRgb: '213, 213, 213',
-            lightTint: '#f3f3f3',
-            lightTintRgb: '243, 243, 243',
-            lightColorBrightness: 'light',
-            white: '#ffffff',
-            whiteRgb: '255, 255, 255',
-            whiteContrast: '#1c1c1c',
-            whiteContrastRgb: '28, 28, 28',
-            whiteShade: '#e0e0e0',
-            whiteShadeRgb: '224, 224, 224',
-            whiteTint: 'white',
-            whiteTintRgb: '255, 255, 255',
-            whiteColorBrightness: 'white',
-            backgroundColor: '#f6f6f6',
-            backgroundColorRgb: '246, 246, 246',
-            backgroundColorContrast: '#1c1c1c',
-            backgroundColorContrastRgb: '28, 28, 28',
-            backgroundColorShade: '#d8d8d8',
-            backgroundColorShadeRgb: '216, 216, 216',
-            backgroundColorTint: '#f7f7f7',
-            backgroundColorTintRgb: '247, 247, 247',
-            backgroundColorColorBrightness: 'light',
-            danger: '#ff595e',
-            dangerRgb: '255, 89, 94',
-            dangerContrast: '#1c1c1c',
-            dangerContrastRgb: '28, 28, 28',
-            dangerShade: '#e04e53',
-            dangerShadeRgb: '224, 78, 83',
-            dangerTint: '#ff6a6e',
-            dangerTintRgb: '255, 106, 110',
-            dangerColorBrightness: 'light',
-            warning: '#ffca3a',
-            warningRgb: '255, 202, 58',
-            warningContrast: '#1c1c1c',
-            warningContrastRgb: '28, 28, 28',
-            warningShade: '#e0b233',
-            warningShadeRgb: '224, 178, 51',
-            warningTint: '#ffcf4e',
-            warningTintRgb: '255, 207, 78',
-            warningColorBrightness: 'light',
-            success: '#2cf287',
-            successRgb: '44, 242, 135',
-            successContrast: '#1c1c1c',
-            successContrastRgb: '28, 28, 28',
-            successShade: '#27d577',
-            successShadeRgb: '39, 213, 119',
-            successTint: '#41f393',
-            successTintRgb: '65, 243, 147',
-            successColorBrightness: 'light',
-            tertiary: '#01352c',
-            tertiaryRgb: '1, 53, 44',
-            tertiaryContrast: '#ffffff',
-            tertiaryContrastRgb: '255, 255, 255',
-            tertiaryShade: '#012f27',
-            tertiaryShadeRgb: '1, 47, 39',
-            tertiaryTint: '#1a4941',
-            tertiaryTintRgb: '26, 73, 65',
-            tertiaryColorBrightness: 'dark',
-            secondary: '#005c3c',
-            secondaryRgb: '0, 92, 60',
-            secondaryContrast: '#ffffff',
-            secondaryContrastRgb: '255, 255, 255',
-            secondaryShade: '#005135',
-            secondaryShadeRgb: '0, 81, 53',
-            secondaryTint: '#1a6c50',
-            secondaryTintRgb: '26, 108, 80',
-            secondaryColorBrightness: 'dark',
-            primary: '#00e89a',
-            primaryRgb: '0, 232, 154',
-            primaryContrast: '#1c1c1c',
-            primaryContrastRgb: '28, 28, 28',
-            primaryShade: '#00cc88',
-            primaryShadeRgb: '0, 204, 136',
-            primaryTint: '#1aeaa4',
-            primaryTintRgb: '26, 234, 164',
-            primaryColorBrightness: 'light',
-        },
-        kirbyTextColors: {
-            danger: '#ee0d0d',
-            dangerRgb: '238, 13, 13',
-            dangerContrast: '#ffffff',
-            dangerContrastRgb: '255, 255, 255',
-            dangerShade: '#d10b0b',
-            dangerShadeRgb: '209, 11, 11',
-            dangerTint: '#f02525',
-            dangerTintRgb: '240, 37, 37',
-            dangerColorBrightness: 'dark',
-            black: '#1c1c1c',
-            blackRgb: '28, 28, 28',
-            blackContrast: '#ffffff',
-            blackContrastRgb: '255, 255, 255',
-            blackShade: '#191919',
-            blackShadeRgb: '25, 25, 25',
-            blackTint: '#333333',
-            blackTintRgb: '51, 51, 51',
-            blackColorBrightness: 'dark',
-            semiDark: '#707070',
-            semiDarkRgb: '112, 112, 112',
-            semiDarkContrast: '#ffffff',
-            semiDarkContrastRgb: '255, 255, 255',
-            semiDarkShade: '#636363',
-            semiDarkShadeRgb: '99, 99, 99',
-            semiDarkTint: '#7e7e7e',
-            semiDarkTintRgb: '126, 126, 126',
-            semiDarkColorBrightness: 'dark',
-            white: '#ffffff',
-            whiteRgb: '255, 255, 255',
-            whiteContrast: '#1c1c1c',
-            whiteContrastRgb: '28, 28, 28',
-            whiteShade: '#e0e0e0',
-            whiteShadeRgb: '224, 224, 224',
-            whiteTint: 'white',
-            whiteTintRgb: '255, 255, 255',
-            whiteColorBrightness: 'white',
-        },
-    };
-
-    var kebabToCamelCase = function (kebabString) {
-        if (!kebabString.length || kebabString.length === 1) {
-            return kebabString;
-        }
-        var stringInCamelCase = kebabString
-            .split('-')
-            .map(function (part, index) { return (index === 0 ? part : part[0].toUpperCase() + part.substr(1)); })
-            .join('');
-        return stringInCamelCase;
-    };
-    var camelToKebabCase = function (camelString) {
-        if (!camelString.length || camelString.length === 1) {
-            return camelString;
-        }
-        var stringInKebabCase = camelString
-            .split('')
-            .map(function (char, index) {
-            var isUppercase = char.toUpperCase() === char;
-            if (!isUppercase || char === '-') {
-                return char;
-            }
-            return index === 0 ? char.toLowerCase() : "-" + char.toLowerCase();
-        })
-            .join('');
-        return stringInKebabCase;
-    };
-    var kebabToTitleCase = function (kebabString) {
-        if (!kebabString.length || kebabString.length === 1) {
-            return kebabString;
-        }
-        var stringInTitleCase = kebabString
-            .split('-')
-            .map(function (word) {
-            return word[0].toUpperCase() + word.slice(1);
-        })
-            .join(' ');
-        return stringInTitleCase;
-    };
-    var capitalizeFirstLetter = function (string) {
-        if (typeof string !== 'string') {
-            return '';
-        }
-        return string.charAt(0).toUpperCase() + string.slice(1);
-    };
-
-    var ColorHelper = /** @class */ (function () {
-        function ColorHelper() {
-        }
-        ColorHelper.getMainColors = function () {
-            // Do not remove the `colorArray` const, since it'll break the ngpackagr build, for more info see:
-            // https://github.com/ng-packagr/ng-packagr/issues/696
-            var colorArray = Object.entries(styles$1.mainColors).map(function (_a) {
-                var _b = __read(_a, 2), name = _b[0], value = _b[1];
-                return ({ name: name, value: value });
-            });
-            return colorArray;
-        };
-        ColorHelper.mapToKirbyColorArray = function (colors, fullColorMap) {
-            if (fullColorMap === void 0) { fullColorMap = styles$1.kirbyColors; }
-            var TINT = 'Tint';
-            var SHADE = 'Shade';
-            var CONTRAST = 'Contrast';
-            var colorArray = Object.entries(colors).map(function (_a) {
-                var _b = __read(_a, 2), name = _b[0], value = _b[1];
-                return ({
-                    name: camelToKebabCase(name),
-                    value: value,
-                    base: value,
-                    tint: {
-                        value: fullColorMap[name + TINT],
-                        name: camelToKebabCase(name + TINT),
-                    },
-                    shade: {
-                        value: fullColorMap[name + SHADE],
-                        name: camelToKebabCase(name + SHADE),
-                    },
-                    contrast: {
-                        value: fullColorMap[name + CONTRAST],
-                        name: camelToKebabCase(name + CONTRAST),
-                    },
-                });
-            });
-            // Do not remove the `colorArray` const, since it'll break the ngpackagr build, for more info see:
-            // https://github.com/ng-packagr/ng-packagr/issues/696
-            return colorArray;
-        };
-        ColorHelper.getBackgroundColor = function () {
-            return ColorHelper.getColor('background-color');
-        };
-        ColorHelper.getColorBrightness = function (name) {
-            return ColorHelper.getColor(name + '-color-brightness');
-        };
-        ColorHelper.getThemeColorRgbString = function (name, opacity) {
-            var rgbValue = ColorHelper.getColor(name + '-rgb');
-            return opacity
-                ? "rgba(" + rgbValue + ", " + ColorHelper.opacityThreshold(opacity) + ")"
-                : "rgb(" + rgbValue + ")";
-        };
-        ColorHelper.getThemeTextColorRgbString = function (name) {
-            var rgbValue = ColorHelper.getTextColor(name + '-rgb');
-            return "rgb(" + rgbValue + ")";
-        };
-        ColorHelper.getThemeColorHexString = function (name) {
-            return ColorHelper.getColor(name);
-        };
-        ColorHelper.getThemeTextColorHexString = function (name) {
-            return ColorHelper.getTextColor(name);
-        };
-        ColorHelper.getTransparentColorRgbString = function () {
-            return 'rgba(0, 0, 0, 0)';
-        };
-        ColorHelper.colorStringToRgbString = function (color) {
-            if (color.indexOf('rgb') === 0) {
-                return color;
-            }
-            if (color.indexOf('#') === 0) {
-                return ColorHelper.hexToRGB(color);
-            }
-            if (color.split(',').length === 3) {
-                return "rgb(" + color + ")";
-            }
-            if (color.split(',').length === 4) {
-                return "rgba(" + color + ")";
-            }
-            var ctx = document.createElement('canvas').getContext('2d');
-            ctx.fillStyle = color;
-            var renderedColor = ctx.fillStyle.toString();
-            return ColorHelper.colorStringToRgbString(renderedColor);
-        };
-        ColorHelper.hexToRGB = function (hex) {
-            var r = '0', g = '0', b = '0';
-            // 3 digits
-            if (hex.length === 4) {
-                r = '0x' + hex[1] + hex[1];
-                g = '0x' + hex[2] + hex[2];
-                b = '0x' + hex[3] + hex[3];
-                // 6 digits
-            }
-            else if (hex.length === 7) {
-                r = '0x' + hex[1] + hex[2];
-                g = '0x' + hex[3] + hex[4];
-                b = '0x' + hex[5] + hex[6];
-            }
-            return "rgb(" + +r + ", " + +g + ", " + +b + ")";
-        };
-        ColorHelper.getColor = function (name) {
-            var camelCaseKey = kebabToCamelCase(name);
-            var found = styles$1.kirbyColors[camelCaseKey];
-            return found || null;
-        };
-        ColorHelper.getTextColor = function (name) {
-            var camelCaseKey = kebabToCamelCase(name);
-            var found = styles$1.kirbyTextColors[camelCaseKey];
-            return found || null;
-        };
-        ColorHelper.opacityThreshold = function (opacity) {
-            if (0 <= opacity && opacity <= 1) {
-                return opacity;
-            }
-            console.warn("Opacity value must be between 0 and 1. Current value is: " + opacity + ".");
-            return 1;
-        };
-        return ColorHelper;
-    }());
-    ColorHelper.brandColors = ColorHelper.mapToKirbyColorArray(styles$1.brandColors);
-    ColorHelper.notificationColors = ColorHelper.mapToKirbyColorArray(styles$1.notificationColors);
-    ColorHelper.systemColors = ColorHelper.mapToKirbyColorArray(styles$1.systemColors);
-    ColorHelper.textColors = ColorHelper.mapToKirbyColorArray(styles$1.textColors, styles$1.kirbyTextColors);
-    ColorHelper.mainColors = ColorHelper.getMainColors();
-
-    var DesignTokenHelper = /** @class */ (function () {
-        function DesignTokenHelper() {
-        }
-        DesignTokenHelper.getColor = function (name, variant) {
-            var variantSuffix = variant ? "-" + variant : '';
-            var colorVariant = "" + name + variantSuffix;
-            return {
-                name: name,
-                variant: variant,
-                fullname: colorVariant,
-                value: ColorHelper.getThemeColorRgbString(colorVariant),
-                hex: ColorHelper.getThemeColorHexString(colorVariant),
-            };
-        };
-        DesignTokenHelper.getTextColor = function (name, variant) {
-            var variantSuffix = variant ? "-" + variant : '';
-            var colorVariant = "" + name + variantSuffix;
-            return {
-                name: name,
-                variant: variant,
-                fullname: colorVariant,
-                value: ColorHelper.getThemeTextColorRgbString(colorVariant),
-                hex: ColorHelper.getThemeTextColorHexString(colorVariant),
-            };
-        };
-        DesignTokenHelper.size = function (key) {
-            return styles.sizes[key];
-        };
-        DesignTokenHelper.fontSize = function (key) {
-            return styles.fontSizes[key];
-        };
-        DesignTokenHelper.iconFontSize = function (key) {
-            return styles.iconFontSizes[key];
-        };
-        DesignTokenHelper.fontWeight = function (key) {
-            return styles.fontWeight[key];
-        };
-        DesignTokenHelper.lineHeight = function (key) {
-            return styles.lineHeight[key];
-        };
-        DesignTokenHelper.backgroundColor = function () {
-            return ColorHelper.getBackgroundColor();
-        };
-        DesignTokenHelper.borderRadius = function () {
-            return styles.borderRadius;
-        };
-        DesignTokenHelper.borderRadiusRound = function () {
-            return styles.borderRadiusRound;
-        };
-        DesignTokenHelper.alertMaxWidth = function () {
-            return styles.alertMaxWidth;
-        };
-        DesignTokenHelper.compactModalMaxWidth = function () {
-            return styles.compactModalMaxWidth;
-        };
-        DesignTokenHelper.dropdownItemHeight = function () {
-            return styles.dropdownItemHeight;
-        };
-        DesignTokenHelper.avatarSize = function (key) {
-            return styles.avatarSizes[key];
-        };
-        DesignTokenHelper.fatFingerSize = function () {
-            return styles.fatFingerSize;
-        };
-        DesignTokenHelper.getElevation = function (z) {
-            return styles.elevations[z];
-        };
-        DesignTokenHelper.itemHeight = function (key) {
-            return styles.itemHeights[key];
-        };
-        DesignTokenHelper.zLayer = function (key) {
-            return styles.zLayers[key];
-        };
-        return DesignTokenHelper;
-    }());
-    DesignTokenHelper.breakpoints = styles.breakpoints;
-    DesignTokenHelper.softKeyboardTransitionEnter = styles.softKeyboardTransitionEnter;
-    DesignTokenHelper.softKeyboardTransitionLeave = styles.softKeyboardTransitionLeave;
-    DesignTokenHelper.modalDefaultHeight = styles.modalDefaultHeight;
-    DesignTokenHelper.drawerDefaultHeight = styles.drawerDefaultHeight;
-
     var PlatformService = /** @class */ (function () {
         function PlatformService(windowRef) {
             this.windowRef = windowRef;
@@ -1645,7 +1121,7 @@
             return this.windowRef.nativeWindow.matchMedia(isTouchDeviceQuery).matches;
         };
         PlatformService.prototype.isPhabletOrBigger = function () {
-            var query = "(min-width: " + DesignTokenHelper.breakpoints.medium + ")";
+            var query = "(min-width: " + core.DesignTokenHelper.breakpoints.medium + ")";
             return this.windowRef.nativeWindow.matchMedia(query).matches;
         };
         return PlatformService;
@@ -2195,7 +1671,7 @@
                 _this.renderer.setStyle(scrollElement, 'height', '100%');
                 _this.renderer.setStyle(scrollElement, 'position', 'relative');
                 if (_this.config.flavor === 'drawer') {
-                    _this.renderer.setStyle(scrollElement, 'transition', 'padding-bottom ' + DesignTokenHelper.softKeyboardTransitionLeave);
+                    _this.renderer.setStyle(scrollElement, 'transition', 'padding-bottom ' + core.DesignTokenHelper.softKeyboardTransitionLeave);
                 }
             });
         };
@@ -3323,7 +2799,7 @@
                     selector: 'kirby-avatar',
                     template: "<div class=\"avatar\" [ngClass]=\"{ shadow: shadow, overlay: overlay }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-right:-2px;--kirby-badge-top:-2px;--kirby-badge-zindex:2}.avatar,:host{position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size:24px}.avatar.shadow{box-shadow:0 2px 4px 2px hsla(0,0%,44.3%,.4)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host(.sm) .avatar,:host-context(kirby-progress-circle.sm) .avatar{width:40px;height:40px}:host(.sm) .avatar .avatar-text,:host-context(kirby-progress-circle.sm) .avatar .avatar-text{font-size:14px}:host(.md),:host-context(kirby-progress-circle.md){--kirby-badge-right:0px;--kirby-badge-top:0px}:host(.md) .avatar,:host-context(kirby-progress-circle.md) .avatar{width:56px;height:56px;--kirby-icon-font-size:32px}:host(.md) .avatar .avatar-text,:host-context(kirby-progress-circle.md) .avatar .avatar-text{font-size:18px}:host(.lg),:host-context(kirby-progress-circle.lg){--kirby-badge-right:6px;--kirby-badge-top:6px}:host(.lg) .avatar,:host-context(kirby-progress-circle.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size:56px}:host(.lg) .avatar .avatar-text,:host-context(kirby-progress-circle.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}"]
+                    styles: [":host{--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-right:-2px;--kirby-badge-top:-2px;--kirby-badge-z-index:2}.avatar,:host{position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size:24px}.avatar.shadow{box-shadow:0 2px 4px 2px hsla(0,0%,44.3%,.4)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host(.sm) .avatar,:host-context(kirby-progress-circle.sm) .avatar{width:40px;height:40px}:host(.sm) .avatar .avatar-text,:host-context(kirby-progress-circle.sm) .avatar .avatar-text{font-size:14px}:host(.md),:host-context(kirby-progress-circle.md){--kirby-badge-right:0px;--kirby-badge-top:0px}:host(.md) .avatar,:host-context(kirby-progress-circle.md) .avatar{width:56px;height:56px;--kirby-icon-font-size:32px}:host(.md) .avatar .avatar-text,:host-context(kirby-progress-circle.md) .avatar .avatar-text{font-size:18px}:host(.lg),:host-context(kirby-progress-circle.lg){--kirby-badge-right:6px;--kirby-badge-top:6px}:host(.lg) .avatar,:host-context(kirby-progress-circle.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size:56px}:host(.lg) .avatar .avatar-text,:host-context(kirby-progress-circle.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}"]
                 },] }
     ];
     AvatarComponent.propDecorators = {
@@ -3337,22 +2813,6 @@
         _cssClass: [{ type: i0.HostBinding, args: ['class',] }]
     };
 
-    var BadgeComponent = /** @class */ (function () {
-        function BadgeComponent() {
-        }
-        return BadgeComponent;
-    }());
-    BadgeComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kirby-badge',
-                    template: "<ion-badge color=\"none\">\n  <ng-content *ngIf=\"!text\"></ng-content>\n  <ng-container *ngIf=\"text\">{{ text }}</ng-container>\n</ion-badge>\n",
-                    styles: [":root{--kirby-badge-elevation:none;--kirby-badge-position:relative;--kirby-badge-left:0;--kirby-badge-right:0;--kirby-badge-top:0;--kirby-badge-zindex:none}:host{--kirby-badge-background-color:var(--kirby-white);--kirby-badge-color:var(--kirby-white-contrast);--ion-color-base:var(--kirby-badge-background-color);--ion-color-contrast:var(--kirby-badge-color);position:var(--kirby-badge-position);left:var(--kirby-badge-left);right:var(--kirby-badge-right);top:var(--kirby-badge-top);z-index:var(--kirby-badge-zindex);font-size:10px;line-height:1}:host ion-badge{--padding-top:3px;--padding-end:5px;--padding-bottom:3px;--padding-start:5px;box-sizing:border-box;border-radius:8px;min-width:16px;min-height:16px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation)}:host ::ng-deep kirby-icon{--kirby-icon-font-size:16px;position:absolute;top:0;left:0}:host(.success){--kirby-badge-background-color:var(--kirby-success);--kirby-badge-color:var(--kirby-success-contrast)}:host(.warning){--kirby-badge-background-color:var(--kirby-warning);--kirby-badge-color:var(--kirby-warning-contrast)}:host(.danger){--kirby-badge-background-color:var(--kirby-danger);--kirby-badge-color:var(--kirby-danger-contrast);--kirby-badge-color:var(--kirby-white)}:host(.white){--kirby-badge-background-color:var(--kirby-white);--kirby-badge-color:var(--kirby-white-contrast)}"]
-                },] }
-    ];
-    BadgeComponent.propDecorators = {
-        text: [{ type: i0.Input }]
-    };
-
     var CardComponent = /** @class */ (function () {
         function CardComponent(elementRef, resizeObserverService, renderer) {
             this.elementRef = elementRef;
@@ -3728,8 +3188,8 @@
         ],
     };
 
-    var getColor = DesignTokenHelper.getColor;
-    var fontSize = DesignTokenHelper.fontSize;
+    var getColor = core.DesignTokenHelper.getColor;
+    var fontSize = core.DesignTokenHelper.fontSize;
     function colorPoints() {
         var series = this.series;
         for (var i = 0, ie = series.length; i < ie; ++i) {
@@ -3816,8 +3276,8 @@
         },
     };
 
-    var getColor$1 = DesignTokenHelper.getColor;
-    var fontSize$1 = DesignTokenHelper.fontSize;
+    var getColor$1 = core.DesignTokenHelper.getColor;
+    var fontSize$1 = core.DesignTokenHelper.fontSize;
     function colorPoints$1() {
         var series = this.series;
         for (var i = 0, ie = series.length; i < ie; ++i) {
@@ -4352,7 +3812,9 @@
         return JSON.parse(JSON.stringify(obj));
     }
 
-    var getThemeColorHexString = ColorHelper.getThemeColorHexString;
+    // re-export helpers from core, to preserve backwards compatability
+
+    var getThemeColorHexString = core.ColorHelper.getThemeColorHexString;
     /* The chart.js annotation does not allow for changing the
     defaults it comes with. In order to have sensible defaults
     this object is used instead and manually merged with the
@@ -4397,8 +3859,8 @@
         onHover: ɵ0$5,
     };
 
-    var fontSize$2 = DesignTokenHelper.fontSize;
-    var getThemeColorHexString$1 = ColorHelper.getThemeColorHexString, getThemeColorRgbString = ColorHelper.getThemeColorRgbString;
+    var fontSize$2 = core.DesignTokenHelper.fontSize;
+    var getThemeColorHexString$1 = core.ColorHelper.getThemeColorHexString, getThemeColorRgbString = core.ColorHelper.getThemeColorRgbString;
     var CHART_TYPES_CONFIG = {
         bar: {
             type: 'bar',
@@ -4521,7 +3983,7 @@
         { type: i0.Injectable }
     ];
 
-    var getThemeColorHexString$2 = ColorHelper.getThemeColorHexString;
+    var getThemeColorHexString$2 = core.ColorHelper.getThemeColorHexString;
     var hoverBackgroundColor = getThemeColorHexString$2('primary');
     var backgroundColor = getThemeColorHexString$2('secondary');
     // Highlight elements that are added to the highlightedElements array
@@ -4543,7 +4005,7 @@
         }
     }
 
-    var getThemeColorHexString$3 = ColorHelper.getThemeColorHexString;
+    var getThemeColorHexString$3 = core.ColorHelper.getThemeColorHexString;
     var CHART_GLOBAL_DEFAULTS = {
         maintainAspectRatio: false,
         color: getThemeColorHexString$3('black'),
@@ -4869,7 +4331,7 @@
         var transparentColor = 'rgba(255,255,255,0)';
         options.chart.backgroundColor = transparentColor;
         options.chart.height = height;
-        options.tooltip.backgroundColor = ColorHelper.getThemeColorRgbString('background-color');
+        options.tooltip.backgroundColor = core.ColorHelper.getThemeColorRgbString('background-color');
         // Using a function instead of a lamdba-expression because of a reference to this.
         options.tooltip.formatter = function () {
             return ('<div class="kirby-text-xsmall">' +
@@ -4880,19 +4342,19 @@
                 '</div>');
         };
         options.plotOptions.area.fillColor = transparentColor;
-        options.plotOptions.area.lineColor = ColorHelper.getThemeColorRgbString('tertiary');
+        options.plotOptions.area.lineColor = core.ColorHelper.getThemeColorRgbString('tertiary');
         options.plotOptions.area.marker.lineColor = 'rgba(255,255,255,0.3)';
-        options.plotOptions.area.marker.fillColor = ColorHelper.getThemeColorRgbString('primary');
+        options.plotOptions.area.marker.fillColor = core.ColorHelper.getThemeColorRgbString('primary');
         options.xAxis = Object.assign(Object.assign({}, options.xAxis), { crosshair: {
-                color: ColorHelper.getThemeColorRgbString('primary'),
-            }, tickColor: transparentColor, lineColor: ColorHelper.getThemeColorRgbString('medium'), labels: {
+                color: core.ColorHelper.getThemeColorRgbString('primary'),
+            }, tickColor: transparentColor, lineColor: core.ColorHelper.getThemeColorRgbString('medium'), labels: {
                 style: {
-                    color: ColorHelper.getThemeColorRgbString('semi-dark-tint'),
+                    color: core.ColorHelper.getThemeColorRgbString('semi-dark-tint'),
                 },
             } });
-        options.yAxis = Object.assign(Object.assign({}, options.yAxis), { lineColor: transparentColor, gridLineColor: ColorHelper.getThemeColorRgbString('medium'), labels: {
+        options.yAxis = Object.assign(Object.assign({}, options.yAxis), { lineColor: transparentColor, gridLineColor: core.ColorHelper.getThemeColorRgbString('medium'), labels: {
                 style: {
-                    color: ColorHelper.getThemeColorRgbString('semi-dark-tint'),
+                    color: core.ColorHelper.getThemeColorRgbString('semi-dark-tint'),
                 },
             } });
         /*
@@ -4936,7 +4398,7 @@
                     distance: 5,
                     align: 'center',
                     verticalAlign: 'top',
-                    backgroundColor: ColorHelper.getThemeColorRgbString('tertiary'),
+                    backgroundColor: core.ColorHelper.getThemeColorRgbString('tertiary'),
                     // Using a function instead of a lamdba-expression because of a reference to this.
                     formatter: function () {
                         return common.formatNumber(this.y, locale, '1.1-1');
@@ -4948,7 +4410,7 @@
                     distance: -28,
                     align: 'center',
                     verticalAlign: 'bottom',
-                    backgroundColor: ColorHelper.getThemeColorRgbString('tertiary'),
+                    backgroundColor: core.ColorHelper.getThemeColorRgbString('tertiary'),
                     // Using a function instead of a lamdba-expression because of a reference to this.
                     formatter: function () {
                         return common.formatNumber(this.y, locale, '1.1-1');
@@ -5307,7 +4769,7 @@
         });
         Object.defineProperty(CalendarComponent.prototype, "activeMonthName", {
             get: function () {
-                return capitalizeFirstLetter(this.formatWithLocale(this.activeMonth, 'MMMM'));
+                return core.capitalizeFirstLetter(this.formatWithLocale(this.activeMonth, 'MMMM'));
             },
             enumerable: false,
             configurable: true
@@ -5928,7 +5390,7 @@
                 this.elementRef.nativeElement.style.zIndex = "" + this.zIndex;
             }
             else {
-                this.zIndex = parseInt(DesignTokenHelper.zLayer('popover'));
+                this.zIndex = parseInt(core.DesignTokenHelper.zLayer('popover'));
             }
         };
         // document.removeEventListener needs the exact same event handler & options reference:
@@ -8941,8 +8403,8 @@
         { type: i0.Renderer2 }
     ]; };
 
-    var fontSize$3 = DesignTokenHelper.fontSize;
-    var lineHeight = DesignTokenHelper.lineHeight;
+    var fontSize$3 = core.DesignTokenHelper.fontSize;
+    var lineHeight = core.DesignTokenHelper.lineHeight;
     var FitHeadingDirective = /** @class */ (function () {
         function FitHeadingDirective(elementRef, renderer, resizeObserverService, lineClampHelper) {
             this.elementRef = elementRef;
@@ -9238,10 +8700,10 @@
     SegmentedControlComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kirby-segmented-control',
-                    template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n      >{{ item.badge.content }}</kirby-badge\n    >\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n",
+                    template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <kirby-icon\n        *ngIf=\"item.badge.icon; else badgeContent\"\n        [customName]=\"item.badge.icon\"\n        [name]=\"item.badge.icon\"\n      ></kirby-icon>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n",
                     // tslint:disable-next-line: no-host-metadata-property
                     host: { role: 'group' },
-                    styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}kirby-badge{--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);position:absolute;top:-8px;right:8px;z-index:2}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]
+                    styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-top:-8px;--kirby-badge-right:8px;--kirby-badge-z-index:2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]
                 },] }
     ];
     SegmentedControlComponent.propDecorators = {
@@ -9994,7 +9456,7 @@
                 this._isMedium = value === 'medium';
                 this._isDark = value === 'dark';
                 this._isWhite = value === 'white';
-                var colorBrightness = ColorHelper.getColorBrightness(value);
+                var colorBrightness = core.ColorHelper.getColorBrightness(value);
                 this._isBrightnessWhite = colorBrightness === 'white';
                 this._isBrightnessLight = colorBrightness === 'light';
                 this._isBrightnessDark = colorBrightness === 'dark';
@@ -10007,7 +9469,7 @@
     ThemeColorDirective.decorators = [
         { type: i0.Directive, args: [{
                     // tslint:disable-next-line:directive-selector
-                    selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-badge[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]",
+                    selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]",
                 },] }
     ];
     ThemeColorDirective.propDecorators = {
@@ -10028,6 +9490,90 @@
         themeColor: [{ type: i0.Input }]
     };
 
+    var proxyInputs = function (Cmp, inputs) {
+        var Prototype = Cmp.prototype;
+        inputs.forEach(function (item) {
+            Object.defineProperty(Prototype, item, {
+                get: function () {
+                    return this.el[item];
+                },
+                set: function (val) {
+                    var _this = this;
+                    this.z.runOutsideAngular(function () { return (_this.el[item] = val); });
+                },
+            });
+        });
+    };
+    var proxyMethods = function (Cmp, methods) {
+        var Prototype = Cmp.prototype;
+        methods.forEach(function (methodName) {
+            Prototype[methodName] = function () {
+                var _this = this;
+                var args = arguments;
+                return this.z.runOutsideAngular(function () { return _this.el[methodName].apply(_this.el, args); });
+            };
+        });
+    };
+    var proxyOutputs = function (instance, el, events) {
+        events.forEach(function (eventName) { return (instance[eventName] = rxjs.fromEvent(el, eventName)); });
+    };
+    // tslint:disable-next-line: only-arrow-functions
+    function ProxyCmp(opts) {
+        var decorator = function (cls) {
+            if (opts.inputs) {
+                proxyInputs(cls, opts.inputs);
+            }
+            if (opts.methods) {
+                proxyMethods(cls, opts.methods);
+            }
+            return cls;
+        };
+        return decorator;
+    }
+
+    var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata$1 = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(k, v);
+    };
+    exports.BadgeComponent = /** @class */ (function () {
+        function KirbyBadge(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+        return KirbyBadge;
+    }());
+    exports.BadgeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kirby-badge',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['size', 'text', 'themeColor']
+                },] }
+    ];
+    /** @nocollapse */
+    exports.BadgeComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    exports.BadgeComponent = __decorate$1([
+        ProxyCmp({
+            inputs: ['size', 'text', 'themeColor']
+        }),
+        __metadata$1("design:paramtypes", [i0.ChangeDetectorRef, i0.ElementRef, i0.NgZone])
+    ], exports.BadgeComponent);
+
     var ChartModule = /** @class */ (function () {
         function ChartModule() {
         }
@@ -10147,6 +9693,20 @@
                 },] }
     ];
 
+    var appInitialize = function (doc) {
+        return function () {
+            loader.defineCustomElements(doc.defaultView);
+        };
+    };
+    function customElementsInitializer() {
+        return {
+            provide: i0.APP_INITIALIZER,
+            useFactory: appInitialize,
+            deps: [common.DOCUMENT],
+            multi: true,
+        };
+    }
+
     var ModalRouterLinkDirective = /** @class */ (function () {
         function ModalRouterLinkDirective(modalNavigationService) {
             this.modalNavigationService = modalNavigationService;
@@ -10190,7 +9750,7 @@
         ModalRouterLinkDirective,
         SegmentedControlComponent,
         ChipComponent,
-        BadgeComponent,
+        exports.BadgeComponent,
         ThemeColorDirective,
         DateInputDirective,
         DecimalMaskDirective,
@@ -10250,6 +9810,7 @@
         LoadingOverlayService,
         ResizeObserverFactory,
         ResizeObserverService,
+        customElementsInitializer(),
     ];
     var entryComponents = [
         ModalWrapperComponent,
@@ -10304,6 +9865,42 @@
      * Generated bundle index. Do not edit.
      */
 
+    Object.defineProperty(exports, 'ColorHelper', {
+        enumerable: true,
+        get: function () {
+            return core.ColorHelper;
+        }
+    });
+    Object.defineProperty(exports, 'DesignTokenHelper', {
+        enumerable: true,
+        get: function () {
+            return core.DesignTokenHelper;
+        }
+    });
+    Object.defineProperty(exports, 'camelToKebabCase', {
+        enumerable: true,
+        get: function () {
+            return core.camelToKebabCase;
+        }
+    });
+    Object.defineProperty(exports, 'capitalizeFirstLetter', {
+        enumerable: true,
+        get: function () {
+            return core.capitalizeFirstLetter;
+        }
+    });
+    Object.defineProperty(exports, 'kebabToCamelCase', {
+        enumerable: true,
+        get: function () {
+            return core.kebabToCamelCase;
+        }
+    });
+    Object.defineProperty(exports, 'kebabToTitleCase', {
+        enumerable: true,
+        get: function () {
+            return core.kebabToTitleCase;
+        }
+    });
     Object.defineProperty(exports, 'IonRouterOutlet', {
         enumerable: true,
         get: function () {
@@ -10328,7 +9925,6 @@
     exports.AppComponent = AppComponent;
     exports.AppModule = AppModule;
     exports.AvatarComponent = AvatarComponent;
-    exports.BadgeComponent = BadgeComponent;
     exports.ButtonComponent = ButtonComponent;
     exports.COMPONENT_PROPS = COMPONENT_PROPS;
     exports.CalendarComponent = CalendarComponent;
@@ -10339,11 +9935,9 @@
     exports.ChartDeprecatedComponent = ChartDeprecatedComponent;
     exports.CheckboxComponent = CheckboxComponent;
     exports.ChipComponent = ChipComponent;
-    exports.ColorHelper = ColorHelper;
     exports.ComponentLoaderDirective = ComponentLoaderDirective;
     exports.DateInputDirective = DateInputDirective;
     exports.DecimalMaskDirective = DecimalMaskDirective;
-    exports.DesignTokenHelper = DesignTokenHelper;
     exports.DividerComponent = DividerComponent;
     exports.DropdownComponent = DropdownComponent;
     exports.EmptyStateComponent = EmptyStateComponent;
@@ -10424,85 +10018,81 @@
     exports.ToggleButtonComponent = ToggleButtonComponent;
     exports.ToggleComponent = ToggleComponent;
     exports.annotations = annotations;
-    exports.camelToKebabCase = camelToKebabCase;
-    exports.capitalizeFirstLetter = capitalizeFirstLetter;
     exports.defaultIcons = defaultIcons;
     exports.isNumberArray = isNumberArray;
-    exports.kebabToCamelCase = kebabToCamelCase;
-    exports.kebabToTitleCase = kebabToTitleCase;
     exports.selectedTabClickEvent = selectedTabClickEvent;
     exports.stockChartDeprecatedOptions = stockChartDeprecatedOptions;
     exports.ɵ0 = ɵ0$6;
-    exports.ɵa = AppModule;
-    exports.ɵb = AppComponent;
-    exports.ɵba = Modal;
-    exports.ɵbb = ButtonComponent;
-    exports.ɵbc = IconComponent;
-    exports.ɵbd = IconRegistryService;
-    exports.ɵbf = ICON_SETTINGS;
-    exports.ɵbg = ResizeObserverService;
-    exports.ɵbh = ResizeObserverFactory;
-    exports.ɵbi = FitHeadingModule;
-    exports.ɵbj = FitHeadingDirective;
-    exports.ɵbk = LineClampHelper;
-    exports.ɵbl = SpinnerModule;
-    exports.ɵbm = SpinnerComponent;
-    exports.ɵbn = TabsModule;
-    exports.ɵbo = IconModule;
-    exports.ɵbp = TabButtonComponent;
-    exports.ɵbq = ItemModule;
-    exports.ɵbr = ItemComponent;
-    exports.ɵbs = LabelComponent;
-    exports.ɵbt = ToggleButtonModule;
-    exports.ɵbu = ToggleButtonComponent;
-    exports.ɵbv = ListModule;
-    exports.ɵbw = ListComponent;
-    exports.ɵbx = ListHelper;
-    exports.ɵby = GroupByPipe;
-    exports.ɵbz = InfiniteScrollDirective;
-    exports.ɵc = RouterOutletComponent;
-    exports.ɵca = ListItemDirective;
-    exports.ɵcb = ListFlexItemDirective;
-    exports.ɵcc = ListItemTemplateDirective;
-    exports.ɵcd = ListHeaderDirective;
-    exports.ɵce = ListSectionHeaderDirective;
-    exports.ɵcf = ListFooterDirective;
-    exports.ɵcg = ListItemComponent;
-    exports.ɵch = ListSectionHeaderComponent;
-    exports.ɵci = ListHeaderComponent;
-    exports.ɵcj = ListItemColorDirective;
-    exports.ɵck = ChartModule;
-    exports.ɵcl = ChartComponent;
-    exports.ɵcm = ChartJSService;
-    exports.ɵcn = ChartConfigService;
-    exports.ɵco = CardComponent;
-    exports.ɵcp = CardHeaderComponent;
-    exports.ɵcq = CardFooterComponent;
-    exports.ɵcr = ChartDeprecatedComponent;
-    exports.ɵcs = ChartDeprecatedHelper;
-    exports.ɵct = DONUT_OPTIONS;
-    exports.ɵcu = DonutOptions;
-    exports.ɵcv = AREASPLINE_OPTIONS;
-    exports.ɵcw = AreaSplineOptions;
-    exports.ɵcx = TIMESERIES_OPTIONS;
-    exports.ɵcy = TimeSeriesOptions;
-    exports.ɵcz = ACTIVITYGAUGE_OPTIONS;
-    exports.ɵd = ModalController;
-    exports.ɵda = ActivityGaugeOptions;
-    exports.ɵdb = StockChartDeprecatedComponent;
-    exports.ɵdc = GridComponent;
-    exports.ɵdd = BreakpointHelperService;
-    exports.ɵde = ComponentLoaderDirective;
-    exports.ɵdf = AvatarComponent;
-    exports.ɵdg = CalendarComponent;
-    exports.ɵdh = CalendarHelper;
-    exports.ɵdi = CheckboxComponent;
-    exports.ɵdj = ActionSheetComponent;
-    exports.ɵdk = ModalFooterComponent;
-    exports.ɵdl = ModalRouterLinkDirective;
-    exports.ɵdm = SegmentedControlComponent;
-    exports.ɵdn = ChipComponent;
-    exports.ɵdo = BadgeComponent;
+    exports.ɵa = ProxyCmp;
+    exports.ɵb = AppModule;
+    exports.ɵba = ModalWrapperComponent;
+    exports.ɵbb = Modal;
+    exports.ɵbc = ButtonComponent;
+    exports.ɵbd = IconComponent;
+    exports.ɵbe = IconRegistryService;
+    exports.ɵbg = ICON_SETTINGS;
+    exports.ɵbh = ResizeObserverService;
+    exports.ɵbi = ResizeObserverFactory;
+    exports.ɵbj = FitHeadingModule;
+    exports.ɵbk = FitHeadingDirective;
+    exports.ɵbl = LineClampHelper;
+    exports.ɵbm = SpinnerModule;
+    exports.ɵbn = SpinnerComponent;
+    exports.ɵbo = TabsModule;
+    exports.ɵbp = IconModule;
+    exports.ɵbq = TabButtonComponent;
+    exports.ɵbr = ItemModule;
+    exports.ɵbs = ItemComponent;
+    exports.ɵbt = LabelComponent;
+    exports.ɵbu = ToggleButtonModule;
+    exports.ɵbv = ToggleButtonComponent;
+    exports.ɵbw = ListModule;
+    exports.ɵbx = ListComponent;
+    exports.ɵby = ListHelper;
+    exports.ɵbz = GroupByPipe;
+    exports.ɵc = AppComponent;
+    exports.ɵca = InfiniteScrollDirective;
+    exports.ɵcb = ListItemDirective;
+    exports.ɵcc = ListFlexItemDirective;
+    exports.ɵcd = ListItemTemplateDirective;
+    exports.ɵce = ListHeaderDirective;
+    exports.ɵcf = ListSectionHeaderDirective;
+    exports.ɵcg = ListFooterDirective;
+    exports.ɵch = ListItemComponent;
+    exports.ɵci = ListSectionHeaderComponent;
+    exports.ɵcj = ListHeaderComponent;
+    exports.ɵck = ListItemColorDirective;
+    exports.ɵcl = ChartModule;
+    exports.ɵcm = ChartComponent;
+    exports.ɵcn = ChartJSService;
+    exports.ɵco = ChartConfigService;
+    exports.ɵcp = CardComponent;
+    exports.ɵcq = CardHeaderComponent;
+    exports.ɵcr = CardFooterComponent;
+    exports.ɵcs = ChartDeprecatedComponent;
+    exports.ɵct = ChartDeprecatedHelper;
+    exports.ɵcu = DONUT_OPTIONS;
+    exports.ɵcv = DonutOptions;
+    exports.ɵcw = AREASPLINE_OPTIONS;
+    exports.ɵcx = AreaSplineOptions;
+    exports.ɵcy = TIMESERIES_OPTIONS;
+    exports.ɵcz = TimeSeriesOptions;
+    exports.ɵd = RouterOutletComponent;
+    exports.ɵda = ACTIVITYGAUGE_OPTIONS;
+    exports.ɵdb = ActivityGaugeOptions;
+    exports.ɵdc = StockChartDeprecatedComponent;
+    exports.ɵdd = GridComponent;
+    exports.ɵde = BreakpointHelperService;
+    exports.ɵdf = ComponentLoaderDirective;
+    exports.ɵdg = AvatarComponent;
+    exports.ɵdh = CalendarComponent;
+    exports.ɵdi = CalendarHelper;
+    exports.ɵdj = CheckboxComponent;
+    exports.ɵdk = ActionSheetComponent;
+    exports.ɵdl = ModalFooterComponent;
+    exports.ɵdm = ModalRouterLinkDirective;
+    exports.ɵdn = SegmentedControlComponent;
+    exports.ɵdo = ChipComponent;
     exports.ɵdp = ThemeColorDirective;
     exports.ɵdq = DateInputDirective;
     exports.ɵdr = DecimalMaskDirective;
@@ -10514,7 +10104,7 @@
     exports.ɵdx = RadioGroupComponent;
     exports.ɵdy = RadioComponent;
     exports.ɵdz = InputComponent;
-    exports.ɵe = ModalHelper;
+    exports.ɵe = ModalController;
     exports.ɵea = TextareaComponent;
     exports.ɵeb = FabSheetComponent;
     exports.ɵec = DividerComponent;
@@ -10538,27 +10128,29 @@
     exports.ɵeu = ToastHelper;
     exports.ɵev = ToastController;
     exports.ɵew = LoadingOverlayService;
-    exports.ɵf = ModalAnimationBuilderService;
-    exports.ɵg = PlatformService;
-    exports.ɵh = WindowRef;
-    exports.ɵi = ActionSheetHelper;
-    exports.ɵj = AlertHelper;
-    exports.ɵk = ModalNavigationService;
-    exports.ɵl = RouterOutletModule;
-    exports.ɵm = PageModule;
-    exports.ɵn = PageTitleDirective;
-    exports.ɵo = PageToolbarTitleDirective;
-    exports.ɵp = PageActionsDirective;
-    exports.ɵq = PageContentDirective;
-    exports.ɵr = PageProgressComponent;
-    exports.ɵs = PageTitleComponent;
-    exports.ɵt = PageContentComponent;
-    exports.ɵu = PageActionsComponent;
-    exports.ɵv = PageComponent;
-    exports.ɵw = TabsComponent;
-    exports.ɵx = TabsService;
-    exports.ɵy = PageFooterComponent;
-    exports.ɵz = ModalWrapperComponent;
+    exports.ɵex = appInitialize;
+    exports.ɵey = customElementsInitializer;
+    exports.ɵf = ModalHelper;
+    exports.ɵg = ModalAnimationBuilderService;
+    exports.ɵh = PlatformService;
+    exports.ɵi = WindowRef;
+    exports.ɵj = ActionSheetHelper;
+    exports.ɵk = AlertHelper;
+    exports.ɵl = ModalNavigationService;
+    exports.ɵm = RouterOutletModule;
+    exports.ɵn = PageModule;
+    exports.ɵo = PageTitleDirective;
+    exports.ɵp = PageToolbarTitleDirective;
+    exports.ɵq = PageActionsDirective;
+    exports.ɵr = PageContentDirective;
+    exports.ɵs = PageProgressComponent;
+    exports.ɵt = PageTitleComponent;
+    exports.ɵu = PageContentComponent;
+    exports.ɵv = PageActionsComponent;
+    exports.ɵw = PageComponent;
+    exports.ɵx = TabsComponent;
+    exports.ɵy = TabsService;
+    exports.ɵz = PageFooterComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });