@design-system-rte/angular 1.2.1-rc.1 → 1.2.1-rc4

package/fesm2022/design-system-rte-angular.mjs

@@ -7,10 +7,10 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
 import { isValidIconName as isValidIconName$1 } from '@design-system-rte/core/components/icon/icon-utils';
 import { labelSize } from '@design-system-rte/core/components/radio-button/radio-button.constants';
+import { getAutoPlacement, getCoordinates, dividerAppearanceBySideNavAppearance as dividerAppearanceBySideNavAppearance$1 } from '@design-system-rte/core';
 import { TOOLTIP_GAP, TOOLTIP_FADE_OUT_DURATION } from '@design-system-rte/core/components/tooltip/tooltip.constants';
 import { getTooltipGap } from '@design-system-rte/core/components/tooltip/tooltip.utils';
-import { getAutoPlacement, getCoordinates, getAutoPlacementDropdown, getAutoAlignment } from '@design-system-rte/core/components/utils/auto-placement';
-import { FOCUSABLE_ELEMENTS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
+import { FOCUSABLE_ELEMENTS_QUERY, FOCUSABLE_BUTTONS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
 import { getShowIcon, getShowText, getDisplayCount, getBadgeIconSize, getShowBadge, shouldDisplayBadge } from '@design-system-rte/core/components/badge/badge.utils';
 import { splitButtonLeftIconSize, splitButtonRightIconSize } from '@design-system-rte/core/components/split-button/split-button.constants';
 import { SPACE_KEY, ENTER_KEY, ARROW_DOWN_KEY, ARROW_UP_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ESCAPE_KEY, TAB_KEY, BACKSPACE_KEY, DELETE_KEY } from '@design-system-rte/core/constants/keyboard/keyboard.constants';
@@ -18,8 +18,10 @@ import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { waitForNextFrame } from '@design-system-rte/core/common/animation';
 import { DROPDOWN_ANIMATION_DURATION } from '@design-system-rte/core/components/dropdown/dropdown.constants';
+import { getAutoPlacementDropdown, getAutoAlignment, getCoordinates as getCoordinates$1, getAutoPlacement as getAutoPlacement$1 } from '@design-system-rte/core/components/utils/auto-placement';
 import { DropdownManager } from '@design-system-rte/core/components/dropdown/DropdownManager';
 import { ButtonIconSize } from '@design-system-rte/core/components/button/common/common-button.constants';
+import { loaderSize } from '@design-system-rte/core/components/loader/loader.constants';
 import { CHIP_TYPE_TO_ARIA_ROLE_MAP } from '@design-system-rte/core/components/chip/chip.constants';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { REQUIREMENT_INDICATOR_VALUE } from '@design-system-rte/core/components/required-indicator/required-indicator.constant';
@@ -34,6 +36,7 @@ import { IconSize, IconTypeMap } from '@design-system-rte/core/components/icon/i
 import { APPEARANCE_CONFIG, SEARCHBAR_BORDER_RADIUS, SEARCHBAR_PADDING_LEFT, SEARCHBAR_BUTTON_WIDTH, SEARCHBAR_BUTTON_HEIGHT_COMPACT } from '@design-system-rte/core/components/searchbar/searchbar.constants';
 import { sideNavCollapsedSize, sideNavPanelSize, dividerAppearanceBySideNavAppearance } from '@design-system-rte/core/components/side-nav/side-nav.constants';
 import { getNavItemLabelIconSize } from '@design-system-rte/core/components/side-nav/nav-item/nav-item.utils';
+import { isStepClickable, focusPreviousNotStepElement, focusNextNotStepElement, focusNextStepElement, focusPreviousStepElement } from '@design-system-rte/core/components/stepper/stepper.utils';
 import { ToastDurationMap } from '@design-system-rte/core/components/toast/toast.constants';
 import { getToastPriority } from '@design-system-rte/core/components/toast/toast.utils';
 import { v4 } from 'uuid';
@@ -532,11 +535,11 @@ class RadioButtonComponent {
         this.isDisplayed = computed(() => !(this.disabled() && this.error()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n  <input\n    type=\"radio\"\n    class=\"rte-radio-button\"\n    [id]=\"label()\"\n    [value]=\"label()\"\n    [size]=\"labelSize\"\n    [name]=\"groupName()\"\n    [ngClass]=\"{ error: error(), 'read-only': readOnly() }\"\n    [disabled]=\"disabled()\"\n  />\n  <label\n    *ngIf=\"showLabel()\"\n    class=\"rte-radio-button-label\"\n    [for]=\"label()\"\n    [ngClass]=\"{\n      error: error(),\n      'read-only': readOnly(),\n      disabled: disabled(),\n    }\"\n  >\n    {{ label() }}\n  </label>\n</div>\n", styles: [".rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger-default);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger-default)}.rte-radio-button.error:before{background:var(--content-danger-default)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger-default)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  *ngIf=\"isDisplayed()\"\n  class=\"rte-radio-button-container\"\n  [ngClass]=\"{ 'read-only': readOnly(), disabled: disabled() }\"\n>\n  <input\n    type=\"radio\"\n    class=\"rte-radio-button\"\n    [id]=\"label()\"\n    [value]=\"label()\"\n    [size]=\"labelSize\"\n    [name]=\"groupName()\"\n    [ngClass]=\"{ error: error(), 'read-only': readOnly() }\"\n    [disabled]=\"disabled()\"\n  />\n  <div\n    class=\"rte-radio-button-background\"\n    [ngClass]=\"{ error: error(), 'read-only': readOnly(), disabled: disabled() }\"\n  >\n    <div class=\"rte-radio-button-outer\"></div>\n    <div class=\"rte-radio-button-inner\"></div>\n  </div>\n  <label\n    *ngIf=\"showLabel()\"\n    class=\"rte-radio-button-label\"\n    [for]=\"label()\"\n    [ngClass]=\"{\n      error: error(),\n      'read-only': readOnly(),\n      disabled: disabled(),\n    }\"\n  >\n    {{ label() }}\n  </label>\n</div>\n", styles: [".rte-radio-button-container{display:flex;align-items:center;gap:12px;cursor:pointer}.rte-radio-button-container.read-only{cursor:default}.rte-radio-button-container.disabled{cursor:not-allowed}.rte-radio-button-container .rte-radio-button{cursor:pointer;appearance:none;position:absolute;display:flex;width:28px;height:16px;padding:0;justify-content:center;border-radius:999px;transition:box-shadow .3s ease-in-out;margin:0;z-index:1}.rte-radio-button-container .rte-radio-button.error{transition:box-shadow .3s ease-in-out}.rte-radio-button-container .rte-radio-button.error+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:checked+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:hover+.rte-radio-button-background .rte-radio-button-outer{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button-container .rte-radio-button.error:hover:checked+.rte-radio-button-background .rte-radio-button-outer{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button-container .rte-radio-button.read-only{cursor:default;pointer-events:none}.rte-radio-button-container .rte-radio-button.read-only:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-tertiary)}.rte-radio-button-container .rte-radio-button.read-only:checked+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-tertiary)}.rte-radio-button-container .rte-radio-button.read-only.error+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button:hover+.rte-radio-button-background .rte-radio-button-outer{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button-container .rte-radio-button:hover:checked+.rte-radio-button-background .rte-radio-button-outer{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button-container .rte-radio-button:hover:disabled+.rte-radio-button-background .rte-radio-button-outer{box-shadow:none}.rte-radio-button-container .rte-radio-button:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-brand-default)}.rte-radio-button-container .rte-radio-button:checked+.rte-radio-button-background .rte-radio-button-inner{opacity:100%}.rte-radio-button-container .rte-radio-button:disabled{cursor:not-allowed}.rte-radio-button-container .rte-radio-button:disabled+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-disabled)}.rte-radio-button-container .rte-radio-button:disabled+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-disabled)}.rte-radio-button-container .rte-radio-button:focus-visible{outline:none}.rte-radio-button-container .rte-radio-button:focus-visible:after{border-radius:4px;content:\"\";position:absolute;top:-4px;left:-4px;width:24px;height:24px;outline:1px solid var(--border-brand-focused)}.rte-radio-button-container .rte-radio-button-background{display:inline-block;width:16px;height:16px;box-sizing:content-box;position:relative}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-outer,.rte-radio-button-container .rte-radio-button-background .rte-radio-button-inner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:999px;box-sizing:border-box}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-tertiary);box-shadow:none}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-inner{background:var(--content-brand-default);transform:scale(.6);opacity:0%}.rte-radio-button-container .rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-container .rte-radio-button-label:hover{cursor:pointer}.rte-radio-button-container .rte-radio-button-label.read-only{pointer-events:none;color:var(--content-tertiary)}.rte-radio-button-container .rte-radio-button-label.disabled{cursor:not-allowed;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n  <input\n    type=\"radio\"\n    class=\"rte-radio-button\"\n    [id]=\"label()\"\n    [value]=\"label()\"\n    [size]=\"labelSize\"\n    [name]=\"groupName()\"\n    [ngClass]=\"{ error: error(), 'read-only': readOnly() }\"\n    [disabled]=\"disabled()\"\n  />\n  <label\n    *ngIf=\"showLabel()\"\n    class=\"rte-radio-button-label\"\n    [for]=\"label()\"\n    [ngClass]=\"{\n      error: error(),\n      'read-only': readOnly(),\n      disabled: disabled(),\n    }\"\n  >\n    {{ label() }}\n  </label>\n</div>\n", styles: [".rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger-default);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger-default)}.rte-radio-button.error:before{background:var(--content-danger-default)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger-default)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
+            args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"isDisplayed()\"\n  class=\"rte-radio-button-container\"\n  [ngClass]=\"{ 'read-only': readOnly(), disabled: disabled() }\"\n>\n  <input\n    type=\"radio\"\n    class=\"rte-radio-button\"\n    [id]=\"label()\"\n    [value]=\"label()\"\n    [size]=\"labelSize\"\n    [name]=\"groupName()\"\n    [ngClass]=\"{ error: error(), 'read-only': readOnly() }\"\n    [disabled]=\"disabled()\"\n  />\n  <div\n    class=\"rte-radio-button-background\"\n    [ngClass]=\"{ error: error(), 'read-only': readOnly(), disabled: disabled() }\"\n  >\n    <div class=\"rte-radio-button-outer\"></div>\n    <div class=\"rte-radio-button-inner\"></div>\n  </div>\n  <label\n    *ngIf=\"showLabel()\"\n    class=\"rte-radio-button-label\"\n    [for]=\"label()\"\n    [ngClass]=\"{\n      error: error(),\n      'read-only': readOnly(),\n      disabled: disabled(),\n    }\"\n  >\n    {{ label() }}\n  </label>\n</div>\n", styles: [".rte-radio-button-container{display:flex;align-items:center;gap:12px;cursor:pointer}.rte-radio-button-container.read-only{cursor:default}.rte-radio-button-container.disabled{cursor:not-allowed}.rte-radio-button-container .rte-radio-button{cursor:pointer;appearance:none;position:absolute;display:flex;width:28px;height:16px;padding:0;justify-content:center;border-radius:999px;transition:box-shadow .3s ease-in-out;margin:0;z-index:1}.rte-radio-button-container .rte-radio-button.error{transition:box-shadow .3s ease-in-out}.rte-radio-button-container .rte-radio-button.error+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:checked+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-danger-default)}.rte-radio-button-container .rte-radio-button.error:hover+.rte-radio-button-background .rte-radio-button-outer{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button-container .rte-radio-button.error:hover:checked+.rte-radio-button-background .rte-radio-button-outer{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button-container .rte-radio-button.read-only{cursor:default;pointer-events:none}.rte-radio-button-container .rte-radio-button.read-only:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-tertiary)}.rte-radio-button-container .rte-radio-button.read-only:checked+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-tertiary)}.rte-radio-button-container .rte-radio-button.read-only.error+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-danger-default)}.rte-radio-button-container .rte-radio-button:hover+.rte-radio-button-background .rte-radio-button-outer{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button-container .rte-radio-button:hover:checked+.rte-radio-button-background .rte-radio-button-outer{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button-container .rte-radio-button:hover:disabled+.rte-radio-button-background .rte-radio-button-outer{box-shadow:none}.rte-radio-button-container .rte-radio-button:checked+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-brand-default)}.rte-radio-button-container .rte-radio-button:checked+.rte-radio-button-background .rte-radio-button-inner{opacity:100%}.rte-radio-button-container .rte-radio-button:disabled{cursor:not-allowed}.rte-radio-button-container .rte-radio-button:disabled+.rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-disabled)}.rte-radio-button-container .rte-radio-button:disabled+.rte-radio-button-background .rte-radio-button-inner{background:var(--content-disabled)}.rte-radio-button-container .rte-radio-button:focus-visible{outline:none}.rte-radio-button-container .rte-radio-button:focus-visible:after{border-radius:4px;content:\"\";position:absolute;top:-4px;left:-4px;width:24px;height:24px;outline:1px solid var(--border-brand-focused)}.rte-radio-button-container .rte-radio-button-background{display:inline-block;width:16px;height:16px;box-sizing:content-box;position:relative}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-outer,.rte-radio-button-container .rte-radio-button-background .rte-radio-button-inner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:999px;box-sizing:border-box}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-outer{border:1px solid var(--content-tertiary);box-shadow:none}.rte-radio-button-container .rte-radio-button-background .rte-radio-button-inner{background:var(--content-brand-default);transform:scale(.6);opacity:0%}.rte-radio-button-container .rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-container .rte-radio-button-label:hover{cursor:pointer}.rte-radio-button-container .rte-radio-button-label.read-only{pointer-events:none;color:var(--content-tertiary)}.rte-radio-button-container .rte-radio-button-label.disabled{cursor:not-allowed;color:var(--content-disabled)}\n"] }]
         }] });
 
 class RadioButtonGroupComponent {
@@ -1367,6 +1370,13 @@ class DropdownDirective {
                     this.dropdownMenuRef = null;
                     this.removeClickOutsideListener();
                     dropdownStateSubscription.unsubscribe();
+                    const buttonTrigger = this.trigger()?.elementRef.nativeElement.querySelectorAll(FOCUSABLE_BUTTONS_QUERY)[0];
+                    if (buttonTrigger) {
+                        buttonTrigger.focus();
+                    }
+                    else {
+                        this.trigger()?.elementRef.nativeElement.focus();
+                    }
                 }
             }
         });
