@kirbydesign/designsystem 9.6.0 → 9.7.0

package/fesm2022/kirbydesign-designsystem-toggle.mjs

@@ -5,8 +5,9 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { IonToggle } from '@ionic/angular/standalone';
 
 class ToggleComponent {
-    constructor(cdr) {
+    constructor(cdr, elementRef) {
         this.cdr = cdr;
+        this.elementRef = elementRef;
         this.checked = false;
         this.disabled = false;
         this.checkedChange = new EventEmitter();
@@ -17,6 +18,18 @@ class ToggleComponent {
         // eslint-disable-next-line no-empty-function
         this._onTouched = () => { };
     }
+    ngOnInit() {
+        this.inheritAriaAttributes();
+    }
+    inheritAriaAttributes() {
+        const el = this.elementRef.nativeElement;
+        const attribute = 'aria-label';
+        if (el.hasAttribute(attribute)) {
+            const value = el.getAttribute(attribute);
+            el.removeAttribute(attribute);
+            this._ariaLabel = value;
+        }
+    }
     get _isDisabled() {
         return this.disabled ? 'disabled' : null;
     }
@@ -71,14 +84,14 @@ class ToggleComponent {
         this.disabled = isDisabled;
         this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToggleComponent, isStandalone: true, selector: "kirby-toggle", inputs: { checked: "checked", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "attr.disabled": "this._isDisabled" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => ToggleComponent)),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [":host{display:inline-flex}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04)}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: #777777;--handle-background: whitesmoke;--track-background-checked: #2dc172;--handle-background-checked: whitesmoke}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: #6c6c6c;--handle-background: #ebebeb;--track-background-checked: #29ae67;--handle-background-checked: #ebebeb}ion-toggle.in-item.legacy-toggle{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [attr.aria-label]=\"_ariaLabel\"\n>\n  <ng-content></ng-content>\n</ion-toggle>\n", styles: [":host{display:inline-flex}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04);--handle-height: 28px;--handle-width: 28px;--border-radius: 16px}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(119.28, 119.28, 119.28);--handle-background: rgb(244.8, 244.8, 244.8);--track-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--handle-background-checked: rgb(244.8, 244.8, 244.8)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(107.92, 107.92, 107.92);--handle-background: rgb(234.6, 234.6, 234.6);--track-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--handle-background-checked: rgb(234.6, 234.6, 234.6)}ion-toggle::part(track){height:32px}ion-toggle.in-item.legacy-toggle{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "mode", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -88,8 +101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: forwardRef((() => ToggleComponent)),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\n", styles: [":host{display:inline-flex}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04)}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: #777777;--handle-background: whitesmoke;--track-background-checked: #2dc172;--handle-background-checked: whitesmoke}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: #6c6c6c;--handle-background: #ebebeb;--track-background-checked: #29ae67;--handle-background-checked: #ebebeb}ion-toggle.in-item.legacy-toggle{padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { checked: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [attr.aria-label]=\"_ariaLabel\"\n>\n  <ng-content></ng-content>\n</ion-toggle>\n", styles: [":host{display:inline-flex}ion-toggle{--track-background: var(--kirby-semi-dark);--handle-background: var(--kirby-white);--track-background-checked: var(--kirby-success);--handle-background-checked: var(--kirby-white);--handle-transition: .2s;--handle-box-shadow: 0 1px 24px 0 rgba(28, 28, 28, .04);--handle-height: 28px;--handle-width: 28px;--border-radius: 16px}@media (hover: hover) and (pointer: fine){ion-toggle{overflow:visible;contain:none}ion-toggle:focus-within::part(track){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-toggle:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--track-background: rgb(119.28, 119.28, 119.28);--handle-background: rgb(244.8, 244.8, 244.8);--track-background-checked: rgb(45.030660793, 192.689339207, 114.1474889868);--handle-background-checked: rgb(244.8, 244.8, 244.8)}}ion-toggle:active,ion-toggle.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--track-background: rgb(107.92, 107.92, 107.92);--handle-background: rgb(234.6, 234.6, 234.6);--track-background-checked: rgb(40.7420264317, 174.3379735683, 103.2762995595);--handle-background-checked: rgb(234.6, 234.6, 234.6)}ion-toggle::part(track){height:32px}ion-toggle.in-item.legacy-toggle{padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
                 type: Input

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-toggle.mjs","sources":["../../toggle/src/toggle.component.ts","../../toggle/src/toggle.component.html","../../toggle/src/kirbydesign-designsystem-toggle.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  Output,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IonToggle } from '@ionic/angular/standalone';\n\n@Component({\n  standalone: true,\n  imports: [CommonModule, IonToggle],\n  selector: 'kirby-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent implements ControlValueAccessor {\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  @Input() checked: boolean = false;\n  @Input() disabled: boolean = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _pressed = false;\n\n  onCheckedChange(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  _onActive() {\n    this._pressed = true;\n  }\n\n  _onInactive() {\n    this._pressed = false;\n    this._onTouched();\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private _onChange: (value: boolean) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private _onTouched = () => {};\n\n  /**\n   * Sets the toggle's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: boolean): void {\n    this.checked = value;\n  }\n  /**\n   * Saves a callback function to be invoked when the toggle's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n  /**\n   * Saves a callback function to be invoked when the toggle is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n  /**\n   * Disables the toggle. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.detectChanges();\n  }\n}\n","<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n></ion-toggle>\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-toggle.mjs","sources":["../../toggle/src/toggle.component.ts","../../toggle/src/toggle.component.html","../../toggle/src/kirbydesign-designsystem-toggle.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  Input,\n  OnInit,\n  Output,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IonToggle } from '@ionic/angular/standalone';\n\n@Component({\n  standalone: true,\n  imports: [CommonModule, IonToggle],\n  selector: 'kirby-toggle',\n  templateUrl: './toggle.component.html',\n  styleUrls: ['./toggle.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent implements ControlValueAccessor, OnInit {\n  constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef<HTMLElement>) {}\n\n  ngOnInit(): void {\n    this.inheritAriaAttributes();\n  }\n\n  _ariaLabel: string;\n\n  private inheritAriaAttributes() {\n    const el = this.elementRef.nativeElement;\n    const attribute = 'aria-label';\n    if (el.hasAttribute(attribute)) {\n      const value = el.getAttribute(attribute);\n      el.removeAttribute(attribute);\n      this._ariaLabel = value;\n    }\n  }\n\n  @Input() checked: boolean = false;\n  @Input() disabled: boolean = false;\n  @HostBinding('attr.disabled')\n  get _isDisabled() {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  @Output() checkedChange = new EventEmitter<boolean>();\n\n  _pressed = false;\n\n  onCheckedChange(checked: boolean): void {\n    this.checked = checked;\n    this._onChange(this.checked);\n    this.checkedChange.emit(this.checked);\n  }\n\n  _onActive() {\n    this._pressed = true;\n  }\n\n  _onInactive() {\n    this._pressed = false;\n    this._onTouched();\n  }\n\n  // Initialize default ControlValueAccessor callback functions (noop)\n  // eslint-disable-next-line no-empty-function\n  private _onChange: (value: boolean) => void = () => {};\n  // eslint-disable-next-line no-empty-function\n  private _onTouched = () => {};\n\n  /**\n   * Sets the toggle's value. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: boolean): void {\n    this.checked = value;\n  }\n  /**\n   * Saves a callback function to be invoked when the toggle's value\n   * changes from user input. Part of the ControlValueAccessor interface\n   * required to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the value changes.\n   */\n  registerOnChange(fn: any): void {\n    this._onChange = fn;\n  }\n  /**\n   * Saves a callback function to be invoked when the toggle is blurred\n   * by the user. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param fn Callback to be triggered when the component has been touched.\n   */\n  registerOnTouched(fn: any): void {\n    this._onTouched = fn;\n  }\n  /**\n   * Disables the toggle. Part of the ControlValueAccessor interface required\n   * to integrate with Angular's core forms API.\n   *\n   * @param isDisabled Sets whether the component is disabled.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.detectChanges();\n  }\n}\n","<ion-toggle\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  [class.interaction-state-active]=\"_pressed\"\n  (keydown.space)=\"_onActive()\"\n  (keyup.space)=\"_onInactive()\"\n  (blur)=\"_onInactive()\"\n  (ionChange)=\"onCheckedChange($event.detail.checked)\"\n  [attr.aria-label]=\"_ariaLabel\"\n>\n  <ng-content></ng-content>\n</ion-toggle>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/item/item.component.d.ts

@@ -1,10 +1,13 @@
+import { AfterContentInit, Renderer2 } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare enum ItemSize {
     XS = "xs",
     SM = "sm",
     MD = "md"
 }
-export declare class ItemComponent {
+export declare class ItemComponent implements AfterContentInit {
+    private renderer;
+    constructor(renderer: Renderer2);
     disabled: boolean;
     selected: boolean;
     disclosure: 'link' | 'arrow-more' | 'arrow-down' | 'arrow-up' | null;
@@ -12,7 +15,13 @@ export declare class ItemComponent {
     reorderable: boolean;
     size: ItemSize | `${ItemSize}`;
     rotateIcon: boolean;
+    private label;
+    private checkbox;
+    private radio;
     onMouseDown(event: MouseEvent): void;
+    ngAfterContentInit(): void;
+    private moveLabel;
+    get _isIonicButton(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ItemComponent, "kirby-item", never, { "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disclosure": { "alias": "disclosure"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rotateIcon": { "alias": "rotateIcon"; "required": false; }; }, {}, never, ["[slot='outside']", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ItemComponent, "kirby-item", never, { "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disclosure": { "alias": "disclosure"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rotateIcon": { "alias": "rotateIcon"; "required": false; }; }, {}, ["label", "checkbox", "radio"], ["[slot='outside']", "*"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "9.6.0",
+  "version": "9.7.0",
   "description": "The Kirby Design Angular Components.",
   "author": "kirby@bankdata.dk",
   "repository": {
@@ -31,7 +31,7 @@
     "@angular/core": "^17.0.0",
     "@angular/forms": "^17.0.0",
     "@angular/router": "^17.0.0",
-    "@ionic/angular": "7.8.3",
+    "@ionic/angular": "8.2.7",
     "chart.js": "^3.9.1",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",
@@ -60,36 +60,36 @@
       "esm": "./esm2022/accordion/kirbydesign-designsystem-accordion.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-accordion.mjs"
     },
-    "./action-group": {
-      "types": "./action-group/index.d.ts",
-      "esm2022": "./esm2022/action-group/kirbydesign-designsystem-action-group.mjs",
-      "esm": "./esm2022/action-group/kirbydesign-designsystem-action-group.mjs",
-      "default": "./fesm2022/kirbydesign-designsystem-action-group.mjs"
-    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "esm2022": "./esm2022/avatar/kirbydesign-designsystem-avatar.mjs",
       "esm": "./esm2022/avatar/kirbydesign-designsystem-avatar.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-avatar.mjs"
     },
+    "./action-group": {
+      "types": "./action-group/index.d.ts",
+      "esm2022": "./esm2022/action-group/kirbydesign-designsystem-action-group.mjs",
+      "esm": "./esm2022/action-group/kirbydesign-designsystem-action-group.mjs",
+      "default": "./fesm2022/kirbydesign-designsystem-action-group.mjs"
+    },
     "./badge": {
       "types": "./badge/index.d.ts",
       "esm2022": "./esm2022/badge/kirbydesign-designsystem-badge.mjs",
       "esm": "./esm2022/badge/kirbydesign-designsystem-badge.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-badge.mjs"
     },
-    "./button": {
-      "types": "./button/index.d.ts",
-      "esm2022": "./esm2022/button/kirbydesign-designsystem-button.mjs",
-      "esm": "./esm2022/button/kirbydesign-designsystem-button.mjs",
-      "default": "./fesm2022/kirbydesign-designsystem-button.mjs"
-    },
     "./calendar": {
       "types": "./calendar/index.d.ts",
       "esm2022": "./esm2022/calendar/kirbydesign-designsystem-calendar.mjs",
       "esm": "./esm2022/calendar/kirbydesign-designsystem-calendar.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-calendar.mjs"
     },
+    "./button": {
+      "types": "./button/index.d.ts",
+      "esm2022": "./esm2022/button/kirbydesign-designsystem-button.mjs",
+      "esm": "./esm2022/button/kirbydesign-designsystem-button.mjs",
+      "default": "./fesm2022/kirbydesign-designsystem-button.mjs"
+    },
     "./card": {
       "types": "./card/index.d.ts",
       "esm2022": "./esm2022/card/kirbydesign-designsystem-card.mjs",
@@ -102,18 +102,18 @@
       "esm": "./esm2022/chart/kirbydesign-designsystem-chart.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-chart.mjs"
     },
-    "./checkbox": {
-      "types": "./checkbox/index.d.ts",
-      "esm2022": "./esm2022/checkbox/kirbydesign-designsystem-checkbox.mjs",
-      "esm": "./esm2022/checkbox/kirbydesign-designsystem-checkbox.mjs",
-      "default": "./fesm2022/kirbydesign-designsystem-checkbox.mjs"
-    },
     "./data-table": {
       "types": "./data-table/index.d.ts",
       "esm2022": "./esm2022/data-table/kirbydesign-designsystem-data-table.mjs",
       "esm": "./esm2022/data-table/kirbydesign-designsystem-data-table.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-data-table.mjs"
     },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "esm2022": "./esm2022/checkbox/kirbydesign-designsystem-checkbox.mjs",
+      "esm": "./esm2022/checkbox/kirbydesign-designsystem-checkbox.mjs",
+      "default": "./fesm2022/kirbydesign-designsystem-checkbox.mjs"
+    },
     "./divider": {
       "types": "./divider/index.d.ts",
       "esm2022": "./esm2022/divider/kirbydesign-designsystem-divider.mjs",
@@ -198,18 +198,18 @@
       "esm": "./esm2022/kirby-ionic-module/kirbydesign-designsystem-kirby-ionic-module.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-kirby-ionic-module.mjs"
     },
-    "./list": {
-      "types": "./list/index.d.ts",
-      "esm2022": "./esm2022/list/kirbydesign-designsystem-list.mjs",
-      "esm": "./esm2022/list/kirbydesign-designsystem-list.mjs",
-      "default": "./fesm2022/kirbydesign-designsystem-list.mjs"
-    },
     "./loading-overlay": {
       "types": "./loading-overlay/index.d.ts",
       "esm2022": "./esm2022/loading-overlay/kirbydesign-designsystem-loading-overlay.mjs",
       "esm": "./esm2022/loading-overlay/kirbydesign-designsystem-loading-overlay.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-loading-overlay.mjs"
     },
+    "./list": {
+      "types": "./list/index.d.ts",
+      "esm2022": "./esm2022/list/kirbydesign-designsystem-list.mjs",
+      "esm": "./esm2022/list/kirbydesign-designsystem-list.mjs",
+      "default": "./fesm2022/kirbydesign-designsystem-list.mjs"
+    },
     "./menu": {
       "types": "./menu/index.d.ts",
       "esm2022": "./esm2022/menu/kirbydesign-designsystem-menu.mjs",
@@ -228,12 +228,6 @@
       "esm": "./esm2022/page/kirbydesign-designsystem-page.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-page.mjs"
     },
-    "./popover": {
-      "types": "./popover/index.d.ts",
-      "esm2022": "./esm2022/popover/kirbydesign-designsystem-popover.mjs",
-      "esm": "./esm2022/popover/kirbydesign-designsystem-popover.mjs",
-      "default": "./fesm2022/kirbydesign-designsystem-popover.mjs"
-    },
     "./progress-circle": {
       "types": "./progress-circle/index.d.ts",
       "esm2022": "./esm2022/progress-circle/kirbydesign-designsystem-progress-circle.mjs",
@@ -246,6 +240,12 @@
       "esm": "./esm2022/radio/kirbydesign-designsystem-radio.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-radio.mjs"
     },
+    "./popover": {
+      "types": "./popover/index.d.ts",
+      "esm2022": "./esm2022/popover/kirbydesign-designsystem-popover.mjs",
+      "esm": "./esm2022/popover/kirbydesign-designsystem-popover.mjs",
+      "default": "./fesm2022/kirbydesign-designsystem-popover.mjs"
+    },
     "./range": {
       "types": "./range/index.d.ts",
       "esm2022": "./esm2022/range/kirbydesign-designsystem-range.mjs",
@@ -276,18 +276,18 @@
       "esm": "./esm2022/shared/kirbydesign-designsystem-shared.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-shared.mjs"
     },
-    "./slide": {
-      "types": "./slide/index.d.ts",
-      "esm2022": "./esm2022/slide/kirbydesign-designsystem-slide.mjs",
-      "esm": "./esm2022/slide/kirbydesign-designsystem-slide.mjs",
-      "default": "./fesm2022/kirbydesign-designsystem-slide.mjs"
-    },
     "./slide-button": {
       "types": "./slide-button/index.d.ts",
       "esm2022": "./esm2022/slide-button/kirbydesign-designsystem-slide-button.mjs",
       "esm": "./esm2022/slide-button/kirbydesign-designsystem-slide-button.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-slide-button.mjs"
     },
+    "./slide": {
+      "types": "./slide/index.d.ts",
+      "esm2022": "./esm2022/slide/kirbydesign-designsystem-slide.mjs",
+      "esm": "./esm2022/slide/kirbydesign-designsystem-slide.mjs",
+      "default": "./fesm2022/kirbydesign-designsystem-slide.mjs"
+    },
     "./spinner": {
       "types": "./spinner/index.d.ts",
       "esm2022": "./esm2022/spinner/kirbydesign-designsystem-spinner.mjs",
@@ -312,12 +312,6 @@
       "esm": "./esm2022/testing/kirbydesign-designsystem-testing.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-testing.mjs"
     },
-    "./testing-base": {
-      "types": "./testing-base/index.d.ts",
-      "esm2022": "./esm2022/testing-base/kirbydesign-designsystem-testing-base.mjs",
-      "esm": "./esm2022/testing-base/kirbydesign-designsystem-testing-base.mjs",
-      "default": "./fesm2022/kirbydesign-designsystem-testing-base.mjs"
-    },
     "./testing-jasmine": {
       "types": "./testing-jasmine/index.d.ts",
       "esm2022": "./esm2022/testing-jasmine/kirbydesign-designsystem-testing-jasmine.mjs",
@@ -336,6 +330,12 @@
       "esm": "./esm2022/toast/kirbydesign-designsystem-toast.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-toast.mjs"
     },
+    "./testing-base": {
+      "types": "./testing-base/index.d.ts",
+      "esm2022": "./esm2022/testing-base/kirbydesign-designsystem-testing-base.mjs",
+      "esm": "./esm2022/testing-base/kirbydesign-designsystem-testing-base.mjs",
+      "default": "./fesm2022/kirbydesign-designsystem-testing-base.mjs"
+    },
     "./toggle": {
       "types": "./toggle/index.d.ts",
       "esm2022": "./esm2022/toggle/kirbydesign-designsystem-toggle.mjs",
@@ -366,17 +366,17 @@
       "esm": "./esm2022/modal/v2/kirbydesign-designsystem-modal-v2.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-modal-v2.mjs"
     },
-    "./shared/floating": {
-      "types": "./shared/floating/index.d.ts",
-      "esm2022": "./esm2022/shared/floating/kirbydesign-designsystem-shared-floating.mjs",
-      "esm": "./esm2022/shared/floating/kirbydesign-designsystem-shared-floating.mjs",
-      "default": "./fesm2022/kirbydesign-designsystem-shared-floating.mjs"
-    },
     "./shared/portal": {
       "types": "./shared/portal/index.d.ts",
       "esm2022": "./esm2022/shared/portal/kirbydesign-designsystem-shared-portal.mjs",
       "esm": "./esm2022/shared/portal/kirbydesign-designsystem-shared-portal.mjs",
       "default": "./fesm2022/kirbydesign-designsystem-shared-portal.mjs"
+    },
+    "./shared/floating": {
+      "types": "./shared/floating/index.d.ts",
+      "esm2022": "./esm2022/shared/floating/kirbydesign-designsystem-shared-floating.mjs",
+      "esm": "./esm2022/shared/floating/kirbydesign-designsystem-shared-floating.mjs",
+      "default": "./fesm2022/kirbydesign-designsystem-shared-floating.mjs"
     }
   },
   "module": "fesm2022/kirbydesign-designsystem.mjs",

package/radio/radio.component.d.ts

@@ -1,7 +1,8 @@
-import { AfterViewInit } from '@angular/core';
+import { AfterViewInit, ElementRef, OnInit } from '@angular/core';
 import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
 import * as i0 from "@angular/core";
-export declare class RadioComponent implements AfterViewInit {
+export declare class RadioComponent implements AfterViewInit, OnInit {
+    private element;
     private ionicElementPartHelper;
     private ionRadioElement?;
     value: any;
@@ -10,9 +11,12 @@ export declare class RadioComponent implements AfterViewInit {
     disabled: boolean;
     get _isDisabled(): string;
     get buttonTabIndex(): number;
-    constructor(ionicElementPartHelper: IonicElementPartHelper);
+    _justify: 'start' | 'end' | 'space-between';
+    _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start';
+    constructor(element: ElementRef<HTMLElement>, ionicElementPartHelper: IonicElementPartHelper);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "kirby-radio", never, { "value": { "alias": "value"; "required": false; }; "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "kirby-radio", never, { "value": { "alias": "value"; "required": false; }; "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/scss/base/_design-tokens.scss

@@ -0,0 +1 @@
+@forward "@kirbydesign/core/scss/base/design-tokens";

package/scss/themes/design-tokens.scss

@@ -0,0 +1 @@
+@forward "@kirbydesign/core/scss/themes/design-tokens";

package/toggle/toggle.component.d.ts

@@ -1,9 +1,13 @@
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
-export declare class ToggleComponent implements ControlValueAccessor {
+export declare class ToggleComponent implements ControlValueAccessor, OnInit {
     private cdr;
-    constructor(cdr: ChangeDetectorRef);
+    private elementRef;
+    constructor(cdr: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    _ariaLabel: string;
+    private inheritAriaAttributes;
     checked: boolean;
     disabled: boolean;
     get _isDisabled(): string;
@@ -45,5 +49,5 @@ export declare class ToggleComponent implements ControlValueAccessor {
      */
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "kirby-toggle", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "kirby-toggle", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], true, never>;
 }

package/README.md

@@ -1,7 +0,0 @@
-# designsystem
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test designsystem` to execute the unit tests.