@kirbydesign/extensions-angular 6.0.0-dev-67d5287 → 6.0.0-dev-9f721bb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/fesm2022/kirbydesign-extensions-angular-combobox.mjs +10 -10
  2. package/fesm2022/kirbydesign-extensions-angular-combobox.mjs.map +1 -1
  3. package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs +6 -6
  4. package/fesm2022/kirbydesign-extensions-angular-localization.mjs +30 -30
  5. package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs +58 -58
  6. package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs.map +1 -1
  7. package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs +7 -10
  8. package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs.map +1 -1
  9. package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs +5 -5
  10. package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs.map +1 -1
  11. package/package.json +2 -2
  12. package/types/kirbydesign-extensions-angular-skeleton-loader.d.ts +3 -4
package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs CHANGED
@@ -34,7 +34,7 @@ var HeightObserverDirective = class HeightObserverDirective {
34
34
  static {
35
35
  this.ɵfac = i0.ɵɵngDeclareFactory({
36
36
  minVersion: "12.0.0",
37
- version: "22.2.2",
37
+ version: "22.2.3",
38
38
  ngImport: i0,
39
39
  type: HeightObserverDirective,
40
40
  deps: [],
@@ -44,7 +44,7 @@ var HeightObserverDirective = class HeightObserverDirective {
44
44
  static {
45
45
  this.ɵdir = i0.ɵɵngDeclareDirective({
46
46
  minVersion: "14.0.0",
47
- version: "22.2.2",
47
+ version: "22.2.3",
48
48
  type: HeightObserverDirective,
49
49
  isStandalone: true,
50
50
  selector: "[kirbyXHeightObserver]",
@@ -55,7 +55,7 @@ var HeightObserverDirective = class HeightObserverDirective {
55
55
  };
56
56
  i0.ɵɵngDeclareClassMetadata({
57
57
  minVersion: "12.0.0",
58
- version: "22.2.2",
58
+ version: "22.2.3",
59
59
  ngImport: i0,
60
60
  type: HeightObserverDirective,
61
61
  decorators: [{
@@ -95,7 +95,7 @@ var SidebarService = class SidebarService {
95
95
  static {
96
96
  this.ɵfac = i0.ɵɵngDeclareFactory({
97
97
  minVersion: "12.0.0",
98
- version: "22.2.2",
98
+ version: "22.2.3",
99
99
  ngImport: i0,
100
100
  type: SidebarService,
101
101
  deps: [],
@@ -105,7 +105,7 @@ var SidebarService = class SidebarService {
105
105
  static {
106
106
  this.ɵprov = i0.ɵɵngDeclareInjectable({
107
107
  minVersion: "12.0.0",
108
- version: "22.2.2",
108
+ version: "22.2.3",
109
109
  ngImport: i0,
110
110
  type: SidebarService,
111
111
  providedIn: "root"
@@ -114,7 +114,7 @@ var SidebarService = class SidebarService {
114
114
  };
115
115
  i0.ɵɵngDeclareClassMetadata({
116
116
  minVersion: "12.0.0",
117
- version: "22.2.2",
117
+ version: "22.2.3",
118
118
  ngImport: i0,
119
119
  type: SidebarService,
120
120
  decorators: [{
@@ -143,7 +143,7 @@ var SidebarContainerComponent = class SidebarContainerComponent {
143
143
  static {
144
144
  this.ɵfac = i0.ɵɵngDeclareFactory({
145
145
  minVersion: "12.0.0",
146
- version: "22.2.2",
146
+ version: "22.2.3",
147
147
  ngImport: i0,
148
148
  type: SidebarContainerComponent,
149
149
  deps: [],
@@ -153,13 +153,13 @@ var SidebarContainerComponent = class SidebarContainerComponent {
153
153
  static {
154
154
  this.ɵcmp = i0.ɵɵngDeclareComponent({
155
155
  minVersion: "14.0.0",
156
- version: "22.2.2",
156
+ version: "22.2.3",
157
157
  type: SidebarContainerComponent,
158
158
  isStandalone: true,
159
159
  selector: "aside[kirby-x-sidebar-container]",
160
160
  ngImport: i0,
161
161
  template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n kirbyXHeightObserver\n class=\"sidebar-content\"\n cdkScrollable\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n",
162
- styles: [":host{height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-color-fill-base));color:var(--sidebar-color, var(--kirby-color-content-base));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-color-content-base-quiet) var(--kirby-color-fill-base)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--kirby-color-content-base-quiet) 50%,transparent);border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"],
162
+ styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-color-hover: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none;height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-tertiary));color:var(--sidebar-color, var(--kirby-tertiary-contrast));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"],
163
163
  dependencies: [{
164
164
  kind: "directive",
165
165
  type: HeightObserverDirective,
@@ -176,7 +176,7 @@ var SidebarContainerComponent = class SidebarContainerComponent {
176
176
  };
177
177
  i0.ɵɵngDeclareClassMetadata({
178
178
  minVersion: "12.0.0",
179
- version: "22.2.2",
179
+ version: "22.2.3",
180
180
  ngImport: i0,
181
181
  type: SidebarContainerComponent,
182
182
  decorators: [{
@@ -186,7 +186,7 @@ i0.ɵɵngDeclareClassMetadata({
186
186
  imports: [HeightObserverDirective, CdkScrollable],
187
187
  changeDetection: ChangeDetectionStrategy.Eager,
188
188
  template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n kirbyXHeightObserver\n class=\"sidebar-content\"\n cdkScrollable\n (scroll)=\"vm.setScroll($event)\"\n (heightChange)=\"vm.setContainerHeight($event)\"\n>\n <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n",
189
- styles: [":host{height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-color-fill-base));color:var(--sidebar-color, var(--kirby-color-content-base));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-color-content-base-quiet) var(--kirby-color-fill-base)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--kirby-color-content-base-quiet) 50%,transparent);border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"]
189
+ styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-color-hover: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none;height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-tertiary));color:var(--sidebar-color, var(--kirby-tertiary-contrast));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"]
190
190
  }]
191
191
  }]
192
192
  });
@@ -194,7 +194,7 @@ var SidebarComponent = class SidebarComponent {
194
194
  static {
195
195
  this.ɵfac = i0.ɵɵngDeclareFactory({
196
196
  minVersion: "12.0.0",
197
- version: "22.2.2",
197
+ version: "22.2.3",
198
198
  ngImport: i0,
199
199
  type: SidebarComponent,
200
200
  deps: [],
@@ -204,13 +204,13 @@ var SidebarComponent = class SidebarComponent {
204
204
  static {
205
205
  this.ɵcmp = i0.ɵɵngDeclareComponent({
206
206
  minVersion: "14.0.0",
207
- version: "22.2.2",
207
+ version: "22.2.3",
208
208
  type: SidebarComponent,
209
209
  isStandalone: true,
210
210
  selector: "kirby-x-sidebar",
211
211
  ngImport: i0,
212
212
  template: `
213
- <aside kirby-x-sidebar-container class="kirby-surface-brand">
213
+ <aside kirby-x-sidebar-container>
214
214
  <ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
215
215
  <ng-content slot="content"></ng-content>
216
216
  <ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
@@ -228,7 +228,7 @@ var SidebarComponent = class SidebarComponent {
228
228
  };
229
229
  i0.ɵɵngDeclareClassMetadata({
230
230
  minVersion: "12.0.0",
231
- version: "22.2.2",
231
+ version: "22.2.3",
232
232
  ngImport: i0,
233
233
  type: SidebarComponent,
234
234
  decorators: [{
@@ -236,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({
236
236
  args: [{
237
237
  selector: "kirby-x-sidebar",
238
238
  template: `
239
- <aside kirby-x-sidebar-container class="kirby-surface-brand">
239
+ <aside kirby-x-sidebar-container>
240
240
  <ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
241
241
  <ng-content slot="content"></ng-content>
242
242
  <ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
@@ -251,7 +251,7 @@ var SidebarFooterComponent = class SidebarFooterComponent {
251
251
  static {
252
252
  this.ɵfac = i0.ɵɵngDeclareFactory({
253
253
  minVersion: "12.0.0",
254
- version: "22.2.2",
254
+ version: "22.2.3",
255
255
  ngImport: i0,
256
256
  type: SidebarFooterComponent,
257
257
  deps: [],
@@ -261,7 +261,7 @@ var SidebarFooterComponent = class SidebarFooterComponent {
261
261
  static {
262
262
  this.ɵcmp = i0.ɵɵngDeclareComponent({
263
263
  minVersion: "14.0.0",
264
- version: "22.2.2",
264
+ version: "22.2.3",
265
265
  type: SidebarFooterComponent,
266
266
  isStandalone: true,
267
267
  selector: "kirby-x-sidebar-footer",
@@ -275,7 +275,7 @@ var SidebarFooterComponent = class SidebarFooterComponent {
275
275
  };
276
276
  i0.ɵɵngDeclareClassMetadata({
277
277
  minVersion: "12.0.0",
278
- version: "22.2.2",
278
+ version: "22.2.3",
279
279
  ngImport: i0,
280
280
  type: SidebarFooterComponent,
281
281
  decorators: [{
@@ -292,7 +292,7 @@ var SidebarHeaderComponent = class SidebarHeaderComponent {
292
292
  static {
293
293
  this.ɵfac = i0.ɵɵngDeclareFactory({
294
294
  minVersion: "12.0.0",
295
- version: "22.2.2",
295
+ version: "22.2.3",
296
296
  ngImport: i0,
297
297
  type: SidebarHeaderComponent,
298
298
  deps: [],
@@ -302,7 +302,7 @@ var SidebarHeaderComponent = class SidebarHeaderComponent {
302
302
  static {
303
303
  this.ɵcmp = i0.ɵɵngDeclareComponent({
304
304
  minVersion: "14.0.0",
305
- version: "22.2.2",
305
+ version: "22.2.3",
306
306
  type: SidebarHeaderComponent,
307
307
  isStandalone: true,
308
308
  selector: "kirby-x-sidebar-header",
@@ -323,7 +323,7 @@ var SidebarHeaderComponent = class SidebarHeaderComponent {
323
323
  };
324
324
  i0.ɵɵngDeclareClassMetadata({
325
325
  minVersion: "12.0.0",
326
- version: "22.2.2",
326
+ version: "22.2.3",
327
327
  ngImport: i0,
328
328
  type: SidebarHeaderComponent,
329
329
  decorators: [{
@@ -362,7 +362,7 @@ var MenuItemComponent = class MenuItemComponent {
362
362
  static {
363
363
  this.ɵfac = i0.ɵɵngDeclareFactory({
364
364
  minVersion: "12.0.0",
365
- version: "22.2.2",
365
+ version: "22.2.3",
366
366
  ngImport: i0,
367
367
  type: MenuItemComponent,
368
368
  deps: [],
@@ -372,7 +372,7 @@ var MenuItemComponent = class MenuItemComponent {
372
372
  static {
373
373
  this.ɵcmp = i0.ɵɵngDeclareComponent({
374
374
  minVersion: "17.0.0",
375
- version: "22.2.2",
375
+ version: "22.2.3",
376
376
  type: MenuItemComponent,
377
377
  isStandalone: true,
378
378
  selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]",
@@ -405,7 +405,7 @@ var MenuItemComponent = class MenuItemComponent {
405
405
  } },
406
406
  ngImport: i0,
407
407
  template: "<div class=\"menu-item-start {{ size() }}\">\n @if (icon(); as icon) {\n <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n }\n</div>\n\n<div class=\"menu-item-content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n",
408
- styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-color-fill-base))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"],
408
+ styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-tertiary))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"],
409
409
  dependencies: [{
410
410
  kind: "ngmodule",
411
411
  type: IconModule
@@ -421,7 +421,7 @@ var MenuItemComponent = class MenuItemComponent {
421
421
  };
422
422
  i0.ɵɵngDeclareClassMetadata({
423
423
  minVersion: "12.0.0",
424
- version: "22.2.2",
424
+ version: "22.2.3",
425
425
  ngImport: i0,
426
426
  type: MenuItemComponent,
427
427
  decorators: [{
@@ -435,7 +435,7 @@ i0.ɵɵngDeclareClassMetadata({
435
435
  imports: [IconModule],
436
436
  changeDetection: ChangeDetectionStrategy.Eager,
437
437
  template: "<div class=\"menu-item-start {{ size() }}\">\n @if (icon(); as icon) {\n <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n }\n</div>\n\n<div class=\"menu-item-content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n",
438
- styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-color-fill-base))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"]
438
+ styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-tertiary))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"]
439
439
  }]
440
440
  }],
441
441
  propDecorators: {
@@ -586,7 +586,7 @@ var MenuStateService = class MenuStateService {
586
586
  static {
587
587
  this.ɵfac = i0.ɵɵngDeclareFactory({
588
588
  minVersion: "12.0.0",
589
- version: "22.2.2",
589
+ version: "22.2.3",
590
590
  ngImport: i0,
591
591
  type: MenuStateService,
592
592
  deps: [],
@@ -596,7 +596,7 @@ var MenuStateService = class MenuStateService {
596
596
  static {
597
597
  this.ɵprov = i0.ɵɵngDeclareInjectable({
598
598
  minVersion: "12.0.0",
599
- version: "22.2.2",
599
+ version: "22.2.3",
600
600
  ngImport: i0,
601
601
  type: MenuStateService,
602
602
  providedIn: "root"
@@ -605,7 +605,7 @@ var MenuStateService = class MenuStateService {
605
605
  };
606
606
  i0.ɵɵngDeclareClassMetadata({
607
607
  minVersion: "12.0.0",
608
- version: "22.2.2",
608
+ version: "22.2.3",
609
609
  ngImport: i0,
610
610
  type: MenuStateService,
611
611
  decorators: [{
@@ -657,7 +657,7 @@ var MenuAnchorItemComponent = class MenuAnchorItemComponent {
657
657
  static {
658
658
  this.ɵfac = i0.ɵɵngDeclareFactory({
659
659
  minVersion: "12.0.0",
660
- version: "22.2.2",
660
+ version: "22.2.3",
661
661
  ngImport: i0,
662
662
  type: MenuAnchorItemComponent,
663
663
  deps: [],
@@ -667,7 +667,7 @@ var MenuAnchorItemComponent = class MenuAnchorItemComponent {
667
667
  static {
668
668
  this.ɵcmp = i0.ɵɵngDeclareComponent({
669
669
  minVersion: "17.0.0",
670
- version: "22.2.2",
670
+ version: "22.2.3",
671
671
  type: MenuAnchorItemComponent,
672
672
  isStandalone: true,
673
673
  selector: "li[kirby-x-menu-anchor-item]",
@@ -694,7 +694,7 @@ var MenuAnchorItemComponent = class MenuAnchorItemComponent {
694
694
  } },
695
695
  ngImport: i0,
696
696
  template: "@let item = vm.item();\n@switch (item.type) {\n @case ('action') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.href]=\"item.href\"\n (click)=\"$event.preventDefault(); vm.selectItem()\"\n (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.isLink) {\n <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></div>\n }\n </a>\n }\n @case ('router-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></div>\n }\n </a>\n }\n @case ('external-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.href]=\"item.url\"\n [attr.target]=\"item.target\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></div>\n }\n </a>\n }\n}\n\n@if (item.toggle) {\n <kirby-toggle-button\n class=\"toggle-button-wrapper\"\n [checked]=\"vm.isChecked()\"\n (checkChanged)=\"vm.checkItem($event)\"\n >\n <button\n kirby-button\n unchecked\n size=\"xs\"\n attentionLevel=\"3\"\n tabindex=\"-1\"\n [noDecoration]=\"true\"\n class=\"toggle-button\"\n >\n <kirby-icon size=\"xs\" [name]=\"item.toggle.uncheckedIcon\"></kirby-icon>\n </button>\n <button\n kirby-button\n checked\n size=\"xs\"\n attentionLevel=\"3\"\n tabindex=\"-1\"\n [noDecoration]=\"true\"\n class=\"toggle-button\"\n >\n <kirby-icon size=\"xs\" [name]=\"item.toggle.checkedIcon\"></kirby-icon>\n </button>\n </kirby-toggle-button>\n}\n",
697
- styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative;overflow:visible}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-color-fill-brand-loud));color:var(--menuitem-selected-color, var(--kirby-color-content-brand-loud));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"],
697
+ styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative;overflow:visible}:host.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"],
698
698
  dependencies: [
699
699
  {
700
700
  kind: "component",
@@ -765,7 +765,7 @@ var MenuAnchorItemComponent = class MenuAnchorItemComponent {
765
765
  };
766
766
  i0.ɵɵngDeclareClassMetadata({
767
767
  minVersion: "12.0.0",
768
- version: "22.2.2",
768
+ version: "22.2.3",
769
769
  ngImport: i0,
770
770
  type: MenuAnchorItemComponent,
771
771
  decorators: [{
@@ -787,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({
787
787
  ],
788
788
  changeDetection: ChangeDetectionStrategy.Eager,
789
789
  template: "@let item = vm.item();\n@switch (item.type) {\n @case ('action') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.href]=\"item.href\"\n (click)=\"$event.preventDefault(); vm.selectItem()\"\n (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.isLink) {\n <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></div>\n }\n </a>\n }\n @case ('router-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [routerLink]=\"item.route\"\n [queryParams]=\"item.queryParams\"\n [skipLocationChange]=\"item.skipLocationChange\"\n [replaceUrl]=\"item.replaceUrl\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></div>\n }\n </a>\n }\n @case ('external-link') {\n <a\n kirby-x-menu-item\n [class.selected]=\"vm.isSelected()\"\n [size]=\"vm.size()\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [attr.href]=\"item.url\"\n [attr.target]=\"item.target\"\n (click)=\"vm.selectItem()\"\n (keydown.enter)=\"vm.selectItem()\"\n >\n {{ item.title }}\n @if (item.badge) {\n <kirby-badge\n slot=\"end\"\n class=\"item-badge\"\n [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n >\n {{ item.badge.value }}\n </kirby-badge>\n }\n <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n @if (item.toggle) {\n <div slot=\"end\" class=\"toggle-spacer\"></div>\n }\n </a>\n }\n}\n\n@if (item.toggle) {\n <kirby-toggle-button\n class=\"toggle-button-wrapper\"\n [checked]=\"vm.isChecked()\"\n (checkChanged)=\"vm.checkItem($event)\"\n >\n <button\n kirby-button\n unchecked\n size=\"xs\"\n attentionLevel=\"3\"\n tabindex=\"-1\"\n [noDecoration]=\"true\"\n class=\"toggle-button\"\n >\n <kirby-icon size=\"xs\" [name]=\"item.toggle.uncheckedIcon\"></kirby-icon>\n </button>\n <button\n kirby-button\n checked\n size=\"xs\"\n attentionLevel=\"3\"\n tabindex=\"-1\"\n [noDecoration]=\"true\"\n class=\"toggle-button\"\n >\n <kirby-icon size=\"xs\" [name]=\"item.toggle.checkedIcon\"></kirby-icon>\n </button>\n </kirby-toggle-button>\n}\n",
790
- styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative;overflow:visible}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-color-fill-brand-loud));color:var(--menuitem-selected-color, var(--kirby-color-content-brand-loud));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"]
790
+ styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative;overflow:visible}:host.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"]
791
791
  }]
792
792
  }],
793
793
  propDecorators: {
@@ -872,7 +872,7 @@ var MenuSubmenuItemComponent = class MenuSubmenuItemComponent {
872
872
  static {
873
873
  this.ɵfac = i0.ɵɵngDeclareFactory({
874
874
  minVersion: "12.0.0",
875
- version: "22.2.2",
875
+ version: "22.2.3",
876
876
  ngImport: i0,
877
877
  type: MenuSubmenuItemComponent,
878
878
  deps: [],
@@ -882,7 +882,7 @@ var MenuSubmenuItemComponent = class MenuSubmenuItemComponent {
882
882
  static {
883
883
  this.ɵcmp = i0.ɵɵngDeclareComponent({
884
884
  minVersion: "17.0.0",
885
- version: "22.2.2",
885
+ version: "22.2.3",
886
886
  type: MenuSubmenuItemComponent,
887
887
  isStandalone: true,
888
888
  selector: "li[kirby-x-menu-submenu-item]",
@@ -968,7 +968,7 @@ var MenuSubmenuItemComponent = class MenuSubmenuItemComponent {
968
968
  };
969
969
  i0.ɵɵngDeclareClassMetadata({
970
970
  minVersion: "12.0.0",
971
- version: "22.2.2",
971
+ version: "22.2.3",
972
972
  ngImport: i0,
973
973
  type: MenuSubmenuItemComponent,
974
974
  decorators: [{
@@ -1022,7 +1022,7 @@ var MenuItemListComponent = class MenuItemListComponent {
1022
1022
  static {
1023
1023
  this.ɵfac = i0.ɵɵngDeclareFactory({
1024
1024
  minVersion: "12.0.0",
1025
- version: "22.2.2",
1025
+ version: "22.2.3",
1026
1026
  ngImport: i0,
1027
1027
  type: MenuItemListComponent,
1028
1028
  deps: [],
@@ -1032,7 +1032,7 @@ var MenuItemListComponent = class MenuItemListComponent {
1032
1032
  static {
1033
1033
  this.ɵcmp = i0.ɵɵngDeclareComponent({
1034
1034
  minVersion: "17.0.0",
1035
- version: "22.2.2",
1035
+ version: "22.2.3",
1036
1036
  type: MenuItemListComponent,
1037
1037
  isStandalone: true,
1038
1038
  selector: "ul[kirby-x-menu-item-list]",
@@ -1072,7 +1072,7 @@ var MenuItemListComponent = class MenuItemListComponent {
1072
1072
  } },
1073
1073
  ngImport: i0,
1074
1074
  template: "@for (item of vm.items(); track item.id) {\n @switch (item.type) {\n @case ('divider') {\n <kirby-divider aria-hidden=\"true\"></kirby-divider>\n }\n @case ('submenu') {\n <li\n kirby-x-menu-submenu-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></li>\n }\n @default {\n <li\n kirby-x-menu-anchor-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></li>\n }\n }\n}\n",
1075
- styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"],
1075
+ styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;background:var(--kirby-white-overlay-20);margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"],
1076
1076
  dependencies: [
1077
1077
  {
1078
1078
  kind: "component",
@@ -1127,7 +1127,7 @@ var MenuItemListComponent = class MenuItemListComponent {
1127
1127
  };
1128
1128
  i0.ɵɵngDeclareClassMetadata({
1129
1129
  minVersion: "12.0.0",
1130
- version: "22.2.2",
1130
+ version: "22.2.3",
1131
1131
  ngImport: i0,
1132
1132
  type: MenuItemListComponent,
1133
1133
  decorators: [{
@@ -1146,7 +1146,7 @@ i0.ɵɵngDeclareClassMetadata({
1146
1146
  CdkDrag
1147
1147
  ],
1148
1148
  template: "@for (item of vm.items(); track item.id) {\n @switch (item.type) {\n @case ('divider') {\n <kirby-divider aria-hidden=\"true\"></kirby-divider>\n }\n @case ('submenu') {\n <li\n kirby-x-menu-submenu-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></li>\n }\n @default {\n <li\n kirby-x-menu-anchor-item\n [item]=\"item\"\n [size]=\"vm.size()\"\n cdkDrag\n cdkDragPreviewContainer=\"parent\"\n [cdkDragBoundary]=\"'[cdkDropList]'\"\n [cdkDragDisabled]=\"!vm.isReorderable()\"\n [cdkDragData]=\"item.id\"\n ></li>\n }\n }\n}\n",
1149
- styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"]
1149
+ styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;background:var(--kirby-white-overlay-20);margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"]
1150
1150
  }]
1151
1151
  }],
1152
1152
  propDecorators: {
@@ -1205,7 +1205,7 @@ var MenuContainerComponent = class MenuContainerComponent {
1205
1205
  static {
1206
1206
  this.ɵfac = i0.ɵɵngDeclareFactory({
1207
1207
  minVersion: "12.0.0",
1208
- version: "22.2.2",
1208
+ version: "22.2.3",
1209
1209
  ngImport: i0,
1210
1210
  type: MenuContainerComponent,
1211
1211
  deps: [],
@@ -1215,7 +1215,7 @@ var MenuContainerComponent = class MenuContainerComponent {
1215
1215
  static {
1216
1216
  this.ɵcmp = i0.ɵɵngDeclareComponent({
1217
1217
  minVersion: "14.0.0",
1218
- version: "22.2.2",
1218
+ version: "22.2.3",
1219
1219
  type: MenuContainerComponent,
1220
1220
  isStandalone: true,
1221
1221
  selector: "kirby-x-menu-container",
@@ -1244,7 +1244,7 @@ var MenuContainerComponent = class MenuContainerComponent {
1244
1244
  };
1245
1245
  i0.ɵɵngDeclareClassMetadata({
1246
1246
  minVersion: "12.0.0",
1247
- version: "22.2.2",
1247
+ version: "22.2.3",
1248
1248
  ngImport: i0,
1249
1249
  type: MenuContainerComponent,
1250
1250
  decorators: [{
@@ -1303,7 +1303,7 @@ var SidebarMenuComponent = class SidebarMenuComponent {
1303
1303
  static {
1304
1304
  this.ɵfac = i0.ɵɵngDeclareFactory({
1305
1305
  minVersion: "12.0.0",
1306
- version: "22.2.2",
1306
+ version: "22.2.3",
1307
1307
  ngImport: i0,
1308
1308
  type: SidebarMenuComponent,
1309
1309
  deps: [],
@@ -1313,7 +1313,7 @@ var SidebarMenuComponent = class SidebarMenuComponent {
1313
1313
  static {
1314
1314
  this.ɵcmp = i0.ɵɵngDeclareComponent({
1315
1315
  minVersion: "14.0.0",
1316
- version: "22.2.2",
1316
+ version: "22.2.3",
1317
1317
  type: SidebarMenuComponent,
1318
1318
  isStandalone: true,
1319
1319
  selector: "kirby-x-sidebar-menu",
@@ -1359,7 +1359,7 @@ var SidebarMenuComponent = class SidebarMenuComponent {
1359
1359
  };
1360
1360
  i0.ɵɵngDeclareClassMetadata({
1361
1361
  minVersion: "12.0.0",
1362
- version: "22.2.2",
1362
+ version: "22.2.3",
1363
1363
  ngImport: i0,
1364
1364
  type: SidebarMenuComponent,
1365
1365
  decorators: [{
@@ -1398,7 +1398,7 @@ var SidebarMenuLoaderComponent = class SidebarMenuLoaderComponent {
1398
1398
  static {
1399
1399
  this.ɵfac = i0.ɵɵngDeclareFactory({
1400
1400
  minVersion: "12.0.0",
1401
- version: "22.2.2",
1401
+ version: "22.2.3",
1402
1402
  ngImport: i0,
1403
1403
  type: SidebarMenuLoaderComponent,
1404
1404
  deps: [],
@@ -1408,12 +1408,12 @@ var SidebarMenuLoaderComponent = class SidebarMenuLoaderComponent {
1408
1408
  static {
1409
1409
  this.ɵcmp = i0.ɵɵngDeclareComponent({
1410
1410
  minVersion: "14.0.0",
1411
- version: "22.2.2",
1411
+ version: "22.2.3",
1412
1412
  type: SidebarMenuLoaderComponent,
1413
1413
  isStandalone: true,
1414
1414
  selector: "kirby-x-sidebar-menu-loader",
1415
1415
  ngImport: i0,
1416
- template: "<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n",
1416
+ template: "<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n",
1417
1417
  styles: [":host{display:flex;padding:0 var(--kirby-spacing-xxs, 8px);flex-direction:column;align-items:center;gap:var(--kirby-spacing-xxxs, 4px);flex:1 0 0;align-self:stretch}.skeleton-loader{height:var(--kirby-spacing-xl);align-self:stretch}\n"],
1418
1418
  dependencies: [{
1419
1419
  kind: "component",
@@ -1427,7 +1427,7 @@ var SidebarMenuLoaderComponent = class SidebarMenuLoaderComponent {
1427
1427
  };
1428
1428
  i0.ɵɵngDeclareClassMetadata({
1429
1429
  minVersion: "12.0.0",
1430
- version: "22.2.2",
1430
+ version: "22.2.3",
1431
1431
  ngImport: i0,
1432
1432
  type: SidebarMenuLoaderComponent,
1433
1433
  decorators: [{
@@ -1436,7 +1436,7 @@ i0.ɵɵngDeclareClassMetadata({
1436
1436
  selector: "kirby-x-sidebar-menu-loader",
1437
1437
  imports: [SkeletonLoaderComponent],
1438
1438
  changeDetection: ChangeDetectionStrategy.Eager,
1439
- template: "<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n",
1439
+ template: "<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n",
1440
1440
  styles: [":host{display:flex;padding:0 var(--kirby-spacing-xxs, 8px);flex-direction:column;align-items:center;gap:var(--kirby-spacing-xxxs, 4px);flex:1 0 0;align-self:stretch}.skeleton-loader{height:var(--kirby-spacing-xl);align-self:stretch}\n"]
1441
1441
  }]
1442
1442
  }]
@@ -1445,7 +1445,7 @@ var SidebarModule = class SidebarModule {
1445
1445
  static {
1446
1446
  this.ɵfac = i0.ɵɵngDeclareFactory({
1447
1447
  minVersion: "12.0.0",
1448
- version: "22.2.2",
1448
+ version: "22.2.3",
1449
1449
  ngImport: i0,
1450
1450
  type: SidebarModule,
1451
1451
  deps: [],
@@ -1455,7 +1455,7 @@ var SidebarModule = class SidebarModule {
1455
1455
  static {
1456
1456
  this.ɵmod = i0.ɵɵngDeclareNgModule({
1457
1457
  minVersion: "14.0.0",
1458
- version: "22.2.2",
1458
+ version: "22.2.3",
1459
1459
  ngImport: i0,
1460
1460
  type: SidebarModule,
1461
1461
  imports: [
@@ -1473,7 +1473,7 @@ var SidebarModule = class SidebarModule {
1473
1473
  static {
1474
1474
  this.ɵinj = i0.ɵɵngDeclareInjector({
1475
1475
  minVersion: "12.0.0",
1476
- version: "22.2.2",
1476
+ version: "22.2.3",
1477
1477
  ngImport: i0,
1478
1478
  type: SidebarModule
1479
1479
  });
@@ -1481,7 +1481,7 @@ var SidebarModule = class SidebarModule {
1481
1481
  };
1482
1482
  i0.ɵɵngDeclareClassMetadata({
1483
1483
  minVersion: "12.0.0",
1484
- version: "22.2.2",
1484
+ version: "22.2.3",
1485
1485
  ngImport: i0,
1486
1486
  type: SidebarModule,
1487
1487
  decorators: [{