@@ -1403,7 +1413,7 @@ class DropdownDirective {
                 this.cdr.detectChanges();
                 const computedPosition = position === "auto" ? getAutoPlacementDropdown(triggerElement, dropdownMenuElement, "bottom") : position;
                 const autoAlignment = this.rteDropdownAlignment() ?? getAutoAlignment(triggerElement, dropdownMenuElement, computedPosition);
-                const computedCoordinates = getCoordinates(computedPosition, triggerElement, dropdownMenuElement.children[0], this.rteDropdownOffset(), autoAlignment);
+                const computedCoordinates = getCoordinates$1(computedPosition, triggerElement, dropdownMenuElement.children[0], this.rteDropdownOffset(), autoAlignment);
                 this.renderer.setStyle(dropdownMenuElement, "top", `${computedCoordinates.top}px`);
                 this.renderer.setStyle(dropdownMenuElement, "left", `${computedCoordinates.left}px`);
                 this.renderer.setStyle(dropdownMenuElement, "opacity", "1");
@@ -1627,6 +1637,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "rte-icon-button-toggle", imports: [CommonModule, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-icon-button\n  [size]=\"size()\"\n  [name]=\"name()\"\n  [compactSpacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaLabelledBy]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n  (clickEvent)=\"onClick($event)\"\n/>\n" }]
         }] });
 
