@kirbydesign/designsystem 11.6.0 → 11.6.2

package/accordion/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-accordion.mjs",
+  "typings": "../types/kirbydesign-designsystem-accordion.d.ts"
+}

package/action-group/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-action-group.mjs",
+  "typings": "../types/kirbydesign-designsystem-action-group.d.ts"
+}

package/avatar/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-avatar.mjs",
+  "typings": "../types/kirbydesign-designsystem-avatar.d.ts"
+}

package/badge/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-badge.mjs",
+  "typings": "../types/kirbydesign-designsystem-badge.d.ts"
+}

package/button/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-button.mjs",
+  "typings": "../types/kirbydesign-designsystem-button.d.ts"
+}

package/calendar/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-calendar.mjs",
+  "typings": "../types/kirbydesign-designsystem-calendar.d.ts"
+}

package/card/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-card.mjs",
+  "typings": "../types/kirbydesign-designsystem-card.d.ts"
+}

package/chart/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-chart.mjs",
+  "typings": "../types/kirbydesign-designsystem-chart.d.ts"
+}

package/checkbox/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-checkbox.mjs",
+  "typings": "../types/kirbydesign-designsystem-checkbox.d.ts"
+}

package/config/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-config.mjs",
+  "typings": "../types/kirbydesign-designsystem-config.d.ts"
+}

package/data-table/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-data-table.mjs",
+  "typings": "../types/kirbydesign-designsystem-data-table.d.ts"
+}

package/divider/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-divider.mjs",
+  "typings": "../types/kirbydesign-designsystem-divider.d.ts"
+}

package/dropdown/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-dropdown.mjs",
+  "typings": "../types/kirbydesign-designsystem-dropdown.d.ts"
+}

package/empty-state/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-empty-state.mjs",
+  "typings": "../types/kirbydesign-designsystem-empty-state.d.ts"
+}

package/fab-sheet/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/kirbydesign-designsystem-fab-sheet.mjs",
+  "typings": "../types/kirbydesign-designsystem-fab-sheet.d.ts"
+}

package/fesm2022/kirbydesign-designsystem-accordion.mjs

