@kirbydesign/designsystem 4.0.25 → 5.0.4

package/fesm2015/kirbydesign-designsystem.js

@@ -1,7 +1,7 @@
 import { DesignTokenHelper, ColorHelper, capitalizeFirstLetter } from '@kirbydesign/core';
 export { ColorHelper, DesignTokenHelper, camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, kebabToTitleCase } from '@kirbydesign/core';
 import { Component, Input, EventEmitter, Output, Injectable, ɵɵdefineInjectable, ElementRef, ViewChild, ɵɵinject, InjectionToken, Injector, HostListener, Optional, Inject, HostBinding, ContentChild, NgZone, RendererStyleFlags2, Renderer2, ComponentFactoryResolver, ViewChildren, NgModule, ChangeDetectionStrategy, Directive, ViewContainerRef, LOCALE_ID, forwardRef, ChangeDetectorRef, TemplateRef, ContentChildren, INJECTOR, Pipe, SkipSelf, APP_INITIALIZER } from '@angular/core';
-import { ModalController as ModalController$1, IonContent, IonHeader, IonToolbar, IonTitle, AnimationController, IonApp, IonicModule, IonRadio, IonFabButton, LoadingController, IonItemSliding, IonTabs, IonFooter, ToastController as ToastController$1 } from '@ionic/angular';
+import { ModalController as ModalController$1, IonContent, IonHeader, IonToolbar, IonTitle, AnimationController, IonApp, IonicModule, IonRadio, IonFabButton, LoadingController, IonItemSliding, IonList, IonTabs, IonFooter, ToastController as ToastController$1 } from '@ionic/angular';
 export { IonRouterOutlet, NavController } from '@ionic/angular';
 import { NavigationEnd, Router, ActivatedRoute, RouterOutlet, ROUTES, NavigationStart, RouterModule } from '@angular/router';
 import { of, EMPTY, Subject, merge, fromEvent, ReplaySubject } from 'rxjs';
@@ -1417,7 +1417,7 @@ ModalWrapperComponent.decorators = [
                 selector: 'kirby-modal-wrapper',
                 template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title>{{ config.title }}</ion-title>\n    <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n      <ng-container\n        *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n      ></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"4\" size=\"sm\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n  <button kirby-button attentionLevel=\"2\" size=\"sm\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n",
                 providers: [{ provide: Modal, useExisting: ModalWrapperComponent }],
-                styles: ["@media (min-width:721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),calc(var(--vh100) - var(--kirby-modal-padding-top, 0px)))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),calc(var(--vh100) - var(--kirby-modal-padding-top, 0px)))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host{--vh100:var(--vh,1vh) * 100;--header-height:0px;--footer-height:0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}ion-header ion-toolbar{--padding-start:16px;--padding-end:16px;--padding-bottom:16px;--padding-top:16px;--border-width:0;--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width:721px){ion-header ion-toolbar{padding-top:8px}}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top,0)}@media (min-width:721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black));display:flex;flex-direction:column;--padding-top:24px;--padding-bottom:24px;--padding-start:16px;--padding-end:16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width:721px){ion-content{--padding-start:56px;--padding-end:56px}}"]
+                styles: ["@media (min-width:721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host{--vh100:var(--vh,1vh) * 100;--header-height:0px;--footer-height:0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}ion-header ion-toolbar{--padding-start:16px;--padding-end:16px;--padding-bottom:16px;--padding-top:16px;--border-width:0;--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width:721px){ion-header ion-toolbar{padding-top:8px}}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top,0)}@media (min-width:721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black));display:flex;flex-direction:column;--padding-top:24px;--padding-bottom:24px;--padding-start:16px;--padding-end:16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width:721px){ion-content{--padding-start:56px;--padding-end:56px}}"]
             },] }
 ];
 /** @nocollapse */
@@ -3075,6 +3075,30 @@ function deepCopy(obj) {
     return JSON.parse(JSON.stringify(obj));
 }
 