+class LoaderComponent {
+    constructor() {
+        this.appearance = input("brand");
+        this.size = input("medium");
+        this.showLabel = input(true);
+        this.label = input("");
+        this.labelPosition = input("right");
+        this.sizeOfLoader = computed(() => loaderSize[this.size() || "medium"]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoaderComponent, isStandalone: true, selector: "rte-loader", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-loader appearance--{{ appearance() }} labelPosition--{{ labelPosition() }}\">\n  @if (appearance() === \"brand\") {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"svgLoader\"\n      viewBox=\"0 0 48 48\"\n      fill=\"none\"\n      [style.width]=\"sizeOfLoader()\"\n      [style.height]=\"sizeOfLoader()\"\n    >\n      <g clip-path=\"url(#paint0_angular_4434_67_clip_path)\" data-figma-skip-parse=\"true\">\n        <g transform=\"matrix(0.0240793 7.6297e-08 -7.62968e-08 0.0240017 24.0001 24.0003)\">\n          <foreignObject x=\"-999.939\" y=\"-999.939\" width=\"1999.88\" height=\"1999.88\"\n            ><div\n              xmlns=\"http://www.w3.org/1999/xhtml\"\n              style=\"\n                background: conic-gradient(from 90deg, rgba(41, 100, 160, 0) 0deg, rgba(41, 100, 160, 1) 360deg);\n                height: 100%;\n                width: 100%;\n                opacity: 1;\n              \"\n            ></div\n          ></foreignObject>\n        </g>\n      </g>\n      <path\n        d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n        data-figma-gradient-fill='{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":1.0},\"position\":1.0}],\"stopsVar\":[{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":1.0},\"position\":1.0}],\"transform\":{\"m00\":48.158504486083984,\"m01\":-0.00015259353676810861,\"m02\":-0.079098686575889587,\"m10\":0.00015259397332556546,\"m11\":48.003398895263672,\"m12\":-0.0015066617634147406},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}'\n      />\n      <defs>\n        <clipPath id=\"paint0_angular_4434_67_clip_path\">\n          <path\n            d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  } @else {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"svgLoader\"\n      viewBox=\"0 0 48 48\"\n      fill=\"none\"\n      [style.width]=\"sizeOfLoader()\"\n      [style.height]=\"sizeOfLoader()\"\n    >\n      <g clip-path=\"url(#paint0_angular_4434_1033_clip_path)\" data-figma-skip-parse=\"true\">\n        <g transform=\"matrix(0.0240793 7.6297e-08 -7.62968e-08 0.0240017 24.0001 24.0003)\">\n          <foreignObject x=\"-999.939\" y=\"-999.939\" width=\"1999.88\" height=\"1999.88\"\n            ><div\n              xmlns=\"http://www.w3.org/1999/xhtml\"\n              style=\"\n                background: conic-gradient(from 90deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 1) 360deg);\n                height: 100%;\n                width: 100%;\n                opacity: 1;\n              \"\n            ></div\n          ></foreignObject>\n        </g>\n      </g>\n      <path\n        d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n        data-figma-gradient-fill='{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":1.0},\"position\":1.0}],\"stopsVar\":[{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":1.0},\"position\":1.0}],\"transform\":{\"m00\":48.158504486083984,\"m01\":-0.00015259353676810861,\"m02\":-0.079098686575889587,\"m10\":0.00015259397332556546,\"m11\":48.003398895263672,\"m12\":-0.0015066617634147406},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}'\n      />\n      <defs>\n        <clipPath id=\"paint0_angular_4434_1033_clip_path\">\n          <path\n            d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  }\n  @if (showLabel()) {\n    <span class=\"loaderLabel appearance--{{ appearance() }} size--{{ size() }}\" role=\"status\" aria-live=\"polite\">{{\n      label()\n    }}</span>\n  }\n</div>\n", styles: [".rte-loader{width:fit-content;height:auto;display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;animation:fade-in .15s linear}.rte-loader.labelPosition--under{flex-direction:column;padding:0;gap:8px}.rte-loader .svgLoader{animation:spin 2s infinite linear}.rte-loader .loaderLabel{color:var(--content-brand-default);word-wrap:break-word}.rte-loader .loaderLabel.appearance--reverse{color:var(--content-primary-inverse)}.rte-loader .loaderLabel.size--small{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:10px;line-height:14px;letter-spacing:0px}.rte-loader .loaderLabel.size--medium{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px}.rte-loader .loaderLabel.size--large{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-loader", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-loader appearance--{{ appearance() }} labelPosition--{{ labelPosition() }}\">\n  @if (appearance() === \"brand\") {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"svgLoader\"\n      viewBox=\"0 0 48 48\"\n      fill=\"none\"\n      [style.width]=\"sizeOfLoader()\"\n      [style.height]=\"sizeOfLoader()\"\n    >\n      <g clip-path=\"url(#paint0_angular_4434_67_clip_path)\" data-figma-skip-parse=\"true\">\n        <g transform=\"matrix(0.0240793 7.6297e-08 -7.62968e-08 0.0240017 24.0001 24.0003)\">\n          <foreignObject x=\"-999.939\" y=\"-999.939\" width=\"1999.88\" height=\"1999.88\"\n            ><div\n              xmlns=\"http://www.w3.org/1999/xhtml\"\n              style=\"\n                background: conic-gradient(from 90deg, rgba(41, 100, 160, 0) 0deg, rgba(41, 100, 160, 1) 360deg);\n                height: 100%;\n                width: 100%;\n                opacity: 1;\n              \"\n            ></div\n          ></foreignObject>\n        </g>\n      </g>\n      <path\n        d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n        data-figma-gradient-fill='{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":1.0},\"position\":1.0}],\"stopsVar\":[{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":0.16078431904315948,\"g\":0.39215686917304993,\"b\":0.62745100259780884,\"a\":1.0},\"position\":1.0}],\"transform\":{\"m00\":48.158504486083984,\"m01\":-0.00015259353676810861,\"m02\":-0.079098686575889587,\"m10\":0.00015259397332556546,\"m11\":48.003398895263672,\"m12\":-0.0015066617634147406},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}'\n      />\n      <defs>\n        <clipPath id=\"paint0_angular_4434_67_clip_path\">\n          <path\n            d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  } @else {\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"svgLoader\"\n      viewBox=\"0 0 48 48\"\n      fill=\"none\"\n      [style.width]=\"sizeOfLoader()\"\n      [style.height]=\"sizeOfLoader()\"\n    >\n      <g clip-path=\"url(#paint0_angular_4434_1033_clip_path)\" data-figma-skip-parse=\"true\">\n        <g transform=\"matrix(0.0240793 7.6297e-08 -7.62968e-08 0.0240017 24.0001 24.0003)\">\n          <foreignObject x=\"-999.939\" y=\"-999.939\" width=\"1999.88\" height=\"1999.88\"\n            ><div\n              xmlns=\"http://www.w3.org/1999/xhtml\"\n              style=\"\n                background: conic-gradient(from 90deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 1) 360deg);\n                height: 100%;\n                width: 100%;\n                opacity: 1;\n              \"\n            ></div\n          ></foreignObject>\n        </g>\n      </g>\n      <path\n        d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n        data-figma-gradient-fill='{\"type\":\"GRADIENT_ANGULAR\",\"stops\":[{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":1.0},\"position\":1.0}],\"stopsVar\":[{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":0.0},\"position\":0.0},{\"color\":{\"r\":1.0,\"g\":1.0,\"b\":1.0,\"a\":1.0},\"position\":1.0}],\"transform\":{\"m00\":48.158504486083984,\"m01\":-0.00015259353676810861,\"m02\":-0.079098686575889587,\"m10\":0.00015259397332556546,\"m11\":48.003398895263672,\"m12\":-0.0015066617634147406},\"opacity\":1.0,\"blendMode\":\"NORMAL\",\"visible\":true}'\n      />\n      <defs>\n        <clipPath id=\"paint0_angular_4434_1033_clip_path\">\n          <path\n            d=\"M23.9269 0.000388189C30.296 -0.0295367 36.417 2.4654 40.9454 6.93691C44.9866 10.9275 47.4648 16.2012 47.9796 21.809C48.0828 22.9328 47.1647 23.8555 46.0363 23.8627C44.9079 23.8698 43.998 22.958 43.8751 21.8363C43.3798 17.3109 41.3426 13.0674 38.0714 9.8373C34.3129 6.12602 29.2327 4.05571 23.9464 4.08047C18.66 4.10534 13.5995 6.22361 9.87609 9.97011C6.1527 13.7167 4.07043 18.7851 4.08703 24.0629C4.10364 29.3406 6.21709 34.3964 9.96399 38.1195C13.7109 41.8427 18.7849 43.9286 24.0714 43.9203C29.3579 43.912 34.4251 41.8095 38.1603 38.0746C41.4109 34.8241 43.422 30.5687 43.8888 26.0404C44.0045 24.918 44.9079 24.0006 46.0363 24.0004C47.1648 24.0004 48.0893 24.917 47.9933 26.0414C47.5138 31.6525 45.068 36.9416 41.0519 40.9574C36.5518 45.4572 30.4473 47.9903 24.0782 48.0004C17.709 48.0104 11.5955 45.4969 7.08117 41.0111C2.56686 36.5254 0.0201276 30.4343 0.000118312 24.0756C-0.0198507 17.7169 2.48874 11.61 6.97473 7.09609C11.4607 2.58224 17.5578 0.0303524 23.9269 0.000388189Z\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  }\n  @if (showLabel()) {\n    <span class=\"loaderLabel appearance--{{ appearance() }} size--{{ size() }}\" role=\"status\" aria-live=\"polite\">{{\n      label()\n    }}</span>\n  }\n</div>\n", styles: [".rte-loader{width:fit-content;height:auto;display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;animation:fade-in .15s linear}.rte-loader.labelPosition--under{flex-direction:column;padding:0;gap:8px}.rte-loader .svgLoader{animation:spin 2s infinite linear}.rte-loader .loaderLabel{color:var(--content-brand-default);word-wrap:break-word}.rte-loader .loaderLabel.appearance--reverse{color:var(--content-primary-inverse)}.rte-loader .loaderLabel.size--small{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:10px;line-height:14px;letter-spacing:0px}.rte-loader .loaderLabel.size--medium{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px}.rte-loader .loaderLabel.size--large{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }] });
+
 class BaseTextInputComponent {
     constructor() {
         this.id = input();
@@ -1907,8 +1934,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "rte-switch", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"switch-container appearance-{{ appearance() }}\"\n  [ngClass]=\"{\n    disabled: disabled(),\n    'read-only': readOnly(),\n    checked: isChecked(),\n  }\"\n  (click)=\"handleClick($event)\"\n>\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    class=\"switch\"\n    [attr.aria-checked]=\"isChecked()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-readonly]=\"readOnly()\"\n    [ariaLabel]=\"label()\"\n    [name]=\"label()\"\n    [ngClass]=\"{\n      disabled: disabled(),\n      'read-only': readOnly(),\n      checked: isChecked(),\n    }\"\n    [style.min-height.px]=\"switchHeight\"\n    [style.min-width.px]=\"switchWidth\"\n    [disabled]=\"disabled()\"\n    [checked]=\"isChecked()\"\n  />\n  <div class=\"switch-icon-check\" [ngClass]=\"{ checked: isChecked() }\" (click)=\"handleClick($event)\">\n    @if (showIcon()) {\n      <rte-icon\n        class=\"icon\"\n        [name]=\"isChecked() ? 'check' : 'close'\"\n        [size]=\"16\"\n        (click)=\"handleClick($event)\"\n      ></rte-icon>\n    }\n  </div>\n  @if (showLabel() && label()) {\n    <label class=\"switch-label\" [for]=\"label()\">\n      {{ label() }}\n    </label>\n  }\n</div>\n", styles: [".switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\n"] }]
         }] });
 
