@crowdfarming/oliva-ds 1.28.2 → 1.29.0-rc.10

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -6,7 +6,8 @@ import * as i1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
 import { TemplatePortal, DomPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
-import { RouterLink } from '@angular/router';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { Router, NavigationStart, RouterLink } from '@angular/router';
 import * as i1$3 from '@angular/cdk/overlay';
 
 // Auto-generated icons from Figma
@@ -2484,8 +2485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class AlertComponent {
     variant = input('neutral');
-    text = input('');
     title = input('');
+    text = input('');
     extraClass = input('');
     showIcon = input(true);
     removable = input(true);
@@ -2524,11 +2525,11 @@ class AlertComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibility) {\n<div\n  role=\"alert\"\n  [ngClass]=\"[\n    'c-alert',\n    variant() ? 'c-alert--' + variant() : '',\n    extraClass() ? extraClass() : '',\n    closeActive ? 'c-alert--hide' : ''\n  ]\"\n>\n  @if (showIcon()) {\n  <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n  }\n\n  <div class=\"c-alert__content\">\n    <p class=\"c-alert__title\">{{ title() }}</p>\n    <p class=\"c-alert__text\">{{ text() }}</p>\n  </div>\n\n  @if (removable()) {\n  <lib-button-icon\n    role=\"button\"\n    [ariaLabel]=\"variant()\"\n    [loading]=\"false\"\n    variant=\"neutral\"\n    size=\"sm\"\n    class=\"c-alert__close\"\n    iconName=\"x-regular\"\n    (click)=\"close()\"\n  />\n  }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);display:flex;align-items:flex-start;gap:var(--space-component-gap-md)}.c-alert--danger{border-color:var(--color-feedback-danger-surface-border);background:var(--color-feedback-danger-surface-background)}.c-alert--success{border-color:var(--color-feedback-success-surface-border);background:var(--color-feedback-success-surface-background)}.c-alert--warning{border-color:var(--color-feedback-warning-surface-border);background:var(--color-feedback-warning-surface-background)}.c-alert--info{border-color:var(--color-feedback-info-surface-border);background:var(--color-feedback-info-surface-background)}.c-alert--neutral{border-color:var(--color-core-border-default);background:var(--color-core-background-neutral-soft)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-content-default);font-family:var(--typography-title-sm-family);font-size:var(--typography-title-sm-size);font-style:normal;font-weight:var(--typography-title-sm-weight);line-height:var(--typography-title-sm-line-height);letter-spacing:var(--typography-title-sm-letter-spacing);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-soft);font-family:var(--typography-body-sm-family);font-size:var(--typography-body-sm-size);font-style:normal;font-weight:var(--typography-body-sm-weight);line-height:var(--typography-body-sm-line-height);letter-spacing:var(--typography-body-sm-letter-spacing);margin:0 0 auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibility) {\n<div\n  role=\"alert\"\n  [ngClass]=\"[\n    'c-alert',\n    variant() ? 'c-alert--' + variant() : '',\n    extraClass() ? extraClass() : '',\n    closeActive ? 'c-alert--hide' : ''\n  ]\"\n>\n  @if (showIcon()) {\n  <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n  }\n\n  <div class=\"c-alert__content\">\n    @if (title()) {\n    <p class=\"c-alert__title\">{{ title() }}</p>\n    } @if (text()) {\n    <p class=\"c-alert__text\">{{ text() }}</p>\n    }\n  </div>\n\n  @if (removable()) {\n  <lib-button-icon\n    role=\"button\"\n    [ariaLabel]=\"variant()\"\n    [loading]=\"false\"\n    variant=\"neutral\"\n    size=\"sm\"\n    class=\"c-alert__close\"\n    iconName=\"x-regular\"\n    (click)=\"close()\"\n  />\n  }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);display:flex;align-items:flex-start;gap:var(--space-component-gap-md)}.c-alert--danger{border-color:var(--color-feedback-danger-surface-border);background:var(--color-feedback-danger-surface-background)}.c-alert--success{border-color:var(--color-feedback-success-surface-border);background:var(--color-feedback-success-surface-background)}.c-alert--warning{border-color:var(--color-feedback-warning-surface-border);background:var(--color-feedback-warning-surface-background)}.c-alert--info{border-color:var(--color-feedback-info-surface-border);background:var(--color-feedback-info-surface-background)}.c-alert--neutral{border-color:var(--color-core-border-default);background:var(--color-core-background-neutral-soft)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-content-default);font-family:var(--typography-title-sm-family);font-size:var(--typography-title-sm-size);font-style:normal;font-weight:var(--typography-title-sm-weight);line-height:var(--typography-title-sm-line-height);letter-spacing:var(--typography-title-sm-letter-spacing);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-soft);font-family:var(--typography-body-sm-family);font-size:var(--typography-body-sm-size);font-style:normal;font-weight:var(--typography-body-sm-weight);line-height:var(--typography-body-sm-line-height);letter-spacing:var(--typography-body-sm-letter-spacing);margin:0 0 auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-alert', imports: [NgClass, IconComponent, ButtonIconComponent], template: "@if (visibility) {\n<div\n  role=\"alert\"\n  [ngClass]=\"[\n    'c-alert',\n    variant() ? 'c-alert--' + variant() : '',\n    extraClass() ? extraClass() : '',\n    closeActive ? 'c-alert--hide' : ''\n  ]\"\n>\n  @if (showIcon()) {\n  <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n  }\n\n  <div class=\"c-alert__content\">\n    <p class=\"c-alert__title\">{{ title() }}</p>\n    <p class=\"c-alert__text\">{{ text() }}</p>\n  </div>\n\n  @if (removable()) {\n  <lib-button-icon\n    role=\"button\"\n    [ariaLabel]=\"variant()\"\n    [loading]=\"false\"\n    variant=\"neutral\"\n    size=\"sm\"\n    class=\"c-alert__close\"\n    iconName=\"x-regular\"\n    (click)=\"close()\"\n  />\n  }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);display:flex;align-items:flex-start;gap:var(--space-component-gap-md)}.c-alert--danger{border-color:var(--color-feedback-danger-surface-border);background:var(--color-feedback-danger-surface-background)}.c-alert--success{border-color:var(--color-feedback-success-surface-border);background:var(--color-feedback-success-surface-background)}.c-alert--warning{border-color:var(--color-feedback-warning-surface-border);background:var(--color-feedback-warning-surface-background)}.c-alert--info{border-color:var(--color-feedback-info-surface-border);background:var(--color-feedback-info-surface-background)}.c-alert--neutral{border-color:var(--color-core-border-default);background:var(--color-core-background-neutral-soft)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-content-default);font-family:var(--typography-title-sm-family);font-size:var(--typography-title-sm-size);font-style:normal;font-weight:var(--typography-title-sm-weight);line-height:var(--typography-title-sm-line-height);letter-spacing:var(--typography-title-sm-letter-spacing);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-soft);font-family:var(--typography-body-sm-family);font-size:var(--typography-body-sm-size);font-style:normal;font-weight:var(--typography-body-sm-weight);line-height:var(--typography-body-sm-line-height);letter-spacing:var(--typography-body-sm-letter-spacing);margin:0 0 auto}\n"] }]
+            args: [{ selector: 'lib-alert', imports: [NgClass, IconComponent, ButtonIconComponent], template: "@if (visibility) {\n<div\n  role=\"alert\"\n  [ngClass]=\"[\n    'c-alert',\n    variant() ? 'c-alert--' + variant() : '',\n    extraClass() ? extraClass() : '',\n    closeActive ? 'c-alert--hide' : ''\n  ]\"\n>\n  @if (showIcon()) {\n  <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n  }\n\n  <div class=\"c-alert__content\">\n    @if (title()) {\n    <p class=\"c-alert__title\">{{ title() }}</p>\n    } @if (text()) {\n    <p class=\"c-alert__text\">{{ text() }}</p>\n    }\n  </div>\n\n  @if (removable()) {\n  <lib-button-icon\n    role=\"button\"\n    [ariaLabel]=\"variant()\"\n    [loading]=\"false\"\n    variant=\"neutral\"\n    size=\"sm\"\n    class=\"c-alert__close\"\n    iconName=\"x-regular\"\n    (click)=\"close()\"\n  />\n  }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);display:flex;align-items:flex-start;gap:var(--space-component-gap-md)}.c-alert--danger{border-color:var(--color-feedback-danger-surface-border);background:var(--color-feedback-danger-surface-background)}.c-alert--success{border-color:var(--color-feedback-success-surface-border);background:var(--color-feedback-success-surface-background)}.c-alert--warning{border-color:var(--color-feedback-warning-surface-border);background:var(--color-feedback-warning-surface-background)}.c-alert--info{border-color:var(--color-feedback-info-surface-border);background:var(--color-feedback-info-surface-background)}.c-alert--neutral{border-color:var(--color-core-border-default);background:var(--color-core-background-neutral-soft)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-content-default);font-family:var(--typography-title-sm-family);font-size:var(--typography-title-sm-size);font-style:normal;font-weight:var(--typography-title-sm-weight);line-height:var(--typography-title-sm-line-height);letter-spacing:var(--typography-title-sm-letter-spacing);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-soft);font-family:var(--typography-body-sm-family);font-size:var(--typography-body-sm-size);font-style:normal;font-weight:var(--typography-body-sm-weight);line-height:var(--typography-body-sm-line-height);letter-spacing:var(--typography-body-sm-letter-spacing);margin:0 0 auto}\n"] }]
         }] });
 
 class ArrowsComponent {
@@ -2957,7 +2958,7 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
+        ], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label() || innerHTML()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -2967,7 +2968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"] }]
+                    ], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label() || innerHTML()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"] }]
         }], ctorParameters: () => [] });
 
 class HelperTextComponent {
@@ -3145,21 +3146,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 class OverlayComponent {
-    // Constants
     static MOBILE_BREAKPOINT = 768;
     static DROPDOWN_HEIGHT = 320;
     static DROPDOWN_GAP = 2;
     static VIEWPORT_MARGIN = 16;
     static ANIMATION_DURATION = 20;
     static DEFAULT_MENU_WIDTH = 200;
-    // Inputs
     position = input('right');
     disabled = input(false);
     width = input(`${OverlayComponent.DEFAULT_MENU_WIDTH}px`);
-    // Outputs
     opened = output();
     closed = output();
-    // Signals
     _isOpen = signal(false);
     _isClosing = signal(false);
     _isMobile = signal(false);
@@ -3168,12 +3165,10 @@ class OverlayComponent {
         left: 0,
         width: OverlayComponent.DEFAULT_MENU_WIDTH,
     });
-    // Computed
     isOpen = this._isOpen.asReadonly();
     isClosing = this._isClosing.asReadonly();
     getMenuClasses = computed(() => ['c-overlay__menu', `c-overlay__menu--${this.position()}`].join(' '));
     getMenuStyles = computed(() => {
-        // On mobile we don't apply position styles, it's handled with CSS
         if (this._isMobile()) {
             return {};
         }
@@ -3198,17 +3193,32 @@ class OverlayComponent {
         }
         return classes.join(' ');
     });
-    // Element refs
     elementRef = inject(ElementRef);
     viewContainerRef = inject(ViewContainerRef);
     applicationRef = inject(ApplicationRef);
     platformId = inject(PLATFORM_ID);
     destroyRef = inject(DestroyRef);
+    focusTrapFactory = inject(FocusTrapFactory);
+    router = inject(Router);
+    // Portal and container management
     triggerButtonRef;
     portal;
     portalOutlet;
     portalContainer;
+    boundPortalClickHandler;
+    // Focus and accessibility management
+    focusTrap;
+    previouslyFocusedElement;
+    triggerKeydownHandler;
+    inertElements = [];
+    escapeKeyHandler;
+    // Scroll and navigation management
     originalBodyOverflow;
+    navigationSub;
+    // Helper to get the correct document context (important for Storybook)
+    getDocument() {
+        return this.elementRef.nativeElement.ownerDocument || document;
+    }
     menuTemplate;
     contentTemplate;
     footerTemplate;
@@ -3223,20 +3233,32 @@ class OverlayComponent {
             else if (!this.isOpen() && !this.isClosing())
                 this.closed.emit();
         });