+/*
+  Utility function to check if a given element
+  has an ancestor with a specific node name.
+
+  Can be given a 'stopNodeName' to limit the search
+  as to not climb all the way up through the DOM tree.
+
+  Returns true when element has the ancestorNodeName
+  or an ancestor has the ancestorNodeName.
+
+  Returns false otherwise.
+*/
+const elementHasAncestor = (element, ancestorNodeName, stopNodeName) => {
+    switch (element === null || element === void 0 ? void 0 : element.nodeName) {
+        case undefined:
+        case stopNodeName === null || stopNodeName === void 0 ? void 0 : stopNodeName.toUpperCase():
+            return false;
+        case ancestorNodeName.toUpperCase():
+            return true;
+        default:
+            return elementHasAncestor(element.parentElement, ancestorNodeName, stopNodeName);
+    }
+};
+
 // re-export helpers from core, to preserve backwards compatability
 
 const { getThemeColorHexString } = ColorHelper;
@@ -4314,6 +4338,32 @@ CalendarComponent.propDecorators = {
     _hasYearNavigator: [{ type: HostBinding, args: ['class.has-year-navigator',] }]
 };
 
+class ItemSlidingComponent {
+    constructor() {
+        this._side = 'start';
+    }
+    set side(value) {
+        this._side = value === 'left' ? 'start' : 'end';
+    }
+    get _hasSwipeActions() {
+        var _a;
+        // Using '>' instead of '!==';
+        // will only return true when swipeActions is an array
+        return ((_a = this.swipeActions) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }
+}
+ItemSlidingComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kirby-item-sliding',
+                template: "<ion-item-sliding>\n  <ng-content></ng-content>\n\n  <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n    <ng-container *ngFor=\"let swipeAction of swipeActions\">\n      <ion-item-option\n        *ngIf=\"!swipeAction.isDisabled\"\n        [ngClass]=\"swipeAction.type\"\n        (click)=\"swipeAction.onSelected()\"\n      >\n        <kirby-icon\n          *ngIf=\"swipeAction.icon !== undefined\"\n          [name]=\"swipeAction.icon\"\n          slot=\"top\"\n        ></kirby-icon>\n        <ion-label>{{ swipeAction.title }}</ion-label>\n      </ion-item-option>\n    </ng-container>\n  </ion-item-options>\n</ion-item-sliding>\n",
+                styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option{min-width:92px}"]
+            },] }
+];
+ItemSlidingComponent.propDecorators = {
+    swipeActions: [{ type: Input }],
+    side: [{ type: Input }]
+};
+
 class UniqueIdGenerator {
     constructor(scope) {
         this.scope = scope;
@@ -6099,7 +6149,7 @@ LabelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-label',
                 template: "<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n",
-                styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ion-label ::ng-deep>data,:host-context(kirby-item) ion-label ::ng-deep>h1,:host-context(kirby-item) ion-label ::ng-deep>h2,:host-context(kirby-item) ion-label ::ng-deep>h3,:host-context(kirby-item) ion-label ::ng-deep>h4,:host-context(kirby-item) ion-label ::ng-deep>h5,:host-context(kirby-item) ion-label ::ng-deep>h6,:host-context(kirby-item) ion-label ::ng-deep>p{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host-context(kirby-item) ion-label ::ng-deep>data.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h1.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h2.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h3.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h4.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h5.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h6.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>p.kirby-text-bold{font-weight:700}:host-context(kirby-item) ion-label ::ng-deep>p{font-size:14px}:host-context(kirby-item) ion-label ::ng-deep>[detail],:host-context(kirby-item) ion-label ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host-context(kirby-item) ion-label ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ion-label ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host([slot=end]) ion-label ::ng-deep>[detail],:host([slot=end]) ion-label ::ng-deep>data{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]),:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]){font-weight:700}"]
+                styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ion-label ::ng-deep>data,:host-context(kirby-item) ion-label ::ng-deep>h1,:host-context(kirby-item) ion-label ::ng-deep>h2,:host-context(kirby-item) ion-label ::ng-deep>h3,:host-context(kirby-item) ion-label ::ng-deep>h4,:host-context(kirby-item) ion-label ::ng-deep>h5,:host-context(kirby-item) ion-label ::ng-deep>h6,:host-context(kirby-item) ion-label ::ng-deep>p{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host-context(kirby-item) ion-label ::ng-deep>data.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h1.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h2.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h3.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h4.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h5.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h6.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>p.kirby-text-bold{font-weight:700}:host-context(kirby-item) ion-label ::ng-deep>p{font-size:14px}:host-context(kirby-item) ion-label ::ng-deep>[detail],:host-context(kirby-item) ion-label ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host-context(kirby-item) ion-label ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ion-label ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host-context(kirby-section-header) ion-label{--padding-end:16px;--padding-start:16px}:host-context(kirby-section-header) ion-label ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[detail],:host-context(kirby-section-header) ion-label ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([slot=end]) ion-label ::ng-deep>[detail],:host([slot=end]) ion-label ::ng-deep>data{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]),:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]){font-weight:700}"]
             },] }
 ];
 LabelComponent.propDecorators = {
@@ -6481,7 +6531,7 @@ ListComponent.decorators = [
                 selector: 'kirby-list',
                 template: "<ion-list\n  #list\n  kirbyInfiniteScroll\n  (scrollEnd)=\"_onLoadOnDemand()\"\n  [disabled]=\"!isLoadOnDemandEnabled\"\n  class=\"list\"\n  [class.has-header]=\"headerTemplate\"\n  [class.has-footer]=\"footerTemplate\"\n  [class.has-divider]=\"showDivider\"\n>\n  <ion-list-header *ngIf=\"headerTemplate\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  </ion-list-header>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      _isSectionsEnabled ? groupedListTemplate : itemsTemplate;\n      context: { $implicit: items }\n    \"\n  ></ng-container>\n\n  <div *ngIf=\"footerTemplate\" class=\"footer\">\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n  </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n  {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n  <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n  <ion-item-group *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\">\n    <ion-item-divider>\n      <ng-container\n        *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n      ></ng-container>\n    </ion-item-divider>\n\n    <div class=\"list-items\">\n      <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n      ></ng-container>\n    </div>\n  </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n  <kirby-list-item\n    *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n    [item]=\"item\"\n    [itemTemplate]=\"itemTemplate\"\n    [swipeActions]=\"swipeActions\"\n    [boundaryClass]=\"_getBoundaryClass(i, items)\"\n    [isSelectable]=\"_isSelectable\"\n    [getItemColor]=\"getItemColor\"\n    [isSelected]=\"_isSelectable && item === _selectedItem\"\n    (itemSelect)=\"onItemSelect($event)\"\n    (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n    [class.is-single]=\"items.length === 1\"\n  >\n  </kirby-list-item>\n</ng-template>\n",
                 providers: [ListHelper, GroupByPipe],
-                styles: [":host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action .primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}.swipe-action .secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}.swipe-action .tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}.swipe-action .success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}.swipe-action .warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}.swipe-action .danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}.swipe-action .light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}.swipe-action .medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}.swipe-action .dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}"]
+                styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}"]
             },] }
 ];
 /** @nocollapse */