-const segmentClass = "rte-segment";
-const segmentSelector = `.${segmentClass}`;
+const segmentClass$1 = "rte-segment";
+const segmentSelector = `.${segmentClass$1}`;
 class SegmentedControlComponent {
     constructor() {
         this.options = input([]);
@@ -1992,10 +2019,10 @@ class SegmentedControlComponent {
             const currentActiveElement = document.activeElement;
             const currentIndex = allFocusableElements.indexOf(currentActiveElement);
             if (event.shiftKey) {
-                focusPreviousNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
+                focusPreviousNotSegmentElement(currentIndex, allFocusableElements, segmentClass$1);
             }
             else {
-                focusNextNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
+                focusNextNotSegmentElement(currentIndex, allFocusableElements, segmentClass$1);
             }
         }
     }
@@ -2384,7 +2411,7 @@ class PopoverDirective {
         if (this.popoverRef) {
             const popoverElement = this.popoverRef.location.nativeElement.children[0];
             const position = this.rtePopoverPosition() === "auto"
-                ? getAutoPlacement(this.hostElement, popoverElement, "top", this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP)
+                ? getAutoPlacement$1(this.hostElement, popoverElement, "top", this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP)
                 : this.rtePopoverPosition();
             this.popoverRef.setInput("title", this.rtePopoverTitle());
             this.popoverRef.setInput("content", this.rtePopoverContent());
@@ -2410,7 +2437,7 @@ class PopoverDirective {
             const popoverElement = this.popoverRef.location.nativeElement.children[0];
             const autoAlignment = getAutoAlignment(this.hostElement, popoverElement, this.popoverRef.instance.position());
             this.popoverRef.setInput("alignment", autoAlignment);
-            const positions = getCoordinates(this.popoverRef.instance.position(), this.hostElement, popoverElement, this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP, autoAlignment);
+            const positions = getCoordinates$1(this.popoverRef.instance.position(), this.hostElement, popoverElement, this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP, autoAlignment);
             this.renderer.setStyle(this.hostElement, "position", "relative");
             this.renderer.setStyle(popoverElement, "position", "absolute");
             this.renderer.setStyle(popoverElement, "top", `${positions.top}px`);
@@ -2820,11 +2847,11 @@ class NavItemComponent {
         this.focused.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavItemComponent, isStandalone: true, selector: "rte-nav-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (collapsed() && label()) {\n  <div\n    class=\"nav-item-container {{ appearance() }}\"\n    rteTooltip\n    rteTooltipPosition=\"right\"\n    rteTooltipAlignment=\"center\"\n    [id]=\"id()\"\n    [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n    [attr.role]=\"role()\"\n    [rteTooltip]=\"label()\"\n    [rteTooltipArrow]=\"false\"\n    [rteTooltipGap]=\"12\"\n    [rteTooltipShouldFocusTrigger]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n  </div>\n} @else {\n  <div\n    class=\"nav-item-container {{ appearance() }}\"\n    [id]=\"id()\"\n    [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n    [attr.role]=\"role()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n  </div>\n}\n\n<ng-template #contentTemplate>\n  @if (link()) {\n    <a\n      class=\"nav-item\"\n      [href]=\"link()!\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n    >\n      <div class=\"nav-item-left\">\n        @if (showIcon() && icon()) {\n          <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n        }\n        @if (!collapsed()) {\n          <span>{{ label() }}</span>\n        }\n      </div>\n      <div class=\"nav-item-right\">\n        @if (badge()) {\n          <rte-badge\n            [badgeType]=\"badge()!.badgeType || 'brand'\"\n            [badgeSize]=\"badge()!.size || 'm'\"\n            [badgeContent]=\"badge()!.content || 'number'\"\n            [count]=\"badge()!.count\"\n            [icon]=\"badge()!.icon || 'notification'\"\n            [simpleBadge]=\"true\"\n          />\n        }\n      </div>\n    </a>\n  } @else {\n    <span\n      class=\"nav-item\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-label]=\"label()\"\n      (click)=\"handleClick($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n    >\n      <div class=\"nav-item-left\">\n        @if (showIcon() && icon()) {\n          <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n        }\n        @if (!collapsed()) {\n          <span>{{ label() }}</span>\n        }\n      </div>\n      <div class=\"nav-item-right\">\n        @if (badge()) {\n          <rte-badge\n            [badgeType]=\"badge()!.badgeType || 'brand'\"\n            [badgeSize]=\"badge()!.size || 'm'\"\n            [badgeContent]=\"badge()!.content || 'number'\"\n            [count]=\"badge()!.count\"\n            [icon]=\"badge()!.icon || 'notification'\"\n            [simpleBadge]=\"true\"\n          />\n        }\n      </div>\n    </span>\n  }\n</ng-template>\n", styles: [".nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavItemComponent, isStandalone: true, selector: "rte-nav-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (collapsed() && label()) {\n  @if (link()) {\n    <a\n      class=\"nav-item-container {{ appearance() }}\"\n      rteTooltip\n      rteTooltipPosition=\"right\"\n      rteTooltipAlignment=\"center\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [rteTooltip]=\"label()\"\n      [rteTooltipArrow]=\"false\"\n      [rteTooltipGap]=\"12\"\n      [rteTooltipShouldFocusTrigger]=\"true\"\n      [href]=\"link()!\"\n      [attr.aria-label]=\"label()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </a>\n  } @else {\n    <div\n      class=\"nav-item-container {{ appearance() }}\"\n      rteTooltip\n      rteTooltipPosition=\"right\"\n      rteTooltipAlignment=\"center\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [rteTooltip]=\"label()\"\n      [rteTooltipArrow]=\"false\"\n      [rteTooltipGap]=\"12\"\n      [rteTooltipShouldFocusTrigger]=\"false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </div>\n  }\n} @else {\n  @if (link()) {\n    <a\n      class=\"nav-item-container {{ appearance() }}\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [href]=\"link()!\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </a>\n  } @else {\n    <div\n      class=\"nav-item-container {{ appearance() }}\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </div>\n  }\n}\n\n<ng-template #contentTemplate>\n  <span\n    class=\"nav-item\"\n    [attr.tabindex]=\"link() ? undefined : tabIndex()\"\n    [attr.aria-label]=\"label()\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"nav-item-left\">\n      @if (showIcon() && icon()) {\n        <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n      }\n      @if (!collapsed()) {\n        <span>{{ label() }}</span>\n      }\n    </div>\n    <div class=\"nav-item-right\">\n      @if (badge()) {\n        <rte-badge\n          [badgeType]=\"badge()!.badgeType || 'brand'\"\n          [badgeSize]=\"badge()!.size || 'm'\"\n          [badgeContent]=\"badge()!.content || 'number'\"\n          [count]=\"badge()!.count\"\n          [icon]=\"badge()!.icon || 'notification'\"\n          [simpleBadge]=\"true\"\n        />\n      }\n    </div>\n  </span>\n</ng-template>\n", styles: [".nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container:link,.nav-item-container:visited,.nav-item-container:link:hover,.nav-item-container:visited:hover{text-decoration:none;color:inherit}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.nav-item-container:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-nav-item", imports: [CommonModule, IconComponent, BadgeComponent, TooltipDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (collapsed() && label()) {\n  <div\n    class=\"nav-item-container {{ appearance() }}\"\n    rteTooltip\n    rteTooltipPosition=\"right\"\n    rteTooltipAlignment=\"center\"\n    [id]=\"id()\"\n    [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n    [attr.role]=\"role()\"\n    [rteTooltip]=\"label()\"\n    [rteTooltipArrow]=\"false\"\n    [rteTooltipGap]=\"12\"\n    [rteTooltipShouldFocusTrigger]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n  </div>\n} @else {\n  <div\n    class=\"nav-item-container {{ appearance() }}\"\n    [id]=\"id()\"\n    [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n    [attr.role]=\"role()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n  </div>\n}\n\n<ng-template #contentTemplate>\n  @if (link()) {\n    <a\n      class=\"nav-item\"\n      [href]=\"link()!\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-label]=\"label()\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n    >\n      <div class=\"nav-item-left\">\n        @if (showIcon() && icon()) {\n          <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n        }\n        @if (!collapsed()) {\n          <span>{{ label() }}</span>\n        }\n      </div>\n      <div class=\"nav-item-right\">\n        @if (badge()) {\n          <rte-badge\n            [badgeType]=\"badge()!.badgeType || 'brand'\"\n            [badgeSize]=\"badge()!.size || 'm'\"\n            [badgeContent]=\"badge()!.content || 'number'\"\n            [count]=\"badge()!.count\"\n            [icon]=\"badge()!.icon || 'notification'\"\n            [simpleBadge]=\"true\"\n          />\n        }\n      </div>\n    </a>\n  } @else {\n    <span\n      class=\"nav-item\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-label]=\"label()\"\n      (click)=\"handleClick($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n    >\n      <div class=\"nav-item-left\">\n        @if (showIcon() && icon()) {\n          <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n        }\n        @if (!collapsed()) {\n          <span>{{ label() }}</span>\n        }\n      </div>\n      <div class=\"nav-item-right\">\n        @if (badge()) {\n          <rte-badge\n            [badgeType]=\"badge()!.badgeType || 'brand'\"\n            [badgeSize]=\"badge()!.size || 'm'\"\n            [badgeContent]=\"badge()!.content || 'number'\"\n            [count]=\"badge()!.count\"\n            [icon]=\"badge()!.icon || 'notification'\"\n            [simpleBadge]=\"true\"\n          />\n        }\n      </div>\n    </span>\n  }\n</ng-template>\n", styles: [".nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}\n"] }]
+            args: [{ selector: "rte-nav-item", imports: [CommonModule, IconComponent, BadgeComponent, TooltipDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (collapsed() && label()) {\n  @if (link()) {\n    <a\n      class=\"nav-item-container {{ appearance() }}\"\n      rteTooltip\n      rteTooltipPosition=\"right\"\n      rteTooltipAlignment=\"center\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [rteTooltip]=\"label()\"\n      [rteTooltipArrow]=\"false\"\n      [rteTooltipGap]=\"12\"\n      [rteTooltipShouldFocusTrigger]=\"true\"\n      [href]=\"link()!\"\n      [attr.aria-label]=\"label()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </a>\n  } @else {\n    <div\n      class=\"nav-item-container {{ appearance() }}\"\n      rteTooltip\n      rteTooltipPosition=\"right\"\n      rteTooltipAlignment=\"center\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [rteTooltip]=\"label()\"\n      [rteTooltipArrow]=\"false\"\n      [rteTooltipGap]=\"12\"\n      [rteTooltipShouldFocusTrigger]=\"false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </div>\n  }\n} @else {\n  @if (link()) {\n    <a\n      class=\"nav-item-container {{ appearance() }}\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [href]=\"link()!\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </a>\n  } @else {\n    <div\n      class=\"nav-item-container {{ appearance() }}\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </div>\n  }\n}\n\n<ng-template #contentTemplate>\n  <span\n    class=\"nav-item\"\n    [attr.tabindex]=\"link() ? undefined : tabIndex()\"\n    [attr.aria-label]=\"label()\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"nav-item-left\">\n      @if (showIcon() && icon()) {\n        <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n      }\n      @if (!collapsed()) {\n        <span>{{ label() }}</span>\n      }\n    </div>\n    <div class=\"nav-item-right\">\n      @if (badge()) {\n        <rte-badge\n          [badgeType]=\"badge()!.badgeType || 'brand'\"\n          [badgeSize]=\"badge()!.size || 'm'\"\n          [badgeContent]=\"badge()!.content || 'number'\"\n          [count]=\"badge()!.count\"\n          [icon]=\"badge()!.icon || 'notification'\"\n          [simpleBadge]=\"true\"\n        />\n      }\n    </div>\n  </span>\n</ng-template>\n", styles: [".nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container:link,.nav-item-container:visited,.nav-item-container:link:hover,.nav-item-container:visited:hover{text-decoration:none;color:inherit}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.nav-item-container:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}\n"] }]
         }] });
 
 function getNavTabIndex(parentMenuOpen) {
@@ -2923,7 +2950,7 @@ class SideNavComponent {
             return this.isCollapsed() ? "arrow-double-right" : "arrow-double-left";
         });
         this.dividerAppearance = computed(() => {
-            return dividerAppearanceBySideNavAppearance[this.appearance()];
+            return dividerAppearanceBySideNavAppearance$1[this.appearance()];
         });
         effect(() => {
             this.isCollapsed.set(this.collapsed());
@@ -2991,6 +3018,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "rte-side-nav", imports: [CommonModule, BaseSideNavComponent, DividerComponent, NavItemComponent, NavMenuComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-base-side-nav [size]=\"size()\" [collapsed]=\"isCollapsed()\" [appearance]=\"appearance()\">\n  <div side-nav-header>\n    <div class=\"side-nav-header-container\">\n      <div class=\"side-nav-header {{ appearance() }}\" [ngClass]=\"{ collapsed: isCollapsed() }\">\n        @if (headerConfig()?.link) {\n          <a\n            class=\"side-nav-header-title-container\"\n            [href]=\"headerConfig()!.link!\"\n            [attr.aria-label]=\"headerConfig()?.ariaLabel\"\n            (click)=\"handleHeaderClick()\"\n          >\n            <div class=\"side-nav-header-title\">\n              <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n              @if (!isCollapsed()) {\n                <h1 [ngClass]=\"{ hidden: !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n              }\n            </div>\n          </a>\n        } @else if (headerConfig()?.onClick) {\n          <div\n            class=\"side-nav-header-title-container\"\n            tabindex=\"0\"\n            role=\"button\"\n            [attr.aria-label]=\"headerConfig()?.ariaLabel\"\n            (click)=\"handleHeaderClick()\"\n            (keydown)=\"handleHeaderKeyDown($event)\"\n          >\n            <div class=\"side-nav-header-title\">\n              <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n              @if (!isCollapsed()) {\n                <h1 [ngClass]=\"{ hidden: !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n              }\n            </div>\n          </div>\n        } @else {\n          <div class=\"side-nav-header-title-container\">\n            <div class=\"side-nav-header-title\">\n              <div class=\"side-nav-header-identifier\">{{ headerConfig()?.identifier }}</div>\n              @if (!isCollapsed()) {\n                <h1 [ngClass]=\"{ hidden: !shouldShowTitle() }\">{{ headerConfig()?.title }}</h1>\n              }\n            </div>\n          </div>\n        }\n        <div class=\"side-nav-header-version\" [ngClass]=\"{ hidden: !shouldShowTitle() }\">\n          <span>{{ headerConfig()?.version }}</span>\n        </div>\n      </div>\n      <rte-divider [appearance]=\"dividerAppearance()\" />\n    </div>\n  </div>\n  <div side-nav-body>\n    <div class=\"side-nav-body\">\n      <ul>\n        @for (item of items(); track item.label) {\n          @if (hasNestedItems(item)) {\n            <rte-nav-menu\n              [id]=\"item.id\"\n              [label]=\"item.label\"\n              [icon]=\"item.icon\"\n              [showIcon]=\"item.showIcon ?? true\"\n              [collapsed]=\"isCollapsed()\"\n              [link]=\"item.link\"\n              [open]=\"item.open\"\n              [items]=\"item.items || []\"\n              [appearance]=\"appearance()\"\n              [badge]=\"item.badge\"\n              [showDivider]=\"item.showDivider!\"\n              (openChange)=\"handleMenuOpenChange($event)\"\n            />\n          } @else {\n            <li>\n              <rte-nav-item\n                [id]=\"item.id\"\n                [label]=\"item.label\"\n                [icon]=\"item.icon\"\n                [showIcon]=\"item.showIcon ?? true\"\n                [collapsed]=\"isCollapsed()\"\n                [link]=\"item.link\"\n                [appearance]=\"appearance()\"\n                [active]=\"item.active ?? false\"\n                [badge]=\"item.badge\"\n                (itemClick)=\"handleItemClick(item.id || item.label)\"\n              ></rte-nav-item>\n            </li>\n            @if (item.showDivider) {\n              <rte-divider [appearance]=\"dividerAppearance()\" />\n            }\n          }\n        }\n      </ul>\n    </div>\n  </div>\n  @if (footerItems()?.length || collapsible()) {\n    <div side-nav-footer>\n      <div class=\"side-nav-footer-container\">\n        @if (footerItems()?.length) {\n          <div class=\"side-nav-footer-items\">\n            <ul>\n              @for (item of footerItems()!; track item.id || item.label) {\n                @if (hasNestedItems(item)) {\n                  <rte-nav-menu\n                    [id]=\"item.id\"\n                    [label]=\"item.label\"\n                    [icon]=\"item.icon\"\n                    [showIcon]=\"item.showIcon ?? true\"\n                    [collapsed]=\"isCollapsed()\"\n                    [link]=\"item.link\"\n                    [open]=\"item.open\"\n                    [items]=\"item.items || []\"\n                    [appearance]=\"appearance()\"\n                    [badge]=\"item.badge\"\n                    [showDivider]=\"item.showDivider!\"\n                    (openChange)=\"handleFooterMenuOpenChange($event)\"\n                  />\n                } @else {\n                  <li>\n                    <rte-nav-item\n                      [id]=\"item.id\"\n                      [label]=\"item.label\"\n                      [icon]=\"item.icon\"\n                      [showIcon]=\"item.showIcon ?? true\"\n                      [collapsed]=\"isCollapsed()\"\n                      [link]=\"item.link\"\n                      [appearance]=\"appearance()\"\n                      [active]=\"item.active ?? false\"\n                      [badge]=\"item.badge\"\n                      (itemClick)=\"handleFooterItemClick(item.id || item.label)\"\n                    ></rte-nav-item>\n                  </li>\n                  @if (item.showDivider) {\n                    <rte-divider [appearance]=\"dividerAppearance()\" />\n                  }\n                }\n              }\n            </ul>\n          </div>\n        }\n        <rte-divider [appearance]=\"dividerAppearance()\" />\n        @if (collapsible()) {\n          <div class=\"side-nav-footer\">\n            <div class=\"collapsible-section\">\n              <ul>\n                <li>\n                  <rte-nav-item\n                    [label]=\"isCollapsed() ? 'Ouvrir le menu' : 'R\u00E9duire le menu'\"\n                    [icon]=\"collapseIcon()\"\n                    [collapsed]=\"isCollapsed()\"\n                    [appearance]=\"appearance()\"\n                    (itemClick)=\"handleCollapseClick()\"\n                  />\n                </li>\n              </ul>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div side-nav-content>\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</rte-base-side-nav>\n", styles: [".side-nav-header-container{display:flex;padding:4px;flex-direction:column;justify-content:center;align-items:flex-start;flex-shrink:0;align-self:stretch;height:120px;min-height:120px;max-height:120px}.side-nav-header-container.collapsed{align-items:center;justify-content:center;padding:4px}.side-nav-header{display:flex;position:relative;padding:20px 8px;flex-direction:column;align-items:flex-start;gap:4px;flex:1 0 0;align-self:stretch;height:120px;transition:opacity .3s}.side-nav-header.collapsed{padding:8px;justify-content:center;align-items:center;flex:1 0 0;align-self:stretch}.side-nav-header.collapsed .side-nav-header-title-container{padding:8px;justify-content:center;align-items:center;flex-grow:0;gap:0;align-self:auto}.side-nav-header.collapsed .side-nav-header-title-container .side-nav-header-title{gap:0}.side-nav-header.neutral .side-nav-header-title-container[href]:hover,.side-nav-header.neutral .side-nav-header-title-container[role=button]:hover{background:var(--background-neutral-navigation-hover);box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient)}.side-nav-header .side-nav-header-title-container{display:flex;padding:0 8px;align-items:center;gap:8px;flex:1 0 0;align-self:stretch;text-decoration:none;color:inherit}.side-nav-header .side-nav-header-title-container[href],.side-nav-header .side-nav-header-title-container[role=button]{cursor:pointer}.side-nav-header .side-nav-header-title-container[href]:hover,.side-nav-header .side-nav-header-title-container[role=button]:hover{border-radius:4px;opacity:100%;background:var(--background-brand-navigation-hover)}.side-nav-header .side-nav-header-title-container .side-nav-header-title{display:flex;align-items:center;gap:8px}.side-nav-header .side-nav-header-title-container .side-nav-header-title .side-nav-header-identifier{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1 0 0;align-self:stretch;color:var(--content-brand-navigation-default);text-align:center;-webkit-user-select:none;user-select:none;border-radius:4px;background:var(--background-brand-navigation-pressed);min-width:24px;height:24px}.side-nav-header .side-nav-header-title-container .side-nav-header-title h1{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;-webkit-user-select:none;user-select:none;align-self:stretch;margin:0;transition:opacity .3s}.side-nav-header .side-nav-header-title-container .side-nav-header-title h1.hidden{opacity:0;max-height:0;padding:0;margin:0}.side-nav-header .side-nav-header-version{display:flex;position:absolute;bottom:4px;right:8px;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:0px;align-self:stretch;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:10px;line-height:14px;letter-spacing:0px;transition:opacity .3s,max-height .3s;max-height:50px;overflow:hidden;opacity:1}.side-nav-header .side-nav-header-version.hidden{opacity:0;max-height:0;padding:0;margin:0}.side-nav-body{display:flex;padding:16px 8px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;overflow-x:hidden;overflow-y:auto;width:100%;box-sizing:border-box}.side-nav-body ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}.side-nav-footer-container{padding:8px}.side-nav-footer-container .side-nav-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;margin-top:4px}.side-nav-footer-items{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box;margin-bottom:8px}.side-nav-footer-items ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}.collapsible-section{display:flex;padding:4px 0;flex-direction:column;align-items:flex-start;align-self:stretch}.collapsible-section ul{list-style:none;padding:0;margin:0;width:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [] });
 
+const segmentClass = "rte-stepper-button";
+class StepperComponent {
+    constructor() {
+        this.steps = input([]);
+        this.activeStepId = input();
+        this.orientation = input("horizontal");
+        this.iconSize = IconSize;
+        this.stepperRef = inject(ElementRef);
+        this.clickStep = output();
+        this.lastKeydown = null;
+        this.onGlobalKeyDown = (event) => {
+            this.lastKeydown = event.key;
+        };
+    }
+    ngAfterViewInit() {
+        window.addEventListener("keydown", this.onGlobalKeyDown.bind(this));
+    }
+    ngOnDestroy() {
+        window.removeEventListener("keydown", this.onGlobalKeyDown.bind(this));
+    }
+    isStepActive(id) {
+        return this.activeStepId() === id;
+    }
+    isStepClickable(step) {
+        return (!!step.onClick &&
+            isStepClickable({
+                completionState: step.completionState,
+                clickableCompleteStep: step.clickableCompleteStep || false,
+            }));
+    }
+    isStepFocusable(step) {
+        return this.isStepClickable(step) || this.isStepActive(step.id);
+    }
+    handleStepClick(step) {
+        if (this.isStepClickable(step) && !this.isStepActive(step.id) && step.onClick) {
+            step.onClick();
+            this.clickStep.emit(step);
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === TAB_KEY) {
+            event.preventDefault();
+            if (event.shiftKey) {
+                focusPreviousNotStepElement(segmentClass, this.stepperRef.nativeElement);
+            }
+            else {
+                focusNextNotStepElement(segmentClass, this.stepperRef.nativeElement);
+            }
+        }
+        if ([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            const allSteps = this.stepperRef.nativeElement.querySelectorAll("button");
+            if (allSteps) {
+                const currentFocusSteppedIndex = Array.from(allSteps).findIndex((step) => step === document.activeElement);
+                if (this.orientation() === "horizontal") {
+                    switch (event.key) {
+                        case ARROW_LEFT_KEY: {
+                            focusPreviousStepElement(currentFocusSteppedIndex, Array.from(allSteps));
+                            break;
+                        }
+                        case ARROW_RIGHT_KEY: {
+                            focusNextStepElement(currentFocusSteppedIndex, Array.from(allSteps));
+                            break;
+                        }
+                        default:
+                            return;
+                    }
+                }
+                else {
+                    switch (event.key) {
+                        case ARROW_UP_KEY: {
+                            focusPreviousStepElement(currentFocusSteppedIndex, Array.from(allSteps));
+                            break;
+                        }
+                        case ARROW_DOWN_KEY: {
+                            focusNextStepElement(currentFocusSteppedIndex, Array.from(allSteps));
+                            break;
+                        }
+                        default:
+                            return;
+                    }
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "rte-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStepId: { classPropertyName: "activeStepId", publicName: "activeStepId", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickStep: "clickStep" }, ngImport: i0, template: "<nav aria-label=\"Stepper Navigation\" style=\"width: 100%; height: 100%\">\n  <ol class=\"rte-stepper\" [attr.data-orientation]=\"orientation()\">\n    <ng-container *ngFor=\"let step of steps(); let index = index\">\n      <li\n        #step\n        class=\"rte-stepper-item\"\n        [attr.data-completion-state]=\"step.completionState\"\n        [attr.aria-current]=\"isStepActive(step.id) ? 'step' : undefined\"\n        [attr.data-active]=\"isStepActive(step.id)\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-clickable]=\"isStepClickable(step)\"\n        (keydown)=\"handleKeyDown($event)\"\n      >\n        <button\n          class=\"rte-stepper-button\"\n          type=\"button\"\n          [attr.tabindex]=\"isStepActive(step.id) ? 0 : -1\"\n          [attr.disabled]=\"isStepFocusable(step) ? undefined : true\"\n          (click)=\"handleStepClick(step)\"\n        >\n          @if (step.completionState === \"complete\" && !isStepActive(step.id)) {\n            <div class=\"rte-stepper-complete-indicator\">\n              <rte-icon name=\"check\" aria-hidden=\"true\" [size]=\"iconSize['m']\" />\n            </div>\n          } @else {\n            <div class=\"rte-stepper-number\" [attr.data-completion-state]=\"step.completionState\">\n              <span>{{ index + 1 }}</span>\n            </div>\n          }\n          <span class=\"rte-stepper-name\">{{ step.name }}</span>\n        </button>\n      </li>\n      <ng-container *ngIf=\"index < steps().length - 1\">\n        <div style=\"width: 100%; height: 100%\">\n          <div\n            class=\"rte-step-separator\"\n            role=\"separator\"\n            [attr.data-orientation]=\"orientation()\"\n            [attr.data-complete]=\"step.completionState === 'complete'\"\n          ></div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ol>\n</nav>\n", styles: [".rte-stepper{display:flex;flex-direction:row;gap:6px;align-items:start;padding:0;margin:0;width:auto}.rte-stepper[data-orientation=vertical]{flex-direction:column;height:100%}.rte-stepper .rte-stepper-item{display:flex;width:100%;flex:1 0 0}.rte-stepper .rte-stepper-item .rte-stepper-button{all:unset;display:flex;flex-direction:column;gap:12px;align-items:center}.rte-stepper .rte-stepper-item .rte-stepper-button:focus-visible .rte-stepper-number,.rte-stepper .rte-stepper-item .rte-stepper-button:focus-visible .rte-stepper-complete-indicator{outline:2px solid var(--border-brand-focused);outline-offset:4px}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-complete-indicator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:999px;background-color:var(--background-brand-default);border:2px solid var(--border-brand-default);color:var(--content-primary-inverse)}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-number{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:999px;border:2px solid var(--border-secondary)}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-number span{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-tertiary);display:flex;justify-content:center;align-items:center}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:var(--content-tertiary);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false]{cursor:pointer}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=unvisited] .rte-stepper-number{border-color:var(--border-primary)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=unvisited] .rte-stepper-complete-indicator{background-color:var(--background-brand-hover);border:2px solid var(--background-brand-hover)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=incomplete] .rte-stepper-number span{background-color:var(--background-brand-hover)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=complete] .rte-stepper-complete-indicator{background-color:var(--background-brand-hover);border:2px solid var(--background-brand-hover)}.rte-stepper .rte-stepper-item[data-completion-state=incomplete][data-active=false] .rte-stepper-number{border:2px solid var(--border-brand-default)}.rte-stepper .rte-stepper-item[data-completion-state=incomplete][data-active=false] .rte-stepper-number span{color:var(--content-primary-inverse);border:solid 2px var(--brand-default);border-radius:999px;background-color:var(--background-brand-default);width:28px;height:28px}.rte-stepper .rte-stepper-item[data-completion-state=incomplete] .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-number{border:2px solid var(--border-brand-default)}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-number span{color:var(--content-brand-default)}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:var(--content-primary)}.rte-stepper .rte-stepper-item[data-orientation=vertical],.rte-stepper .rte-stepper-item[data-orientation=vertical] .rte-stepper-button{flex-direction:row}.rte-stepper .rte-stepper-item[data-orientation=vertical] .rte-stepper-button .rte-stepper-name{text-align:left}.rte-stepper .rte-step-separator{width:100%;border-radius:999px;height:4px;margin-top:16px;background-color:var(--border-secondary);flex:1 1 auto}.rte-stepper .rte-step-separator[data-complete=true]{background-color:var(--border-brand-default)}.rte-stepper .rte-step-separator[data-orientation=vertical]{width:4px;height:100%;margin-left:16px;margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-stepper", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav aria-label=\"Stepper Navigation\" style=\"width: 100%; height: 100%\">\n  <ol class=\"rte-stepper\" [attr.data-orientation]=\"orientation()\">\n    <ng-container *ngFor=\"let step of steps(); let index = index\">\n      <li\n        #step\n        class=\"rte-stepper-item\"\n        [attr.data-completion-state]=\"step.completionState\"\n        [attr.aria-current]=\"isStepActive(step.id) ? 'step' : undefined\"\n        [attr.data-active]=\"isStepActive(step.id)\"\n        [attr.data-orientation]=\"orientation()\"\n        [attr.data-clickable]=\"isStepClickable(step)\"\n        (keydown)=\"handleKeyDown($event)\"\n      >\n        <button\n          class=\"rte-stepper-button\"\n          type=\"button\"\n          [attr.tabindex]=\"isStepActive(step.id) ? 0 : -1\"\n          [attr.disabled]=\"isStepFocusable(step) ? undefined : true\"\n          (click)=\"handleStepClick(step)\"\n        >\n          @if (step.completionState === \"complete\" && !isStepActive(step.id)) {\n            <div class=\"rte-stepper-complete-indicator\">\n              <rte-icon name=\"check\" aria-hidden=\"true\" [size]=\"iconSize['m']\" />\n            </div>\n          } @else {\n            <div class=\"rte-stepper-number\" [attr.data-completion-state]=\"step.completionState\">\n              <span>{{ index + 1 }}</span>\n            </div>\n          }\n          <span class=\"rte-stepper-name\">{{ step.name }}</span>\n        </button>\n      </li>\n      <ng-container *ngIf=\"index < steps().length - 1\">\n        <div style=\"width: 100%; height: 100%\">\n          <div\n            class=\"rte-step-separator\"\n            role=\"separator\"\n            [attr.data-orientation]=\"orientation()\"\n            [attr.data-complete]=\"step.completionState === 'complete'\"\n          ></div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </ol>\n</nav>\n", styles: [".rte-stepper{display:flex;flex-direction:row;gap:6px;align-items:start;padding:0;margin:0;width:auto}.rte-stepper[data-orientation=vertical]{flex-direction:column;height:100%}.rte-stepper .rte-stepper-item{display:flex;width:100%;flex:1 0 0}.rte-stepper .rte-stepper-item .rte-stepper-button{all:unset;display:flex;flex-direction:column;gap:12px;align-items:center}.rte-stepper .rte-stepper-item .rte-stepper-button:focus-visible .rte-stepper-number,.rte-stepper .rte-stepper-item .rte-stepper-button:focus-visible .rte-stepper-complete-indicator{outline:2px solid var(--border-brand-focused);outline-offset:4px}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-complete-indicator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:999px;background-color:var(--background-brand-default);border:2px solid var(--border-brand-default);color:var(--content-primary-inverse)}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-number{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:999px;border:2px solid var(--border-secondary)}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-number span{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-tertiary);display:flex;justify-content:center;align-items:center}.rte-stepper .rte-stepper-item .rte-stepper-button .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:var(--content-tertiary);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false]{cursor:pointer}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=unvisited] .rte-stepper-number{border-color:var(--border-primary)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=unvisited] .rte-stepper-complete-indicator{background-color:var(--background-brand-hover);border:2px solid var(--background-brand-hover)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=incomplete] .rte-stepper-number span{background-color:var(--background-brand-hover)}.rte-stepper .rte-stepper-item:hover[data-clickable=true][data-active=false][data-completion-state=complete] .rte-stepper-complete-indicator{background-color:var(--background-brand-hover);border:2px solid var(--background-brand-hover)}.rte-stepper .rte-stepper-item[data-completion-state=incomplete][data-active=false] .rte-stepper-number{border:2px solid var(--border-brand-default)}.rte-stepper .rte-stepper-item[data-completion-state=incomplete][data-active=false] .rte-stepper-number span{color:var(--content-primary-inverse);border:solid 2px var(--brand-default);border-radius:999px;background-color:var(--background-brand-default);width:28px;height:28px}.rte-stepper .rte-stepper-item[data-completion-state=incomplete] .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-number{border:2px solid var(--border-brand-default)}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-number span{color:var(--content-brand-default)}.rte-stepper .rte-stepper-item[data-active=true] .rte-stepper-button .rte-stepper-name{font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;color:var(--content-primary)}.rte-stepper .rte-stepper-item[data-orientation=vertical],.rte-stepper .rte-stepper-item[data-orientation=vertical] .rte-stepper-button{flex-direction:row}.rte-stepper .rte-stepper-item[data-orientation=vertical] .rte-stepper-button .rte-stepper-name{text-align:left}.rte-stepper .rte-step-separator{width:100%;border-radius:999px;height:4px;margin-top:16px;background-color:var(--border-secondary);flex:1 1 auto}.rte-stepper .rte-step-separator[data-complete=true]{background-color:var(--border-brand-default)}.rte-stepper .rte-step-separator[data-orientation=vertical]{width:4px;height:100%;margin-left:16px;margin-top:0}\n"] }]
+        }] });
+
 class ToastComponent {
     constructor() {
         this.id = input("");
@@ -3740,5 +3861,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
+export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, LoaderComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, StepperComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
 //# sourceMappingURL=design-system-rte-angular.mjs.map