@design-system-rte/angular 1.3.0 → 1.4.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, ChangeDetectionStrategy, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, ElementRef, ViewContainerRef, Renderer2, HostListener, output, TemplateRef, contentChild, viewChild, signal, NgModule, viewChildren, RendererFactory2 } from '@angular/core';
+import { input, computed, Component, ChangeDetectionStrategy, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, ElementRef, ViewContainerRef, Renderer2, HostListener, output, signal, TemplateRef, contentChild, viewChild, viewChildren, NgModule, RendererFactory2 } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -14,12 +14,13 @@ import { FOCUSABLE_ELEMENTS_QUERY, FOCUSABLE_BUTTONS_QUERY } from '@design-syste
 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';
+import { DropdownManager } from '@design-system-rte/core/components/dropdown/DropdownManager';
+import { getAutoPlacementDropdown, getAutoAlignment, getCoordinates as getCoordinates$1, getAutoPlacement as getAutoPlacement$1 } from '@design-system-rte/core/components/utils/auto-placement';
+import { logWarn, logError } from '@design-system-rte/core/utils/log-handlers';
 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';
@@ -919,11 +920,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "rte-divider", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isHorizontal()) {\n  <hr class=\"horizontal {{ thickness() }} {{ appearance() }} {{ endPoint() }}\" />\n} @else {\n  <div class=\"vertical {{ thickness() }} {{ appearance() }} {{ endPoint() }}\" role=\"separator\"></div>\n}\n", styles: [":host{display:contents}.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.horizontal.brand{border-top-color:var(--border-brand-default)}.horizontal.brand-navigation{border-top-color:var(--border-brand-navigation-divider)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}.vertical.brand{background-color:var(--border-brand-default)}.vertical.brand-navigation{background-color:var(--border-brand-navigation-divider)}\n"] }]
         }] });
 