@@ -6642,7 +6692,7 @@ ListItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-list-item',
                 template: "<ion-item-sliding\n  [class.selected]=\"isSelected\"\n  [kirbyListItemColor]=\"getItemColor\"\n  [item]=\"item\"\n  [disabled]=\"_isSwipingEnabled ? null : true\"\n  keyHandler\n  [ngClass]=\"boundaryClass\"\n  (click)=\"_onItemSelect(item)\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n  ></ng-container>\n  <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n  <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n    <div class=\"swipe-action\">\n      <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n        <ion-item-option\n          [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n          (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n        >\n          <div class=\"item-content\">\n            <kirby-icon\n              *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n              size=\"sm\"\n              [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n            >\n            </kirby-icon>\n            <ion-label>\n              {{ _getSwipeActionTitle(swipeAction, item) }}\n            </ion-label>\n          </div>\n        </ion-item-option>\n      </ng-container>\n    </div>\n  </ion-item-options>\n</ng-template>\n",
-                styles: [":host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action .primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}.swipe-action .secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}.swipe-action .tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}.swipe-action .success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}.swipe-action .warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}.swipe-action .danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}.swipe-action .light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}.swipe-action .medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}.swipe-action .dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}"]
+                styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}"]
             },] }
 ];
 /** @nocollapse */