-        // Cleanup when component is destroyed
         this.destroyRef.onDestroy(() => {
             if (this.isOpen() && this._isMobile()) {
                 this.unblockBodyScroll();
             }
+            this.destroyFocusTrap();
+            this.cleanupTriggerListener();
+            this.navigationSub?.unsubscribe();
+            this.removeEscapeKeyListener();
         });
     }
+    // ================== MOBILE DETECTION ==================
     updateMobileDetection() {
         this._isMobile.set(isPlatformBrowser(this.platformId)
             ? window.innerWidth <= OverlayComponent.MOBILE_BREAKPOINT
             : false);
     }
+    // ================== TRIGGER MANAGEMENT ==================
     setTriggerButton(element) {
         this.triggerButtonRef = element;
+        this.triggerKeydownHandler = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.toggleOverlay();
+            }
+        };
+        element.addEventListener('keydown', this.triggerKeydownHandler);
     }
     toggleOverlay() {
         if (this.disabled())
@@ -3252,75 +3274,160 @@ class OverlayComponent {
     onEscapeKey() {
         this.closeOverlay();
     }
+    // ================== OVERLAY LIFECYCLE ==================
     openOverlay() {
+        this.initializeOverlayState();
+        this.prepareOverlayForOpening();
+        this.createOverlayPortal();
+        this.configureScrollBehavior();
+        this.finalizeOverlayOpening();
+        setTimeout(() => {
+            this.trapFocus();
+            this.makeOutsideElementsInert();
+            this.setupEscapeKeyListener();
+        }, 0);
+    }
+    initializeOverlayState() {
         this._isClosing.set(false);
         this.updateMobileDetection();
-        // Calculate position only on desktop, but always create portal
+        this.previouslyFocusedElement = this.triggerButtonRef ?? this.getDocument().activeElement;
+    }
+    prepareOverlayForOpening() {
         if (!this._isMobile()) {
             this.calculatePosition();
         }
-        // Always create portal (both desktop and mobile)
+    }
+    createOverlayPortal() {
         this.createPortal();
-        // Block body scroll on mobile
+    }
+    configureScrollBehavior() {
         if (this._isMobile()) {
             this.blockBodyScroll();
         }
+    }
+    finalizeOverlayOpening() {
         this._isOpen.set(true);
         this.addResizeListener();
+        this.listenToNavigation();
     }
     closeOverlay() {
+        this.initializeOverlayClosing();
+        this.cleanupOverlayResources();
+        this.restoreScrollBehavior();
+        this.destroyOverlayComponents();
+        // Restore focus AFTER destroying DOM to avoid interference
+        requestAnimationFrame(() => {
+            this.restoreFocusToTrigger();
+        });
+        this.scheduleOverlayFinalization();
+    }
+    initializeOverlayClosing() {
         this._isClosing.set(true);
+    }
+    cleanupOverlayResources() {
         this.removeResizeListener();
-        // Unblock body scroll on mobile
+        this.unsubscribeFromNavigation();
+    }
+    unsubscribeFromNavigation() {
+        this.navigationSub?.unsubscribe();
+        this.navigationSub = undefined;
+    }
+    restoreScrollBehavior() {
         if (this._isMobile()) {
             this.unblockBodyScroll();
         }
-        // Always destroy portal (both desktop and mobile)
+    }
+    destroyOverlayComponents() {
+        this.destroyFocusTrap();
         this.destroyPortal();
+        // Ensure elements are restored after destroying components
+        this.restoreOutsideElements();
+    }
+    scheduleOverlayFinalization() {
         setTimeout(() => {
-            this._isOpen.set(false);
-            this._isClosing.set(false);
+            this.finalizeOverlayClosing();
         }, OverlayComponent.ANIMATION_DURATION);
     }
+    finalizeOverlayClosing() {
+        this._isOpen.set(false);
+        this._isClosing.set(false);
+    }
+    // ================== EVENT HANDLING ==================
     onPortalClick = (event) => {
         if (!this.isOpen() || this.isClosing())
             return;
         const target = event.target;
-        // Check if click is on the trigger button
         const onTrigger = this.triggerButtonRef?.contains(target);
         if (onTrigger) {
-            return; // Don't close if clicking on trigger
+            return;
         }
-        // Check if click is inside the menu
         const menuEl = this.portalContainer?.querySelector('.c-overlay__menu');
         const insideMenu = menuEl?.contains(target);
         if (insideMenu) {
-            return; // Don't close if clicking inside menu
+            return;
         }
-        // If we get here, click is outside both trigger and menu
         this.closeOverlay();
     };
+    // ================== POSITIONING ==================
     calculatePosition() {
         if (!this.triggerButtonRef)
             return;
         const rect = this.triggerButtonRef.getBoundingClientRect();
         const menuWidth = this.parseWidth(rect.width);
         const menuHeight = OverlayComponent.DROPDOWN_HEIGHT;
+        const viewportPosition = this.calculateViewportPosition(rect, menuWidth, menuHeight);
+        const finalPosition = this.convertToFinalCoordinates(viewportPosition, menuWidth, menuHeight);
+        this._menuPosition.set(finalPosition);
+    }
+    calculateViewportPosition(rect, menuWidth, menuHeight) {
         const gap = OverlayComponent.DROPDOWN_GAP;
+        const viewportTop = this.calculateVerticalPosition(rect, menuHeight, gap);
+        const viewportLeft = this.calculateHorizontalPosition(rect, menuWidth);
+        return { top: viewportTop, left: viewportLeft };
+    }
+    calculateVerticalPosition(rect, menuHeight, gap) {
         let top = rect.bottom + gap;
         if (window.innerHeight - rect.bottom < menuHeight &&
             rect.top > rect.bottom) {
             top = rect.top - menuHeight - gap;
         }
-        let left = rect.left;
-        if (this.position() === 'right')
-            left = rect.right - menuWidth;
-        else if (this.position() === 'center')
-            left = rect.left + (rect.width - menuWidth) / 2;
-        // Clamp to viewport
-        top = Math.max(OverlayComponent.VIEWPORT_MARGIN, Math.min(top, window.innerHeight - menuHeight - OverlayComponent.VIEWPORT_MARGIN));
-        left = Math.max(OverlayComponent.VIEWPORT_MARGIN, Math.min(left, window.innerWidth - menuWidth - OverlayComponent.VIEWPORT_MARGIN));
-        this._menuPosition.set({ top, left, width: menuWidth });
+        return top;
+    }
+    calculateHorizontalPosition(rect, menuWidth) {
+        const position = this.position();
+        switch (position) {
+            case 'right':
+                return rect.right - menuWidth;
+            case 'center': {
+                const triggerCenter = rect.left + rect.width / 2;
+                return triggerCenter;
+            }
+            case 'left':
+            default:
+                return rect.left;
+        }
+    }
+    convertToFinalCoordinates(viewportPosition, menuWidth, menuHeight) {
+        const scrollTop = window.pageYOffset || this.getDocument().documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || this.getDocument().documentElement.scrollLeft;
+        let top;
+        let left;
+        if (this._isMobile()) {
+            const clampedPosition = this.clampToViewport(viewportPosition, menuWidth, menuHeight);
+            top = clampedPosition.top;
+            left = clampedPosition.left;
+        }
+        else {
+            const clampedPosition = this.clampToViewport(viewportPosition, menuWidth, menuHeight);
+            top = clampedPosition.top + scrollTop;
+            left = clampedPosition.left + scrollLeft;
+        }
+        return { top, left, width: menuWidth };
+    }
+    clampToViewport(position, menuWidth, menuHeight) {
+        const clampedTop = Math.max(OverlayComponent.VIEWPORT_MARGIN, Math.min(position.top, window.innerHeight - menuHeight - OverlayComponent.VIEWPORT_MARGIN));
+        const clampedLeft = Math.max(OverlayComponent.VIEWPORT_MARGIN, Math.min(position.left, window.innerWidth - menuWidth - OverlayComponent.VIEWPORT_MARGIN));
+        return { top: clampedTop, left: clampedLeft };
     }
     parseWidth(triggerWidth) {
         if (this.width() === 'stretch')
@@ -3328,6 +3435,7 @@ class OverlayComponent {
         const w = parseFloat(this.width());
         return isNaN(w) ? OverlayComponent.DEFAULT_MENU_WIDTH : w;
     }
+    // ================== RESIZE HANDLING ==================
     addResizeListener() {
         if (!isPlatformBrowser(this.platformId))
             return;
@@ -3344,61 +3452,94 @@ class OverlayComponent {
         const wasMobile = this._isMobile();
         this.updateMobileDetection();
         const isNowMobile = this._isMobile();
-        // If mobile state changed, re-render the overlay
         if (wasMobile !== isNowMobile) {
-            // Destroy and recreate portal to apply correct styles
             this.destroyPortal();
             this.createPortal();
-            // Recalculate position if now on desktop
             if (!isNowMobile && this.triggerButtonRef) {
                 this.calculatePosition();
             }
         }
         else if (!isNowMobile && this.triggerButtonRef) {
-            // If still on desktop, just recalculate position
             this.calculatePosition();
         }
     };
+    // ================== PORTAL MANAGEMENT ==================
     createPortal() {
         if (!this.menuTemplate || !this.contentTemplate)
             return;
+        this.createPortalTemplate();
+        this.createPortalContainer();
+        this.setupPortalEventListeners();
+        this.createPortalOutlet();
+        this.attachPortalContent();
+        // Focus trap will be set up in openOverlay()
+        this.applyMenuPositioning();
+    }
+    createPortalTemplate() {
         this.portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
-        // Create portal container
-        this.portalContainer = document.createElement('div');
-        this.portalContainer.style.position = 'fixed';
+    }
+    createPortalContainer() {
+        this.portalContainer = this.getDocument().createElement('div');
+        this.configurePortalContainerStyles();
+        this.getDocument().body.appendChild(this.portalContainer);
+    }
+    configurePortalContainerStyles() {
+        if (!this.portalContainer)
+            return;
+        this.portalContainer.style.position = this._isMobile() ? 'fixed' : 'absolute';
         this.portalContainer.style.top = '0';
         this.portalContainer.style.left = '0';
         this.portalContainer.style.width = '100%';
         this.portalContainer.style.height = '100%';
         this.portalContainer.style.zIndex = '1000';
-        this.portalContainer.style.pointerEvents = 'auto'; // Enable clicks to capture outside clicks
-        document.body.appendChild(this.portalContainer);
-        // Add click listener to portal container
-        this.portalContainer.addEventListener('click', this.onPortalClick.bind(this));
-        // Create outlet
+        this.portalContainer.style.pointerEvents = 'auto';
+    }
+    setupPortalEventListeners() {
+        if (!this.portalContainer)
+            return;
+        this.boundPortalClickHandler = this.onPortalClick.bind(this);
+        this.portalContainer.addEventListener('click', this.boundPortalClickHandler);
+    }
+    createPortalOutlet() {
+        if (!this.portalContainer)
+            return;
         this.portalOutlet = new DomPortalOutlet(this.portalContainer, null, this.applicationRef, this.viewContainerRef.injector);
+    }
+    attachPortalContent() {
+        if (!this.portalOutlet || !this.portal)
+            return;
         this.portalOutlet.attach(this.portal);
-        // Apply position to menu only on desktop
-        const menuEl = this.portalContainer.querySelector('.c-overlay__menu');
-        if (menuEl) {
-            menuEl.style.pointerEvents = 'auto'; // Re-enable clicks on menu
-            // Apply styles based on current mobile state
-            if (!this._isMobile()) {
-                // Desktop: apply calculated position
-                const pos = this._menuPosition();
-                menuEl.style.position = 'fixed';
-                menuEl.style.top = `${pos.top}px`;
-                menuEl.style.left = `${pos.left}px`;
-                menuEl.style.width = `${pos.width}px`;
-            }
-            else {
-                // Mobile: clear desktop positioning styles
-                menuEl.style.position = '';
-                menuEl.style.top = '';
-                menuEl.style.left = '';
-                menuEl.style.width = '';
-            }
+    }
+    applyMenuPositioning() {
+        const menuEl = this.portalContainer?.querySelector('.c-overlay__menu');
+        if (!menuEl)
+            return;
+        this.configureMenuElement(menuEl);
+        this.applyPositioningStyles(menuEl);
+    }
+    configureMenuElement(menuEl) {
+        menuEl.style.pointerEvents = 'auto';
+    }
+    applyPositioningStyles(menuEl) {
+        if (this._isMobile()) {
+            this.applyMobilePositioning(menuEl);
         }
+        else {
+            this.applyDesktopPositioning(menuEl);
+        }
+    }
+    applyMobilePositioning(menuEl) {
+        menuEl.style.position = '';
+        menuEl.style.top = '';
+        menuEl.style.left = '';
+        menuEl.style.width = '';
+    }
+    applyDesktopPositioning(menuEl) {
+        const pos = this._menuPosition();
+        menuEl.style.position = 'absolute';
+        menuEl.style.top = `${pos.top}px`;
+        menuEl.style.left = `${pos.left}px`;
+        menuEl.style.width = `${pos.width}px`;
     }
     destroyPortal() {
         if (this.portalOutlet) {
@@ -3408,32 +3549,171 @@ class OverlayComponent {
             this.portal = undefined;
         }
         if (this.portalContainer && this.portalContainer.parentNode) {
-            // Remove event listener before removing from DOM
-            this.portalContainer.removeEventListener('click', this.onPortalClick);
+            if (this.boundPortalClickHandler) {
+                this.portalContainer.removeEventListener('click', this.boundPortalClickHandler);
+                this.boundPortalClickHandler = undefined;
+            }
             this.portalContainer.parentNode.removeChild(this.portalContainer);
         }
         this.portalContainer = undefined;
     }
+    // ================== SCROLL MANAGEMENT ==================
     blockBodyScroll() {
         if (!isPlatformBrowser(this.platformId))
             return;
-        // Save original body overflow
-        this.originalBodyOverflow = document.body.style.overflow;
-        // Block body scroll
-        document.body.style.overflow = 'hidden';
+        this.originalBodyOverflow = this.getDocument().body.style.overflow;
+        this.getDocument().body.style.overflow = 'hidden';
+        this.getDocument().body.style.position = 'fixed';
+        this.getDocument().body.style.width = '100%';
+        this.getDocument().body.style.top = `-${window.pageYOffset}px`;
+        this.getDocument().documentElement.style.overflow = 'hidden';
     }
     unblockBodyScroll() {
         if (!isPlatformBrowser(this.platformId))
             return;
-        // Restore original body overflow
+        const scrollY = this.getDocument().body.style.top;
         if (this.originalBodyOverflow !== undefined) {
-            document.body.style.overflow = this.originalBodyOverflow;
+            this.getDocument().body.style.overflow = this.originalBodyOverflow;
         }
         else {
-            document.body.style.overflow = '';
+            this.getDocument().body.style.overflow = '';
+        }
+        this.getDocument().body.style.position = '';
+        this.getDocument().body.style.width = '';
+        this.getDocument().body.style.top = '';
+        this.getDocument().documentElement.style.overflow = '';
+        if (scrollY) {
+            window.scrollTo(0, parseInt(scrollY || '0') * -1);
         }
         this.originalBodyOverflow = undefined;
     }
+    // ================== FOCUS MANAGEMENT ==================
+    trapFocus() {
+        if (!this.portalContainer) {
+            return;
+        }
+        // Search for menu element in entire document, not just within portalContainer
+        const doc = this.getDocument();
+        const menuEl = doc.querySelector('.c-overlay__menu');
+        if (!menuEl) {
+            setTimeout(() => this.trapFocus(), 10);
+            return;
+        }
+        // CDK FocusTrap
+        this.focusTrap = this.focusTrapFactory.create(menuEl);
+        this.focusTrap.focusInitialElement();
+    }
+    // ================== ESCAPE KEY HANDLING ==================
+    setupEscapeKeyListener() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.escapeKeyHandler = (event) => {
+            if (event.key === 'Escape' && this.isOpen() && !this.isClosing()) {
+                event.preventDefault();
+                this.closeOverlay();
+            }
+        };
+        this.getDocument().addEventListener('keydown', this.escapeKeyHandler);
+    }
+    removeEscapeKeyListener() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (this.escapeKeyHandler) {
+            this.getDocument().removeEventListener('keydown', this.escapeKeyHandler);
+            this.escapeKeyHandler = undefined;
+        }
+    }
+    // ================== FOCUS RESTORATION ==================
+    restoreFocusToTrigger() {
+        const doc = this.getDocument();
+        // Prefer to return focus to trigger button
+        if (this.triggerButtonRef && doc.contains(this.triggerButtonRef)) {
+            const focusableElement = this.findFocusableButton(this.triggerButtonRef);
+            if (focusableElement) {
+                focusableElement.focus({ preventScroll: true });
+                return;
+            }
+        }
+        // Si no hay trigger, devolvemos el foco al elemento que estaba activo antes
+        if (this.previouslyFocusedElement && doc.contains(this.previouslyFocusedElement)) {
+            const focusableElement = this.findFocusableButton(this.previouslyFocusedElement);
+            if (focusableElement) {
+                focusableElement.focus({ preventScroll: true });
+                return;
+            }
+        }
+        // Safety fallback
+        doc.body.focus();
+    }
+    findFocusableButton(element) {
+        // If element is already a focusable button, return it
+        if (element.tagName === 'BUTTON' && !element.hasAttribute('disabled')) {
+            return element;
+        }
+        // If it's a lib-button or custom component, search for internal button
+        const button = element.querySelector('button:not([disabled])');
+        if (button) {
+            return button;
+        }
+        // Search for any focusable element inside
+        const focusableSelectors = [
+            'button:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])'
+        ];
+        const focusable = element.querySelector(focusableSelectors.join(', '));
+        return focusable;
+    }
+    releaseFocusTrap() {
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+            this.focusTrap = undefined;
+        }
+        this.removeEscapeKeyListener();
+    }
+    // ================== INERT OUTSIDE ELEMENTS ==================
+    makeOutsideElementsInert() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.inertElements = [];
+        const doc = this.getDocument();
+        const bodyChildren = Array.from(doc.body.children);
+        bodyChildren.forEach(el => {
+            if (el !== this.portalContainer && !el.hasAttribute('aria-hidden')) {
+                el.inert = true; // Hace que no sean focusables ni interactuables
+                this.inertElements.push(el);
+            }
+        });
+    }
+    restoreOutsideElements() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.inertElements.forEach(el => {
+            el.inert = false;
+        });
+        this.inertElements = [];
+    }
+    destroyFocusTrap() {
+        this.releaseFocusTrap();
+        this.restoreOutsideElements();
+    }
+    cleanupTriggerListener() {
+        if (this.triggerButtonRef && this.triggerKeydownHandler) {
+            this.triggerButtonRef.removeEventListener('keydown', this.triggerKeydownHandler);
+            this.triggerKeydownHandler = undefined;
+        }
+    }
+    listenToNavigation() {
+        this.navigationSub?.unsubscribe(); // Clean up previous subscription
+        this.navigationSub = this.router.events.subscribe(event => {
+            if (event instanceof NavigationStart && this.isOpen()) {
+                this.closeOverlay();
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }], viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n\n\n<!-- Portal template for both desktop and mobile -->\n<ng-template #menuTemplate>\n  <div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n    <!-- Backdrop for mobile -->\n    @if (_isMobile() && (isOpen() || isClosing())) {\n    <div\n      class=\"c-overlay__backdrop\"\n      [ngClass]=\"getBackdropClasses()\"\n      (click)=\"onBackdropClick()\"\n      (keydown.escape)=\"onEscapeKey()\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Close overlay\"\n    ></div>\n    }\n\n    <!-- Overlay Menu -->\n    @if (isOpen() || isClosing()) {\n    <div\n      class=\"c-overlay__menu\"\n      [ngClass]=\"getMenuClasses()\"\n      [ngStyle]=\"getMenuStyles()\"\n      #overlayMenu\n    >\n      <div class=\"c-overlay__content\">\n        <!-- Main content projection -->\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </div>\n      \n      <!-- Footer slot for mobile action buttons -->\n      @if (_isMobile() && footerTemplate) {\n      <div class=\"c-overlay__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--fixed{position:fixed;min-width:0}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:100vh;width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }] });
 }
@@ -5905,18 +6185,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * - **default**: Shows custom header content
  * - **navigation**: Shows back button with title in header
  */
-class SidebarComponent {
+class SidebarProgrammaticComponent {
     visible = signal(false);
     state = signal('default');
     title = signal('');
     hasSlotHeader = signal(false);
-    hasSlotFooter = signal(false);
+    savedHeaderContent = signal([]);
     setVisible(visible) {
         this.visible.set(visible);
     }
+    updateTitle(title) {
+        if (this.hasSlotHeader()) {
+            this.saveHeaderContent();
+            this.removeSlotHeader();
+        }
+        this.title.set(title);
+    }
     setConfig(config) {
         if (config.title !== undefined) {
-            this.title.set(config.title);
+            this.updateTitle(config.title);
         }
         if (config.state !== undefined) {
             this.state.set(config.state);
@@ -5929,7 +6216,15 @@ class SidebarComponent {
         // This method is overridden by the service
     }
     onBackNavigation() {
-        // This method is overridden by the service
+        this.state.set('default');
+        if (this.savedHeaderContent()) {
+            setTimeout(() => {
+                this.restoreHeaderFooterContent();
+            }, 0);
+        }
+        else {
+            this.updateTitle(this.title());
+        }
     }
     onCloseButtonClick() {
         // This method is overridden by the service
@@ -5937,19 +6232,64 @@ class SidebarComponent {
     onArrowKeyNavigation(direction) {
         // This method is overridden by the content component
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    [ngClass]=\"'c-sidebar__content--' + state()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    (keydown.arrowup)=\"onArrowKeyNavigation('up')\"\n    (keydown.arrowdown)=\"onArrowKeyNavigation('down')\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Header -->\n    <header class=\"c-sidebar__header\">\n      <div class=\"c-sidebar__header-content\">\n        @if (state() === 'default') {\n          @if (hasSlotHeader()) {\n            <ng-content select=\"[slot=header]\"></ng-content>\n          } @else if (title()) {\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          }\n        }\n        @if (state() === 'navigation') {\n          <div class=\"c-sidebar__header-navigation\">\n            <lib-button-icon \n              iconName=\"caretleft-regular\" \n              variant=\"neutral\" \n              size=\"sm\"\n              ariaLabel=\"Back\"\n              (clicked)=\"onBackNavigation()\">\n            </lib-button-icon>\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          </div>\n        }\n      </div>\n      <lib-button-icon \n        iconName=\"x-regular\" \n        variant=\"neutral\" \n        size=\"sm\"\n        ariaLabel=\"Close\"\n        (clicked)=\"onCloseButtonClick()\">\n      </lib-button-icon>\n    </header>\n    \n    <!-- Body Content -->\n    <div class=\"c-sidebar__body\">\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer Content -->\n    <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': !hasSlotFooter()}\">\n      <div class=\"c-sidebar__footer-content\">\n        <ng-content select=\"[slot=footer]\"></ng-content>\n      </div>\n    </footer>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
+    restoreHeaderFooterContent() {
+        const headerContainer = document.querySelector('.c-sidebar__header-default');
+        if (headerContainer) {
+            headerContainer.innerHTML = '';
+            const savedElements = this.savedHeaderContent();
+            savedElements.forEach((element) => {
+                const clonedElement = element.cloneNode(true);
+                headerContainer.appendChild(clonedElement);
+            });
+            this.removeDuplicateContent();
+            this.hasSlotHeader.set(true);
+        }
+    }
+    removeDuplicateContent() {
+        const contentContainer = document.querySelector('.c-sidebar__body');
+        if (contentContainer) {
+            const slotHeaderContent = contentContainer.querySelector('[slot="header"]');
+            if (slotHeaderContent) {
+                slotHeaderContent.remove();
+            }
+            const slotFooterContent = contentContainer.querySelector('[slot="footer"]');
+            if (slotFooterContent) {
+                slotFooterContent.remove();
+            }
+        }
+    }
+    saveHeaderContent() {
+        const headerContainer = document.querySelector('.c-sidebar__header-default');
+        if (headerContainer) {
+            const elements = Array.from(headerContainer.children);
+            this.savedHeaderContent.set(elements);
+        }
+    }
+    removeSlotHeader() {
+        const headerContainer = document.querySelector('.c-sidebar__header-default');
+        if (headerContainer) {
+            const slotHeaderContent = headerContainer.querySelector('[slot="header"]');
+            if (slotHeaderContent) {
+                slotHeaderContent.remove();
+            }
+            const customHeaderItems = headerContainer.querySelectorAll('[data-custom-header="true"]');
+            customHeaderItems.forEach(item => item.remove());
+            this.hasSlotHeader.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarProgrammaticComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SidebarProgrammaticComponent, isStandalone: true, selector: "lib-sidebar-programmatic", ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    [ngClass]=\"'c-sidebar__content--' + state()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Header -->\n    <header class=\"c-sidebar__header\">\n      <div class=\"c-sidebar__header-content\">\n        <div class=\"c-sidebar__header-default\">\n          @if (state() === 'default') {\n            @if (hasSlotHeader()) {\n              <ng-content select=\"[slot=header]\"></ng-content>\n            } @else if (title()) {\n              <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n            }\n          }\n        </div>\n        \n        @if (state() === 'navigation') {\n          <div class=\"c-sidebar__header-navigation\">\n            <lib-button-icon \n              iconName=\"caretleft-regular\" \n              variant=\"neutral\" \n              size=\"sm\"\n              ariaLabel=\"Back\"\n              (clicked)=\"onBackNavigation()\">\n            </lib-button-icon>\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          </div>\n        }\n      </div>\n      <lib-button-icon \n        iconName=\"x-regular\" \n        variant=\"neutral\" \n        size=\"sm\"\n        ariaLabel=\"Close\"\n        (clicked)=\"onCloseButtonClick()\">\n      </lib-button-icon>\n    </header>\n    \n    <!-- Body Content -->\n    <div class=\"c-sidebar__body\">\n        <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer Content -->\n    <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': state() === 'navigation'}\">\n      <div class=\"c-sidebar__footer-content\">\n        <ng-content select=\"[slot=footer]\"></ng-content>\n      </div>\n    </footer>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarProgrammaticComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sidebar', imports: [CommonModule, ButtonIconComponent, NgClass], template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    [ngClass]=\"'c-sidebar__content--' + state()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    (keydown.arrowup)=\"onArrowKeyNavigation('up')\"\n    (keydown.arrowdown)=\"onArrowKeyNavigation('down')\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Header -->\n    <header class=\"c-sidebar__header\">\n      <div class=\"c-sidebar__header-content\">\n        @if (state() === 'default') {\n          @if (hasSlotHeader()) {\n            <ng-content select=\"[slot=header]\"></ng-content>\n          } @else if (title()) {\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          }\n        }\n        @if (state() === 'navigation') {\n          <div class=\"c-sidebar__header-navigation\">\n            <lib-button-icon \n              iconName=\"caretleft-regular\" \n              variant=\"neutral\" \n              size=\"sm\"\n              ariaLabel=\"Back\"\n              (clicked)=\"onBackNavigation()\">\n            </lib-button-icon>\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          </div>\n        }\n      </div>\n      <lib-button-icon \n        iconName=\"x-regular\" \n        variant=\"neutral\" \n        size=\"sm\"\n        ariaLabel=\"Close\"\n        (clicked)=\"onCloseButtonClick()\">\n      </lib-button-icon>\n    </header>\n    \n    <!-- Body Content -->\n    <div class=\"c-sidebar__body\">\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer Content -->\n    <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': !hasSlotFooter()}\">\n      <div class=\"c-sidebar__footer-content\">\n        <ng-content select=\"[slot=footer]\"></ng-content>\n      </div>\n    </footer>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"] }]
+            args: [{ selector: 'lib-sidebar-programmatic', imports: [CommonModule, ButtonIconComponent, NgClass], template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    [ngClass]=\"'c-sidebar__content--' + state()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Header -->\n    <header class=\"c-sidebar__header\">\n      <div class=\"c-sidebar__header-content\">\n        <div class=\"c-sidebar__header-default\">\n          @if (state() === 'default') {\n            @if (hasSlotHeader()) {\n              <ng-content select=\"[slot=header]\"></ng-content>\n            } @else if (title()) {\n              <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n            }\n          }\n        </div>\n        \n        @if (state() === 'navigation') {\n          <div class=\"c-sidebar__header-navigation\">\n            <lib-button-icon \n              iconName=\"caretleft-regular\" \n              variant=\"neutral\" \n              size=\"sm\"\n              ariaLabel=\"Back\"\n              (clicked)=\"onBackNavigation()\">\n            </lib-button-icon>\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          </div>\n        }\n      </div>\n      <lib-button-icon \n        iconName=\"x-regular\" \n        variant=\"neutral\" \n        size=\"sm\"\n        ariaLabel=\"Close\"\n        (clicked)=\"onCloseButtonClick()\">\n      </lib-button-icon>\n    </header>\n    \n    <!-- Body Content -->\n    <div class=\"c-sidebar__body\">\n        <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer Content -->\n    <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': state() === 'navigation'}\">\n      <div class=\"c-sidebar__footer-content\">\n        <ng-content select=\"[slot=footer]\"></ng-content>\n      </div>\n    </footer>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"] }]
         }] });
 
 class SidebarService {
     appRef = inject(ApplicationRef);
     injector = inject(Injector);
     open(component, config = {}) {
-        const sidebarRef = createComponent(SidebarComponent, {
+        const sidebarRef = createComponent(SidebarProgrammaticComponent, {
             environmentInjector: this.appRef.injector,
             elementInjector: this.injector,
         });
@@ -5975,35 +6315,7 @@ class SidebarService {
         // Append all remaining content to main container
         setTimeout(() => {
             sidebarRef.instance.setVisible(true);
-            const contentElement = contentRef.location.nativeElement;
-            const contentContainer = sidebarRef.location.nativeElement.querySelector('.c-sidebar__body');
-            const headerContainer = sidebarRef.location.nativeElement.querySelector('.c-sidebar__header-content');
-            const footerContainer = sidebarRef.location.nativeElement.querySelector('.c-sidebar__footer-content');
-            // Handle header content
-            const headerContent = contentElement.querySelector('[slot="header"]');
-            if (headerContent && headerContainer) {
-                const headerItems = headerContent.children;
-                Array.from(headerItems).forEach(item => {
-                    headerContainer.appendChild(item);
-                });
-                headerContent.remove();
-                sidebarRef.instance.hasSlotHeader.set(true);
-            }
-            // Handle footer content
-            const footerContent = contentElement.querySelector('[slot="footer"]');
-            if (footerContent && footerContainer) {
-                const footerItems = footerContent.children;
-                Array.from(footerItems).forEach(item => {
-                    footerContainer.appendChild(item);
-                });
-                footerContent.remove();
-                sidebarRef.instance.hasSlotFooter.set(true);
-            }
-            // Add remaining content to body
-            const remainingContent = contentElement.children;
-            Array.from(remainingContent).forEach(item => {
-                contentContainer.appendChild(item);
-            });
+            this.moveContentToSidebar(contentRef, sidebarRef);
         }, 50);
         return {
             close: (resultValue) => {
@@ -6012,6 +6324,9 @@ class SidebarService {
             },
             afterClosed: () => afterClosedPromise,
             getContentComponent: () => contentRef.instance,
+            updateTitle: (title) => {
+                sidebarRef.instance.updateTitle(title);
+            },
         };
     }
     handleClose(sidebarRef, contentRef, resolvePromise, config, result) {
@@ -6028,6 +6343,47 @@ class SidebarService {
             this.closeSidebar(sidebarRef, contentRef, resolvePromise, result);
         }
     }
+    moveHeaderToSidebar(contentElement, sidebarRef) {
+        const headerContainer = sidebarRef.location.nativeElement.querySelector('.c-sidebar__header-default');
+        const headerContent = contentElement.querySelector('[slot="header"]');
+        if (headerContent && headerContainer) {
+            const headerItems = headerContent.children;
+            Array.from(headerItems).forEach(item => {
+                item.setAttribute('data-custom-header', 'true');
+                headerContainer.appendChild(item);
+            });
+            headerContent.remove();
+            sidebarRef.instance.hasSlotHeader.set(true);
+        }
+    }
+    moveFooterToSidebar(contentElement, sidebarRef) {
+        const footerContainer = sidebarRef.location.nativeElement.querySelector('.c-sidebar__footer-content');
+        const footerContent = contentElement.querySelector('[slot="footer"]');
+        if (footerContent && footerContainer) {
+            const footerItems = footerContent.children;
+            Array.from(footerItems).forEach(item => {
+                footerContainer.appendChild(item);
+            });
+            footerContent.remove();
+        }
+    }
+    moveContentToSidebar(contentRef, sidebarRef) {
+        const contentElement = contentRef.location.nativeElement;
+        const contentContainer = sidebarRef.location.nativeElement.querySelector('.c-sidebar__body');
+        // Handle header content
+        this.moveHeaderToSidebar(contentElement, sidebarRef);
+        // Handle footer content
+        this.moveFooterToSidebar(contentElement, sidebarRef);
+        // Add remaining content to body
+        const remainingContent = contentElement.children;
+        Array.from(remainingContent).forEach(item => {
+            contentContainer.appendChild(item);
+        });
+        // If no content was moved, try to move the entire content element
+        if (remainingContent.length === 0) {
+            contentContainer.appendChild(contentElement);
+        }
+    }
     closeSidebar(sidebarRef, contentRef, resolvePromise, result) {
         sidebarRef.instance.setVisible(false);
         setTimeout(() => {
@@ -6050,116 +6406,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class BasicSidebarMenuComponent {
     selectedItem;
-    selectedChildId = '';
     sidebar;
-    currentIndex = 0;
     menuItems = [];
+    isInSettingsSubLevel = false;
     initializeComponent() {
         this.initializeMenuItems();
-        this.selectedItem = this.menuItems[0];
-        this.currentIndex = 0;
-        this.initializeSidebarTitle();
-        this.setupKeyboardNavigation();
-    }
-    initializeSidebarTitle() {
-        if (this.sidebar && !this.sidebar.title() && this.selectedItem) {
-            this.sidebar.title.set(this.selectedItem.label());
-        }
     }
     onItemClick(menuItem) {
         const label = menuItem.label();
         this.selectedItem = menuItem;
-        this.selectedChildId = '';
-        this.currentIndex = this.menuItems.findIndex(item => item === menuItem);
-        // Only set title if we don't have slot header content
-        if (this.sidebar && !this.sidebar.hasSlotHeader()) {
-            this.sidebar.title.set(label);
+        if (this.hasSubNavigation(menuItem)) {
+            this.navigateToSubLevel(menuItem);
         }
-        this.sidebar?.state.set('default');
-        if (this.sidebar) {
-            this.sidebar.onBackNavigation = () => this.onBackNavigation();
+        else {
+            if (this.sidebar && !this.sidebar.hasSlotHeader()) {
+                this.sidebar.updateTitle(label);
+            }
+            this.sidebar?.state.set('default');
         }
-        console.log('Clicked item:', {
-            label: label,
-            element: menuItem,
-            index: this.currentIndex
-        });
     }
-    onChildClick(childLabel, parentItem) {
-        const parent = parentItem || this.menuItems[0];
-        this.selectedItem = parent;
-        this.selectedChildId = `${parent.label().toLowerCase()}-${childLabel.toLowerCase()}`;
-        // Only set title and navigation state if we don't have slot header content
-        if (this.sidebar && !this.sidebar.hasSlotHeader()) {
-            this.sidebar?.title.set(childLabel);
-            this.sidebar?.state.set('navigation');
-            this.sidebar.onBackNavigation = () => this.onBackNavigation();
-        }
-        console.log('Clicked child item:', {
-            label: childLabel,
-            parent: parent.label(),
-            selectedItem: this.selectedItem,
-            selectedChildId: this.selectedChildId
-        });
+    hasSubNavigation(menuItem) {
+        // Override this method in child components to define which items have sub-navigation
+        return false;
     }
-    onBackNavigation() {
-        this.selectedItem = this.menuItems[0];
-        this.selectedChildId = '';
-        this.currentIndex = 0;
-        // Only set title if we don't have slot header content
-        if (this.sidebar && !this.sidebar.hasSlotHeader()) {
-            this.sidebar.title.set(this.menuItems[0].label());
+    navigateToSubLevel(menuItem) {
+        this.isInSettingsSubLevel = true;
+        if (this.sidebar) {
+            this.sidebar.updateTitle(menuItem.label());
+            this.sidebar.state.set('navigation');
         }
-        this.sidebar?.state.set('default');
-        console.log('Back navigation to', this.menuItems[0].label());
+    }
+    navigateToMainLevel() {
+        this.isInSettingsSubLevel = false;
     }
     onFooterItemClick(menuItem) {
         const label = menuItem.label();
         this.selectedItem = menuItem;
-        this.selectedChildId = '';
-        this.sidebar?.title.set(label);
-        this.sidebar?.state.set('default');
         if (this.sidebar) {
-            this.sidebar.onBackNavigation = () => this.onBackNavigation();
-        }
-        console.log('Footer item clicked:', {
-            label: label,
-            element: menuItem
-        });
-    }
-    setupKeyboardNavigation() {
-        if (this.sidebar) {
-            this.sidebar.onArrowKeyNavigation = (direction) => {
-                this.navigateMenu(direction);
-            };
-        }
-    }
-    navigateMenu(direction) {
-        if (!this.menuItems.length) {
-            return;
-        }
-        if (direction === 'down') {
-            this.currentIndex = (this.currentIndex + 1) % this.menuItems.length;
-        }
-        else {
-            this.currentIndex = this.currentIndex === 0 ? this.menuItems.length - 1 : this.currentIndex - 1;
-        }
-        const newItem = this.menuItems[this.currentIndex];
-        this.selectedItem = newItem;
-        this.selectedChildId = '';
-        // Only set title if we don't have slot header content
-        if (this.sidebar && !this.sidebar.hasSlotHeader()) {
-            this.sidebar.title.set(newItem.label());
-        }
-        this.sidebar?.state.set('default');
-        if (this.sidebar) {
-            this.sidebar.onBackNavigation = () => this.onBackNavigation();
+            this.sidebar.title.set(label);
+            this.sidebar.state.set('default');
         }
-        console.log('Keyboard navigation:', {
-            direction,
-            newIndex: this.currentIndex,
-            label: newItem.label()
-        });
     }
 }
 class SidebarWithFooterComponent extends BasicSidebarMenuComponent {
@@ -6167,29 +6453,24 @@ class SidebarWithFooterComponent extends BasicSidebarMenuComponent {
     settingsItem;
     profileItem;
     helpItem;
+    // Sub-level items
+    generalSettingsItem;
+    privacySettingsItem;
+    notificationsSettingsItem;
+    securitySettingsItem;
+    selectedSubItem;
     ngAfterViewInit() {
         this.initializeComponent();
     }
-    dashboardChildren = [
-        {
-            id: 'dashboard-analytics',
-            label: 'Analytics',
-            selected: false,
-            onClick: () => this.onChildClick('Analytics', this.dashboardItem)
-        },
-        {
-            id: 'dashboard-reports',
-            label: 'Reports',
-            selected: false,
-            onClick: () => this.onChildClick('Reports', this.dashboardItem)
-        },
-        {
-            id: 'dashboard-overview',
-            label: 'Overview',
-            selected: false,
-            onClick: () => this.onChildClick('Overview', this.dashboardItem)
-        }
-    ];
+    hasSubNavigation(menuItem) {
+        return menuItem === this.settingsItem;
+    }
+    onSubItemClick(subItem) {
+        this.selectedSubItem = subItem;
+        if (this.sidebar && !this.sidebar.hasSlotHeader()) {
+            this.sidebar.updateTitle(subItem.label());
+        }
+    }
     initializeMenuItems() {
         this.menuItems = [
             this.dashboardItem,
@@ -6199,13 +6480,24 @@ class SidebarWithFooterComponent extends BasicSidebarMenuComponent {
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarWithFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SidebarWithFooterComponent, isStandalone: true, selector: "lib-sidebar-with-footer", viewQueries: [{ propertyName: "dashboardItem", first: true, predicate: ["dashboardItem"], descendants: true }, { propertyName: "settingsItem", first: true, predicate: ["settingsItem"], descendants: true }, { propertyName: "profileItem", first: true, predicate: ["profileItem"], descendants: true }, { propertyName: "helpItem", first: true, predicate: ["helpItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SidebarWithFooterComponent, isStandalone: true, selector: "lib-sidebar-with-footer", viewQueries: [{ propertyName: "dashboardItem", first: true, predicate: ["dashboardItem"], descendants: true }, { propertyName: "settingsItem", first: true, predicate: ["settingsItem"], descendants: true }, { propertyName: "profileItem", first: true, predicate: ["profileItem"], descendants: true }, { propertyName: "helpItem", first: true, predicate: ["helpItem"], descendants: true }, { propertyName: "generalSettingsItem", first: true, predicate: ["generalSettingsItem"], descendants: true }, { propertyName: "privacySettingsItem", first: true, predicate: ["privacySettingsItem"], descendants: true }, { propertyName: "notificationsSettingsItem", first: true, predicate: ["notificationsSettingsItem"], descendants: true }, { propertyName: "securitySettingsItem", first: true, predicate: ["securitySettingsItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (sidebar?.state() === 'default') {
+      <div slot="header">
+        <div style="display: flex; align-items: center; gap: 12px; padding: 16px;">
+          <div style="width: 32px; height: 32px; background: #17a2b8; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
+            L
+          </div>
+          <div>
+            <h3 style="margin: 0; font-size: 16px; font-weight: 600; color: var(--color-core-content-default);">My App</h3>
+            <p style="margin: 0; font-size: 12px; color: var(--color-core-content-secondary);">Welcome back!</p>
+          </div>
+        </div>
+      </div>
       <lib-menu-item 
         #dashboardItem
         label="Dashboard" 
         icon="home-regular" 
         [selected]="selectedItem === dashboardItem"
-        [children]="dashboardChildren"
         (clicked)="onItemClick(dashboardItem)">
       </lib-menu-item>
       <lib-menu-item 
@@ -6241,109 +6533,46 @@ class SidebarWithFooterComponent extends BasicSidebarMenuComponent {
           (clicked)="onFooterItemClick(logoutItem)">
         </lib-menu-item>
       </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemComponent, selector: "lib-menu-item", inputs: ["label", "icon", "disabled", "selected", "showArrowIcon", "tagLabel", "children"], outputs: ["clicked"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarWithFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-sidebar-with-footer',
-                    template: `
+    }
+    <!-- Settings Sub-Level -->
+    @if (sidebar?.state() === 'navigation' && isInSettingsSubLevel) {
       <lib-menu-item 
-        #dashboardItem
-        label="Dashboard" 
-        icon="home-regular" 
-        [selected]="selectedItem === dashboardItem"
-        [children]="dashboardChildren"
-        (clicked)="onItemClick(dashboardItem)">
+        #generalSettingsItem
+        label="General" 
+        icon="settings-regular"
+        [selected]="selectedSubItem === generalSettingsItem"
+        (clicked)="onSubItemClick(generalSettingsItem)">
       </lib-menu-item>
       <lib-menu-item 
-        #settingsItem
-        label="Settings" 
-        icon="settings-regular"
-        [selected]="selectedItem === settingsItem"
-        (clicked)="onItemClick(settingsItem)">
+        #privacySettingsItem
+        label="Privacy" 
+        icon="shield-regular"
+        [selected]="selectedSubItem === privacySettingsItem"
+        (clicked)="onSubItemClick(privacySettingsItem)">
       </lib-menu-item>
       <lib-menu-item 
-        #profileItem
-        label="Profile" 
-        icon="user-regular" 
-        tagLabel="New"
-        [selected]="selectedItem === profileItem"
-        (clicked)="onItemClick(profileItem)">
+        #notificationsSettingsItem
+        label="Notifications" 
+        icon="bell-regular"
+        [selected]="selectedSubItem === notificationsSettingsItem"
+        (clicked)="onSubItemClick(notificationsSettingsItem)">
       </lib-menu-item>
       <lib-menu-item 
-        #helpItem
-        label="Help" 
-        icon="question-regular"
-        [selected]="selectedItem === helpItem"
-        (clicked)="onItemClick(helpItem)">
+        #securitySettingsItem
+        label="Security" 
+        icon="lock-regular"
+        [selected]="selectedSubItem === securitySettingsItem"
+        (clicked)="onSubItemClick(securitySettingsItem)">
       </lib-menu-item>
-      
-      <div slot="footer">
-        <lib-menu-item 
-          #logoutItem
-          label="Logout" 
-          icon="signout-regular"
-          [showArrowIcon]="false"
-          [selected]="selectedItem === logoutItem"
-          (clicked)="onFooterItemClick(logoutItem)">
-        </lib-menu-item>
-      </div>
-  `,
-                    imports: [CommonModule, MenuItemComponent, MenuChildItemComponent],
-                    standalone: true,
-                }]
-        }], propDecorators: { dashboardItem: [{
-                type: ViewChild,
-                args: ['dashboardItem']
-            }], settingsItem: [{
-                type: ViewChild,
-                args: ['settingsItem']
-            }], profileItem: [{
-                type: ViewChild,
-                args: ['profileItem']
-            }], helpItem: [{
-                type: ViewChild,
-                args: ['helpItem']
-            }] } });
-class SidebarWithHeaderComponent extends BasicSidebarMenuComponent {
-    dashboardItem;
-    settingsItem;
-    profileItem;
-    helpItem;
-    ngAfterViewInit() {
-        this.initializeComponent();
     }
-    dashboardChildren = [
-        {
-            id: 'dashboard-analytics',
-            label: 'Analytics',
-            selected: false,
-            onClick: () => this.onChildClick('Analytics', this.dashboardItem)
-        },
-        {
-            id: 'dashboard-reports',
-            label: 'Reports',
-            selected: false,
-            onClick: () => this.onChildClick('Reports', this.dashboardItem)
-        },
-        {
-            id: 'dashboard-overview',
-            label: 'Overview',
-            selected: false,
-            onClick: () => this.onChildClick('Overview', this.dashboardItem)
-        }
-    ];
-    initializeMenuItems() {
-        this.menuItems = [
-            this.dashboardItem,
-            this.settingsItem,
-            this.profileItem,
-            this.helpItem
-        ];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarWithHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SidebarWithHeaderComponent, isStandalone: true, selector: "lib-sidebar-with-header", viewQueries: [{ propertyName: "dashboardItem", first: true, predicate: ["dashboardItem"], descendants: true }, { propertyName: "settingsItem", first: true, predicate: ["settingsItem"], descendants: true }, { propertyName: "profileItem", first: true, predicate: ["profileItem"], descendants: true }, { propertyName: "helpItem", first: true, predicate: ["helpItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemComponent, selector: "lib-menu-item", inputs: ["label", "icon", "disabled", "selected", "showArrowIcon", "tagLabel", "children"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarWithFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-sidebar-with-footer',
+                    template: `
+    @if (sidebar?.state() === 'default') {
       <div slot="header">
         <div style="display: flex; align-items: center; gap: 12px; padding: 16px;">
           <div style="width: 32px; height: 32px; background: #17a2b8; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
@@ -6355,13 +6584,11 @@ class SidebarWithHeaderComponent extends BasicSidebarMenuComponent {
           </div>
         </div>
       </div>
-      
       <lib-menu-item 
         #dashboardItem
         label="Dashboard" 
         icon="home-regular" 
         [selected]="selectedItem === dashboardItem"
-        [children]="dashboardChildren"
         (clicked)="onItemClick(dashboardItem)">
       </lib-menu-item>
       <lib-menu-item 
@@ -6386,57 +6613,51 @@ class SidebarWithHeaderComponent extends BasicSidebarMenuComponent {
         [selected]="selectedItem === helpItem"
         (clicked)="onItemClick(helpItem)">
       </lib-menu-item>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemComponent, selector: "lib-menu-item", inputs: ["label", "icon", "disabled", "selected", "showArrowIcon", "tagLabel", "children"], outputs: ["clicked"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarWithHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-sidebar-with-header',
-                    template: `
-      <div slot="header">
-        <div style="display: flex; align-items: center; gap: 12px; padding: 16px;">
-          <div style="width: 32px; height: 32px; background: #17a2b8; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
-            L
-          </div>
-          <div>
-            <h3 style="margin: 0; font-size: 16px; font-weight: 600; color: var(--color-core-content-default);">My App</h3>
-            <p style="margin: 0; font-size: 12px; color: var(--color-core-content-secondary);">Welcome back!</p>
-          </div>
-        </div>
-      </div>
       
+      <div slot="footer">
+        <lib-menu-item 
+          #logoutItem
+          label="Logout" 
+          icon="signout-regular"
+          [showArrowIcon]="false"
+          [selected]="selectedItem === logoutItem"
+          (clicked)="onFooterItemClick(logoutItem)">
+        </lib-menu-item>
+      </div>
+    }
+    <!-- Settings Sub-Level -->
+    @if (sidebar?.state() === 'navigation' && isInSettingsSubLevel) {
       <lib-menu-item 
-        #dashboardItem
-        label="Dashboard" 
-        icon="home-regular" 
-        [selected]="selectedItem === dashboardItem"
-        [children]="dashboardChildren"
-        (clicked)="onItemClick(dashboardItem)">
+        #generalSettingsItem
+        label="General" 
+        icon="settings-regular"
+        [selected]="selectedSubItem === generalSettingsItem"
+        (clicked)="onSubItemClick(generalSettingsItem)">
       </lib-menu-item>
       <lib-menu-item 
-        #settingsItem
-        label="Settings" 
-        icon="settings-regular"
-        [selected]="selectedItem === settingsItem"
-        (clicked)="onItemClick(settingsItem)">
+        #privacySettingsItem
+        label="Privacy" 
+        icon="shield-regular"
+        [selected]="selectedSubItem === privacySettingsItem"
+        (clicked)="onSubItemClick(privacySettingsItem)">
       </lib-menu-item>
       <lib-menu-item 
-        #profileItem
-        label="Profile" 
-        icon="user-regular" 
-        tagLabel="New"
-        [selected]="selectedItem === profileItem"
-        (clicked)="onItemClick(profileItem)">
+        #notificationsSettingsItem
+        label="Notifications" 
+        icon="bell-regular"
+        [selected]="selectedSubItem === notificationsSettingsItem"
+        (clicked)="onSubItemClick(notificationsSettingsItem)">
       </lib-menu-item>
       <lib-menu-item 
-        #helpItem
-        label="Help" 
-        icon="question-regular"
-        [selected]="selectedItem === helpItem"
-        (clicked)="onItemClick(helpItem)">
+        #securitySettingsItem
+        label="Security" 
+        icon="lock-regular"
+        [selected]="selectedSubItem === securitySettingsItem"
+        (clicked)="onSubItemClick(securitySettingsItem)">
       </lib-menu-item>
+    }
   `,
-                    imports: [CommonModule, MenuItemComponent, MenuChildItemComponent],
+                    imports: [CommonModule, MenuItemComponent],
                     standalone: true,
                 }]
         }], propDecorators: { dashboardItem: [{
@@ -6451,8 +6672,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }], helpItem: [{
                 type: ViewChild,
                 args: ['helpItem']
+            }], generalSettingsItem: [{
+                type: ViewChild,
+                args: ['generalSettingsItem']
+            }], privacySettingsItem: [{
+                type: ViewChild,
+                args: ['privacySettingsItem']
+            }], notificationsSettingsItem: [{
+                type: ViewChild,
+                args: ['notificationsSettingsItem']
+            }], securitySettingsItem: [{
+                type: ViewChild,
+                args: ['securitySettingsItem']
             }] } });
-class SidebarExamplesComponent {
+class SidebarProgrammaticExamplesComponent {
     sidebarService = inject(SidebarService);
     openSidebarWithFooter() {
         const sidebarRef = this.sidebarService.open(SidebarWithFooterComponent, {
@@ -6462,24 +6695,12 @@ class SidebarExamplesComponent {
         });
         sidebarRef.afterClosed().then((result) => {
             if (result) {
-                console.log('✅ Sidebar result:', result);
+                console.log('Sidebar closed with result:', result);
             }
         });
     }
-    openSidebarWithHeader() {
-        const sidebarRef = this.sidebarService.open(SidebarWithHeaderComponent, {
-            onClose: (closeSidebar) => {
-                closeSidebar({ message: 'Sidebar closed successfully' });
-            }
-        });
-        sidebarRef.afterClosed().then((result) => {
-            if (result) {
-                console.log('✅ Sidebar result:', result);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SidebarExamplesComponent, isStandalone: true, selector: "lib-sidebar-examples", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarProgrammaticExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SidebarProgrammaticExamplesComponent, isStandalone: true, selector: "lib-sidebar-examples", ngImport: i0, template: `
     <div
       style="height: 90vh; padding: 24px; font-family: var(--typography-body-md-family), sans-serif;
             font-weight: var(--typography-body-md-weight);
@@ -6490,8 +6711,8 @@ class SidebarExamplesComponent {
     >
       <h2>Sidebar Service Examples</h2>
       <p>
-        This demonstrates how to use the Sidebar Service for programmatic sidebar
-        opening with dynamic component content.
+        This demonstrates how to use the Sidebar Service with two-level navigation.
+        Click on "Settings" to see the sub-navigation level.
       </p>
 
       <div style="margin: 24px 0;">
@@ -6510,127 +6731,17 @@ class SidebarExamplesComponent {
               font-size: 14px;
               font-weight: 500;
             ">
-            Open Sidebar with Footer
-          </button>
-          <button 
-            (click)="openSidebarWithHeader()"
-            style="
-              background: #17a2b8;
-              color: white;
-              border: none;
-              padding: 12px 24px;
-              border-radius: 6px;
-              cursor: pointer;
-              font-size: 14px;
-              font-weight: 500;
-            ">
-            Open Sidebar with custom Header
+            Open Sidebar with Two-Level Navigation
           </button>
         </div>
       </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #e3f2fd; border-radius: 8px; border: 1px solid #2196f3;"
-      >
-        <h3>Configuration Options Available:</h3>
-        <ul style="margin: 0; padding-left: 20px;">
-          <li><strong>title</strong>: string - Sidebar header title (if not provided, uses slot="header")</li>
-          <li><strong>state</strong>: 'default' | 'navigation' - Sidebar state (default: 'default')</li>
-          <li><strong>collapsible</strong>: boolean - Whether sidebar can be opened/closed (default: true)</li>
-          <li><strong>onClose</strong>: function - Close event handler with result parameter</li>
-        </ul>
-      </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #6c757d;"
-      >
-        <h3>Header Content Options:</h3>
-        <ul style="margin: 0; padding-left: 20px;">
-          <li><strong>With title</strong>: Pass <code>title: "My Title"</code> in config</li>
-          <li><strong>Custom HTML</strong>: Use slot="header" for any custom header content</li>
-        </ul>
-        
-        <pre style="background: #e9ecef; padding: 12px; border-radius: 4px; font-size: 12px; overflow-x: auto; margin-top: 8px;">
-// In your component template:
-  &lt;div slot="header"&gt;
-    &lt;a class="logo" [routerLink]="state.language()" tabindex="0"&gt;
-      &lt;img
-        class="logo-full"
-        ngSrc="{{ '{' }}{{ 'img/branding/logo_full.svg' }}{{ '}' }}"
-        alt="logo"
-        width="130"
-        height="32" /&gt;
-    &lt;/a&gt;
-  &lt;/div&gt;
-  
-  &lt;lib-menu-item 
-    label="Dashboard" 
-    icon="home-regular" 
-    [selected]="selectedItem === dashboardItem"
-    [children]="dashboardChildren"
-    (clicked)="onItemClick(dashboardItem)"&gt;
-  &lt;/lib-menu-item&gt;
-  &lt;lib-menu-item 
-    label="Settings" 
-    icon="settings-regular"
-    [selected]="selectedItem === settingsItem"
-    [children]="settingsChildren"
-    (clicked)="onItemClick(settingsItem)"&gt;
-  &lt;/lib-menu-item&gt;
-        </pre>
-      </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #f3e5f5; border-radius: 8px; border: 1px solid #9c27b0;"
-      >
-        <h3>Footer Content:</h3>
-        <p style="margin: 0 0 12px 0;">Use <code>[slot="footer"]</code> to add footer content:</p>
-        <pre style="background: #e9ecef; padding: 12px; border-radius: 4px; font-size: 12px; overflow-x: auto; margin-top: 8px;">
-// In your component template:
-&lt;lib-menu-item label="Dashboard" icon="home-regular"&gt;&lt;/lib-menu-item&gt;
-&lt;lib-menu-item label="Settings" icon="settings-regular"&gt;&lt;/lib-menu-item&gt;
-
-&lt;!-- Footer content --&gt;
-&lt;div slot="footer"&gt;
-  &lt;lib-menu-item 
-    label="Logout" 
-    icon="signout-regular" 
-    [showArrowIcon]="false"&gt;
-  &lt;/lib-menu-item&gt;
-&lt;/div&gt;
-        </pre>
-      </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #e8f5e8; border-radius: 8px; border: 1px solid #4caf50;"
-      >
-        <h3>Keyboard Navigation:</h3>
-        <ul style="margin: 0; padding-left: 20px;">
-          <li><strong>Arrow Down (↓)</strong>: Navigate to next item or first child</li>
-          <li><strong>Arrow Up (↑)</strong>: Navigate to previous item or parent</li>
-          <li><strong>Escape</strong>: Close sidebar</li>
-          <li><strong>Click outside</strong>: Close sidebar</li>
-        </ul>
-      </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #d1ecf1; border-radius: 8px; border: 1px solid #17a2b8;"
-      >
-        <h3>Check Console for Results:</h3>
-        <p>
-          Open your browser's developer console to see the callback results and
-          sidebar interactions.
-        </p>
-      </div>
+      
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, styles: [".sidebar-content{display:flex;flex-direction:column;height:100%;padding:24px;font-family:var(--typography-body-md-family)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--color-core-border-default)}.sidebar-header h2{margin:0;font-size:var(--typography-heading-md-size);font-weight:var(--typography-heading-md-weight);color:var(--color-core-content-default)}.sidebar-body{flex:1;display:flex;flex-direction:column;gap:24px}.user-info{display:flex;align-items:center;gap:16px}.avatar{width:48px;height:48px;border-radius:50%;background:var(--color-core-background-secondary);display:flex;align-items:center;justify-content:center}.avatar-placeholder{font-weight:600;font-size:18px;color:var(--color-core-content-default)}.user-details h3{margin:0 0 4px;font-size:var(--typography-body-lg-size);font-weight:var(--typography-body-lg-weight);color:var(--color-core-content-default)}.user-details p{margin:0;font-size:var(--typography-body-sm-size);color:var(--color-core-content-secondary)}.role{font-weight:500;color:var(--color-core-content-default)!important}.actions-section h4,.stats-section h4{margin:0 0 12px;font-size:var(--typography-body-md-size);font-weight:600;color:var(--color-core-content-default)}.action-buttons{display:flex;flex-direction:column;gap:8px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat-item{text-align:center;padding:12px;background:var(--color-core-background-secondary);border-radius:8px}.stat-value{display:block;font-size:var(--typography-heading-sm-size);font-weight:var(--typography-heading-sm-weight);color:var(--color-core-content-default)}.stat-label{display:block;font-size:var(--typography-body-xs-size);color:var(--color-core-content-secondary);margin-top:4px}.sidebar-footer{padding-top:16px;border-top:1px solid var(--color-core-border-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarExamplesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarProgrammaticExamplesComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'lib-sidebar-examples',
-                    imports: [CommonModule],
-                    template: `
+            args: [{ selector: 'lib-sidebar-examples', imports: [CommonModule], template: `
     <div
       style="height: 90vh; padding: 24px; font-family: var(--typography-body-md-family), sans-serif;
             font-weight: var(--typography-body-md-weight);
@@ -6641,8 +6752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
     >
       <h2>Sidebar Service Examples</h2>
       <p>
-        This demonstrates how to use the Sidebar Service for programmatic sidebar
-        opening with dynamic component content.
+        This demonstrates how to use the Sidebar Service with two-level navigation.
+        Click on "Settings" to see the sub-navigation level.
       </p>
 
       <div style="margin: 24px 0;">
@@ -6661,121 +6772,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
               font-size: 14px;
               font-weight: 500;
             ">
-            Open Sidebar with Footer
-          </button>
-          <button 
-            (click)="openSidebarWithHeader()"
-            style="
-              background: #17a2b8;
-              color: white;
-              border: none;
-              padding: 12px 24px;
-              border-radius: 6px;
-              cursor: pointer;
-              font-size: 14px;
-              font-weight: 500;
-            ">
-            Open Sidebar with custom Header
+            Open Sidebar with Two-Level Navigation
           </button>
         </div>
       </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #e3f2fd; border-radius: 8px; border: 1px solid #2196f3;"
-      >
-        <h3>Configuration Options Available:</h3>
-        <ul style="margin: 0; padding-left: 20px;">
-          <li><strong>title</strong>: string - Sidebar header title (if not provided, uses slot="header")</li>
-          <li><strong>state</strong>: 'default' | 'navigation' - Sidebar state (default: 'default')</li>
-          <li><strong>collapsible</strong>: boolean - Whether sidebar can be opened/closed (default: true)</li>
-          <li><strong>onClose</strong>: function - Close event handler with result parameter</li>
-        </ul>
-      </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #6c757d;"
-      >
-        <h3>Header Content Options:</h3>
-        <ul style="margin: 0; padding-left: 20px;">
-          <li><strong>With title</strong>: Pass <code>title: "My Title"</code> in config</li>
-          <li><strong>Custom HTML</strong>: Use slot="header" for any custom header content</li>
-        </ul>
-        
-        <pre style="background: #e9ecef; padding: 12px; border-radius: 4px; font-size: 12px; overflow-x: auto; margin-top: 8px;">
-// In your component template:
-  &lt;div slot="header"&gt;
-    &lt;a class="logo" [routerLink]="state.language()" tabindex="0"&gt;
-      &lt;img
-        class="logo-full"
-        ngSrc="{{ '{' }}{{ 'img/branding/logo_full.svg' }}{{ '}' }}"
-        alt="logo"
-        width="130"
-        height="32" /&gt;
-    &lt;/a&gt;
-  &lt;/div&gt;
-  
-  &lt;lib-menu-item 
-    label="Dashboard" 
-    icon="home-regular" 
-    [selected]="selectedItem === dashboardItem"
-    [children]="dashboardChildren"
-    (clicked)="onItemClick(dashboardItem)"&gt;
-  &lt;/lib-menu-item&gt;
-  &lt;lib-menu-item 
-    label="Settings" 
-    icon="settings-regular"
-    [selected]="selectedItem === settingsItem"
-    [children]="settingsChildren"
-    (clicked)="onItemClick(settingsItem)"&gt;
-  &lt;/lib-menu-item&gt;
-        </pre>
-      </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #f3e5f5; border-radius: 8px; border: 1px solid #9c27b0;"
-      >
-        <h3>Footer Content:</h3>
-        <p style="margin: 0 0 12px 0;">Use <code>[slot="footer"]</code> to add footer content:</p>
-        <pre style="background: #e9ecef; padding: 12px; border-radius: 4px; font-size: 12px; overflow-x: auto; margin-top: 8px;">
-// In your component template:
-&lt;lib-menu-item label="Dashboard" icon="home-regular"&gt;&lt;/lib-menu-item&gt;
-&lt;lib-menu-item label="Settings" icon="settings-regular"&gt;&lt;/lib-menu-item&gt;
-
-&lt;!-- Footer content --&gt;
-&lt;div slot="footer"&gt;
-  &lt;lib-menu-item 
-    label="Logout" 
-    icon="signout-regular" 
-    [showArrowIcon]="false"&gt;
-  &lt;/lib-menu-item&gt;
-&lt;/div&gt;
-        </pre>
-      </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #e8f5e8; border-radius: 8px; border: 1px solid #4caf50;"
-      >
-        <h3>Keyboard Navigation:</h3>
-        <ul style="margin: 0; padding-left: 20px;">
-          <li><strong>Arrow Down (↓)</strong>: Navigate to next item or first child</li>
-          <li><strong>Arrow Up (↑)</strong>: Navigate to previous item or parent</li>
-          <li><strong>Escape</strong>: Close sidebar</li>
-          <li><strong>Click outside</strong>: Close sidebar</li>
-        </ul>
-      </div>
-
-      <div
-        style="margin-top: 24px; padding: 20px; background: #d1ecf1; border-radius: 8px; border: 1px solid #17a2b8;"
-      >
-        <h3>Check Console for Results:</h3>
-        <p>
-          Open your browser's developer console to see the callback results and
-          sidebar interactions.
-        </p>
-      </div>
+      
     </div>
-  `,
-                }]
+  `, standalone: true, styles: [".sidebar-content{display:flex;flex-direction:column;height:100%;padding:24px;font-family:var(--typography-body-md-family)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--color-core-border-default)}.sidebar-header h2{margin:0;font-size:var(--typography-heading-md-size);font-weight:var(--typography-heading-md-weight);color:var(--color-core-content-default)}.sidebar-body{flex:1;display:flex;flex-direction:column;gap:24px}.user-info{display:flex;align-items:center;gap:16px}.avatar{width:48px;height:48px;border-radius:50%;background:var(--color-core-background-secondary);display:flex;align-items:center;justify-content:center}.avatar-placeholder{font-weight:600;font-size:18px;color:var(--color-core-content-default)}.user-details h3{margin:0 0 4px;font-size:var(--typography-body-lg-size);font-weight:var(--typography-body-lg-weight);color:var(--color-core-content-default)}.user-details p{margin:0;font-size:var(--typography-body-sm-size);color:var(--color-core-content-secondary)}.role{font-weight:500;color:var(--color-core-content-default)!important}.actions-section h4,.stats-section h4{margin:0 0 12px;font-size:var(--typography-body-md-size);font-weight:600;color:var(--color-core-content-default)}.action-buttons{display:flex;flex-direction:column;gap:8px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat-item{text-align:center;padding:12px;background:var(--color-core-background-secondary);border-radius:8px}.stat-value{display:block;font-size:var(--typography-heading-sm-size);font-weight:var(--typography-heading-sm-weight);color:var(--color-core-content-default)}.stat-label{display:block;font-size:var(--typography-body-xs-size);color:var(--color-core-content-secondary);margin-top:4px}.sidebar-footer{padding-top:16px;border-top:1px solid var(--color-core-border-default)}\n"] }]
+        }] });
+
+/**
+ * A flexible sidebar container that can be populated with any component content.
+ * The sidebar acts as an empty container that gets filled with dynamic content.
+ *
+ * @inputs
+ * - **visible**: Controls sidebar visibility (boolean)
+ *
+ * @outputs
+ * - **closed**: Emitted when sidebar is closed
+ */
+class SidebarComponent {
+    visible = input(false);
+    closed = output();
+    close() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"visible() ? 'c-sidebar--visible' : 'c-sidebar--hide'\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"close()\"\n    (keydown.escape)=\"close()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    (keydown.escape)=\"close()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Content Container -->\n    <div class=\"c-sidebar__body\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar--hide{pointer-events:none;transition:visibility 0s .33s;visibility:hidden}.c-sidebar--hide .c-sidebar__backdrop{opacity:0}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .33s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sidebar', imports: [CommonModule, NgClass], template: "<div class=\"c-sidebar\" [ngClass]=\"visible() ? 'c-sidebar--visible' : 'c-sidebar--hide'\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"close()\"\n    (keydown.escape)=\"close()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    (keydown.escape)=\"close()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Content Container -->\n    <div class=\"c-sidebar__body\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar--hide{pointer-events:none;transition:visibility 0s .33s;visibility:hidden}.c-sidebar--hide .c-sidebar__backdrop{opacity:0}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .33s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}\n"] }]
         }] });
 
 class SocialLoginComponent {
@@ -7393,5 +7420,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, BasicSidebarMenuComponent, BreadcrumbComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, DropdownActionComponent, DropdownActionTriggerDirective, DropdownSelectComponent, DropdownSelectTriggerDirective, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkActionComponent, LinkComponent, MenuChildItemComponent, MenuItemComponent, ModalComponent, ModalService, OverlayComponent, OverlayTriggerDirective, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SidebarComponent, SidebarExamplesComponent, SidebarService, SidebarWithFooterComponent, SidebarWithHeaderComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent, TooltipDirective, TooltipPosition };
+export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, BasicSidebarMenuComponent, BreadcrumbComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, DropdownActionComponent, DropdownActionTriggerDirective, DropdownSelectComponent, DropdownSelectTriggerDirective, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkActionComponent, LinkComponent, MenuChildItemComponent, MenuItemComponent, ModalComponent, ModalService, OverlayComponent, OverlayTriggerDirective, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SidebarComponent, SidebarProgrammaticComponent, SidebarProgrammaticExamplesComponent, SidebarService, SidebarWithFooterComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent, TooltipDirective, TooltipPosition };
 //# sourceMappingURL=crowdfarming-oliva-ds.mjs.map