@@ -47,8 +47,8 @@ class AccordionItemComponent {
         this.isExpanded = !this.isExpanded && !this.isDisabled;
         this.toggle.emit(this.isExpanded);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: AccordionItemComponent, isStandalone: true, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding", headingLevel: "headingLevel" }, outputs: { toggle: "toggle" }, host: { properties: { "class.has-list": "this.hasList" } }, queries: [{ propertyName: "listChildren", predicate: ListComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium);box-sizing:border-box}:host(.has-list){--kirby-item-background: transparent}@media(hover:hover)and (pointer:fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media(hover:hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.header{display:flex;align-items:center;gap:8px;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none;width:100%;border:none;outline:none;background:none;box-shadow:none;font-family:var(--kirby-font-family);text-align:start}.title{flex-grow:2;display:flex;font-size:16px}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}button[disabled]{pointer-events:none}button[disabled] .kirby-icon{color:var(--kirby-semi-dark)}button[disabled] .title{color:var(--kirby-text-color-semi-dark)}button{color:var(--kirby-black)}button[aria-expanded=true] .title{font-weight:700}button[aria-expanded=true] .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AccordionItemComponent, isStandalone: true, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding", headingLevel: "headingLevel" }, outputs: { toggle: "toggle" }, host: { properties: { "class.has-list": "this.hasList" } }, queries: [{ propertyName: "listChildren", predicate: ListComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium);box-sizing:border-box}:host(.has-list){--kirby-item-background: transparent}@media(hover:hover)and (pointer:fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media(hover:hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.header{display:flex;align-items:center;gap:8px;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none;width:100%;border:none;outline:none;background:none;box-shadow:none;font-family:var(--kirby-font-family);text-align:start}.title{flex-grow:2;display:flex;font-size:16px}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}button[disabled]{pointer-events:none}button[disabled] .kirby-icon{color:var(--kirby-semi-dark)}button[disabled] .title{color:var(--kirby-text-color-semi-dark)}button{color:var(--kirby-text-color-black)}button[aria-expanded=true] .title{font-weight:700}button[aria-expanded=true] .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], animations: [
             trigger('isExpanded', [
                 state('true', style({ height: '*', visibility: 'visible' })),
                 state('false', style({ height: '0px', visibility: 'hidden' })),
@@ -56,7 +56,7 @@ class AccordionItemComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('isExpanded', [
@@ -64,7 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                             state('false', style({ height: '0px', visibility: 'hidden' })),
                             transition('true <=> false', animate('0.2s')),
                         ]),
-                    ], imports: [IconComponent], template: "<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium);box-sizing:border-box}:host(.has-list){--kirby-item-background: transparent}@media(hover:hover)and (pointer:fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media(hover:hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.header{display:flex;align-items:center;gap:8px;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none;width:100%;border:none;outline:none;background:none;box-shadow:none;font-family:var(--kirby-font-family);text-align:start}.title{flex-grow:2;display:flex;font-size:16px}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}button[disabled]{pointer-events:none}button[disabled] .kirby-icon{color:var(--kirby-semi-dark)}button[disabled] .title{color:var(--kirby-text-color-semi-dark)}button{color:var(--kirby-black)}button[aria-expanded=true] .title{font-weight:700}button[aria-expanded=true] .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"] }]
+                    ], imports: [IconComponent], template: "<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}:host{display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium);box-sizing:border-box}:host(.has-list){--kirby-item-background: transparent}@media(hover:hover)and (pointer:fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media(hover:hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.header{display:flex;align-items:center;gap:8px;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none;width:100%;border:none;outline:none;background:none;box-shadow:none;font-family:var(--kirby-font-family);text-align:start}.title{flex-grow:2;display:flex;font-size:16px}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}button[disabled]{pointer-events:none}button[disabled] .kirby-icon{color:var(--kirby-semi-dark)}button[disabled] .title{color:var(--kirby-text-color-semi-dark)}button{color:var(--kirby-text-color-black)}button[aria-expanded=true] .title{font-weight:700}button[aria-expanded=true] .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"] }]
         }], propDecorators: { hasList: [{
                 type: HostBinding,
                 args: ['class.has-list']
@@ -100,10 +100,10 @@ class AccordionDirective {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: AccordionDirective, isStandalone: true, selector: "[kirbyAccordion], kirby-accordion", inputs: { headingLevel: "headingLevel" }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent }], exportAs: ["kirby-accordion"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: AccordionDirective, isStandalone: true, selector: "[kirbyAccordion], kirby-accordion", inputs: { headingLevel: "headingLevel" }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent }], exportAs: ["kirby-accordion"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AccordionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyAccordion], kirby-accordion',
@@ -118,11 +118,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
 
 const imports = [AccordionDirective, AccordionItemComponent];
 class AccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: AccordionModule, imports: [IconModule, AccordionDirective, AccordionItemComponent], exports: [AccordionDirective, AccordionItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AccordionModule, imports: [IconModule, AccordionItemComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: AccordionModule, imports: [IconModule, AccordionDirective, AccordionItemComponent], exports: [AccordionDirective, AccordionItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionModule, imports: [IconModule, AccordionItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IconModule, ...imports],

package/fesm2022/kirbydesign-designsystem-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-accordion.mjs","sources":["../../accordion/src/accordion-item.component.ts","../../accordion/src/accordion-item.component.html","../../accordion/src/accordion.directive.ts","../../accordion/src/accordion.module.ts","../../accordion/src/kirbydesign-designsystem-accordion.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  EventEmitter,\n  HostBinding,\n  Input,\n  OnChanges,\n  Output,\n  QueryList,\n} from '@angular/core';\nimport { ListComponent } from '@kirbydesign/designsystem/list';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n// Counter for generating unique element ids\nlet uniqueId = 0;\n\n@Component({\n  selector: 'kirby-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('isExpanded', [\n      state('true', style({ height: '*', visibility: 'visible' })),\n      state('false', style({ height: '0px', visibility: 'hidden' })),\n      transition('true <=> false', animate('0.2s')),\n    ]),\n  ],\n  imports: [IconComponent],\n})\nexport class AccordionItemComponent implements OnChanges, AfterContentInit {\n  @HostBinding('class.has-list') hasList: boolean = false;\n  @Input() title: string;\n  @Input() isExpanded: boolean = false;\n  @Input() isDisabled: boolean = false;\n  @Input() disabledTitle: string;\n  @Input() hasPadding: boolean = true;\n  @Input() headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  @Output() toggle: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @ContentChildren(ListComponent) listChildren: QueryList<ListComponent>;\n\n  ngAfterContentInit(): void {\n    if (this.listChildren.length > 0) {\n      this.hasPadding = false;\n      this.hasList = true;\n      this.listChildren.forEach((child) => {\n        child.shape = 'none';\n      });\n    }\n  }\n\n  ngOnChanges(): void {\n    if (this.isDisabled) {\n      this.isExpanded = false;\n    }\n  }\n\n  getTitle() {\n    if (this.isDisabled && !!this.disabledTitle) {\n      return this.disabledTitle;\n    } else {\n      return this.title;\n    }\n  }\n\n  _onToggleExpanded(event: UIEvent) {\n    event.preventDefault();\n    if (this.isDisabled) return;\n\n    this.isExpanded = !this.isExpanded && !this.isDisabled;\n    this.toggle.emit(this.isExpanded);\n  }\n\n  // IDs used for a11y labelling\n  _titleId = `kirby-accordion-item-title-${++uniqueId}`;\n  _contentId = `kirby-accordion-item-content-${uniqueId}`;\n}\n","<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n","import { AfterContentInit, ContentChildren, Directive, Input, QueryList } from '@angular/core';\n\nimport { startWith } from 'rxjs';\nimport { AccordionItemComponent } from './accordion-item.component';\n\n@Directive({\n  selector: '[kirbyAccordion], kirby-accordion',\n  exportAs: 'kirby-accordion',\n})\nexport class AccordionDirective implements AfterContentInit {\n  @Input() headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  @ContentChildren(AccordionItemComponent) accordionItems: QueryList<AccordionItemComponent>;\n\n  ngAfterContentInit(): void {\n    this.accordionItems.changes.pipe(startWith(0)).subscribe(() => {\n      this.setHeadingLevels();\n    });\n  }\n\n  private setHeadingLevels(): void {\n    if (this.accordionItems.length > 0 && this.headingLevel) {\n      this.accordionItems.forEach((child) => {\n        child.headingLevel = this.headingLevel;\n      });\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionDirective } from './accordion.directive';\n\nconst imports = [AccordionDirective, AccordionItemComponent];\n\n@NgModule({\n  imports: [IconModule, ...imports],\n  exports: [...imports],\n})\nexport class AccordionModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-accordion.mjs","sources":["../../accordion/src/accordion-item.component.ts","../../accordion/src/accordion-item.component.html","../../accordion/src/accordion.directive.ts","../../accordion/src/accordion.module.ts","../../accordion/src/kirbydesign-designsystem-accordion.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  EventEmitter,\n  HostBinding,\n  Input,\n  OnChanges,\n  Output,\n  QueryList,\n} from '@angular/core';\nimport { ListComponent } from '@kirbydesign/designsystem/list';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\n// Counter for generating unique element ids\nlet uniqueId = 0;\n\n@Component({\n  selector: 'kirby-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('isExpanded', [\n      state('true', style({ height: '*', visibility: 'visible' })),\n      state('false', style({ height: '0px', visibility: 'hidden' })),\n      transition('true <=> false', animate('0.2s')),\n    ]),\n  ],\n  imports: [IconComponent],\n})\nexport class AccordionItemComponent implements OnChanges, AfterContentInit {\n  @HostBinding('class.has-list') hasList: boolean = false;\n  @Input() title: string;\n  @Input() isExpanded: boolean = false;\n  @Input() isDisabled: boolean = false;\n  @Input() disabledTitle: string;\n  @Input() hasPadding: boolean = true;\n  @Input() headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  @Output() toggle: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n  @ContentChildren(ListComponent) listChildren: QueryList<ListComponent>;\n\n  ngAfterContentInit(): void {\n    if (this.listChildren.length > 0) {\n      this.hasPadding = false;\n      this.hasList = true;\n      this.listChildren.forEach((child) => {\n        child.shape = 'none';\n      });\n    }\n  }\n\n  ngOnChanges(): void {\n    if (this.isDisabled) {\n      this.isExpanded = false;\n    }\n  }\n\n  getTitle() {\n    if (this.isDisabled && !!this.disabledTitle) {\n      return this.disabledTitle;\n    } else {\n      return this.title;\n    }\n  }\n\n  _onToggleExpanded(event: UIEvent) {\n    event.preventDefault();\n    if (this.isDisabled) return;\n\n    this.isExpanded = !this.isExpanded && !this.isDisabled;\n    this.toggle.emit(this.isExpanded);\n  }\n\n  // IDs used for a11y labelling\n  _titleId = `kirby-accordion-item-title-${++uniqueId}`;\n  _contentId = `kirby-accordion-item-content-${uniqueId}`;\n}\n","<div class=\"content-layer\">\n  <div [attr.aria-level]=\"headingLevel\" [attr.role]=\"headingLevel ? 'heading' : null\">\n    <button\n      type=\"button\"\n      class=\"header\"\n      [attr.aria-expanded]=\"isExpanded\"\n      [attr.aria-controls]=\"_contentId\"\n      [id]=\"_titleId\"\n      [disabled]=\"isDisabled\"\n      (click)=\"_onToggleExpanded($event)\"\n    >\n      <span class=\"state-layer\" aria-hidden=\"true\"></span>\n      <div class=\"title\" [class.bold]=\"isExpanded\">{{ getTitle() }}</div>\n      <kirby-icon name=\"arrow-down\"></kirby-icon>\n    </button>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n","import { AfterContentInit, ContentChildren, Directive, Input, QueryList } from '@angular/core';\n\nimport { startWith } from 'rxjs';\nimport { AccordionItemComponent } from './accordion-item.component';\n\n@Directive({\n  selector: '[kirbyAccordion], kirby-accordion',\n  exportAs: 'kirby-accordion',\n})\nexport class AccordionDirective implements AfterContentInit {\n  @Input() headingLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  @ContentChildren(AccordionItemComponent) accordionItems: QueryList<AccordionItemComponent>;\n\n  ngAfterContentInit(): void {\n    this.accordionItems.changes.pipe(startWith(0)).subscribe(() => {\n      this.setHeadingLevels();\n    });\n  }\n\n  private setHeadingLevels(): void {\n    if (this.accordionItems.length > 0 && this.headingLevel) {\n      this.accordionItems.forEach((child) => {\n        child.headingLevel = this.headingLevel;\n      });\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\n\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionDirective } from './accordion.directive';\n\nconst imports = [AccordionDirective, AccordionItemComponent];\n\n@NgModule({\n  imports: [IconModule, ...imports],\n  exports: [...imports],\n})\nexport class AccordionModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-action-group.mjs

@@ -92,10 +92,10 @@ class ActionGroupComponent {
             text: button.textContent.trim(),
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ActionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ActionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-action-group', imports: [ItemComponent, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  @for (action of _collapsedActions; track action.text) {\n    <kirby-item\n      [selectable]=\"true\"\n      [disabled]=\"action.button?.disabled\"\n      (click)=\"onActionSelect(action)\"\n    >\n      {{ action.text }}\n    </kirby-item>\n  }\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{

package/fesm2022/kirbydesign-designsystem-avatar.mjs

@@ -21,10 +21,10 @@ class AvatarComponent {
     onImageError($event) {
         this.imageError.emit($event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", imageLoading: "imageLoading", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;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.stroke{border:1px solid var(--kirby-semi-light)}.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-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.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(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-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(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", imageLoading: "imageLoading", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;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.stroke{border:1px solid var(--kirby-semi-light)}.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-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.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(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-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(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  @if (imageSrc) {\n    <img\n      [src]=\"imageSrc\"\n      [attr.alt]=\"altText\"\n      [attr.loading]=\"imageLoading\"\n      (error)=\"onImageError($event)\"\n    />\n  }\n  @if (!text) {\n    <ng-content select=\"kirby-icon\"></ng-content>\n  }\n  @if (text) {\n    <span class=\"avatar-text\">{{ text }}</span>\n  }\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;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.stroke{border:1px solid var(--kirby-semi-light)}.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-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.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(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-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(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-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)}\n"] }]
         }], propDecorators: { imageSrc: [{

package/fesm2022/kirbydesign-designsystem-badge.mjs

@@ -20,10 +20,10 @@ class BadgeComponent {
         console.warn(KIRBY_BADGE_TEXT_PROPERTY_DEPRECATION_WARNING);
         this._text = value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host.success ion-badge{--color: var(--kirby-success-contrast)}:host.success.sm ion-badge{--background: var(--kirby-success-shade)}:host.success.md ion-badge{--background: var(--kirby-success-tint)}:host.warning ion-badge{--color: var(--kirby-warning-contrast)}:host.warning.sm ion-badge{--background: var(--kirby-warning-shade)}:host.warning.md ion-badge{--background: var(--kirby-warning)}:host.danger ion-badge{--color: var(--kirby-text-color-white)}:host.danger.sm ion-badge{--background: var(--kirby-danger)}:host.danger.md ion-badge{--background: var(--kirby-danger-shade)}:host.danger.md ion-badge:has(kirby-icon){--background: var(--kirby-danger)}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host.success ion-badge{--color: var(--kirby-success-contrast)}:host.success.sm ion-badge{--background: var(--kirby-success-shade)}:host.success.md ion-badge{--background: var(--kirby-success-tint)}:host.warning ion-badge{--color: var(--kirby-warning-contrast)}:host.warning.sm ion-badge{--background: var(--kirby-warning-shade)}:host.warning.md ion-badge{--background: var(--kirby-warning)}:host.danger ion-badge{--color: var(--kirby-text-color-white)}:host.danger.sm ion-badge{--background: var(--kirby-danger)}:host.danger.md ion-badge{--background: var(--kirby-danger-shade)}:host.danger.md ion-badge:has(kirby-icon){--background: var(--kirby-danger)}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-badge', imports: [IonBadge], hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }], template: "<ion-badge>\n  @if (size === 'sm') {\n    <span></span>\n  }\n  @if (!text && size === 'md') {\n    <ng-content></ng-content>\n  }\n  @if (text && size === 'md') {\n    {{ text }}\n  }\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host.success ion-badge{--color: var(--kirby-success-contrast)}:host.success.sm ion-badge{--background: var(--kirby-success-shade)}:host.success.md ion-badge{--background: var(--kirby-success-tint)}:host.warning ion-badge{--color: var(--kirby-warning-contrast)}:host.warning.sm ion-badge{--background: var(--kirby-warning-shade)}:host.warning.md ion-badge{--background: var(--kirby-warning)}:host.danger ion-badge{--color: var(--kirby-text-color-white)}:host.danger.sm ion-badge{--background: var(--kirby-danger)}:host.danger.md ion-badge{--background: var(--kirby-danger-shade)}:host.danger.md ion-badge:has(kirby-icon){--background: var(--kirby-danger)}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"] }]
         }], propDecorators: { text: [{

package/fesm2022/kirbydesign-designsystem-button.mjs

@@ -122,10 +122,10 @@ class ButtonComponent {
     ngOnDestroy() {
         this.disposeEventListeners.forEach((unlistenEvent) => unlistenEvent());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media(hover:hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media(hover:hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media(hover:hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.no-decoration": "this.noDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media(hover:hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media(hover:hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media(hover:hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <span class=\"state-layer\" aria-hidden=\"true\"></span>\n  <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n  TODO: Fix globally exposed .state-layer and .content-layer\n  \n  See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media(hover:hover)and (pointer:fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:0;border-radius:inherit;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media(hover:hover){:host:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host{font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black)}@media(hover:hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media(hover:hover){:host.attention-level2:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}:host[expand=block]{width:100%}:host:disabled,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host(a){text-decoration:none}:host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media(hover:hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media(hover:hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media(hover:hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { attentionLevel: [{

package/fesm2022/kirbydesign-designsystem-calendar.mjs

@@ -459,10 +459,10 @@ class CalendarComponent {
         event.preventDefault();
         this.focusDate(newDate);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarComponent, deps: [{ token: LOCALE_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      @if (!_hasYearNavigator) {\n        <span class=\"year\">{{ activeYear }}</span>\n      }\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  @if (_hasYearNavigator) {\n    <kirby-dropdown\n      [selectedIndex]=\"navigatedYear\"\n      [items]=\"navigableYears\"\n      [attr.aria-label]=\"translations.get('selectYear')\"\n      popout=\"left\"\n      (change)=\"_changeYear($event)\"\n    ></kirby-dropdown>\n  }\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      @for (weekDay of _weekDays; track weekDay.fullName) {\n        <th scope=\"col\">\n          <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n          <span class=\"kirby-visually-hidden\">{{ weekDay.fullName }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (week of _month; track $index) {\n      <tr>\n        @for (day of week; track day.date + '-' + day.monthIndex + '-' + day.year) {\n          <td [attr.aria-selected]=\"day.isSelected ? true : false\">\n            <button\n              kirby-button\n              type=\"button\"\n              (click)=\"_onDateSelected(day)\"\n              (keydown)=\"_onDateKeydown($event)\"\n              class=\"day\"\n              [class.current-month]=\"day.isCurrentMonth\"\n              [class.weekend]=\"day.isWeekend\"\n              [class.today]=\"day.isToday\"\n              [class.selectable]=\"day.isSelectable\"\n              [class.selected]=\"day.isSelected\"\n              [class.focussed]=\"day.isFocussed\"\n              [class.past]=\"day.isPast\"\n              [attr.aria-label]=\"day.ariaLabel\"\n              [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n              [noDecoration]=\"true\"\n              [disabled]=\"day.isFocusable ? null : true\"\n              [tabIndex]=\"day.isFocussed ? 0 : -1\"\n            >\n              {{ day.date }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["hasErrorChange", "change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarComponent, deps: [{ token: LOCALE_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      @if (!_hasYearNavigator) {\n        <span class=\"year\">{{ activeYear }}</span>\n      }\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  @if (_hasYearNavigator) {\n    <kirby-dropdown\n      [selectedIndex]=\"navigatedYear\"\n      [items]=\"navigableYears\"\n      [attr.aria-label]=\"translations.get('selectYear')\"\n      popout=\"left\"\n      (change)=\"_changeYear($event)\"\n    ></kirby-dropdown>\n  }\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      @for (weekDay of _weekDays; track weekDay.fullName) {\n        <th scope=\"col\">\n          <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n          <span class=\"kirby-visually-hidden\">{{ weekDay.fullName }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (week of _month; track $index) {\n      <tr>\n        @for (day of week; track day.date + '-' + day.monthIndex + '-' + day.year) {\n          <td [attr.aria-selected]=\"day.isSelected ? true : false\">\n            <button\n              kirby-button\n              type=\"button\"\n              (click)=\"_onDateSelected(day)\"\n              (keydown)=\"_onDateKeydown($event)\"\n              class=\"day\"\n              [class.current-month]=\"day.isCurrentMonth\"\n              [class.weekend]=\"day.isWeekend\"\n              [class.today]=\"day.isToday\"\n              [class.selectable]=\"day.isSelectable\"\n              [class.selected]=\"day.isSelected\"\n              [class.focussed]=\"day.isFocussed\"\n              [class.past]=\"day.isPast\"\n              [attr.aria-label]=\"day.ariaLabel\"\n              [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n              [noDecoration]=\"true\"\n              [disabled]=\"day.isFocusable ? null : true\"\n              [tabIndex]=\"day.isFocussed ? 0 : -1\"\n            >\n              {{ day.date }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["hasErrorChange", "change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ imports: [DropdownComponent, ButtonComponent, IconComponent], selector: 'kirby-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      @if (!_hasYearNavigator) {\n        <span class=\"year\">{{ activeYear }}</span>\n      }\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  @if (_hasYearNavigator) {\n    <kirby-dropdown\n      [selectedIndex]=\"navigatedYear\"\n      [items]=\"navigableYears\"\n      [attr.aria-label]=\"translations.get('selectYear')\"\n      popout=\"left\"\n      (change)=\"_changeYear($event)\"\n    ></kirby-dropdown>\n  }\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      @for (weekDay of _weekDays; track weekDay.fullName) {\n        <th scope=\"col\">\n          <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n          <span class=\"kirby-visually-hidden\">{{ weekDay.fullName }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (week of _month; track $index) {\n      <tr>\n        @for (day of week; track day.date + '-' + day.monthIndex + '-' + day.year) {\n          <td [attr.aria-selected]=\"day.isSelected ? true : false\">\n            <button\n              kirby-button\n              type=\"button\"\n              (click)=\"_onDateSelected(day)\"\n              (keydown)=\"_onDateKeydown($event)\"\n              class=\"day\"\n              [class.current-month]=\"day.isCurrentMonth\"\n              [class.weekend]=\"day.isWeekend\"\n              [class.today]=\"day.isToday\"\n              [class.selectable]=\"day.isSelectable\"\n              [class.selected]=\"day.isSelected\"\n              [class.focussed]=\"day.isFocussed\"\n              [class.past]=\"day.isPast\"\n              [attr.aria-label]=\"day.ariaLabel\"\n              [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n              [noDecoration]=\"true\"\n              [disabled]=\"day.isFocusable ? null : true\"\n              [tabIndex]=\"day.isFocussed ? 0 : -1\"\n            >\n              {{ day.date }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{