@@ -6686,6 +6736,11 @@ ListItemColorDirective.propDecorators = {
 };
 
 class ListExperimentalComponent {
+    closeAllSlidingItems(e) {
+        if (elementHasAncestor(e.target, 'ion-item-option', 'ion-list')) {
+            this.list.closeSlidingItems();
+        }
+    }
 }
 ListExperimentalComponent.decorators = [
     { type: Component, args: [{
@@ -6693,6 +6748,10 @@ ListExperimentalComponent.decorators = [
                 template: "<ion-list>\n  <ng-content></ng-content>\n</ion-list>\n"
             },] }
 ];
+ListExperimentalComponent.propDecorators = {
+    list: [{ type: ViewChild, args: [IonList, { static: true },] }],
+    closeAllSlidingItems: [{ type: HostListener, args: ['click', ['$event'],] }]
+};
 
 class ReorderEvent {
     constructor(ev, parentItem) {
@@ -7394,6 +7453,16 @@ RouterOutletModule.decorators = [
             },] }
 ];
 
+class SectionHeaderComponent {
+}
+SectionHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kirby-section-header',
+                template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n",
+                styles: [":host{--kirby-section-header-color:var(--kirby-text-color-black)}:host ion-item-divider{--inner-padding-end:0;--background:transparent;--padding-end:16px;--padding-start:16px;font-weight:inherit;min-height:0}:host ion-item-divider ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
+            },] }
+];
+
 var SegmentedControlMode;
 (function (SegmentedControlMode) {
     SegmentedControlMode["chip"] = "chip";
@@ -7593,7 +7662,7 @@ TabButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-tab-button',
                 template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n  <div class=\"icon-container\" *ngIf=\"icons.length\">\n    <ng-content\n      *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n      select=\"kirby-icon[:not([selected-tab])]\"\n    ></ng-content>\n    <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n    <ng-content select=\"kirby-badge\"></ng-content>\n  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n</ion-tab-button>\n",
-                styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
+                styles: ["ion-tab-button{height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected:utils.get-color(\"black\");--kirby-badge-position:absolute;--kirby-badge-top:0;--kirby-badge-right:0}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top:-5px;--kirby-badge-right:-5px}ion-tab-button .icon-container{position:relative}@media (min-width:721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tab-button{padding:0 12px;margin-right:0}}"]
             },] }
 ];
 /** @nocollapse */