+const focusNextElement = (dropdown) => {
+    const menuItems = getDropdownMenuItems(dropdown);
+    const activeElementIndex = menuItems.indexOf(document.activeElement);
+    if (activeElementIndex < menuItems.length - 1) {
+        const nextElement = menuItems[activeElementIndex + 1];
+        nextElement.focus();
+    }
+    else {
+        menuItems[0]?.focus();
+    }
+};
+const focusPreviousElement = (dropdown) => {
+    const menuItems = getDropdownMenuItems(dropdown);
+    const activeElementIndex = menuItems.indexOf(document.activeElement);
+    if (activeElementIndex > 0) {
+        const previousElement = menuItems[activeElementIndex - 1];
+        previousElement.focus();
+    }
+    else {
+        menuItems.at(-1)?.focus();
+    }
+};
+const focusDropdownFirstElement = (dropdownId) => {
+    const childDropdown = document.querySelector(`[data-menu-id='${dropdownId}']`);
+    if (childDropdown) {
+        const allChildDropdownElement = childDropdown?.querySelectorAll('li[role="menuitem"]');
+        allChildDropdownElement[0]?.focus();
+    }
+};
+const focusParentDropdownFirstElement = (dropdownId) => {
+    const parentDropdownId = DropdownManager.getParentDropdownId(dropdownId);
+    const parentDropdown = document.querySelector(`[data-menu-id='${parentDropdownId}']`);
+    parentDropdown?.querySelector("[data-active=true]")?.focus();
+};
+const getDropdownMenuItems = (dropdown) => {
+    const allDropdownElement = dropdown?.querySelectorAll('li[role="menuitem"]');
+    return allDropdownElement ? Array.from(allDropdownElement) : [];
+};
+
+const SUB_MENU_CLOSE_DELAY_MS = 300;
 class DropdownItemComponent {
     constructor() {
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
         this.item = input();
         this.menuId = input();
         this.itemEvent = output();
+        this.submenuRequest = output();
+        this.subMenuOpen = signal(false);
+        this.subMenuRef = null;
+        this.closeSubMenuTimeout = null;
+        this.subMenuSubscriptions = [];
+        this.dropdownManagerUnsubscribe = null;
+        this.hasChildren = computed(() => (this.item()?.children?.length ?? 0) > 0);
+        this.childDropdownId = computed(() => {
+            const menuId = this.menuId();
+            const label = this.item()?.label ?? "";
+            return menuId && label ? `${menuId}-${label.replace(/\s+/g, "")}` : "";
+        });
         this.shouldDisplayBadge = computed(() => {
             const item = this.item();
             return shouldDisplayBadge({
@@ -933,6 +988,7 @@ class DropdownItemComponent {
                 badgeIcon: item?.badgeIcon,
             });
         });
+        this.boundHandleSubMenuMouseEnter = () => this.handleSubMenuMouseEnter();
     }
     handleClick(event) {
         if (this.item()?.disabled) {
@@ -940,32 +996,157 @@ class DropdownItemComponent {
             event.stopPropagation();
             return;
         }
+        if (this.hasChildren()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.openSubMenu();
+            return;
+        }
         this.itemEvent.emit({
             event,
             id: this.item()?.id || this.item()?.label || "",
+            item: this.item(),
         });
     }
     handleKeyDown(event) {
         event.preventDefault();
-        if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
-            if (this.item()?.link) {
-                const link = event.target.closest("li")?.querySelector("a");
-                link?.click();
-            }
-            else {
-                this.itemEvent.emit({
-                    event,
-                    id: this.item()?.id || this.item()?.label || "",
-                });
+        if (this.item()?.link && [SPACE_KEY, ENTER_KEY].includes(event.key)) {
+            const link = event.target.closest("li")?.querySelector("a");
+            link?.click();
+            return;
+        }
+        if (this.hasChildren()) {
+            if (event.key === SPACE_KEY) {
+                this.openSubMenu();
+                const childId = this.childDropdownId();
+                if (childId) {
+                    setTimeout(() => focusDropdownFirstElement(childId), 0);
+                }
             }
+            return;
+        }
+        if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
+            this.itemEvent.emit({
+                event,
+                id: this.item()?.id || this.item()?.label || "",
+                item: this.item(),
+            });
+        }
+    }
+    handleMouseEnter() {
+        if (this.item()?.disabled || !this.hasChildren())
+            return;
+        const menuId = this.menuId();
+        const childId = this.childDropdownId();
+        if (menuId) {
+            DropdownManager.closeSubMenus(menuId, childId);
+            this.openSubMenu();
         }
     }
+    handleFocus() {
+        if (this.item()?.disabled || !this.hasChildren())
+            return;
+        const menuId = this.menuId();
+        const childId = this.childDropdownId();
+        if (menuId) {
+            DropdownManager.closeSubMenus(menuId, childId);
+        }
+    }
+    handleMouseLeave() {
+        if (!this.hasChildren())
+            return;
+        this.scheduleCloseSubMenu();
+    }
+    handleSubMenuMouseEnter() {
+        this.cancelCloseSubMenu();
+    }
+    openSubMenuForKeyboard() {
+        this.openSubMenu();
+        const childId = this.childDropdownId();
+        if (childId) {
+            setTimeout(() => focusDropdownFirstElement(childId), 0);
+        }
+    }
+    openSubMenu() {
+        if (this.subMenuRef)
+            return;
+        const children = this.item()?.children;
+        const childId = this.childDropdownId();
+        if (!children?.length || !childId)
+            return;
+        const triggerElement = this.elementRef.nativeElement.querySelector("li.rte-dropdown-item");
+        if (!triggerElement)
+            return;
+        DropdownManager.open(childId);
+        this.submenuRequest.emit({
+            children,
+            childId,
+            triggerElement,
+            onCreated: (result) => this.wireSubmenu(result),
+        });
+    }
+    wireSubmenu(result) {
+        if (this.subMenuRef)
+            return;
+        this.subMenuRef = result.componentRef;
+        const hostElement = result.hostElement;
+        const childId = this.childDropdownId();
+        this.dropdownManagerUnsubscribe = DropdownManager.subscribe(childId ?? "", () => this.destroySubMenu());
+        const menuInstance = this.subMenuRef.instance;
+        const itemSub = menuInstance.itemEvent.subscribe((emittedItemEvent) => {
+            this.itemEvent.emit({ ...emittedItemEvent, item: emittedItemEvent.item });
+        });
+        const closeSub = menuInstance.closingMenu.subscribe(() => {
+            this.destroySubMenu();
+        });
+        this.subMenuSubscriptions.push(() => {
+            itemSub.unsubscribe();
+            closeSub.unsubscribe();
+        });
+        hostElement.addEventListener("mouseenter", this.boundHandleSubMenuMouseEnter);
+        this.subMenuOpen.set(true);
+        this.cdr.markForCheck();
+    }
+    scheduleCloseSubMenu() {
+        this.cancelCloseSubMenu();
+        this.closeSubMenuTimeout = setTimeout(() => {
+            this.closeSubMenuTimeout = null;
+            this.destroySubMenu();
+        }, SUB_MENU_CLOSE_DELAY_MS);
+    }
+    cancelCloseSubMenu() {
+        if (this.closeSubMenuTimeout) {
+            clearTimeout(this.closeSubMenuTimeout);
+            this.closeSubMenuTimeout = null;
+        }
+    }
+    destroySubMenu() {
+        this.cancelCloseSubMenu();
+        this.subMenuSubscriptions.forEach((unsubscribe) => unsubscribe());
+        this.subMenuSubscriptions = [];
+        if (this.subMenuRef) {
+            const hostElement = this.subMenuRef.location.nativeElement;
+            hostElement.removeEventListener("mouseenter", this.boundHandleSubMenuMouseEnter);
+            const childId = this.childDropdownId();
+            this.dropdownManagerUnsubscribe?.();
+            this.dropdownManagerUnsubscribe = null;
+            if (childId)
+                DropdownManager.close(childId);
+            this.subMenuRef.destroy();
+            this.subMenuRef = null;
+        }
+        this.subMenuOpen.set(false);
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.destroySubMenu();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "rte-dropdown-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent" }, ngImport: i0, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.data-active]=\"item()?.selected\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n    <rte-badge\n      *ngIf=\"shouldDisplayBadge()\"\n      [badgeType]=\"item()?.badgeType!\"\n      [badgeContent]=\"item()?.badgeContent!\"\n      [count]=\"item()?.badgeCount\"\n      [simpleBadge]=\"true\"\n      [icon]=\"item()?.badgeIcon ?? ''\"\n      [badgeSize]=\"item()?.badgeSize!\"\n    ></rte-badge>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "rte-dropdown-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent", submenuRequest: "submenuRequest" }, ngImport: i0, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.data-active]=\"hasChildren() ? subMenuOpen() : item()?.selected\"\n    [attr.aria-haspopup]=\"hasChildren() ? 'menu' : null\"\n    [attr.aria-expanded]=\"hasChildren() ? subMenuOpen() : null\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (focus)=\"handleFocus()\"\n  >\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <rte-icon *ngIf=\"hasChildren()\" name=\"arrow-chevron-right\" />\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n    <rte-badge\n      *ngIf=\"shouldDisplayBadge()\"\n      [badgeType]=\"item()?.badgeType!\"\n      [badgeContent]=\"item()?.badgeContent!\"\n      [count]=\"item()?.badgeCount\"\n      [simpleBadge]=\"true\"\n      [icon]=\"item()?.badgeIcon ?? ''\"\n      [badgeSize]=\"item()?.badgeSize!\"\n    ></rte-badge>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-dropdown-item", imports: [CommonModule, IconComponent, DividerComponent, BadgeComponent], standalone: true, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.data-active]=\"item()?.selected\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n    <rte-badge\n      *ngIf=\"shouldDisplayBadge()\"\n      [badgeType]=\"item()?.badgeType!\"\n      [badgeContent]=\"item()?.badgeContent!\"\n      [count]=\"item()?.badgeCount\"\n      [simpleBadge]=\"true\"\n      [icon]=\"item()?.badgeIcon ?? ''\"\n      [badgeSize]=\"item()?.badgeSize!\"\n    ></rte-badge>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"] }]
+            args: [{ selector: "rte-dropdown-item", imports: [CommonModule, IconComponent, DividerComponent, BadgeComponent], standalone: true, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.data-active]=\"hasChildren() ? subMenuOpen() : item()?.selected\"\n    [attr.aria-haspopup]=\"hasChildren() ? 'menu' : null\"\n    [attr.aria-expanded]=\"hasChildren() ? subMenuOpen() : null\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (focus)=\"handleFocus()\"\n  >\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <rte-icon *ngIf=\"hasChildren()\" name=\"arrow-chevron-right\" />\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n    <rte-badge\n      *ngIf=\"shouldDisplayBadge()\"\n      [badgeType]=\"item()?.badgeType!\"\n      [badgeContent]=\"item()?.badgeContent!\"\n      [count]=\"item()?.badgeCount\"\n      [simpleBadge]=\"true\"\n      [icon]=\"item()?.badgeIcon ?? ''\"\n      [badgeSize]=\"item()?.badgeSize!\"\n    ></rte-badge>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"] }]
         }] });
 
 class DropdownMenuFooterDirective {
@@ -1076,7 +1257,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class DropdownMenuComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
+        this.pendingPositioningFrameId = null;
         this.dropdownService = inject(DropdownService);
+        this.overlayService = inject(OverlayService);
+        this.viewContainerRef = inject(ViewContainerRef);
         this.items = input([]);
         this.menuId = input();
         this.itemEvent = output();
@@ -1093,6 +1277,7 @@ class DropdownMenuComponent {
         this.footerTemplate = input(undefined);
         this.headerContentRef = viewChild("headerContent");
         this.footerContentRef = viewChild("footerContent");
+        this.itemComponents = viewChildren(DropdownItemComponent);
         this.hasHeaderContent = computed(() => {
             const hasTemplate = !!this.headerTemplate();
             const hasProjectedContent = !!this.headerContentRef()?.nativeElement?.children.length;
@@ -1104,34 +1289,90 @@ class DropdownMenuComponent {
             return hasTemplate || hasProjectedContent;
         });
     }
+    static { this.SUB_MENU_OFFSET = 4; }
     getChildMenuId(itemIndex) {
         return `${this.menuId()}:${itemIndex + 1}`;
     }
     handleItemEvent(itemEvent) {
         this.itemEvent.emit(itemEvent);
     }
+    handleSubmenuRequest(event) {
+        const { children, childId, triggerElement, onCreated } = event;
+        const componentRef = this.overlayService.create(DropdownMenuComponent, this.viewContainerRef);
+        componentRef.setInput("items", children);
+        componentRef.setInput("menuId", childId);
+        componentRef.setInput("isOpen", true);
+        const hostElement = componentRef.location.nativeElement;
+        this.cancelPendingPositioningFrame();
+        this.pendingPositioningFrameId = requestAnimationFrame(() => {
+            this.pendingPositioningFrameId = null;
+            try {
+                const subMenuHost = componentRef.location?.nativeElement;
+                const menuElement = subMenuHost?.querySelector(".rte-dropdown-menu");
+                if (!triggerElement || !menuElement) {
+                    logWarn("DropdownMenuComponent", "Unable to position submenu: required DOM elements not found.");
+                    return;
+                }
+                const position = getAutoPlacementDropdown({
+                    hostElement: triggerElement,
+                    castedElement: menuElement,
+                    defaultPosition: "right",
+                    offset: DropdownMenuComponent.SUB_MENU_OFFSET,
+                    hasDropdownParent: true,
+                });
+                const alignment = getAutoAlignment(triggerElement, menuElement, position);
+                const coords = getCoordinates$1(position, triggerElement, menuElement, DropdownMenuComponent.SUB_MENU_OFFSET, alignment);
+                hostElement.style.display = "block";
+                hostElement.style.position = "absolute";
+                hostElement.style.top = `${coords.top}px`;
+                hostElement.style.left = `${coords.left}px`;
+                hostElement.style.opacity = "1";
+            }
+            catch (error) {
+                logError("DropdownMenuComponent", "Error while positioning submenu:", error);
+            }
+        });
+        onCreated({ componentRef, hostElement });
+    }
+    ngOnDestroy() {
+        this.cancelPendingPositioningFrame();
+    }
+    cancelPendingPositioningFrame() {
+        if (this.pendingPositioningFrameId !== null) {
+            cancelAnimationFrame(this.pendingPositioningFrameId);
+            this.pendingPositioningFrameId = null;
+        }
+    }
     onKeyDown(event) {
         if (!event.target || !this.menuId()) {
             return;
         }
-        if ([ARROW_UP_KEY, ARROW_DOWN_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, TAB_KEY].includes(event.key)) {
+        if ([ARROW_UP_KEY, ARROW_DOWN_KEY, TAB_KEY].includes(event.key)) {
             event.preventDefault();
         }
         if (event.key === ESCAPE_KEY) {
             this.closingMenu.emit();
         }
         const menuId = this.menuId();
+        if (event.key === TAB_KEY && event.shiftKey) {
+            const parentMenuId = DropdownManager.getParentDropdownId(menuId);
+            if (parentMenuId) {
+                focusParentDropdownFirstElement(menuId);
+                this.closingMenu.emit();
+                return;
+            }
+        }
         this.dropdownService.handleKeyboardInput(event.key, {
             menuElement: this.elementRef,
             menuId,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "rte-dropdown-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent", closingMenu: "closingMenu" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-menu-id": "menuId()" } }, queries: [{ propertyName: "headerDirective", first: true, predicate: DropdownMenuHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: DropdownMenuFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerContentRef", first: true, predicate: ["headerContent"], descendants: true, isSignal: true }, { propertyName: "footerContentRef", first: true, predicate: ["footerContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n  @if (hasHeaderContent()) {\n    <div class=\"rte-dropdown-menu-header\">\n      @if (headerTemplate() || headerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #headerContent>\n          <ng-content select=\"[dropdown-menu-header]\"></ng-content>\n        </div>\n      }\n      <rte-divider />\n    </div>\n  }\n  <div class=\"rte-dropdown-menu-content\">\n    <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n      @for (item of items(); track item.label; let i = $index) {\n        <rte-dropdown-item [item]=\"item\" (itemEvent)=\"handleItemEvent($event)\" />\n      }\n    </ul>\n  </div>\n  @if (hasFooterContent()) {\n    <div class=\"rte-dropdown-menu-footer\">\n      <rte-divider />\n      @if (footerTemplate() || footerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #footerContent>\n          <ng-content select=\"[dropdown-menu-footer]\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:none;position:absolute}.rte-dropdown-menu{opacity:0;box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu-header,.rte-dropdown-menu-content,.rte-dropdown-menu-footer{width:100%}.rte-dropdown-menu.open{opacity:1}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DropdownItemComponent, selector: "rte-dropdown-item", inputs: ["item", "menuId"], outputs: ["itemEvent"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "rte-dropdown-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent", closingMenu: "closingMenu" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-menu-id": "menuId()" } }, queries: [{ propertyName: "headerDirective", first: true, predicate: DropdownMenuHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: DropdownMenuFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerContentRef", first: true, predicate: ["headerContent"], descendants: true, isSignal: true }, { propertyName: "footerContentRef", first: true, predicate: ["footerContent"], descendants: true, isSignal: true }, { propertyName: "itemComponents", predicate: DropdownItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n  @if (hasHeaderContent()) {\n    <div class=\"rte-dropdown-menu-header\">\n      @if (headerTemplate() || headerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #headerContent>\n          <ng-content select=\"[dropdown-menu-header]\"></ng-content>\n        </div>\n      }\n      <rte-divider />\n    </div>\n  }\n  <div class=\"rte-dropdown-menu-content\">\n    <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n      @for (item of items(); track item.label; let i = $index) {\n        <rte-dropdown-item\n          [item]=\"item\"\n          [menuId]=\"menuId()\"\n          (itemEvent)=\"handleItemEvent($event)\"\n          (submenuRequest)=\"handleSubmenuRequest($event)\"\n        />\n      }\n    </ul>\n  </div>\n  @if (hasFooterContent()) {\n    <div class=\"rte-dropdown-menu-footer\">\n      <rte-divider />\n      @if (footerTemplate() || footerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #footerContent>\n          <ng-content select=\"[dropdown-menu-footer]\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:none;position:absolute}.rte-dropdown-menu{opacity:0;box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu-header,.rte-dropdown-menu-content,.rte-dropdown-menu-footer{width:100%}.rte-dropdown-menu.open{opacity:1}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DropdownItemComponent, selector: "rte-dropdown-item", inputs: ["item", "menuId"], outputs: ["itemEvent", "submenuRequest"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-dropdown-menu", imports: [CommonModule, DropdownItemComponent, DividerComponent], standalone: true, host: { "[attr.data-menu-id]": "menuId()" }, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n  @if (hasHeaderContent()) {\n    <div class=\"rte-dropdown-menu-header\">\n      @if (headerTemplate() || headerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #headerContent>\n          <ng-content select=\"[dropdown-menu-header]\"></ng-content>\n        </div>\n      }\n      <rte-divider />\n    </div>\n  }\n  <div class=\"rte-dropdown-menu-content\">\n    <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n      @for (item of items(); track item.label; let i = $index) {\n        <rte-dropdown-item [item]=\"item\" (itemEvent)=\"handleItemEvent($event)\" />\n      }\n    </ul>\n  </div>\n  @if (hasFooterContent()) {\n    <div class=\"rte-dropdown-menu-footer\">\n      <rte-divider />\n      @if (footerTemplate() || footerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #footerContent>\n          <ng-content select=\"[dropdown-menu-footer]\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:none;position:absolute}.rte-dropdown-menu{opacity:0;box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu-header,.rte-dropdown-menu-content,.rte-dropdown-menu-footer{width:100%}.rte-dropdown-menu.open{opacity:1}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"] }]
+            args: [{ selector: "rte-dropdown-menu", imports: [CommonModule, DropdownItemComponent, DividerComponent], standalone: true, host: { "[attr.data-menu-id]": "menuId()" }, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n  @if (hasHeaderContent()) {\n    <div class=\"rte-dropdown-menu-header\">\n      @if (headerTemplate() || headerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #headerContent>\n          <ng-content select=\"[dropdown-menu-header]\"></ng-content>\n        </div>\n      }\n      <rte-divider />\n    </div>\n  }\n  <div class=\"rte-dropdown-menu-content\">\n    <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n      @for (item of items(); track item.label; let i = $index) {\n        <rte-dropdown-item\n          [item]=\"item\"\n          [menuId]=\"menuId()\"\n          (itemEvent)=\"handleItemEvent($event)\"\n          (submenuRequest)=\"handleSubmenuRequest($event)\"\n        />\n      }\n    </ul>\n  </div>\n  @if (hasFooterContent()) {\n    <div class=\"rte-dropdown-menu-footer\">\n      <rte-divider />\n      @if (footerTemplate() || footerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #footerContent>\n          <ng-content select=\"[dropdown-menu-footer]\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:none;position:absolute}.rte-dropdown-menu{opacity:0;box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu-header,.rte-dropdown-menu-content,.rte-dropdown-menu-footer{width:100%}.rte-dropdown-menu.open{opacity:1}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"] }]
         }], propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ["keydown", ["$event"]]
@@ -1195,45 +1436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ["closeDropdown", ["$event"]]
             }] } });
 