@@ -8421,11 +8490,13 @@ const exportedDeclarations$1 = [
     SlideDirective,
     AccordionDirective,
     AccordionItemComponent,
+    ItemSlidingComponent,
     RadioComponent,
     RadioGroupComponent,
     RangeComponent,
     ElementAsButtonDirective,
     ItemGroupComponent,
+    SectionHeaderComponent,
 ];
 const declarations$1 = [
     ...exportedDeclarations$1,
@@ -8516,5 +8587,5 @@ KirbyModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, defaultIcons, isNumberArray, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, ProxyCmp as ɵa, AppModule as ɵb, ModalWrapperComponent as ɵba, Modal as ɵbb, ButtonComponent as ɵbc, IconComponent as ɵbd, IconRegistryService as ɵbe, ICON_SETTINGS as ɵbg, ResizeObserverService as ɵbh, ResizeObserverFactory as ɵbi, FitHeadingModule as ɵbj, FitHeadingDirective as ɵbk, LineClampHelper as ɵbl, SpinnerModule as ɵbm, SpinnerComponent as ɵbn, TabsModule as ɵbo, IconModule as ɵbp, TabButtonComponent as ɵbq, ItemModule as ɵbr, ItemComponent as ɵbs, LabelComponent as ɵbt, ToggleButtonModule as ɵbu, ToggleButtonComponent as ɵbv, ListModule as ɵbw, ListComponent as ɵbx, ListHelper as ɵby, GroupByPipe as ɵbz, AppComponent as ɵc, InfiniteScrollDirective as ɵca, ListItemDirective as ɵcb, ListFlexItemDirective as ɵcc, ListItemTemplateDirective as ɵcd, ListHeaderDirective as ɵce, ListSectionHeaderDirective as ɵcf, ListFooterDirective as ɵcg, ListItemComponent as ɵch, ListSectionHeaderComponent as ɵci, ListHeaderComponent as ɵcj, ListExperimentalComponent as ɵck, ListItemColorDirective as ɵcl, ChartModule as ɵcm, ChartComponent as ɵcn, ChartJSService as ɵco, ChartConfigService as ɵcp, CardComponent as ɵcq, CardHeaderComponent as ɵcr, CardFooterComponent as ɵcs, ChartDeprecatedComponent as ɵct, ChartDeprecatedHelper as ɵcu, DONUT_OPTIONS as ɵcv, DonutOptions as ɵcw, AREASPLINE_OPTIONS as ɵcx, AreaSplineOptions as ɵcy, TIMESERIES_OPTIONS as ɵcz, RouterOutletComponent as ɵd, TimeSeriesOptions as ɵda, ACTIVITYGAUGE_OPTIONS as ɵdb, ActivityGaugeOptions as ɵdc, StockChartDeprecatedComponent as ɵdd, GridComponent as ɵde, BreakpointHelperService as ɵdf, ComponentLoaderDirective as ɵdg, AvatarComponent as ɵdh, CalendarComponent as ɵdi, CalendarHelper as ɵdj, CheckboxComponent as ɵdk, ActionSheetComponent as ɵdl, ModalFooterComponent as ɵdm, ModalRouterLinkDirective as ɵdn, SegmentedControlComponent as ɵdo, ChipComponent as ɵdp, ThemeColorDirective as ɵdq, DateInputDirective as ɵdr, DecimalMaskDirective as ɵds, SlideButtonComponent as ɵdt, ToggleComponent as ɵdu, EmptyStateComponent as ɵdv, FormFieldComponent as ɵdw, InputCounterComponent as ɵdx, RadioGroupComponent as ɵdy, RadioComponent as ɵdz, ModalController as ɵe, InputComponent as ɵea, TextareaComponent as ɵeb, FabSheetComponent as ɵec, DividerComponent as ɵed, ReorderListComponent as ɵee, DropdownComponent as ɵef, PopoverComponent as ɵeg, KeyboardHandlerService as ɵeh, LoadingOverlayComponent as ɵei, ProgressCircleComponent as ɵej, FlagComponent as ɵek, SlideDirective as ɵel, SlidesComponent as ɵem, AccordionDirective as ɵen, AccordionItemComponent as ɵeo, RangeComponent as ɵep, ElementAsButtonDirective as ɵeq, ItemGroupComponent as ɵer, KeyHandlerDirective as ɵes, FormFieldMessageComponent as ɵet, AlertComponent as ɵeu, ModalCompactWrapperComponent as ɵev, ProgressCircleRingComponent as ɵew, ToastHelper as ɵex, ToastController as ɵey, LoadingOverlayService as ɵez, ModalHelper as ɵf, appInitialize as ɵfa, customElementsInitializer as ɵfb, ModalAnimationBuilderService as ɵg, PlatformService as ɵh, WindowRef as ɵi, ActionSheetHelper as ɵj, AlertHelper as ɵk, ModalNavigationService as ɵl, RouterOutletModule as ɵm, PageModule as ɵn, PageTitleDirective as ɵo, PageToolbarTitleDirective as ɵp, PageActionsDirective as ɵq, PageContentDirective as ɵr, PageProgressComponent as ɵs, PageTitleComponent as ɵt, PageContentComponent as ɵu, PageActionsComponent as ɵv, PageComponent as ɵw, TabsComponent as ɵx, TabsService as ɵy, PageFooterComponent as ɵz };
+export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, ProxyCmp as ɵa, AppModule as ɵb, ModalWrapperComponent as ɵba, Modal as ɵbb, ButtonComponent as ɵbc, IconComponent as ɵbd, IconRegistryService as ɵbe, ICON_SETTINGS as ɵbg, ResizeObserverService as ɵbh, ResizeObserverFactory as ɵbi, FitHeadingModule as ɵbj, FitHeadingDirective as ɵbk, LineClampHelper as ɵbl, SpinnerModule as ɵbm, SpinnerComponent as ɵbn, TabsModule as ɵbo, IconModule as ɵbp, TabButtonComponent as ɵbq, ItemModule as ɵbr, ItemComponent as ɵbs, LabelComponent as ɵbt, ToggleButtonModule as ɵbu, ToggleButtonComponent as ɵbv, ListModule as ɵbw, ListComponent as ɵbx, ListHelper as ɵby, GroupByPipe as ɵbz, AppComponent as ɵc, InfiniteScrollDirective as ɵca, ListItemDirective as ɵcb, ListFlexItemDirective as ɵcc, ListItemTemplateDirective as ɵcd, ListHeaderDirective as ɵce, ListSectionHeaderDirective as ɵcf, ListFooterDirective as ɵcg, ListItemComponent as ɵch, ListSectionHeaderComponent as ɵci, ListHeaderComponent as ɵcj, ListExperimentalComponent as ɵck, ListItemColorDirective as ɵcl, ChartModule as ɵcm, ChartComponent as ɵcn, ChartJSService as ɵco, ChartConfigService as ɵcp, CardComponent as ɵcq, CardHeaderComponent as ɵcr, CardFooterComponent as ɵcs, ChartDeprecatedComponent as ɵct, ChartDeprecatedHelper as ɵcu, DONUT_OPTIONS as ɵcv, DonutOptions as ɵcw, AREASPLINE_OPTIONS as ɵcx, AreaSplineOptions as ɵcy, TIMESERIES_OPTIONS as ɵcz, RouterOutletComponent as ɵd, TimeSeriesOptions as ɵda, ACTIVITYGAUGE_OPTIONS as ɵdb, ActivityGaugeOptions as ɵdc, StockChartDeprecatedComponent as ɵdd, GridComponent as ɵde, BreakpointHelperService as ɵdf, ComponentLoaderDirective as ɵdg, AvatarComponent as ɵdh, CalendarComponent as ɵdi, CalendarHelper as ɵdj, CheckboxComponent as ɵdk, ActionSheetComponent as ɵdl, ModalFooterComponent as ɵdm, ModalRouterLinkDirective as ɵdn, SegmentedControlComponent as ɵdo, ChipComponent as ɵdp, ThemeColorDirective as ɵdq, DateInputDirective as ɵdr, DecimalMaskDirective as ɵds, SlideButtonComponent as ɵdt, ToggleComponent as ɵdu, EmptyStateComponent as ɵdv, FormFieldComponent as ɵdw, InputCounterComponent as ɵdx, RadioGroupComponent as ɵdy, RadioComponent as ɵdz, ModalController as ɵe, InputComponent as ɵea, TextareaComponent as ɵeb, FabSheetComponent as ɵec, DividerComponent as ɵed, ReorderListComponent as ɵee, DropdownComponent as ɵef, PopoverComponent as ɵeg, KeyboardHandlerService as ɵeh, LoadingOverlayComponent as ɵei, ProgressCircleComponent as ɵej, FlagComponent as ɵek, SlideDirective as ɵel, SlidesComponent as ɵem, AccordionDirective as ɵen, AccordionItemComponent as ɵeo, ItemSlidingComponent as ɵep, RangeComponent as ɵeq, ElementAsButtonDirective as ɵer, ItemGroupComponent as ɵes, SectionHeaderComponent as ɵet, KeyHandlerDirective as ɵeu, FormFieldMessageComponent as ɵev, AlertComponent as ɵew, ModalCompactWrapperComponent as ɵex, ProgressCircleRingComponent as ɵey, ToastHelper as ɵez, ModalHelper as ɵf, ToastController as ɵfa, LoadingOverlayService as ɵfb, appInitialize as ɵfc, customElementsInitializer as ɵfd, ModalAnimationBuilderService as ɵg, PlatformService as ɵh, WindowRef as ɵi, ActionSheetHelper as ɵj, AlertHelper as ɵk, ModalNavigationService as ɵl, RouterOutletModule as ɵm, PageModule as ɵn, PageTitleDirective as ɵo, PageToolbarTitleDirective as ɵp, PageActionsDirective as ɵq, PageContentDirective as ɵr, PageProgressComponent as ɵs, PageTitleComponent as ɵt, PageContentComponent as ɵu, PageActionsComponent as ɵv, PageComponent as ɵw, TabsComponent as ɵx, TabsService as ɵy, PageFooterComponent as ɵz };
 //# sourceMappingURL=kirbydesign-designsystem.js.map