-const focusNextElement = (dropdown) => {
-    const menuItems = getDropdownMenuItems(dropdown);
-    const activeElementIndex = menuItems.indexOf(document.activeElement);
-    if (activeElementIndex < menuItems.length - 1) {
-        const nextElement = menuItems[activeElementIndex + 1];
-        nextElement.focus();
-    }
-    else {
-        menuItems[0]?.focus();
-    }
-};
-const focusPreviousElement = (dropdown) => {
-    const menuItems = getDropdownMenuItems(dropdown);
-    const activeElementIndex = menuItems.indexOf(document.activeElement);
-    if (activeElementIndex > 0) {
-        const previousElement = menuItems[activeElementIndex - 1];
-        previousElement.focus();
-    }
-    else {
-        menuItems.at(-1)?.focus();
-    }
-};
-const focusDropdownFirstElement = (dropdownId) => {
-    const childDropdown = document.querySelector(`[data-menu-id='${dropdownId}']`);
-    if (childDropdown) {
-        const allChildDropdownElement = childDropdown?.querySelectorAll('li[role="menuitem"]');
-        allChildDropdownElement[0]?.focus();
-    }
-};
-const focusParentDropdownFirstElement = (dropdownId) => {
-    const parentDropdownId = DropdownManager.getParentDropdownId(dropdownId);
-    const parentDropdown = document.querySelector(`[data-menu-id='${parentDropdownId}']`);
-    parentDropdown?.querySelector("[data-active=true]")?.focus();
-};
-const getDropdownMenuItems = (dropdown) => {
-    const allDropdownElement = dropdown?.querySelectorAll('li[role="menuitem"]');
-    return allDropdownElement ? Array.from(allDropdownElement) : [];
-};
-
 class DropdownDirective {
     static { this.idCounter = 0; }
     constructor() {
@@ -1272,20 +1474,25 @@ class DropdownDirective {
             };
         });
         this.dropdownMenuRef = null;
+        this.itemEventSubscription = null;
         this.handleClickOutside = (event) => {
             const target = event.target;
-            const isMenuItemClick = target.closest(".rte-dropdown-item") !== null;
-            if (isMenuItemClick) {
-                return;
-            }
             const clickedInTrigger = this.hostElement.contains(target);
-            const clickedInMenu = this.dropdownMenuRef?.location.nativeElement.contains(target);
-            if (!clickedInTrigger && !clickedInMenu) {
-                this.closeDropdown();
-                this.clickedOutside.emit();
+            const dropdownMenuElement = this.dropdownMenuRef?.location.nativeElement;
+            const clickedInThisMenu = dropdownMenuElement ? dropdownMenuElement.contains(target) : false;
+            if (clickedInTrigger || clickedInThisMenu) {
+                return;
             }
+            this.closeDropdown();
+            this.clickedOutside.emit();
         };
         this.hostElement = this.elementRef.nativeElement;
+        this.destroyRef.onDestroy(() => {
+            this.unsubscribeItemEvent();
+            this.removeClickOutsideListener();
+            this.dropdownMenuRef?.destroy();
+            this.dropdownMenuRef = null;
+        });
         effect(() => {
             const isOpen = this.rteDropdownIsOpen();
             if (isOpen) {
@@ -1316,9 +1523,12 @@ class DropdownDirective {
         }
     }
     onTriggerKeyEvent(event) {
-        if (event.key === SPACE_KEY ||
+        const shouldOpen = event.key === SPACE_KEY ||
             event.key === ENTER_KEY ||
-            (event.key === ARROW_DOWN_KEY && this.trigger()?.rteDropdownTriggerActivateWithArrowDown())) {
+            (event.key === ARROW_DOWN_KEY && this.trigger()?.rteDropdownTriggerActivateWithArrowDown());
+        if (shouldOpen) {
+            event.preventDefault();
+            event.stopPropagation();
             this.showDropdownMenu();
             if (this.rteDropdownAutofocus()) {
                 waitForNextFrame(() => focusDropdownFirstElement(this.dropdownId));
@@ -1327,31 +1537,29 @@ class DropdownDirective {
     }
     onMenuEvent(event) {
         this.menuEvent.emit(event);
-        this.isActive.set(false);
-        this.dropdownService.closeAllMenus();
+        if (!event.item?.children?.length) {
+            this.isActive.set(false);
+            this.dropdownService.closeAllMenus();
+        }
     }
     ngAfterContentInit() {
-        if (this.trigger()) {
-            this.trigger()?.dropdownTriggered.subscribe(() => {
-                this.onTrigger();
-            });
-            this.trigger()?.dropdownKeyDown.subscribe((event) => {
-                this.onTriggerKeyEvent(event);
-            });
-            this.trigger()?.dropdownTriggerClearContent.subscribe(() => {
-                this.closeDropdown();
-            });
-            this.trigger()?.dropdownTriggerOpenDropdown.subscribe(() => {
-                this.showDropdownMenu();
-            });
-            this.trigger()?.dropdownTriggerCloseDropdown.subscribe(() => {
-                this.closeDropdown();
-            });
-        }
+        const trigger = this.trigger();
+        if (!trigger)
+            return;
+        const triggerSubscriptions = [
+            trigger.dropdownTriggered.subscribe(() => this.onTrigger()),
+            trigger.dropdownKeyDown.subscribe((event) => this.onTriggerKeyEvent(event)),
+            trigger.dropdownTriggerClearContent.subscribe(() => this.closeDropdown()),
+            trigger.dropdownTriggerOpenDropdown.subscribe(() => this.showDropdownMenu()),
+            trigger.dropdownTriggerCloseDropdown.subscribe(() => this.closeDropdown()),
+        ];
+        this.destroyRef.onDestroy(() => triggerSubscriptions.forEach((subscription) => subscription.unsubscribe()));
     }
     showDropdownMenu() {
+        this.unsubscribeItemEvent();
         if (this.dropdownMenuRef) {
             this.dropdownMenuRef.destroy();
+            this.dropdownMenuRef = null;
         }
         this.dropdownMenuRef = this.overlayService.create(DropdownMenuComponent, this.viewContainerRef);
         const menuId = this.rteDropdownId() || this.dropdownId;
@@ -1360,12 +1568,11 @@ class DropdownDirective {
         this.assignInputs();
         this.positionDropdownMenu(this.rteDropdownPosition());
         this.addClickOutsideListener();
-        this.dropdownMenuRef.instance.itemEvent.subscribe((event) => {
-            this.onMenuEvent(event);
-        });
+        this.itemEventSubscription = this.dropdownMenuRef.instance.itemEvent.subscribe((event) => this.onMenuEvent(event));
         const dropdownStateSubscription = this.dropdownService.state$.subscribe((state) => {
             if (state === null) {
                 if (this.dropdownMenuRef) {
+                    this.unsubscribeItemEvent();
                     this.dropdownMenuRef.destroy();
                     this.dropdownMenuRef = null;
                     this.removeClickOutsideListener();
@@ -1411,7 +1618,13 @@ class DropdownDirective {
             if (triggerElement) {
                 this.renderer.setStyle(dropdownMenuElement, "display", "block");
                 this.cdr.detectChanges();
-                const computedPosition = position === "auto" ? getAutoPlacementDropdown(triggerElement, dropdownMenuElement, "bottom") : position;
+                const computedPosition = position === "auto"
+                    ? getAutoPlacementDropdown({
+                        hostElement: triggerElement,
+                        castedElement: dropdownMenuElement,
+                        defaultPosition: "bottom",
+                    })
+                    : position;
                 const autoAlignment = this.rteDropdownAlignment() ?? getAutoAlignment(triggerElement, dropdownMenuElement, computedPosition);
                 const computedCoordinates = getCoordinates$1(computedPosition, triggerElement, dropdownMenuElement.children[0], this.rteDropdownOffset(), autoAlignment);
                 this.renderer.setStyle(dropdownMenuElement, "top", `${computedCoordinates.top}px`);
@@ -1420,11 +1633,9 @@ class DropdownDirective {
             }
         }
     }
-    ngOnDestroy() {
-        this.removeClickOutsideListener();
-        if (this.dropdownMenuRef) {
-            this.dropdownMenuRef.destroy();
-        }
+    unsubscribeItemEvent() {
+        this.itemEventSubscription?.unsubscribe();
+        this.itemEventSubscription = null;
     }
     addClickOutsideListener() {
         document.addEventListener("mousedown", this.handleClickOutside);
@@ -1492,8 +1703,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-// Main dropdown module - import this to get everything
-
 class SplitButtonComponent {
     constructor() {
         this.appearance = input("primary");
@@ -1943,6 +2152,8 @@ class SegmentedControlComponent {
         this.selectedSegment = input();
         this.ariaLabel = input();
         this.ariaLabelledBy = input();
+        this.appearance = input("brand");
+        this.compactSpacing = input(false);
         this.segmentRefs = viewChildren("segment");
         this.sliderLeft = signal(0);
         this.sliderWidth = signal(0);
@@ -2050,11 +2261,11 @@ class SegmentedControlComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SegmentedControlComponent, isStandalone: true, selector: "rte-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedSegment: { classPropertyName: "selectedSegment", publicName: "selectedSegment", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "segmentRefs", predicate: ["segment"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n  <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n  <ng-container *ngFor=\"let option of options(); let idx = index\">\n    <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n      <div\n        #segment\n        role=\"radio\"\n        class=\"rte-segment\"\n        tabindex=\"0\"\n        [attr.data-id]=\"option.id\"\n        [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n        [class.selected]=\"isSegmentSelected(option.id)\"\n        [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n        [attr.aria-label]=\"option.label\"\n        (click)=\"selectSegment(option.id)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n      >\n        <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n        <div class=\"rte-segment-content\">\n          <ng-container *ngIf=\"option.icon; else label\">\n            <rte-icon\n              [name]=\"option.icon\"\n              [size]=\"24\"\n              [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n            ></rte-icon>\n          </ng-container>\n          <ng-template #label>\n            <span class=\"rte-segment-label\">{{ option.label }}</span>\n          </ng-template>\n        </div>\n        <rte-badge\n          *ngIf=\"shouldDisplayBadge(option)\"\n          [count]=\"option.badgeCount\"\n          [badgeContent]=\"option.badgeContent!\"\n          [icon]=\"option.badgeIcon!\"\n          [badgeType]=\"option.badgeType!\"\n          [simpleBadge]=\"true\"\n          [badgeSize]=\"option.badgeSize!\"\n        ></rte-badge>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SegmentedControlComponent, isStandalone: true, selector: "rte-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedSegment: { classPropertyName: "selectedSegment", publicName: "selectedSegment", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "segmentRefs", predicate: ["segment"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"isValidOptions()\"\n  class=\"rte-segmented-control\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.data-number-of-segments]=\"options().length\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n>\n  <span\n    class=\"rte-segment-selected-indicator\"\n    [ngStyle]=\"segmentSelectedIndicatorStyle()\"\n    [attr.data-compact-spacing]=\"compactSpacing()\"\n  ></span>\n  <ng-container *ngFor=\"let option of options(); let idx = index\">\n    <div\n      class=\"rte-segment-container\"\n      [attr.data-position]=\"getSegmentPosition(idx)\"\n      [attr.data-appearance]=\"appearance()\"\n      [attr.data-compact-spacing]=\"compactSpacing()\"\n    >\n      <div\n        #segment\n        role=\"radio\"\n        class=\"rte-segment\"\n        tabindex=\"0\"\n        [attr.data-id]=\"option.id\"\n        [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n        [attr.data-compact-spacing]=\"compactSpacing()\"\n        [class.selected]=\"isSegmentSelected(option.id)\"\n        [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n        [attr.aria-label]=\"option.label\"\n        (click)=\"selectSegment(option.id)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n      >\n        <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n        <div class=\"rte-segment-content\">\n          <ng-container *ngIf=\"option.icon; else label\">\n            <rte-icon\n              [name]=\"option.icon\"\n              [size]=\"compactSpacing() ? 20 : 24\"\n              [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n            ></rte-icon>\n          </ng-container>\n          <ng-template #label>\n            <span class=\"rte-segment-label\">{{ option.label }}</span>\n          </ng-template>\n        </div>\n        <rte-badge\n          *ngIf=\"shouldDisplayBadge(option)\"\n          [count]=\"option.badgeCount\"\n          [badgeContent]=\"option.badgeContent!\"\n          [icon]=\"option.badgeIcon!\"\n          [badgeType]=\"option.badgeType!\"\n          [simpleBadge]=\"true\"\n          [badgeSize]=\"option.badgeSize!\"\n        ></rte-badge>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segmented-control[data-compact-spacing=true]{min-width:80px}.rte-segmented-control[data-compact-spacing=true][data-number-of-segments=\"3\"]{min-width:128px}.rte-segment-selected-indicator{position:absolute;top:4px;height:32px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-selected-indicator[data-compact-spacing=true]{height:24px}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden;height:40px;box-sizing:border-box}.rte-segment-container[data-compact-spacing=true]{height:32px;padding:0 2px}.rte-segment-container[data-appearance=neutral]{border-top:1px solid var(--border-tertiary);border-bottom:1px solid var(--border-tertiary);background:var(--background-neutral-regular-default)}.rte-segment-container[data-appearance=neutral][data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-tertiary);padding-left:4px}.rte-segment-container[data-appearance=neutral][data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-tertiary);padding-right:4px}.rte-segment-container[data-appearance=neutral] .rte-segment-label,.rte-segment-container[data-appearance=neutral] .rte-segment{color:var(--content-secondary)}.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-segment-content,.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-segment-label,.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-selected-icon{color:var(--content-primary)}.rte-segment-container[data-appearance=neutral] .rte-segment:hover:not(.selected){background:var(--background-neutral-regular-hover);cursor:pointer}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);padding-right:4px}.rte-segment{display:flex;padding:2px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;width:100%;z-index:0;height:32px;box-sizing:border-box}.rte-segment[data-compact-spacing=true]{padding:0 8px;height:24px}.rte-segment[data-compact-spacing=true] .rte-segment-content .rte-segment-label{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}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:0px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:-2px}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-segmented-control", imports: [CommonModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n  <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n  <ng-container *ngFor=\"let option of options(); let idx = index\">\n    <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n      <div\n        #segment\n        role=\"radio\"\n        class=\"rte-segment\"\n        tabindex=\"0\"\n        [attr.data-id]=\"option.id\"\n        [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n        [class.selected]=\"isSegmentSelected(option.id)\"\n        [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n        [attr.aria-label]=\"option.label\"\n        (click)=\"selectSegment(option.id)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n      >\n        <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n        <div class=\"rte-segment-content\">\n          <ng-container *ngIf=\"option.icon; else label\">\n            <rte-icon\n              [name]=\"option.icon\"\n              [size]=\"24\"\n              [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n            ></rte-icon>\n          </ng-container>\n          <ng-template #label>\n            <span class=\"rte-segment-label\">{{ option.label }}</span>\n          </ng-template>\n        </div>\n        <rte-badge\n          *ngIf=\"shouldDisplayBadge(option)\"\n          [count]=\"option.badgeCount\"\n          [badgeContent]=\"option.badgeContent!\"\n          [icon]=\"option.badgeIcon!\"\n          [badgeType]=\"option.badgeType!\"\n          [simpleBadge]=\"true\"\n          [badgeSize]=\"option.badgeSize!\"\n        ></rte-badge>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"] }]
+            args: [{ selector: "rte-segmented-control", imports: [CommonModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"isValidOptions()\"\n  class=\"rte-segmented-control\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.data-number-of-segments]=\"options().length\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n>\n  <span\n    class=\"rte-segment-selected-indicator\"\n    [ngStyle]=\"segmentSelectedIndicatorStyle()\"\n    [attr.data-compact-spacing]=\"compactSpacing()\"\n  ></span>\n  <ng-container *ngFor=\"let option of options(); let idx = index\">\n    <div\n      class=\"rte-segment-container\"\n      [attr.data-position]=\"getSegmentPosition(idx)\"\n      [attr.data-appearance]=\"appearance()\"\n      [attr.data-compact-spacing]=\"compactSpacing()\"\n    >\n      <div\n        #segment\n        role=\"radio\"\n        class=\"rte-segment\"\n        tabindex=\"0\"\n        [attr.data-id]=\"option.id\"\n        [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n        [attr.data-compact-spacing]=\"compactSpacing()\"\n        [class.selected]=\"isSegmentSelected(option.id)\"\n        [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n        [attr.aria-label]=\"option.label\"\n        (click)=\"selectSegment(option.id)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n      >\n        <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n        <div class=\"rte-segment-content\">\n          <ng-container *ngIf=\"option.icon; else label\">\n            <rte-icon\n              [name]=\"option.icon\"\n              [size]=\"compactSpacing() ? 20 : 24\"\n              [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n            ></rte-icon>\n          </ng-container>\n          <ng-template #label>\n            <span class=\"rte-segment-label\">{{ option.label }}</span>\n          </ng-template>\n        </div>\n        <rte-badge\n          *ngIf=\"shouldDisplayBadge(option)\"\n          [count]=\"option.badgeCount\"\n          [badgeContent]=\"option.badgeContent!\"\n          [icon]=\"option.badgeIcon!\"\n          [badgeType]=\"option.badgeType!\"\n          [simpleBadge]=\"true\"\n          [badgeSize]=\"option.badgeSize!\"\n        ></rte-badge>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segmented-control[data-compact-spacing=true]{min-width:80px}.rte-segmented-control[data-compact-spacing=true][data-number-of-segments=\"3\"]{min-width:128px}.rte-segment-selected-indicator{position:absolute;top:4px;height:32px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-selected-indicator[data-compact-spacing=true]{height:24px}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden;height:40px;box-sizing:border-box}.rte-segment-container[data-compact-spacing=true]{height:32px;padding:0 2px}.rte-segment-container[data-appearance=neutral]{border-top:1px solid var(--border-tertiary);border-bottom:1px solid var(--border-tertiary);background:var(--background-neutral-regular-default)}.rte-segment-container[data-appearance=neutral][data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-tertiary);padding-left:4px}.rte-segment-container[data-appearance=neutral][data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-tertiary);padding-right:4px}.rte-segment-container[data-appearance=neutral] .rte-segment-label,.rte-segment-container[data-appearance=neutral] .rte-segment{color:var(--content-secondary)}.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-segment-content,.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-segment-label,.rte-segment-container[data-appearance=neutral] .rte-segment.selected .rte-selected-icon{color:var(--content-primary)}.rte-segment-container[data-appearance=neutral] .rte-segment:hover:not(.selected){background:var(--background-neutral-regular-hover);cursor:pointer}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);padding-right:4px}.rte-segment{display:flex;padding:2px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;width:100%;z-index:0;height:32px;box-sizing:border-box}.rte-segment[data-compact-spacing=true]{padding:0 8px;height:24px}.rte-segment[data-compact-spacing=true] .rte-segment-content .rte-segment-label{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}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:0px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:-2px}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"] }]
         }] });
 
 class BreadcrumbItemComponent {
@@ -3105,11 +3316,11 @@ class StepperComponent {
         }
     }
     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 }); }
+    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] .rte-stepper-name{color:var(--content-secondary)}.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"] }]
+            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] .rte-stepper-name{color:var(--content-secondary)}.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 {
@@ -3316,6 +3527,7 @@ class TagComponent {
         this.label = input("");
         this.showLeftIcon = input(false);
         this.iconName = input();
+        this.ariaLabel = input();
         this.computedIconName = computed(() => {
             if (this.tagType() === "status") {
                 const statusIconMap = {
@@ -3337,11 +3549,11 @@ class TagComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TagComponent, isStandalone: true, selector: "rte-tag", inputs: { tagType: { classPropertyName: "tagType", publicName: "tagType", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLeftIcon: { classPropertyName: "showLeftIcon", publicName: "showLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"rte-tag\"\n  [attr.data-tag-type]=\"tagType()\"\n  [attr.data-status]=\"status()\"\n  [attr.data-color]=\"color()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n>\n  <ng-container *ngIf=\"isValidIconName() && (tagType() === 'status' || showLeftIcon())\">\n    <rte-icon [name]=\"computedIconName()\" [size]=\"16\"></rte-icon>\n  </ng-container>\n  <ng-container *ngIf=\"label\">\n    <label class=\"tag-label\" [attr.data-compact-spacing]=\"compactSpacing()\">{{ label() }}</label>\n  </ng-container>\n</div>\n", styles: [".rte-tag{height:32px;display:inline-flex;padding:4px 6px;justify-content:center;align-items:center;gap:0px;border-radius:4px;text-wrap:nowrap}.rte-tag[data-compact-spacing=true]{padding:0 6px;height:24px}.rte-tag .tag-label{padding:0 6px;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-status)}.rte-tag .tag-label[data-compact-spacing=true]{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}.rte-tag[data-tag-type=status][data-status=success],.rte-tag[data-tag-type=status][data-status=information],.rte-tag[data-tag-type=status][data-status=alert]{color:var(--content-primary-inverse)}.rte-tag[data-tag-type=status][data-status=success]{background-color:var(--background-success-default)}.rte-tag[data-tag-type=status][data-status=information]{background-color:var(--background-info-default)}.rte-tag[data-tag-type=status][data-status=warning]{background-color:var(--background-warning-default)}.rte-tag[data-tag-type=status][data-status=alert]{background-color:var(--background-danger-default)}.rte-tag[data-tag-type=decorative][data-color=brand]{background-color:var(--background-brand-default)}.rte-tag[data-tag-type=decorative][data-color=neutral]{background-color:var(--decorative-neutral)}.rte-tag[data-tag-type=decorative][data-color=azur]{background-color:var(--decorative-bleu-iceberg)}.rte-tag[data-tag-type=decorative][data-color=jade]{background-color:var(--decorative-vert-foret)}.rte-tag[data-tag-type=decorative][data-color=lavande]{background-color:var(--decorative-violet)}.rte-tag[data-tag-type=decorative][data-color=ciel]{background-color:var(--decorative-bleu-rte)}.rte-tag[data-tag-type=decorative][data-color=nuage]{background-color:var(--decorative-bleu-digital)}.rte-tag[data-tag-type=decorative][data-color=givre]{background-color:var(--decorative-marine)}.rte-tag[data-tag-type=decorative][data-color=brume]{background-color:var(--decorative-bleu-petrole)}.rte-tag[data-tag-type=decorative][data-color=glacier]{background-color:var(--decorative-bleu-cyan)}.rte-tag[data-tag-type=decorative][data-color=turquoise]{background-color:var(--decorative-vert)}.rte-tag[data-tag-type=decorative][data-color=anis]{background-color:var(--decorative-vert-indications)}.rte-tag[data-tag-type=decorative][data-color=menthe]{background-color:var(--decorative-vert-digital)}.rte-tag[data-tag-type=decorative][data-color=citronnelle]{background-color:var(--decorative-jaune)}.rte-tag[data-tag-type=decorative][data-color=sable]{background-color:var(--decorative-jaune-ocre)}.rte-tag[data-tag-type=decorative][data-color=abricot]{background-color:var(--decorative-jaune-indications)}.rte-tag[data-tag-type=decorative][data-color=coral]{background-color:var(--decorative-saumon)}.rte-tag[data-tag-type=decorative][data-color=rose]{background-color:var(--decorative-rose-digital)}.rte-tag[data-tag-type=decorative][data-color=petale]{background-color:var(--decorative-fuschia)}.rte-tag[data-tag-type=decorative][data-color=quartz]{background-color:var(--decorative-rouge-indication)}.rte-tag[data-tag-type=decorative][data-color=cendre]{background-color:var(--decorative-taupe)}.rte-tag[data-tag-type=decorative][data-color=brand],.rte-tag[data-tag-type=decorative][data-color=brand] .tag-label{color:var(--content-primary-inverse)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TagComponent, isStandalone: true, selector: "rte-tag", inputs: { tagType: { classPropertyName: "tagType", publicName: "tagType", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLeftIcon: { classPropertyName: "showLeftIcon", publicName: "showLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"rte-tag\"\n  [attr.data-tag-type]=\"tagType()\"\n  [attr.data-status]=\"status()\"\n  [attr.data-color]=\"color()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <ng-container *ngIf=\"isValidIconName() && (tagType() === 'status' || showLeftIcon())\">\n    <rte-icon [name]=\"computedIconName()\" [size]=\"16\"></rte-icon>\n  </ng-container>\n  <ng-container *ngIf=\"label\">\n    <span class=\"tag-label\" [attr.data-compact-spacing]=\"compactSpacing()\">{{ label() }}</span>\n  </ng-container>\n</div>\n", styles: [".rte-tag{height:32px;display:inline-flex;padding:4px 6px;justify-content:center;align-items:center;gap:0px;border-radius:4px;text-wrap:nowrap}.rte-tag[data-compact-spacing=true]{padding:0 6px;height:24px}.rte-tag .tag-label{padding:0 6px;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-status)}.rte-tag .tag-label[data-compact-spacing=true]{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}.rte-tag[data-tag-type=status][data-status=success],.rte-tag[data-tag-type=status][data-status=information],.rte-tag[data-tag-type=status][data-status=alert]{color:var(--content-primary-inverse)}.rte-tag[data-tag-type=status][data-status=success]{background-color:var(--background-success-default)}.rte-tag[data-tag-type=status][data-status=information]{background-color:var(--background-info-default)}.rte-tag[data-tag-type=status][data-status=warning]{background-color:var(--background-warning-default)}.rte-tag[data-tag-type=status][data-status=alert]{background-color:var(--background-danger-default)}.rte-tag[data-tag-type=decorative][data-color=brand]{background-color:var(--background-brand-default)}.rte-tag[data-tag-type=decorative][data-color=neutral]{background-color:var(--decorative-neutral)}.rte-tag[data-tag-type=decorative][data-color=azur]{background-color:var(--decorative-bleu-iceberg)}.rte-tag[data-tag-type=decorative][data-color=jade]{background-color:var(--decorative-vert-foret)}.rte-tag[data-tag-type=decorative][data-color=lavande]{background-color:var(--decorative-violet)}.rte-tag[data-tag-type=decorative][data-color=ciel]{background-color:var(--decorative-bleu-rte)}.rte-tag[data-tag-type=decorative][data-color=nuage]{background-color:var(--decorative-bleu-digital)}.rte-tag[data-tag-type=decorative][data-color=givre]{background-color:var(--decorative-marine)}.rte-tag[data-tag-type=decorative][data-color=brume]{background-color:var(--decorative-bleu-petrole)}.rte-tag[data-tag-type=decorative][data-color=glacier]{background-color:var(--decorative-bleu-cyan)}.rte-tag[data-tag-type=decorative][data-color=turquoise]{background-color:var(--decorative-vert)}.rte-tag[data-tag-type=decorative][data-color=anis]{background-color:var(--decorative-vert-indications)}.rte-tag[data-tag-type=decorative][data-color=menthe]{background-color:var(--decorative-vert-digital)}.rte-tag[data-tag-type=decorative][data-color=citronnelle]{background-color:var(--decorative-jaune)}.rte-tag[data-tag-type=decorative][data-color=sable]{background-color:var(--decorative-jaune-ocre)}.rte-tag[data-tag-type=decorative][data-color=abricot]{background-color:var(--decorative-jaune-indications)}.rte-tag[data-tag-type=decorative][data-color=coral]{background-color:var(--decorative-saumon)}.rte-tag[data-tag-type=decorative][data-color=rose]{background-color:var(--decorative-rose-digital)}.rte-tag[data-tag-type=decorative][data-color=petale]{background-color:var(--decorative-fuschia)}.rte-tag[data-tag-type=decorative][data-color=quartz]{background-color:var(--decorative-rouge-indication)}.rte-tag[data-tag-type=decorative][data-color=cendre]{background-color:var(--decorative-taupe)}.rte-tag[data-tag-type=decorative][data-color=brand],.rte-tag[data-tag-type=decorative][data-color=brand] .tag-label{color:var(--content-primary-inverse)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-tag", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"rte-tag\"\n  [attr.data-tag-type]=\"tagType()\"\n  [attr.data-status]=\"status()\"\n  [attr.data-color]=\"color()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n>\n  <ng-container *ngIf=\"isValidIconName() && (tagType() === 'status' || showLeftIcon())\">\n    <rte-icon [name]=\"computedIconName()\" [size]=\"16\"></rte-icon>\n  </ng-container>\n  <ng-container *ngIf=\"label\">\n    <label class=\"tag-label\" [attr.data-compact-spacing]=\"compactSpacing()\">{{ label() }}</label>\n  </ng-container>\n</div>\n", styles: [".rte-tag{height:32px;display:inline-flex;padding:4px 6px;justify-content:center;align-items:center;gap:0px;border-radius:4px;text-wrap:nowrap}.rte-tag[data-compact-spacing=true]{padding:0 6px;height:24px}.rte-tag .tag-label{padding:0 6px;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-status)}.rte-tag .tag-label[data-compact-spacing=true]{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}.rte-tag[data-tag-type=status][data-status=success],.rte-tag[data-tag-type=status][data-status=information],.rte-tag[data-tag-type=status][data-status=alert]{color:var(--content-primary-inverse)}.rte-tag[data-tag-type=status][data-status=success]{background-color:var(--background-success-default)}.rte-tag[data-tag-type=status][data-status=information]{background-color:var(--background-info-default)}.rte-tag[data-tag-type=status][data-status=warning]{background-color:var(--background-warning-default)}.rte-tag[data-tag-type=status][data-status=alert]{background-color:var(--background-danger-default)}.rte-tag[data-tag-type=decorative][data-color=brand]{background-color:var(--background-brand-default)}.rte-tag[data-tag-type=decorative][data-color=neutral]{background-color:var(--decorative-neutral)}.rte-tag[data-tag-type=decorative][data-color=azur]{background-color:var(--decorative-bleu-iceberg)}.rte-tag[data-tag-type=decorative][data-color=jade]{background-color:var(--decorative-vert-foret)}.rte-tag[data-tag-type=decorative][data-color=lavande]{background-color:var(--decorative-violet)}.rte-tag[data-tag-type=decorative][data-color=ciel]{background-color:var(--decorative-bleu-rte)}.rte-tag[data-tag-type=decorative][data-color=nuage]{background-color:var(--decorative-bleu-digital)}.rte-tag[data-tag-type=decorative][data-color=givre]{background-color:var(--decorative-marine)}.rte-tag[data-tag-type=decorative][data-color=brume]{background-color:var(--decorative-bleu-petrole)}.rte-tag[data-tag-type=decorative][data-color=glacier]{background-color:var(--decorative-bleu-cyan)}.rte-tag[data-tag-type=decorative][data-color=turquoise]{background-color:var(--decorative-vert)}.rte-tag[data-tag-type=decorative][data-color=anis]{background-color:var(--decorative-vert-indications)}.rte-tag[data-tag-type=decorative][data-color=menthe]{background-color:var(--decorative-vert-digital)}.rte-tag[data-tag-type=decorative][data-color=citronnelle]{background-color:var(--decorative-jaune)}.rte-tag[data-tag-type=decorative][data-color=sable]{background-color:var(--decorative-jaune-ocre)}.rte-tag[data-tag-type=decorative][data-color=abricot]{background-color:var(--decorative-jaune-indications)}.rte-tag[data-tag-type=decorative][data-color=coral]{background-color:var(--decorative-saumon)}.rte-tag[data-tag-type=decorative][data-color=rose]{background-color:var(--decorative-rose-digital)}.rte-tag[data-tag-type=decorative][data-color=petale]{background-color:var(--decorative-fuschia)}.rte-tag[data-tag-type=decorative][data-color=quartz]{background-color:var(--decorative-rouge-indication)}.rte-tag[data-tag-type=decorative][data-color=cendre]{background-color:var(--decorative-taupe)}.rte-tag[data-tag-type=decorative][data-color=brand],.rte-tag[data-tag-type=decorative][data-color=brand] .tag-label{color:var(--content-primary-inverse)}\n"] }]
+            args: [{ selector: "rte-tag", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"rte-tag\"\n  [attr.data-tag-type]=\"tagType()\"\n  [attr.data-status]=\"status()\"\n  [attr.data-color]=\"color()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <ng-container *ngIf=\"isValidIconName() && (tagType() === 'status' || showLeftIcon())\">\n    <rte-icon [name]=\"computedIconName()\" [size]=\"16\"></rte-icon>\n  </ng-container>\n  <ng-container *ngIf=\"label\">\n    <span class=\"tag-label\" [attr.data-compact-spacing]=\"compactSpacing()\">{{ label() }}</span>\n  </ng-container>\n</div>\n", styles: [".rte-tag{height:32px;display:inline-flex;padding:4px 6px;justify-content:center;align-items:center;gap:0px;border-radius:4px;text-wrap:nowrap}.rte-tag[data-compact-spacing=true]{padding:0 6px;height:24px}.rte-tag .tag-label{padding:0 6px;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-status)}.rte-tag .tag-label[data-compact-spacing=true]{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}.rte-tag[data-tag-type=status][data-status=success],.rte-tag[data-tag-type=status][data-status=information],.rte-tag[data-tag-type=status][data-status=alert]{color:var(--content-primary-inverse)}.rte-tag[data-tag-type=status][data-status=success]{background-color:var(--background-success-default)}.rte-tag[data-tag-type=status][data-status=information]{background-color:var(--background-info-default)}.rte-tag[data-tag-type=status][data-status=warning]{background-color:var(--background-warning-default)}.rte-tag[data-tag-type=status][data-status=alert]{background-color:var(--background-danger-default)}.rte-tag[data-tag-type=decorative][data-color=brand]{background-color:var(--background-brand-default)}.rte-tag[data-tag-type=decorative][data-color=neutral]{background-color:var(--decorative-neutral)}.rte-tag[data-tag-type=decorative][data-color=azur]{background-color:var(--decorative-bleu-iceberg)}.rte-tag[data-tag-type=decorative][data-color=jade]{background-color:var(--decorative-vert-foret)}.rte-tag[data-tag-type=decorative][data-color=lavande]{background-color:var(--decorative-violet)}.rte-tag[data-tag-type=decorative][data-color=ciel]{background-color:var(--decorative-bleu-rte)}.rte-tag[data-tag-type=decorative][data-color=nuage]{background-color:var(--decorative-bleu-digital)}.rte-tag[data-tag-type=decorative][data-color=givre]{background-color:var(--decorative-marine)}.rte-tag[data-tag-type=decorative][data-color=brume]{background-color:var(--decorative-bleu-petrole)}.rte-tag[data-tag-type=decorative][data-color=glacier]{background-color:var(--decorative-bleu-cyan)}.rte-tag[data-tag-type=decorative][data-color=turquoise]{background-color:var(--decorative-vert)}.rte-tag[data-tag-type=decorative][data-color=anis]{background-color:var(--decorative-vert-indications)}.rte-tag[data-tag-type=decorative][data-color=menthe]{background-color:var(--decorative-vert-digital)}.rte-tag[data-tag-type=decorative][data-color=citronnelle]{background-color:var(--decorative-jaune)}.rte-tag[data-tag-type=decorative][data-color=sable]{background-color:var(--decorative-jaune-ocre)}.rte-tag[data-tag-type=decorative][data-color=abricot]{background-color:var(--decorative-jaune-indications)}.rte-tag[data-tag-type=decorative][data-color=coral]{background-color:var(--decorative-saumon)}.rte-tag[data-tag-type=decorative][data-color=rose]{background-color:var(--decorative-rose-digital)}.rte-tag[data-tag-type=decorative][data-color=petale]{background-color:var(--decorative-fuschia)}.rte-tag[data-tag-type=decorative][data-color=quartz]{background-color:var(--decorative-rouge-indication)}.rte-tag[data-tag-type=decorative][data-color=cendre]{background-color:var(--decorative-taupe)}.rte-tag[data-tag-type=decorative][data-color=brand],.rte-tag[data-tag-type=decorative][data-color=brand] .tag-label{color:var(--content-primary-inverse)}\n"] }]
         }] });
 
 class AssistiveTextComponent {
@@ -3622,11 +3834,11 @@ class TabItemComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabItemComponent, isStandalone: true, selector: "rte-tab-item", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, handleKeydown: { classPropertyName: "handleKeydown", publicName: "handleKeydown", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tabItemRef", first: true, predicate: ["tabItem"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #tabItem\n  class=\"rte-tabitem\"\n  role=\"tab\"\n  [id]=\"option()?.id\"\n  [attr.aria-selected]=\"isSelected()\"\n  [attr.aria-controls]=\"option()?.panelId\"\n  [tabIndex]=\"isSelected() ? 0 : -1\"\n  [attr.data-selected]=\"isSelected()\"\n  [attr.data-inverted]=\"inverted()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [attr.data-hidden]=\"isHidden()\"\n  (click)=\"onClickTabItem($event, option()?.id || '')\"\n  (mouseover)=\"handleMouseHover()\"\n  (mouseout)=\"handleMouseOut()\"\n  (keydown)=\"handleKeydown()\"\n>\n  <rte-icon *ngIf=\"option()?.icon\" [name]=\"option()?.icon || ''\" [appearance]=\"isSelected() ? 'filled' : 'outlined'\" />\n  <span *ngIf=\"option()?.label\">{{ option()?.label }}</span>\n  <rte-badge\n    *ngIf=\"displayBadge(option()!)\"\n    [simpleBadge]=\"true\"\n    [badgeContent]=\"option()?.badgeContent || 'empty'\"\n    [badgeType]=\"option()?.badgeType || 'neutral'\"\n    [icon]=\"option()?.badgeIcon || ''\"\n    [count]=\"option()?.badgeCount\"\n  />\n</button>\n<span\n  #hoverIndicator\n  class=\"rte-tab-hover-indicator\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [id]=\"'tab-hover-indicator' + option()?.id\"\n  [ngStyle]=\"{\n    width: hoverIndicatorWidth(),\n    height: hoverIndicatorHeight(),\n    left: hoverIndicatorLeft(),\n    top: hoverIndicatorTop(),\n    opacity: hoverIndicatorOpacity(),\n  }\"\n></span>\n", styles: [":host{pointer-events:none;display:flex}.rte-tabitem{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;display:flex;padding:12px;justify-content:center;align-items:center;gap:12px;background:transparent;color:var(--content-secondary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=true]{color:var(--content-primary-inverse)}.rte-tabitem[data-direction=vertical]{flex-shrink:1;margin-left:0}.rte-tabitem[data-hidden=true]{visibility:hidden}.rte-tabitem[data-selected=true]:not([data-disabled=true]),.rte-tabitem:hover:not([data-disabled=true]){font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px}.rte-tabitem[data-disabled=true]{color:var(--content-disabled);cursor:not-allowed}.rte-tabitem[data-compact-spacing=true]{padding:4px 12px}.rte-tabitem:focus-visible{z-index:1;outline:2px solid var(--border-brand-focused)}.rte-tab-hover-indicator{position:absolute;top:4px;height:2px;width:2px;background:var(--background-neutral-regular-hover);opacity:0;transition:left .2s ease,width .2s ease;z-index:10}.rte-tab-hover-indicator[data-disabled=true]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabItemComponent, isStandalone: true, selector: "rte-tab-item", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, handleKeydown: { classPropertyName: "handleKeydown", publicName: "handleKeydown", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tabItemRef", first: true, predicate: ["tabItem"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #tabItem\n  class=\"rte-tabitem\"\n  role=\"tab\"\n  [id]=\"option()?.id\"\n  [attr.aria-selected]=\"isSelected()\"\n  [attr.aria-controls]=\"option()?.panelId\"\n  [tabIndex]=\"isSelected() ? 0 : -1\"\n  [attr.data-selected]=\"isSelected()\"\n  [attr.data-inverted]=\"inverted()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [attr.data-hidden]=\"isHidden()\"\n  (click)=\"onClickTabItem($event, option()?.id || '')\"\n  (mouseover)=\"handleMouseHover()\"\n  (mouseout)=\"handleMouseOut()\"\n  (keydown)=\"handleKeydown()\"\n>\n  <rte-icon *ngIf=\"option()?.icon\" [name]=\"option()?.icon || ''\" [appearance]=\"isSelected() ? 'filled' : 'outlined'\" />\n  <span *ngIf=\"option()?.label\">{{ option()?.label }}</span>\n  <rte-badge\n    *ngIf=\"displayBadge(option()!)\"\n    [simpleBadge]=\"true\"\n    [badgeContent]=\"option()?.badgeContent || 'empty'\"\n    [badgeType]=\"option()?.badgeType || 'neutral'\"\n    [icon]=\"option()?.badgeIcon || ''\"\n    [count]=\"option()?.badgeCount\"\n  />\n</button>\n<span\n  #hoverIndicator\n  class=\"rte-tab-hover-indicator\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [id]=\"'tab-hover-indicator' + option()?.id\"\n  [ngStyle]=\"{\n    width: hoverIndicatorWidth(),\n    height: hoverIndicatorHeight(),\n    left: hoverIndicatorLeft(),\n    top: hoverIndicatorTop(),\n    opacity: hoverIndicatorOpacity(),\n  }\"\n></span>\n", styles: [":host{pointer-events:none;display:flex}.rte-tabitem{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;display:flex;padding:12px;justify-content:center;align-items:center;gap:12px;background:transparent;color:var(--content-tertiary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=true],.rte-tabitem[data-inverted=true]:hover,.rte-tabitem[data-inverted=true][data-selected=true]{color:var(--content-primary-inverse)}.rte-tabitem[data-direction=vertical]{flex-shrink:1;margin-left:0}.rte-tabitem[data-hidden=true]{visibility:hidden}.rte-tabitem:hover{color:var(--content-secondary)}.rte-tabitem[data-selected=true]{color:var(--content-primary)}.rte-tabitem[data-disabled=true]{color:var(--content-disabled);cursor:not-allowed}.rte-tabitem[data-compact-spacing=true]{padding:4px 12px}.rte-tabitem:focus-visible{z-index:1;outline:2px solid var(--border-brand-focused)}.rte-tab-hover-indicator{position:absolute;top:4px;height:2px;width:2px;background:var(--background-neutral-regular-hover);opacity:0;transition:left .2s ease,width .2s ease;z-index:10}.rte-tab-hover-indicator[data-disabled=true]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-tab-item", imports: [CommonModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #tabItem\n  class=\"rte-tabitem\"\n  role=\"tab\"\n  [id]=\"option()?.id\"\n  [attr.aria-selected]=\"isSelected()\"\n  [attr.aria-controls]=\"option()?.panelId\"\n  [tabIndex]=\"isSelected() ? 0 : -1\"\n  [attr.data-selected]=\"isSelected()\"\n  [attr.data-inverted]=\"inverted()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [attr.data-hidden]=\"isHidden()\"\n  (click)=\"onClickTabItem($event, option()?.id || '')\"\n  (mouseover)=\"handleMouseHover()\"\n  (mouseout)=\"handleMouseOut()\"\n  (keydown)=\"handleKeydown()\"\n>\n  <rte-icon *ngIf=\"option()?.icon\" [name]=\"option()?.icon || ''\" [appearance]=\"isSelected() ? 'filled' : 'outlined'\" />\n  <span *ngIf=\"option()?.label\">{{ option()?.label }}</span>\n  <rte-badge\n    *ngIf=\"displayBadge(option()!)\"\n    [simpleBadge]=\"true\"\n    [badgeContent]=\"option()?.badgeContent || 'empty'\"\n    [badgeType]=\"option()?.badgeType || 'neutral'\"\n    [icon]=\"option()?.badgeIcon || ''\"\n    [count]=\"option()?.badgeCount\"\n  />\n</button>\n<span\n  #hoverIndicator\n  class=\"rte-tab-hover-indicator\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [id]=\"'tab-hover-indicator' + option()?.id\"\n  [ngStyle]=\"{\n    width: hoverIndicatorWidth(),\n    height: hoverIndicatorHeight(),\n    left: hoverIndicatorLeft(),\n    top: hoverIndicatorTop(),\n    opacity: hoverIndicatorOpacity(),\n  }\"\n></span>\n", styles: [":host{pointer-events:none;display:flex}.rte-tabitem{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;display:flex;padding:12px;justify-content:center;align-items:center;gap:12px;background:transparent;color:var(--content-secondary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=true]{color:var(--content-primary-inverse)}.rte-tabitem[data-direction=vertical]{flex-shrink:1;margin-left:0}.rte-tabitem[data-hidden=true]{visibility:hidden}.rte-tabitem[data-selected=true]:not([data-disabled=true]),.rte-tabitem:hover:not([data-disabled=true]){font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px}.rte-tabitem[data-disabled=true]{color:var(--content-disabled);cursor:not-allowed}.rte-tabitem[data-compact-spacing=true]{padding:4px 12px}.rte-tabitem:focus-visible{z-index:1;outline:2px solid var(--border-brand-focused)}.rte-tab-hover-indicator{position:absolute;top:4px;height:2px;width:2px;background:var(--background-neutral-regular-hover);opacity:0;transition:left .2s ease,width .2s ease;z-index:10}.rte-tab-hover-indicator[data-disabled=true]{display:none}\n"] }]
+            args: [{ selector: "rte-tab-item", imports: [CommonModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #tabItem\n  class=\"rte-tabitem\"\n  role=\"tab\"\n  [id]=\"option()?.id\"\n  [attr.aria-selected]=\"isSelected()\"\n  [attr.aria-controls]=\"option()?.panelId\"\n  [tabIndex]=\"isSelected() ? 0 : -1\"\n  [attr.data-selected]=\"isSelected()\"\n  [attr.data-inverted]=\"inverted()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [attr.data-hidden]=\"isHidden()\"\n  (click)=\"onClickTabItem($event, option()?.id || '')\"\n  (mouseover)=\"handleMouseHover()\"\n  (mouseout)=\"handleMouseOut()\"\n  (keydown)=\"handleKeydown()\"\n>\n  <rte-icon *ngIf=\"option()?.icon\" [name]=\"option()?.icon || ''\" [appearance]=\"isSelected() ? 'filled' : 'outlined'\" />\n  <span *ngIf=\"option()?.label\">{{ option()?.label }}</span>\n  <rte-badge\n    *ngIf=\"displayBadge(option()!)\"\n    [simpleBadge]=\"true\"\n    [badgeContent]=\"option()?.badgeContent || 'empty'\"\n    [badgeType]=\"option()?.badgeType || 'neutral'\"\n    [icon]=\"option()?.badgeIcon || ''\"\n    [count]=\"option()?.badgeCount\"\n  />\n</button>\n<span\n  #hoverIndicator\n  class=\"rte-tab-hover-indicator\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [id]=\"'tab-hover-indicator' + option()?.id\"\n  [ngStyle]=\"{\n    width: hoverIndicatorWidth(),\n    height: hoverIndicatorHeight(),\n    left: hoverIndicatorLeft(),\n    top: hoverIndicatorTop(),\n    opacity: hoverIndicatorOpacity(),\n  }\"\n></span>\n", styles: [":host{pointer-events:none;display:flex}.rte-tabitem{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;display:flex;padding:12px;justify-content:center;align-items:center;gap:12px;background:transparent;color:var(--content-tertiary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=true],.rte-tabitem[data-inverted=true]:hover,.rte-tabitem[data-inverted=true][data-selected=true]{color:var(--content-primary-inverse)}.rte-tabitem[data-direction=vertical]{flex-shrink:1;margin-left:0}.rte-tabitem[data-hidden=true]{visibility:hidden}.rte-tabitem:hover{color:var(--content-secondary)}.rte-tabitem[data-selected=true]{color:var(--content-primary)}.rte-tabitem[data-disabled=true]{color:var(--content-disabled);cursor:not-allowed}.rte-tabitem[data-compact-spacing=true]{padding:4px 12px}.rte-tabitem:focus-visible{z-index:1;outline:2px solid var(--border-brand-focused)}.rte-tab-hover-indicator{position:absolute;top:4px;height:2px;width:2px;background:var(--background-neutral-regular-hover);opacity:0;transition:left .2s ease,width .2s ease;z-index:10}.rte-tab-hover-indicator[data-disabled=true]{display:none}\n"] }]
         }] });
 
 class TabComponent {
@@ -3861,5 +4073,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, LoaderComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, StepperComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
+export { BadgeDirective, BannerComponent, BaseSideNavComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, DropdownDirective, DropdownItemComponent, DropdownMenuComponent, DropdownMenuFooterDirective, DropdownMenuHeaderDirective, DropdownModule, DropdownTriggerDirective, 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