@design-system-rte/angular 1.3.0 → 1.4.1-rc1

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';
@@ -40,7 +41,8 @@ import { isStepClickable, focusPreviousNotStepElement, focusNextNotStepElement,
 import { ToastDurationMap } from '@design-system-rte/core/components/toast/toast.constants';
 import { getToastPriority } from '@design-system-rte/core/components/toast/toast.utils';
 import { v4 } from 'uuid';
-import { MIN_SELECT_WIDTH, SELECT_DROPDOWN_OFFSET, THRESHOLD_BOTTOM_POSITION } from '@design-system-rte/core/components/select/select.constants';
+import { SELECT_DROPDOWN_OFFSET, THRESHOLD_BOTTOM_POSITION } from '@design-system-rte/core/components/select/select.constants';
+import { getSelectedOption } from '@design-system-rte/core/components/select/select.utils';
 import { ASSISTIVE_TEXT_ICON_SIZE } from '@design-system-rte/core/components/assistive-text/assistive-text.constants';
 import { getIconNameFromAppearance } from '@design-system-rte/core/components/assistive-text/assistive-text.utils';
 import { scrollToSelectedTab } from '@design-system-rte/core/components/tab/tab.utils';
@@ -140,9 +142,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 // This file is auto-generated. Do not edit manually.
 const RegularIcons = {
-    add: "add",
+    "add": "add",
     "alt-route": "alt_route",
-    apps: "apps",
+    "apps": "apps",
     "arrow-alt-down": "arrow_alt_down",
     "arrow-alt-down-left": "arrow_alt_down_left",
     "arrow-alt-down-right": "arrow_alt_down_right",
@@ -173,100 +175,102 @@ const RegularIcons = {
     "arrow-up": "arrow_up",
     "arrow-up-left": "arrow_up_left",
     "arrow-up-right": "arrow_up_right",
-    asterisk: "asterisk",
+    "asterisk": "asterisk",
     "attach-file": "attach_file",
     "battery-alt-empty": "battery_alt_empty",
     "battery-alt-full": "battery_alt_full",
     "battery-charging": "battery_charging",
     "battery-empty": "battery_empty",
     "battery-full": "battery_full",
-    bluetooth: "bluetooth",
+    "bluetooth": "bluetooth",
     "bluetooth-off": "bluetooth_off",
     "chart-bar": "chart_bar",
     "chart-bar-stacked": "chart_bar_stacked",
-    check: "check",
+    "check": "check",
     "check-indeterminate": "check_indeterminate",
     "check-small": "check_small",
     "checkbox-empty": "checkbox_empty",
-    close: "close",
-    compare: "compare",
+    "close": "close",
+    "compare": "compare",
     "copy-all": "copy_all",
     "crisis-alert": "crisis_alert",
-    cut: "cut",
-    download: "download",
+    "cut": "cut",
+    "download": "download",
     "download-done": "download_done",
     "drag-handle": "drag_handle",
     "drag-indicator": "drag_indicator",
-    exclamation: "exclamation",
+    "exclamation": "exclamation",
     "explore-travel": "explore_travel",
     "external-link": "external_link",
-    filter: "filter",
+    "filter": "filter",
     "filter-off": "filter_off",
     "first-page": "first_page",
-    forward: "forward",
-    fullscreen: "fullscreen",
+    "forward": "forward",
+    "fullscreen": "fullscreen",
     "fullscreen-exit": "fullscreen_exit",
-    history: "history",
+    "history": "history",
     "hourglass-empty": "hourglass_empty",
     "info-i": "info_i",
-    language: "language",
+    "language": "language",
     "last-page": "last_page",
-    link: "link",
+    "link": "link",
     "link-off": "link_off",
-    list: "list",
+    "list": "list",
     "location-disabled": "location_disabled",
-    login: "login",
-    logout: "logout",
-    menu: "menu",
+    "login": "login",
+    "logout": "logout",
+    "menu": "menu",
     "menu-open": "menu_open",
-    monitoring: "monitoring",
+    "monitoring": "monitoring",
     "more-down": "more_down",
     "more-horiz": "more_horiz",
     "more-up": "more_up",
     "more-vert": "more_vert",
-    ohm: "ohm",
+    "ohm": "ohm",
     "open-in-full": "open_in_full",
-    paste: "paste",
+    "paste": "paste",
     "play-pause": "play_pause",
     "power-input": "power_input",
     "power-plug": "power_plug",
     "power-settings": "power_settings",
     "priority-high": "priority_high",
-    public: "public",
-    publish: "publish",
+    "public": "public",
+    "publish": "publish",
     "question-mark": "question_mark",
-    radar: "radar",
+    "radar": "radar",
     "radio-button-empty": "radio_button_empty",
-    redo: "redo",
-    reload: "reload",
-    remove: "remove",
-    reply: "reply",
+    "redo": "redo",
+    "reload": "reload",
+    "remove": "remove",
+    "reply": "reply",
     "reply-all": "reply_all",
-    route: "route",
-    search: "search",
+    "route": "route",
+    "search": "search",
     "side-navigation": "side_navigation",
-    sort: "sort",
+    "sort": "sort",
     "support-agent": "support_agent",
-    timeline: "timeline",
+    "swap-horiz": "swap_horiz",
+    "swap-vert": "swap_vert",
+    "timeline": "timeline",
     "trending-down": "trending_down",
     "trending-flat": "trending_flat",
     "trending-up": "trending_up",
-    tune: "tune",
-    undo: "undo",
-    upload: "upload",
-    water: "water",
+    "tune": "tune",
+    "undo": "undo",
+    "upload": "upload",
+    "water": "water",
     "water-alt": "water_alt",
-    wifi: "wifi",
+    "wifi": "wifi",
     "wifi-off": "wifi_off",
-    windmill: "windmill",
+    "windmill": "windmill",
     "zoom-in": "zoom_in",
     "zoom-out": "zoom_out",
 };
 const TogglableIcons = {
     "add-circle": ["add_circle_outlined", "add_circle_filled"],
     "admin-panel-settings": ["admin_panel_settings_outlined", "admin_panel_settings_filled"],
-    analytics: ["analytics_outlined", "analytics_filled"],
-    archive: ["archive_outlined", "archive_filled"],
+    "analytics": ["analytics_outlined", "analytics_filled"],
+    "archive": ["archive_outlined", "archive_filled"],
     "arrow-circle-chevron-down": ["arrow_circle_chevron_down_outlined", "arrow_circle_chevron_down_filled"],
     "arrow-circle-chevron-left": ["arrow_circle_chevron_left_outlined", "arrow_circle_chevron_left_filled"],
     "arrow-circle-chevron-right": ["arrow_circle_chevron_right_outlined", "arrow_circle_chevron_right_filled"],
@@ -275,153 +279,156 @@ const TogglableIcons = {
     "arrow-circle-left": ["arrow_circle_left_outlined", "arrow_circle_left_filled"],
     "arrow-circle-right": ["arrow_circle_right_outlined", "arrow_circle_right_filled"],
     "arrow-circle-up": ["arrow_circle_up_outlined", "arrow_circle_up_filled"],
-    article: ["article_outlined", "article_filled"],
+    "article": ["article_outlined", "article_filled"],
     "assignment-complete": ["assignment_complete_outlined", "assignment_complete_filled"],
-    assignment: ["assignment_outlined", "assignment_filled"],
+    "assignment": ["assignment_outlined", "assignment_filled"],
     "battery-alert": ["battery_alert_outlined", "battery_alert_filled"],
     "battery-charging-full": ["battery_charging_full_outlined", "battery_charging_full_filled"],
     "bolt-alt-circle": ["bolt_alt_circle_outlined", "bolt_alt_circle_filled"],
     "bolt-alt": ["bolt_alt_outlined", "bolt_alt_filled"],
     "bolt-circle": ["bolt_circle_outlined", "bolt_circle_filled"],
-    bolt: ["bolt_outlined", "bolt_filled"],
-    bookmark: ["bookmark_outlined", "bookmark_filled"],
-    bookmarks: ["bookmarks_outlined", "bookmarks_filled"],
-    build: ["build_outlined", "build_filled"],
+    "bolt": ["bolt_outlined", "bolt_filled"],
+    "bookmark": ["bookmark_outlined", "bookmark_filled"],
+    "bookmarks": ["bookmarks_outlined", "bookmarks_filled"],
+    "build": ["build_outlined", "build_filled"],
     "calendar-available": ["calendar_available_outlined", "calendar_available_filled"],
     "calendar-busy": ["calendar_busy_outlined", "calendar_busy_filled"],
     "calendar-month": ["calendar_month_outlined", "calendar_month_filled"],
     "calendar-today": ["calendar_today_outlined", "calendar_today_filled"],
-    call: ["call_outlined", "call_filled"],
-    cancel: ["cancel_outlined", "cancel_filled"],
-    category: ["category_outlined", "category_filled"],
+    "call": ["call_outlined", "call_filled"],
+    "cancel": ["cancel_outlined", "cancel_filled"],
+    "category": ["category_outlined", "category_filled"],
     "chart-add": ["chart_add_outlined", "chart_add_filled"],
     "chart-area": ["chart_area_outlined", "chart_area_filled"],
     "chart-pie": ["chart_pie_outlined", "chart_pie_filled"],
     "chart-table": ["chart_table_outlined", "chart_table_filled"],
     "chat-alt": ["chat_alt_outlined", "chat_alt_filled"],
     "chat-alt-unread": ["chat_alt_unread_outlined", "chat_alt_unread_filled"],
-    chat: ["chat_outlined", "chat_filled"],
+    "chat": ["chat_outlined", "chat_filled"],
     "chat-unread": ["chat_unread_outlined", "chat_unread_filled"],
     "check-circle": ["check_circle_outlined", "check_circle_filled"],
-    checkbox: ["checkbox_outlined", "checkbox_filled"],
+    "checkbox": ["checkbox_outlined", "checkbox_filled"],
     "checkbox-indeterminate": ["checkbox_indeterminate_outlined", "checkbox_indeterminate_filled"],
-    clock: ["clock_outlined", "clock_filled"],
+    "clock": ["clock_outlined", "clock_filled"],
     "cloud-download": ["cloud_download_outlined", "cloud_download_filled"],
-    cloud: ["cloud_outlined", "cloud_filled"],
+    "cloud": ["cloud_outlined", "cloud_filled"],
     "cloud-off": ["cloud_off_outlined", "cloud_off_filled"],
     "cloud-upload": ["cloud_upload_outlined", "cloud_upload_filled"],
     "comment-add": ["comment_add_outlined", "comment_add_filled"],
-    comment: ["comment_outlined", "comment_filled"],
-    copy: ["copy_outlined", "copy_filled"],
-    dangerous: ["dangerous_outlined", "dangerous_filled"],
-    dashboard: ["dashboard_outlined", "dashboard_filled"],
-    database: ["database_outlined", "database_filled"],
-    delete: ["delete_outlined", "delete_filled"],
-    desktop: ["desktop_outlined", "desktop_filled"],
-    devices: ["devices_outlined", "devices_filled"],
-    draft: ["draft_outlined", "draft_filled"],
-    eco: ["eco_outlined", "eco_filled"],
-    edit: ["edit_outlined", "edit_filled"],
+    "comment": ["comment_outlined", "comment_filled"],
+    "contact": ["contact_outlined", "contact_filled"],
+    "copy": ["copy_outlined", "copy_filled"],
+    "dangerous": ["dangerous_outlined", "dangerous_filled"],
+    "dashboard": ["dashboard_outlined", "dashboard_filled"],
+    "database": ["database_outlined", "database_filled"],
+    "delete": ["delete_outlined", "delete_filled"],
+    "desktop": ["desktop_outlined", "desktop_filled"],
+    "devices": ["devices_outlined", "devices_filled"],
+    "draft": ["draft_outlined", "draft_filled"],
+    "eco": ["eco_outlined", "eco_filled"],
+    "edit": ["edit_outlined", "edit_filled"],
     "electric-meter": ["electric_meter_outlined", "electric_meter_filled"],
-    error: ["error_outlined", "error_filled"],
-    explore: ["explore_outlined", "explore_filled"],
+    "error": ["error_outlined", "error_filled"],
+    "explore": ["explore_outlined", "explore_filled"],
     "explore-off": ["explore_off_outlined", "explore_off_filled"],
+    "export-xls": ["export_xls_outlined", "export_xls_filled"],
     "fast-forward": ["fast_forward_outlined", "fast_forward_filled"],
     "fast-rewind": ["fast_rewind_outlined", "fast_rewind_filled"],
-    feedback: ["feedback_outlined", "feedback_filled"],
+    "feedback": ["feedback_outlined", "feedback_filled"],
     "file-copy": ["file_copy_outlined", "file_copy_filled"],
     "file-download": ["file_download_outlined", "file_download_filled"],
     "file-upload": ["file_upload_outlined", "file_upload_filled"],
     "filter-alt": ["filter_alt_outlined", "filter_alt_filled"],
     "filter-alt-off": ["filter_alt_off_outlined", "filter_alt_off_filled"],
-    fire: ["fire_outlined", "fire_filled"],
+    "fire": ["fire_outlined", "fire_filled"],
     "fit-screen": ["fit_screen_outlined", "fit_screen_filled"],
-    flag: ["flag_outlined", "flag_filled"],
-    flash: ["flash_outlined", "flash_filled"],
+    "flag": ["flag_outlined", "flag_filled"],
+    "flash": ["flash_outlined", "flash_filled"],
     "flash-off": ["flash_off_outlined", "flash_off_filled"],
     "folder-add": ["folder_add_outlined", "folder_add_filled"],
-    folder: ["folder_outlined", "folder_filled"],
+    "folder": ["folder_outlined", "folder_filled"],
     "folder-move": ["folder_move_outlined", "folder_move_filled"],
     "folder-open": ["folder_open_outlined", "folder_open_filled"],
     "folder-shared": ["folder_shared_outlined", "folder_shared_filled"],
-    forum: ["forum_outlined", "forum_filled"],
+    "forum": ["forum_outlined", "forum_filled"],
     "group-add": ["group_add_outlined", "group_add_filled"],
-    group: ["group_outlined", "group_filled"],
-    groups: ["groups_outlined", "groups_filled"],
-    headphones: ["headphones_outlined", "headphones_filled"],
-    heart: ["heart_outlined", "heart_filled"],
-    help: ["help_outlined", "help_filled"],
-    home: ["home_outlined", "home_filled"],
-    hourglass: ["hourglass_outlined", "hourglass_filled"],
+    "group": ["group_outlined", "group_filled"],
+    "groups": ["groups_outlined", "groups_filled"],
+    "handshake": ["handshake_outlined", "handshake_filled"],
+    "headphones": ["headphones_outlined", "headphones_filled"],
+    "heart": ["heart_outlined", "heart_filled"],
+    "help": ["help_outlined", "help_filled"],
+    "home": ["home_outlined", "home_filled"],
+    "hourglass": ["hourglass_outlined", "hourglass_filled"],
     "image-broken": ["image_broken_outlined", "image_broken_filled"],
-    image: ["image_outlined", "image_filled"],
+    "image": ["image_outlined", "image_filled"],
     "image-gallery": ["image_gallery_outlined", "image_gallery_filled"],
-    inbox: ["inbox_outlined", "inbox_filled"],
-    info: ["info_outlined", "info_filled"],
-    keep: ["keep_outlined", "keep_filled"],
+    "inbox": ["inbox_outlined", "inbox_filled"],
+    "info": ["info_outlined", "info_filled"],
+    "keep": ["keep_outlined", "keep_filled"],
     "keep-off": ["keep_off_outlined", "keep_off_filled"],
-    label: ["label_outlined", "label_filled"],
-    laptop: ["laptop_outlined", "laptop_filled"],
+    "label": ["label_outlined", "label_filled"],
+    "laptop": ["laptop_outlined", "laptop_filled"],
     "left-panel-close": ["left_panel_close_outlined", "left_panel_close_filled"],
     "left-panel-open": ["left_panel_open_outlined", "left_panel_open_filled"],
     "light-off": ["light_off_outlined", "light_off_filled"],
     "lightbulb-alt": ["lightbulb_alt_outlined", "lightbulb_alt_filled"],
     "lightbulb-circle": ["lightbulb_circle_outlined", "lightbulb_circle_filled"],
-    lightbulb: ["lightbulb_outlined", "lightbulb_filled"],
+    "lightbulb": ["lightbulb_outlined", "lightbulb_filled"],
     "list-alt": ["list_alt_outlined", "list_alt_filled"],
     "location-me": ["location_me_outlined", "location_me_filled"],
     "location-off": ["location_off_outlined", "location_off_filled"],
     "location-on": ["location_on_outlined", "location_on_filled"],
-    lock: ["lock_outlined", "lock_filled"],
+    "lock": ["lock_outlined", "lock_filled"],
     "lock-open": ["lock_open_outlined", "lock_open_filled"],
     "lock-open-right": ["lock_open_right_outlined", "lock_open_right_filled"],
-    mail: ["mail_outlined", "mail_filled"],
+    "mail": ["mail_outlined", "mail_filled"],
     "mail-unread": ["mail_unread_outlined", "mail_unread_filled"],
-    map: ["map_outlined", "map_filled"],
-    mic: ["mic_outlined", "mic_filled"],
+    "map": ["map_outlined", "map_filled"],
+    "mic": ["mic_outlined", "mic_filled"],
     "mic-off": ["mic_off_outlined", "mic_off_filled"],
     "mode-dark": ["mode_dark_outlined", "mode_dark_filled"],
     "mode-light": ["mode_light_outlined", "mode_light_filled"],
-    notification: ["notification_outlined", "notification_filled"],
+    "notification": ["notification_outlined", "notification_filled"],
     "notification-important": ["notification_important_outlined", "notification_important_filled"],
     "notification-off": ["notification_off_outlined", "notification_off_filled"],
     "notification-unread": ["notification_unread_outlined", "notification_unread_filled"],
-    palette: ["palette_outlined", "palette_filled"],
+    "palette": ["palette_outlined", "palette_filled"],
     "pause-circle": ["pause_circle_outlined", "pause_circle_filled"],
-    pause: ["pause_outlined", "pause_filled"],
+    "pause": ["pause_outlined", "pause_filled"],
     "photo-camera": ["photo_camera_outlined", "photo_camera_filled"],
     "play-circle": ["play_circle_outlined", "play_circle_filled"],
-    play: ["play_outlined", "play_filled"],
-    power: ["power_outlined", "power_filled"],
+    "play": ["play_outlined", "play_filled"],
+    "power": ["power_outlined", "power_filled"],
     "power-off": ["power_off_outlined", "power_off_filled"],
     "power-plug-connect": ["power_plug_connect_outlined", "power_plug_connect_filled"],
     "power-settings-circle": ["power_settings_circle_outlined", "power_settings_circle_filled"],
     "power-solar": ["power_solar_outlined", "power_solar_filled"],
     "power-switch": ["power_switch_outlined", "power_switch_filled"],
     "power-wind": ["power_wind_outlined", "power_wind_filled"],
-    print: ["print_outlined", "print_filled"],
+    "print": ["print_outlined", "print_filled"],
     "right-panel-close": ["right_panel_close_outlined", "right_panel_close_filled"],
     "right-panel-open": ["right_panel_open_outlined", "right_panel_open_filled"],
-    save: ["save_outlined", "save_filled"],
-    send: ["send_outlined", "send_filled"],
-    settings: ["settings_outlined", "settings_filled"],
-    share: ["share_outlined", "share_filled"],
+    "save": ["save_outlined", "save_filled"],
+    "send": ["send_outlined", "send_filled"],
+    "settings": ["settings_outlined", "settings_filled"],
+    "share": ["share_outlined", "share_filled"],
     "skip-next": ["skip_next_outlined", "skip_next_filled"],
     "skip-previous": ["skip_previous_outlined", "skip_previous_filled"],
-    smartphone: ["smartphone_outlined", "smartphone_filled"],
-    star: ["star_outlined", "star_filled"],
+    "smartphone": ["smartphone_outlined", "smartphone_filled"],
+    "star": ["star_outlined", "star_filled"],
     "sticky-note": ["sticky_note_outlined", "sticky_note_filled"],
     "stop-circle": ["stop_circle_outlined", "stop_circle_filled"],
-    stop: ["stop_outlined", "stop_filled"],
-    subtitles: ["subtitles_outlined", "subtitles_filled"],
+    "stop": ["stop_outlined", "stop_filled"],
+    "subtitles": ["subtitles_outlined", "subtitles_filled"],
     "text-snippet": ["text_snippet_outlined", "text_snippet_filled"],
     "trash-restore": ["trash_restore_outlined", "trash_restore_filled"],
-    unarchive: ["unarchive_outlined", "unarchive_filled"],
+    "unarchive": ["unarchive_outlined", "unarchive_filled"],
     "user-add": ["user_add_outlined", "user_add_filled"],
     "user-circle": ["user_circle_outlined", "user_circle_filled"],
-    user: ["user_outlined", "user_filled"],
+    "user": ["user_outlined", "user_filled"],
     "user-settings": ["user_settings_outlined", "user_settings_filled"],
-    verified: ["verified_outlined", "verified_filled"],
+    "verified": ["verified_outlined", "verified_filled"],
     "video-camera": ["video_camera_outlined", "video_camera_filled"],
     "video-camera-off": ["video_camera_off_outlined", "video_camera_off_filled"],
     "video-gallery": ["video_gallery_outlined", "video_gallery_filled"],
@@ -437,8 +444,8 @@ const TogglableIcons = {
     "volume-mute": ["volume_mute_outlined", "volume_mute_filled"],
     "volume-off": ["volume_off_outlined", "volume_off_filled"],
     "volume-up": ["volume_up_outlined", "volume_up_filled"],
-    warning: ["warning_outlined", "warning_filled"],
-    waterdrop: ["waterdrop_outlined", "waterdrop_filled"],
+    "warning": ["warning_outlined", "warning_filled"],
+    "waterdrop": ["waterdrop_outlined", "waterdrop_filled"],
 };
 function isValidIconName(iconName) {
     return isValidIconName$1(iconName, RegularIcons, TogglableIcons);
@@ -819,6 +826,7 @@ class BadgeComponent {
         this.count = input();
         this.icon = input("notification");
         this.simpleBadge = input(false);
+        this.withPlusSign = input(false);
         this.isValidIconName = computed(() => {
             const icon = this.icon();
             return isValidIconName(icon);
@@ -842,13 +850,16 @@ class BadgeComponent {
             count: this.count(),
             iconSize: this.iconSize(),
         }));
+        this.badgeText = computed(() => {
+            return `${this.withPlusSign() && this.count() && this.count() > 0 ? "+" : ""}${this.displayCount()}`;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BadgeComponent, isStandalone: true, selector: "rte-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, simpleBadge: { classPropertyName: "simpleBadge", publicName: "simpleBadge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n  data-testid=\"badge\"\n  [attr.data-simple-badge]=\"simpleBadge()\"\n  [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n  <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ displayCount() }}\n  </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3px;right:-3px}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{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;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: BadgeComponent, isStandalone: true, selector: "rte-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, simpleBadge: { classPropertyName: "simpleBadge", publicName: "simpleBadge", isSignal: true, isRequired: false, transformFunction: null }, withPlusSign: { classPropertyName: "withPlusSign", publicName: "withPlusSign", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n  data-testid=\"badge\"\n  [attr.data-simple-badge]=\"simpleBadge()\"\n  [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n  <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ badgeText() }}\n  </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3px;right:-3px}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{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;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-badge", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n  data-testid=\"badge\"\n  [attr.data-simple-badge]=\"simpleBadge()\"\n  [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n  <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ displayCount() }}\n  </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3px;right:-3px}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{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;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"] }]
+            args: [{ selector: "rte-badge", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n  data-testid=\"badge\"\n  [attr.data-simple-badge]=\"simpleBadge()\"\n  [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n  <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ badgeText() }}\n  </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3px;right:-3px}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{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;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"] }]
         }] });
 
 class BadgeDirective {
@@ -919,11 +930,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 +998,7 @@ class DropdownItemComponent {
                 badgeIcon: item?.badgeIcon,
             });
         });
+        this.boundHandleSubMenuMouseEnter = () => this.handleSubMenuMouseEnter();
     }
     handleClick(event) {
         if (this.item()?.disabled) {
@@ -940,32 +1006,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    <rte-checkbox\n      *ngIf=\"item()?.hasCheckbox\"\n      [label]=\"item()?.label ?? ''\"\n      [id]=\"menuId() + ':' + item()?.id\"\n      [checked]=\"item()?.selected ?? false\"\n      [disabled]=\"item()?.disabled ?? false\"\n      [showLabel]=\"false\"\n      [indeterminate]=\"item()?.isIndeterminate ?? false\"\n    ></rte-checkbox>\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", "withPlusSign"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked"] }] }); }
 }
 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, CheckboxComponent], 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    <rte-checkbox\n      *ngIf=\"item()?.hasCheckbox\"\n      [label]=\"item()?.label ?? ''\"\n      [id]=\"menuId() + ':' + item()?.id\"\n      [checked]=\"item()?.selected ?? false\"\n      [disabled]=\"item()?.disabled ?? false\"\n      [showLabel]=\"false\"\n      [indeterminate]=\"item()?.isIndeterminate ?? false\"\n    ></rte-checkbox>\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 +1267,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 +1287,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 +1299,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 +1446,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() {
@@ -1247,6 +1459,7 @@ class DropdownDirective {
         this.rteDropdownAutofocus = input(true);
         this.rteDropdownAutoOpen = input(true);
         this.rteDropdownWidth = input(null);
+        this.rteCloseOnItemClick = input(true);
         this.menuEvent = output();
         this.dropdownId = `dropdown_${++DropdownDirective.idCounter}`;
         this.overlayService = inject(OverlayService);
@@ -1258,6 +1471,7 @@ class DropdownDirective {
         this.cdr = inject(ChangeDetectorRef);
         this.clickedOutside = output();
         this.closedDropdown = output();
+        this.menuChangeEvent = output();
         this.isActive = signal(false);
         this.menuInputs = computed(() => {
             const menu = this.menu();
@@ -1272,20 +1486,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 +1535,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 +1549,32 @@ class DropdownDirective {
     }
     onMenuEvent(event) {
         this.menuEvent.emit(event);
-        this.isActive.set(false);
-        this.dropdownService.closeAllMenus();
+        if (!event.item?.children?.length && this.rteCloseOnItemClick()) {
+            this.isActive.set(false);
+            this.dropdownService.closeAllMenus();
+        }
+    }
+    onMenuChangeEvent(event) {
+        this.menuEvent.emit(event);
     }
     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 +1583,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 +1633,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 +1648,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);
@@ -1440,7 +1666,7 @@ class DropdownDirective {
         }, DROPDOWN_ANIMATION_DURATION);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: DropdownDirective, isStandalone: true, selector: "[rteDropdown]", inputs: { rteDropdownId: { classPropertyName: "rteDropdownId", publicName: "rteDropdownId", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownPosition: { classPropertyName: "rteDropdownPosition", publicName: "rteDropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAlignment: { classPropertyName: "rteDropdownAlignment", publicName: "rteDropdownAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownIsOpen: { classPropertyName: "rteDropdownIsOpen", publicName: "rteDropdownIsOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownOffset: { classPropertyName: "rteDropdownOffset", publicName: "rteDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutofocus: { classPropertyName: "rteDropdownAutofocus", publicName: "rteDropdownAutofocus", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutoOpen: { classPropertyName: "rteDropdownAutoOpen", publicName: "rteDropdownAutoOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownWidth: { classPropertyName: "rteDropdownWidth", publicName: "rteDropdownWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuEvent: "menuEvent", clickedOutside: "clickedOutside", closedDropdown: "closedDropdown" }, host: { properties: { "class.dropdown": "true", "attr.data-dropdown-id": "dropdownId" } }, queries: [{ propertyName: "trigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: DropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: DropdownDirective, isStandalone: true, selector: "[rteDropdown]", inputs: { rteDropdownId: { classPropertyName: "rteDropdownId", publicName: "rteDropdownId", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownPosition: { classPropertyName: "rteDropdownPosition", publicName: "rteDropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAlignment: { classPropertyName: "rteDropdownAlignment", publicName: "rteDropdownAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownIsOpen: { classPropertyName: "rteDropdownIsOpen", publicName: "rteDropdownIsOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownOffset: { classPropertyName: "rteDropdownOffset", publicName: "rteDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutofocus: { classPropertyName: "rteDropdownAutofocus", publicName: "rteDropdownAutofocus", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutoOpen: { classPropertyName: "rteDropdownAutoOpen", publicName: "rteDropdownAutoOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownWidth: { classPropertyName: "rteDropdownWidth", publicName: "rteDropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, rteCloseOnItemClick: { classPropertyName: "rteCloseOnItemClick", publicName: "rteCloseOnItemClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuEvent: "menuEvent", clickedOutside: "clickedOutside", closedDropdown: "closedDropdown", menuChangeEvent: "menuChangeEvent" }, host: { properties: { "class.dropdown": "true", "attr.data-dropdown-id": "dropdownId" } }, queries: [{ propertyName: "trigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: DropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownDirective, decorators: [{
             type: Directive,
@@ -1492,8 +1718,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");
@@ -1556,7 +1780,7 @@ class SplitButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n  [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n  <button\n    class=\"split-button-left size-{{ size() }}\"\n    data-testid=\"Main action button\"\n    type=\"button\"\n    [disabled]=\"disabled()\"\n  >\n    <rte-icon *ngIf=\"icon()\" [name]=\"icon()!\" [size]=\"splitButtonLeftIconSize()\" />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{ label() }}\n    </p>\n  </button>\n\n  <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n  <div\n    rteDropdown\n    style=\"height: 100%\"\n    [rteDropdownPosition]=\"internalPosition()\"\n    [rteDropdownAlignment]=\"internalAlignment()\"\n    [attr.data-testid]=\"'Menu container'\"\n  >\n    @if (hasBadge()) {\n      <button\n        class=\"split-button-right size-{{ size() }}\"\n        rteBadge\n        rteDropdownTrigger\n        data-testid=\"Menu button\"\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        [rteBadgeType]=\"badgeType()!\"\n        [rteBadgeContent]=\"badgeContent()!\"\n        [rteBadgeCount]=\"badgeCount()\"\n        [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n        [attr.data-expanded]=\"isOpen()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-label]=\"ariaLabelRight()\"\n        [disabled]=\"disabled()\"\n        (click)=\"isOpen.set(true)\"\n        (keydown)=\"handleKeyDownOnRightButton($event)\"\n      >\n        <div class=\"split-button-right-icon-container\">\n          <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n        </div>\n      </button>\n    } @else {\n      <button\n        class=\"split-button-right size-{{ size() }}\"\n        rteDropdownTrigger\n        data-testid=\"Menu button\"\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n        [attr.data-expanded]=\"isOpen()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-label]=\"ariaLabelRight()\"\n        [disabled]=\"disabled()\"\n        (click)=\"isOpen.set(true)\"\n        (keydown)=\"handleKeyDownOnRightButton($event)\"\n      >\n        <div class=\"split-button-right-icon-container\">\n          <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n        </div>\n      </button>\n    }\n    <rte-dropdown-menu [items]=\"options()\" />\n  </div>\n</div>\n", styles: [".split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{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}.split-button-container .split-button-left .split-button-label.size-l{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}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n  [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n  <button\n    class=\"split-button-left size-{{ size() }}\"\n    data-testid=\"Main action button\"\n    type=\"button\"\n    [disabled]=\"disabled()\"\n  >\n    <rte-icon *ngIf=\"icon()\" [name]=\"icon()!\" [size]=\"splitButtonLeftIconSize()\" />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{ label() }}\n    </p>\n  </button>\n\n  <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n  <div\n    rteDropdown\n    style=\"height: 100%\"\n    [rteDropdownPosition]=\"internalPosition()\"\n    [rteDropdownAlignment]=\"internalAlignment()\"\n    [attr.data-testid]=\"'Menu container'\"\n  >\n    @if (hasBadge()) {\n      <button\n        class=\"split-button-right size-{{ size() }}\"\n        rteBadge\n        rteDropdownTrigger\n        data-testid=\"Menu button\"\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        [rteBadgeType]=\"badgeType()!\"\n        [rteBadgeContent]=\"badgeContent()!\"\n        [rteBadgeCount]=\"badgeCount()\"\n        [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n        [attr.data-expanded]=\"isOpen()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-label]=\"ariaLabelRight()\"\n        [disabled]=\"disabled()\"\n        (click)=\"isOpen.set(true)\"\n        (keydown)=\"handleKeyDownOnRightButton($event)\"\n      >\n        <div class=\"split-button-right-icon-container\">\n          <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n        </div>\n      </button>\n    } @else {\n      <button\n        class=\"split-button-right size-{{ size() }}\"\n        rteDropdownTrigger\n        data-testid=\"Menu button\"\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n        [attr.data-expanded]=\"isOpen()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-label]=\"ariaLabelRight()\"\n        [disabled]=\"disabled()\"\n        (click)=\"isOpen.set(true)\"\n        (keydown)=\"handleKeyDownOnRightButton($event)\"\n      >\n        <div class=\"split-button-right-icon-container\">\n          <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n        </div>\n      </button>\n    }\n    <rte-dropdown-menu [items]=\"options()\" />\n  </div>\n</div>\n", styles: [".split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{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}.split-button-container .split-button-left .split-button-label.size-l{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}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
@@ -1777,6 +2001,7 @@ class ChipComponent {
         this.close = output();
         this.isCheckable = computed(() => this.type() === "single" || this.type() === "multi");
         this.role = computed(() => CHIP_TYPE_TO_ARIA_ROLE_MAP[this.type()] || null);
+        this.isFocusable = computed(() => this.type() !== "input");
     }
     onClick(event) {
         event.stopPropagation();
@@ -1815,11 +2040,11 @@ class ChipComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ChipComponent, isStandalone: true, selector: "rte-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, ngImport: i0, template: "<span\n  class=\"chip\"\n  tabindex=\"0\"\n  [attr.role]=\"role()\"\n  [attr.data-selected]=\"isCheckable() ? selected() : null\"\n  [attr.data-disabled]=\"disabled()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-type]=\"type()\"\n  [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onClick($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <ng-container *ngIf=\"type() === 'multi'\">\n    <span class=\"chip-icon-container\">\n      <span class=\"chip-icon\" [class.chip-icon--visible]=\"selected()\" [attr.aria-hidden]=\"!selected()\">\n        <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n      </span>\n      <span class=\"chip-icon\" [class.chip-icon--visible]=\"!selected()\" [attr.aria-hidden]=\"selected()\">\n        <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n      </span>\n    </span>\n  </ng-container>\n  <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n  <button\n    *ngIf=\"type() === 'input'\"\n    type=\"button\"\n    class=\"chip-close-button\"\n    [attr.aria-label]=\"'Supprimer ' + label()\"\n    [disabled]=\"disabled()\"\n    [value]=\"label()\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n  </button>\n</span>\n", styles: [".chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-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;padding:0 6px}.chip-label[data-type=input]{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;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\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: ChipComponent, isStandalone: true, selector: "rte-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, ngImport: i0, template: "<span\n  class=\"chip\"\n  [tabindex]=\"isFocusable() ? 0 : -1\"\n  [attr.role]=\"role()\"\n  [attr.data-selected]=\"isCheckable() ? selected() : null\"\n  [attr.data-disabled]=\"disabled()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-type]=\"type()\"\n  [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onClick($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <ng-container *ngIf=\"type() === 'multi'\">\n    <span class=\"chip-icon-container\">\n      <span class=\"chip-icon\" [class.chip-icon--visible]=\"selected()\" [attr.aria-hidden]=\"!selected()\">\n        <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n      </span>\n      <span class=\"chip-icon\" [class.chip-icon--visible]=\"!selected()\" [attr.aria-hidden]=\"selected()\">\n        <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n      </span>\n    </span>\n  </ng-container>\n  <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n  <button\n    *ngIf=\"type() === 'input'\"\n    type=\"button\"\n    class=\"chip-close-button\"\n    [attr.aria-label]=\"'Supprimer ' + label()\"\n    [disabled]=\"disabled()\"\n    [value]=\"label()\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n  </button>\n</span>\n", styles: [".chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-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;padding:0 6px}.chip-label[data-type=input]{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;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\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: ChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-chip", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"chip\"\n  tabindex=\"0\"\n  [attr.role]=\"role()\"\n  [attr.data-selected]=\"isCheckable() ? selected() : null\"\n  [attr.data-disabled]=\"disabled()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-type]=\"type()\"\n  [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onClick($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <ng-container *ngIf=\"type() === 'multi'\">\n    <span class=\"chip-icon-container\">\n      <span class=\"chip-icon\" [class.chip-icon--visible]=\"selected()\" [attr.aria-hidden]=\"!selected()\">\n        <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n      </span>\n      <span class=\"chip-icon\" [class.chip-icon--visible]=\"!selected()\" [attr.aria-hidden]=\"selected()\">\n        <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n      </span>\n    </span>\n  </ng-container>\n  <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n  <button\n    *ngIf=\"type() === 'input'\"\n    type=\"button\"\n    class=\"chip-close-button\"\n    [attr.aria-label]=\"'Supprimer ' + label()\"\n    [disabled]=\"disabled()\"\n    [value]=\"label()\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n  </button>\n</span>\n", styles: [".chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-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;padding:0 6px}.chip-label[data-type=input]{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;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: "rte-chip", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"chip\"\n  [tabindex]=\"isFocusable() ? 0 : -1\"\n  [attr.role]=\"role()\"\n  [attr.data-selected]=\"isCheckable() ? selected() : null\"\n  [attr.data-disabled]=\"disabled()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-type]=\"type()\"\n  [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onClick($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <ng-container *ngIf=\"type() === 'multi'\">\n    <span class=\"chip-icon-container\">\n      <span class=\"chip-icon\" [class.chip-icon--visible]=\"selected()\" [attr.aria-hidden]=\"!selected()\">\n        <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n      </span>\n      <span class=\"chip-icon\" [class.chip-icon--visible]=\"!selected()\" [attr.aria-hidden]=\"selected()\">\n        <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n      </span>\n    </span>\n  </ng-container>\n  <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n  <button\n    *ngIf=\"type() === 'input'\"\n    type=\"button\"\n    class=\"chip-close-button\"\n    [attr.aria-label]=\"'Supprimer ' + label()\"\n    [disabled]=\"disabled()\"\n    [value]=\"label()\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n  </button>\n</span>\n", styles: [".chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-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;padding:0 6px}.chip-label[data-type=input]{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;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
         }] });
 
 class TextareaComponent {
@@ -1943,6 +2168,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 +2277,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", "withPlusSign"] }], 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 {
@@ -2095,7 +2322,7 @@ class BreadcrumbItemComponent {
         this.initialScrollWidth.set(el.scrollWidth);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "rte-breadcrumb-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-breadcrumb-item\">\n  @if (isLast()) {\n    @if (isEllipsisActive()) {\n      <div [rteTooltip]=\"item()!.label\" [rteTooltipPosition]=\"'bottom'\" [style]=\"tooltipTriggerStyle()\">\n        <a role=\"link\" aria-current=\"page\" tabindex=\"-1\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n          {{ item()!.label }}\n        </a>\n      </div>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    } @else {\n      <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n        {{ item()!.label }}\n      </a>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    }\n  } @else {\n    @if (isEllipsisActive()) {\n      <div\n        [rteTooltip]=\"item()!.label\"\n        [rteTooltipPosition]=\"'bottom'\"\n        [style]=\"tooltipTriggerStyle()\"\n        [style.overflow]=\"'unset'\"\n        [rteTooltipShouldFocusTrigger]=\"false\"\n      >\n        <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      </div>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    } @else {\n      <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    }\n  }\n</div>\n", styles: [".rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;gap:4px;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }, { 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.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "rte-breadcrumb-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-breadcrumb-item\">\n  @if (isLast()) {\n    @if (isEllipsisActive()) {\n      <div [rteTooltip]=\"item()!.label\" [rteTooltipPosition]=\"'bottom'\" [style]=\"tooltipTriggerStyle()\">\n        <a role=\"link\" aria-current=\"page\" tabindex=\"-1\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n          {{ item()!.label }}\n        </a>\n      </div>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    } @else {\n      <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n        {{ item()!.label }}\n      </a>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    }\n  } @else {\n    @if (isEllipsisActive()) {\n      <div\n        [rteTooltip]=\"item()!.label\"\n        [rteTooltipPosition]=\"'bottom'\"\n        [style]=\"tooltipTriggerStyle()\"\n        [style.overflow]=\"'unset'\"\n        [rteTooltipShouldFocusTrigger]=\"false\"\n      >\n        <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      </div>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    } @else {\n      <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    }\n  }\n</div>\n", styles: [".rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;gap:4px;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
@@ -2129,7 +2356,7 @@ class BreadcrumbsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbsComponent, isStandalone: true, selector: "rte-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav\n  class=\"breadcrumbs-container\"\n  role=\"navigation\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"{ truncated: truncatedItems()?.truncated?.length }\"\n>\n  @if (truncatedItems()?.truncated?.length) {\n    <rte-breadcrumb-item [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n      <rte-icon-button\n        rteDropdownTrigger\n        name=\"more-horiz\"\n        role=\"menu\"\n        variant=\"neutral\"\n        aria-label=\"More items\"\n        data-testid=\"show-more\"\n        tabindex=\"-1\"\n        [compactSpacing]=\"true\"\n      />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"badgeCount()\"\n        [simpleBadge]=\"true\"\n        [badgeContent]=\"badgeContent()!\"\n        [icon]=\"badgeIcon()!\"\n        [badgeType]=\"badgeType()!\"\n        [badgeSize]=\"badgeSize()!\"\n      />\n      <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n    </span>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n      />\n      @if (i < truncatedItems()!.remaining.length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  } @else {\n    @for (item of items(); track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === items().length - 1\"\n      />\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: [".breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "rte-breadcrumb-item", inputs: ["item", "isLast", "breadcrumbItemMaxWidth"] }, { 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.0.0", version: "18.2.14", type: BreadcrumbsComponent, isStandalone: true, selector: "rte-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav\n  class=\"breadcrumbs-container\"\n  role=\"navigation\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"{ truncated: truncatedItems()?.truncated?.length }\"\n>\n  @if (truncatedItems()?.truncated?.length) {\n    <rte-breadcrumb-item [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n      <rte-icon-button\n        rteDropdownTrigger\n        name=\"more-horiz\"\n        role=\"menu\"\n        variant=\"neutral\"\n        aria-label=\"More items\"\n        data-testid=\"show-more\"\n        tabindex=\"-1\"\n        [compactSpacing]=\"true\"\n      />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"badgeCount()\"\n        [simpleBadge]=\"true\"\n        [badgeContent]=\"badgeContent()!\"\n        [icon]=\"badgeIcon()!\"\n        [badgeType]=\"badgeType()!\"\n        [badgeSize]=\"badgeSize()!\"\n      />\n      <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n    </span>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n      />\n      @if (i < truncatedItems()!.remaining.length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  } @else {\n    @for (item of items(); track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === items().length - 1\"\n      />\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: [".breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "rte-breadcrumb-item", inputs: ["item", "isLast", "breadcrumbItemMaxWidth"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
@@ -2847,7 +3074,7 @@ class NavItemComponent {
         this.focused.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavItemComponent, isStandalone: true, selector: "rte-nav-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (collapsed() && label()) {\n  @if (link()) {\n    <a\n      class=\"nav-item-container {{ appearance() }}\"\n      rteTooltip\n      rteTooltipPosition=\"right\"\n      rteTooltipAlignment=\"center\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [rteTooltip]=\"label()\"\n      [rteTooltipArrow]=\"false\"\n      [rteTooltipGap]=\"12\"\n      [rteTooltipShouldFocusTrigger]=\"true\"\n      [href]=\"link()!\"\n      [attr.aria-label]=\"label()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </a>\n  } @else {\n    <div\n      class=\"nav-item-container {{ appearance() }}\"\n      rteTooltip\n      rteTooltipPosition=\"right\"\n      rteTooltipAlignment=\"center\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [rteTooltip]=\"label()\"\n      [rteTooltipArrow]=\"false\"\n      [rteTooltipGap]=\"12\"\n      [rteTooltipShouldFocusTrigger]=\"false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </div>\n  }\n} @else {\n  @if (link()) {\n    <a\n      class=\"nav-item-container {{ appearance() }}\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [href]=\"link()!\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </a>\n  } @else {\n    <div\n      class=\"nav-item-container {{ appearance() }}\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </div>\n  }\n}\n\n<ng-template #contentTemplate>\n  <span\n    class=\"nav-item\"\n    [attr.tabindex]=\"link() ? undefined : tabIndex()\"\n    [attr.aria-label]=\"label()\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"nav-item-left\">\n      @if (showIcon() && icon()) {\n        <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n      }\n      @if (!collapsed()) {\n        <span>{{ label() }}</span>\n      }\n    </div>\n    <div class=\"nav-item-right\">\n      @if (badge()) {\n        <rte-badge\n          [badgeType]=\"badge()!.badgeType || 'brand'\"\n          [badgeSize]=\"badge()!.size || 'm'\"\n          [badgeContent]=\"badge()!.content || 'number'\"\n          [count]=\"badge()!.count\"\n          [icon]=\"badge()!.icon || 'notification'\"\n          [simpleBadge]=\"true\"\n        />\n      }\n    </div>\n  </span>\n</ng-template>\n", styles: [".nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container:link,.nav-item-container:visited,.nav-item-container:link:hover,.nav-item-container:visited:hover{text-decoration:none;color:inherit}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.nav-item-container:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavItemComponent, isStandalone: true, selector: "rte-nav-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "@if (collapsed() && label()) {\n  @if (link()) {\n    <a\n      class=\"nav-item-container {{ appearance() }}\"\n      rteTooltip\n      rteTooltipPosition=\"right\"\n      rteTooltipAlignment=\"center\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [rteTooltip]=\"label()\"\n      [rteTooltipArrow]=\"false\"\n      [rteTooltipGap]=\"12\"\n      [rteTooltipShouldFocusTrigger]=\"true\"\n      [href]=\"link()!\"\n      [attr.aria-label]=\"label()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </a>\n  } @else {\n    <div\n      class=\"nav-item-container {{ appearance() }}\"\n      rteTooltip\n      rteTooltipPosition=\"right\"\n      rteTooltipAlignment=\"center\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [rteTooltip]=\"label()\"\n      [rteTooltipArrow]=\"false\"\n      [rteTooltipGap]=\"12\"\n      [rteTooltipShouldFocusTrigger]=\"false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </div>\n  }\n} @else {\n  @if (link()) {\n    <a\n      class=\"nav-item-container {{ appearance() }}\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n      [href]=\"link()!\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </a>\n  } @else {\n    <div\n      class=\"nav-item-container {{ appearance() }}\"\n      [id]=\"id()\"\n      [ngClass]=\"{ collapsed: collapsed(), nested: isNested(), active: active(), focused: focused() }\"\n      [attr.role]=\"role()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"contentTemplate\" />\n    </div>\n  }\n}\n\n<ng-template #contentTemplate>\n  <span\n    class=\"nav-item\"\n    [attr.tabindex]=\"link() ? undefined : tabIndex()\"\n    [attr.aria-label]=\"label()\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"nav-item-left\">\n      @if (showIcon() && icon()) {\n        <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n      }\n      @if (!collapsed()) {\n        <span>{{ label() }}</span>\n      }\n    </div>\n    <div class=\"nav-item-right\">\n      @if (badge()) {\n        <rte-badge\n          [badgeType]=\"badge()!.badgeType || 'brand'\"\n          [badgeSize]=\"badge()!.size || 'm'\"\n          [badgeContent]=\"badge()!.content || 'number'\"\n          [count]=\"badge()!.count\"\n          [icon]=\"badge()!.icon || 'notification'\"\n          [simpleBadge]=\"true\"\n        />\n      }\n    </div>\n  </span>\n</ng-template>\n", styles: [".nav-item-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;width:100%;display:flex;justify-content:flex-start;gap:8px;padding:8px 6px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;align-items:center;box-sizing:border-box;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-item-container:link,.nav-item-container:visited,.nav-item-container:link:hover,.nav-item-container:visited:hover{text-decoration:none;color:inherit}.nav-item-container.neutral{color:var(--content-secondary)}.nav-item-container.neutral:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-item-container.neutral.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);color:var(--content-brand-pressed)}.nav-item-container.neutral.nested{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-item-container.neutral.nested.active{border-left:1px solid var(--border-brand-navigation-active)}.nav-item-container:hover{background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-item-container.active{background:var(--background-brand-navigation-pressed);border-left:2px solid var(--border-brand-navigation-divider);color:var(--content-primary-inverse)}.nav-item-container:active.focused{outline:none}.nav-item-container .nav-item{display:flex;padding:0;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;outline:none;justify-content:space-between}.nav-item-container .nav-item:link,.nav-item-container .nav-item:visited,.nav-item-container .nav-item:link:hover,.nav-item-container .nav-item:visited:hover{text-decoration:none;color:inherit}.nav-item-container .nav-item .nav-item-left{display:flex;align-items:center;gap:8px}.nav-item-container .nav-item .nav-item-right{display:flex;align-items:center;gap:4px}.nav-item-container.focused{outline:1px solid var(--border-brand-focused);outline-offset:0}.nav-item-container.collapsed{padding:8px 12px;justify-content:center;border-left:none}.nav-item-container.collapsed .nav-item{justify-content:center;gap:0}.nav-item-container.nested{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-item-container.nested.active{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.nav-item-container:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavItemComponent, decorators: [{
             type: Component,
@@ -2925,7 +3152,7 @@ class NavMenuComponent {
         this.openChange.emit({ id: this.id() || this.label(), open: false });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavMenuComponent, isStandalone: true, selector: "rte-nav-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showMenuIcon: { classPropertyName: "showMenuIcon", publicName: "showMenuIcon", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", openChange: "openChange" }, ngImport: i0, template: "@if (collapsed() && label()) {\n  <li\n    class=\"nav-menu-container {{ appearance() }}\"\n    rteTooltip\n    rteTooltipPosition=\"right\"\n    rteTooltipAlignment=\"center\"\n    [rteTooltipGap]=\"12\"\n    [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n    [rteTooltip]=\"label()\"\n    [rteTooltipArrow]=\"false\"\n    [rteTooltipShouldFocusTrigger]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n  </li>\n} @else {\n  <li\n    class=\"nav-menu-container {{ appearance() }}\"\n    [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n  </li>\n}\n\n<ng-template #menuContentTemplate>\n  @if (link()) {\n    <a\n      class=\"nav-menu\"\n      [href]=\"link()!\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-label]=\"label()\"\n      (click)=\"toggleMenu()\"\n    >\n      <div class=\"menu-content-left\">\n        @if (showIcon() && icon()) {\n          <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n        }\n        @if (!collapsed()) {\n          <span>{{ label() }}</span>\n        }\n      </div>\n      <div class=\"menu-content-right\">\n        @if (badge()) {\n          <rte-badge\n            [badgeType]=\"badge()!.badgeType || 'brand'\"\n            [badgeSize]=\"badge()!.size || 'm'\"\n            [badgeContent]=\"badge()!.content || 'number'\"\n            [count]=\"badge()!.count\"\n            [icon]=\"badge()!.icon || 'notification'\"\n            [simpleBadge]=\"true\"\n          />\n        }\n        @if (shouldShowMenu() && showMenuIcon()) {\n          <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n        }\n      </div>\n    </a>\n  } @else {\n    <span\n      class=\"nav-menu\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-label]=\"label()\"\n      (click)=\"toggleMenu()\"\n      (keydown)=\"handleKeyDown($event)\"\n    >\n      <div class=\"menu-content-left\">\n        @if (showIcon() && icon()) {\n          <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n        }\n        @if (!collapsed()) {\n          <span>{{ label() }}</span>\n        }\n      </div>\n      <div class=\"menu-content-right\">\n        @if (badge()) {\n          <rte-badge\n            [badgeType]=\"badge()!.badgeType || 'brand'\"\n            [badgeSize]=\"badge()!.size || 'm'\"\n            [badgeContent]=\"badge()!.content || 'number'\"\n            [count]=\"badge()!.count\"\n            [icon]=\"badge()!.icon || 'notification'\"\n            [simpleBadge]=\"true\"\n          />\n        }\n        @if (shouldShowMenu() && showMenuIcon()) {\n          <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n        }\n      </div>\n    </span>\n  }\n</ng-template>\n\n<ng-template #nestedMenuTemplate>\n  @if (shouldShowMenu()) {\n    <ul class=\"nested-menu\" [ngClass]=\"{ 'nested-menu-open': open() }\">\n      @if (open()) {\n        @for (item of items(); track item.id || item.label) {\n          @if (hasNestedItemsForItem(item)) {\n            <rte-nav-menu\n              [id]=\"item.id\"\n              [label]=\"item.label\"\n              [icon]=\"item.icon\"\n              [showIcon]=\"item.showIcon ?? true\"\n              [collapsed]=\"collapsed()\"\n              [link]=\"item.link\"\n              [items]=\"item.items || []\"\n              [showMenuIcon]=\"showMenuIcon()\"\n              [isNested]=\"true\"\n              [open]=\"item.open\"\n              [parentMenuOpen]=\"open()\"\n              [appearance]=\"appearance()\"\n              [showDivider]=\"item.showDivider!\"\n              [badge]=\"item.badge\"\n              (itemClick)=\"handleMenuClick($event)\"\n              (openChange)=\"handleMenuOpenChange($event)\"\n            />\n          } @else {\n            <li>\n              <rte-nav-item\n                [id]=\"item.id\"\n                [label]=\"item.label\"\n                [icon]=\"item.icon\"\n                [showIcon]=\"item.showIcon ?? true\"\n                [collapsed]=\"collapsed()\"\n                [link]=\"item.link\"\n                [isNested]=\"true\"\n                [parentMenuOpen]=\"open()\"\n                [appearance]=\"appearance()\"\n                [showDivider]=\"item.showDivider!\"\n                [badge]=\"item.badge\"\n                (itemClick)=\"itemClick.emit($event)\"\n              />\n            </li>\n            @if (item.showDivider) {\n              <rte-divider [appearance]=\"dividerAppearance()\" />\n            }\n          }\n        }\n      }\n    </ul>\n  }\n</ng-template>\n\n@if (showDivider()) {\n  <rte-divider [appearance]=\"dividerAppearance()\" />\n}\n", styles: [":host{display:contents}.nav-menu-container{width:100%;display:flex;flex-direction:column;justify-content:flex-start;border-radius:4px;transition:background-color .3s;box-sizing:border-box}.nav-menu-container.neutral .nav-menu{color:var(--content-secondary)}.nav-menu-container.neutral .nav-menu:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-menu-container.neutral .nav-menu.focused{outline:none}.nav-menu-container.neutral.nested .nav-menu{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-menu-container .nav-menu{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;display:flex;padding:8px 6px;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;justify-content:space-between;width:100%;box-sizing:border-box;cursor:pointer;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-menu-container .nav-menu .menu-content-left{display:flex;align-items:center;gap:8px}.nav-menu-container .nav-menu .menu-content-right{display:flex;align-items:center;gap:4px}.nav-menu-container .nav-menu:hover{border-radius:4px;background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-menu-container .nav-menu:link,.nav-menu-container .nav-menu:link:hover{text-decoration:none;color:inherit}.nav-menu-container .nav-menu:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0;border-radius:4px}.nav-menu-container.collapsed .nav-menu{padding:8px 12px;justify-content:center;gap:0;border-left:none}.nav-menu-container.nested .nav-menu{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-menu-container .menu-icon{flex-shrink:0;transition:transform .2s;margin-left:auto}.nav-menu-container .menu-icon-open{transform:rotate(90deg)}.nav-menu-container .nested-menu{list-style:none;margin:0;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;padding:0 0 0 16px;gap:0}.nav-menu-container .nested-menu.nested-menu-open{max-height:1000px;padding-top:4px;padding-bottom:4px}.nav-menu-container .icon{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: NavMenuComponent, selector: "rte-nav-menu", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "items", "open", "showMenuIcon", "isNested", "parentMenuOpen", "appearance", "badge", "showDivider"], outputs: ["itemClick", "openChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: NavItemComponent, selector: "rte-nav-item", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "appearance", "active", "badge", "isNested", "parentMenuOpen", "role", "showDivider"], outputs: ["itemClick"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NavMenuComponent, isStandalone: true, selector: "rte-nav-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showMenuIcon: { classPropertyName: "showMenuIcon", publicName: "showMenuIcon", isSignal: true, isRequired: false, transformFunction: null }, isNested: { classPropertyName: "isNested", publicName: "isNested", isSignal: true, isRequired: false, transformFunction: null }, parentMenuOpen: { classPropertyName: "parentMenuOpen", publicName: "parentMenuOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", openChange: "openChange" }, ngImport: i0, template: "@if (collapsed() && label()) {\n  <li\n    class=\"nav-menu-container {{ appearance() }}\"\n    rteTooltip\n    rteTooltipPosition=\"right\"\n    rteTooltipAlignment=\"center\"\n    [rteTooltipGap]=\"12\"\n    [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n    [rteTooltip]=\"label()\"\n    [rteTooltipArrow]=\"false\"\n    [rteTooltipShouldFocusTrigger]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n  </li>\n} @else {\n  <li\n    class=\"nav-menu-container {{ appearance() }}\"\n    [ngClass]=\"{ collapsed: collapsed(), open: open(), nested: isNested() }\"\n  >\n    <ng-container [ngTemplateOutlet]=\"menuContentTemplate\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"nestedMenuTemplate\"></ng-container>\n  </li>\n}\n\n<ng-template #menuContentTemplate>\n  @if (link()) {\n    <a\n      class=\"nav-menu\"\n      [href]=\"link()!\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-label]=\"label()\"\n      (click)=\"toggleMenu()\"\n    >\n      <div class=\"menu-content-left\">\n        @if (showIcon() && icon()) {\n          <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n        }\n        @if (!collapsed()) {\n          <span>{{ label() }}</span>\n        }\n      </div>\n      <div class=\"menu-content-right\">\n        @if (badge()) {\n          <rte-badge\n            [badgeType]=\"badge()!.badgeType || 'brand'\"\n            [badgeSize]=\"badge()!.size || 'm'\"\n            [badgeContent]=\"badge()!.content || 'number'\"\n            [count]=\"badge()!.count\"\n            [icon]=\"badge()!.icon || 'notification'\"\n            [simpleBadge]=\"true\"\n          />\n        }\n        @if (shouldShowMenu() && showMenuIcon()) {\n          <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n        }\n      </div>\n    </a>\n  } @else {\n    <span\n      class=\"nav-menu\"\n      [attr.tabindex]=\"tabIndex()\"\n      [attr.aria-label]=\"label()\"\n      (click)=\"toggleMenu()\"\n      (keydown)=\"handleKeyDown($event)\"\n    >\n      <div class=\"menu-content-left\">\n        @if (showIcon() && icon()) {\n          <rte-icon class=\"icon\" [name]=\"icon()!\" [size]=\"iconSize()\" />\n        }\n        @if (!collapsed()) {\n          <span>{{ label() }}</span>\n        }\n      </div>\n      <div class=\"menu-content-right\">\n        @if (badge()) {\n          <rte-badge\n            [badgeType]=\"badge()!.badgeType || 'brand'\"\n            [badgeSize]=\"badge()!.size || 'm'\"\n            [badgeContent]=\"badge()!.content || 'number'\"\n            [count]=\"badge()!.count\"\n            [icon]=\"badge()!.icon || 'notification'\"\n            [simpleBadge]=\"true\"\n          />\n        }\n        @if (shouldShowMenu() && showMenuIcon()) {\n          <rte-icon name=\"arrow-chevron-right\" class=\"menu-icon\" [ngClass]=\"{ 'menu-icon-open': open() }\" />\n        }\n      </div>\n    </span>\n  }\n</ng-template>\n\n<ng-template #nestedMenuTemplate>\n  @if (shouldShowMenu()) {\n    <ul class=\"nested-menu\" [ngClass]=\"{ 'nested-menu-open': open() }\">\n      @if (open()) {\n        @for (item of items(); track item.id || item.label) {\n          @if (hasNestedItemsForItem(item)) {\n            <rte-nav-menu\n              [id]=\"item.id\"\n              [label]=\"item.label\"\n              [icon]=\"item.icon\"\n              [showIcon]=\"item.showIcon ?? true\"\n              [collapsed]=\"collapsed()\"\n              [link]=\"item.link\"\n              [items]=\"item.items || []\"\n              [showMenuIcon]=\"showMenuIcon()\"\n              [isNested]=\"true\"\n              [open]=\"item.open\"\n              [parentMenuOpen]=\"open()\"\n              [appearance]=\"appearance()\"\n              [showDivider]=\"item.showDivider!\"\n              [badge]=\"item.badge\"\n              (itemClick)=\"handleMenuClick($event)\"\n              (openChange)=\"handleMenuOpenChange($event)\"\n            />\n          } @else {\n            <li>\n              <rte-nav-item\n                [id]=\"item.id\"\n                [label]=\"item.label\"\n                [icon]=\"item.icon\"\n                [showIcon]=\"item.showIcon ?? true\"\n                [collapsed]=\"collapsed()\"\n                [link]=\"item.link\"\n                [isNested]=\"true\"\n                [parentMenuOpen]=\"open()\"\n                [appearance]=\"appearance()\"\n                [showDivider]=\"item.showDivider!\"\n                [badge]=\"item.badge\"\n                (itemClick)=\"itemClick.emit($event)\"\n              />\n            </li>\n            @if (item.showDivider) {\n              <rte-divider [appearance]=\"dividerAppearance()\" />\n            }\n          }\n        }\n      }\n    </ul>\n  }\n</ng-template>\n\n@if (showDivider()) {\n  <rte-divider [appearance]=\"dividerAppearance()\" />\n}\n", styles: [":host{display:contents}.nav-menu-container{width:100%;display:flex;flex-direction:column;justify-content:flex-start;border-radius:4px;transition:background-color .3s;box-sizing:border-box}.nav-menu-container.neutral .nav-menu{color:var(--content-secondary)}.nav-menu-container.neutral .nav-menu:hover{background:var(--background-neutral-navigation-hover);color:var(--content-primary)}.nav-menu-container.neutral .nav-menu.focused{outline:none}.nav-menu-container.neutral.nested .nav-menu{border-radius:0 4px 4px 0;border-left:1px solid var(--border-divider)}.nav-menu-container .nav-menu{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;display:flex;padding:8px 6px;align-items:center;gap:8px;flex:1 0 0;-webkit-user-select:none;user-select:none;justify-content:space-between;width:100%;box-sizing:border-box;cursor:pointer;border-left:2px solid transparent;color:var(--content-brand-navigation-default)}.nav-menu-container .nav-menu .menu-content-left{display:flex;align-items:center;gap:8px}.nav-menu-container .nav-menu .menu-content-right{display:flex;align-items:center;gap:4px}.nav-menu-container .nav-menu:hover{border-radius:4px;background:var(--background-brand-navigation-hover);color:var(--content-brand-navigation-hover)}.nav-menu-container .nav-menu:link,.nav-menu-container .nav-menu:link:hover{text-decoration:none;color:inherit}.nav-menu-container .nav-menu:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0;border-radius:4px}.nav-menu-container.collapsed .nav-menu{padding:8px 12px;justify-content:center;gap:0;border-left:none}.nav-menu-container.nested .nav-menu{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;border-radius:0 4px 4px 0;border-left:1px solid var(--border-brand-navigation-divider);padding:4px 8px}.nav-menu-container .menu-icon{flex-shrink:0;transition:transform .2s;margin-left:auto}.nav-menu-container .menu-icon-open{transform:rotate(90deg)}.nav-menu-container .nested-menu{list-style:none;margin:0;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;padding:0 0 0 16px;gap:0}.nav-menu-container .nested-menu.nested-menu-open{max-height:1000px;padding-top:4px;padding-bottom:4px}.nav-menu-container .icon{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: NavMenuComponent, selector: "rte-nav-menu", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "items", "open", "showMenuIcon", "isNested", "parentMenuOpen", "appearance", "badge", "showDivider"], outputs: ["itemClick", "openChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: NavItemComponent, selector: "rte-nav-item", inputs: ["id", "icon", "showIcon", "label", "collapsed", "link", "appearance", "active", "badge", "isNested", "parentMenuOpen", "role", "showDivider"], outputs: ["itemClick"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NavMenuComponent, decorators: [{
             type: Component,
@@ -3105,11 +3332,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 +3543,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 +3565,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 {
@@ -3370,6 +3598,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "rte-assistive-text", imports: [CommonModule, IconComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-assistive-text {{ appearance() }}\" [ngStyle]=\"{ width: widthStyle() }\">\n  <rte-icon\n    *ngIf=\"showIcon() && iconName()\"\n    class=\"assistive-icon-{{ appearance() }}\"\n    [name]=\"iconName()!\"\n    [size]=\"assistiveTextIconSize\"\n  ></rte-icon>\n  @if (isLink()) {\n    <rte-link class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"href() || ''\" [label]=\"label() || ''\">\n    </rte-link>\n  } @else {\n    <span>{{ label() }}</span>\n  }\n</div>\n", styles: [".rte-assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-assistive-text.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"] }]
         }] });
 
+class SelectFooterDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef), { optional: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SelectFooterDirective, isStandalone: true, selector: "[rteSelectFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteSelectFooter]",
+                    standalone: true,
+                }]
+        }] });
+
+class SelectHeaderDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef), { optional: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SelectHeaderDirective, isStandalone: true, selector: "[rteSelectHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteSelectHeader]",
+                    standalone: true,
+                }]
+        }] });
+
 class SelectComponent {
     constructor() {
         this.id = input();
@@ -3385,17 +3643,32 @@ class SelectComponent {
         this.showLabelRequirement = input(false);
         this.disabled = input(false);
         this.readOnly = input(false);
-        this.value = input();
         this.options = input([]);
         this.isError = input(false);
         this.showAssistiveIcon = input(false);
         this.showResetButton = input(false);
-        this.width = input(MIN_SELECT_WIDTH);
+        this.multiple = input(false);
+        this.value = input();
+        this.withSelectAll = input(false);
+        this.optionToDisplay = input("first-selected");
         this.selectRef = viewChild("selectRef");
         this.buttonsContainerRef = viewChild("buttonsContainerRef");
         this.selectDropdownOffset = SELECT_DROPDOWN_OFFSET;
-        this.computedWidth = computed(() => {
-            return `${this.width()}px`;
+        this.headerDirective = contentChild(SelectHeaderDirective);
+        this.footerDirective = contentChild(SelectFooterDirective);
+        this.headerTemplate = input(undefined);
+        this.footerTemplate = input(undefined);
+        this.headerContentRef = viewChild("headerContent");
+        this.footerContentRef = viewChild("footerContent");
+        this.hasHeaderContent = computed(() => {
+            const hasTemplate = this.headerDirective()?.templateRef || !!this.headerTemplate();
+            const hasProjectedContent = !!this.headerContentRef()?.nativeElement?.children.length;
+            return hasTemplate || hasProjectedContent;
+        });
+        this.hasFooterContent = computed(() => {
+            const hasTemplate = this.footerDirective()?.templateRef || !!this.footerTemplate();
+            const hasProjectedContent = !!this.footerContentRef()?.nativeElement?.children.length;
+            return hasTemplate || hasProjectedContent;
         });
         this.clearButton = computed(() => {
             return this.buttonsContainerRef()?.nativeElement.querySelector(".rte-icon-button.clear-button");
@@ -3409,6 +3682,11 @@ class SelectComponent {
             }
             return "bottom";
         });
+        this.optionsFormatted = signal(this.options().map(({ value, label }) => ({
+            id: value,
+            label: label,
+            selected: this.isSelected(value),
+        })));
         this.internalValue = signal(this.value());
         this.requirementIndicatorValue = computed(() => this.required()
             ? this.showLabelRequirement()
@@ -3416,20 +3694,8 @@ class SelectComponent {
                 : REQUIREMENT_INDICATOR_VALUE.requiredIcon
             : REQUIREMENT_INDICATOR_VALUE.optional);
         this.valueChange = output();
-        this.currentOptionLabel = computed(() => {
-            return this.options().find((option) => option.value === this.internalValue())?.label;
-        });
-        this.isAssistiveTextLinkVisible = computed(() => {
-            return this.assistiveTextAppearance() === "link" && this.assistiveTextLink() !== undefined;
-        });
-        this.formattedOptions = computed(() => {
-            return this.options().map(({ value, label }) => ({
-                id: value,
-                label: label,
-                selected: value === this.internalValue(),
-            }));
-        });
-        this.shouldDisplayClearButton = computed(() => this.showResetButton() && !!this.internalValue() && !this.disabled());
+        this.currentDisplayedOption = signal(getSelectedOption(this.optionToDisplay() || "first-selected", this.options(), this.internalValue()));
+        this.shouldDisplayClearButton = signal(false);
         this.shouldDisplayErrorIcon = computed(() => this.isError() && !this.disabled() && !this.readOnly());
         this.isActive = signal(false);
         this.selectWidth = computed(() => {
@@ -3440,6 +3706,13 @@ class SelectComponent {
             return null;
         });
     }
+    ngAfterViewInit() {
+        this.regenerateOptionsFormatted();
+        this.computeShouldDisplayClearButton();
+    }
+    areAllOptionsSelected() {
+        return this.multiple() && this.options().every((option) => this.internalValue()?.includes(option.value));
+    }
     handleOnClickTrigger() {
         if (this.readOnly() || this.disabled()) {
             return;
@@ -3454,7 +3727,7 @@ class SelectComponent {
             const clearButton = this.buttonsContainerRef()?.nativeElement.children[0].children[0];
             const isClearButtonFocused = document.activeElement === clearButton;
             if (isClearButtonFocused && (event.key === SPACE_KEY || event.key === ENTER_KEY)) {
-                this.clearSelection(event);
+                this.clearSelection();
                 return;
             }
         }
@@ -3462,24 +3735,53 @@ class SelectComponent {
             this.toggleDropdown();
         }
     }
+    handleOnCloseChip(event, value) {
+        event.stopPropagation();
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        if (this.multiple() && value) {
+            const currentValue = this.internalValue();
+            if (currentValue && Array.isArray(currentValue)) {
+                const valueIndex = currentValue.indexOf(value);
+                if (valueIndex > -1) {
+                    currentValue.splice(valueIndex, 1);
+                    this.internalValue.set(currentValue);
+                    this.regenerateOptionsFormatted();
+                    this.valueChange.emit(value);
+                    this.currentDisplayedOption.set(getSelectedOption(this.optionToDisplay() || "first-selected", this.options(), this.internalValue()));
+                    this.computeShouldDisplayClearButton();
+                }
+            }
+        }
+    }
     handleOnClickClearButton(event) {
         if (this.readOnly() || this.disabled()) {
             return;
         }
-        event.preventDefault();
-        this.clearSelection(event);
+        event.stopPropagation();
+        this.clearSelection();
     }
-    handleOnClickItem(id) {
+    handleOnClickItem(value) {
         if (this.readOnly() || this.disabled()) {
             return;
         }
-        this.internalValue.set(id);
-        const event = new CustomEvent("change", {
-            bubbles: true,
-            detail: { target: { value: id } },
-        });
-        this.valueChange.emit(event);
-        this.isActive.set(!this.isActive());
+        if (this.multiple()) {
+            if (value === "select-all") {
+                this.clickedSelectAll();
+            }
+            else {
+                this.clickedSelectItemMultiple(value);
+            }
+        }
+        else {
+            this.internalValue.set(value);
+            this.isActive.set(!this.isActive());
+        }
+        this.regenerateOptionsFormatted();
+        this.valueChange.emit(value);
+        this.currentDisplayedOption.set(getSelectedOption(this.optionToDisplay() || "first-selected", this.options(), this.internalValue()));
+        this.computeShouldDisplayClearButton();
         this.selectRef()?.nativeElement.focus();
     }
     handleOnClosingDropdown() {
@@ -3497,30 +3799,117 @@ class SelectComponent {
             this.selectRef()?.nativeElement.dispatchEvent(new Event("closeDropdown"));
         }
     }
-    clearSelection(event) {
-        this.internalValue.set(undefined);
+    clearSelection() {
+        if (!this.multiple()) {
+            this.internalValue.set("");
+        }
+        else {
+            this.internalValue.set([]);
+        }
         this.isActive.set(false);
-        this.valueChange.emit(event);
+        this.valueChange.emit("select-all");
         this.selectRef()?.nativeElement.dispatchEvent(new Event("clearContent"));
+        this.regenerateOptionsFormatted();
+        this.currentDisplayedOption.set(getSelectedOption(this.optionToDisplay() || "first-selected", this.options(), this.internalValue()));
+        this.computeShouldDisplayClearButton();
+    }
+    regenerateOptionsFormatted() {
+        if (this.withSelectAll()) {
+            this.optionsFormatted.set([
+                {
+                    id: "select-all",
+                    label: "Sélectionner tout",
+                    selected: this.areAllOptionsSelected(),
+                    hasCheckbox: true,
+                    hasSeparator: true,
+                    isIndeterminate: this.options().some((option) => this.isSelected(option.value)) && !this.areAllOptionsSelected(),
+                },
+                ...this.options().map((option) => this.mapOptionToDropdownItemConfig(option)),
+            ]);
+        }
+        else {
+            this.optionsFormatted.set(this.options().map((option) => ({ ...this.mapOptionToDropdownItemConfig(option), hasSeparator: false })));
+        }
+    }
+    isSelected(value) {
+        if (this.multiple()) {
+            const currentValue = this.internalValue();
+            if (currentValue) {
+                return currentValue.includes(value);
+            }
+        }
+        return this.internalValue() === value;
+    }
+    computeShouldDisplayClearButton() {
+        const shouldDisplay = this.showResetButton() &&
+            (this.multiple()
+                ? Array.isArray(this.internalValue()) && this.internalValue().length > 0
+                : !!this.internalValue()) &&
+            !this.disabled();
+        this.shouldDisplayClearButton.set(shouldDisplay);
+    }
+    clickedSelectAll() {
+        if (this.areAllOptionsSelected()) {
+            this.internalValue.set([]);
+        }
+        else {
+            this.internalValue.set(this.options().map((option) => option.value));
+        }
+    }
+    clickedSelectItemMultiple(value) {
+        const currentValue = this.internalValue();
+        if (currentValue === undefined) {
+            this.internalValue.set([value]);
+        }
+        else {
+            if (Array.isArray(currentValue)) {
+                const valuesArray = currentValue;
+                const valueIndex = valuesArray.indexOf(value);
+                if (valueIndex > -1) {
+                    valuesArray.splice(valueIndex, 1);
+                }
+                else {
+                    valuesArray.push(value);
+                }
+                this.internalValue.set(valuesArray);
+            }
+        }
+    }
+    mapOptionToDropdownItemConfig(option) {
+        const { value, label } = option;
+        return {
+            id: value,
+            label: label,
+            selected: this.isSelected(value),
+            hasCheckbox: this.multiple(),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "rte-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextAppearance: { classPropertyName: "assistiveTextAppearance", publicName: "assistiveTextAppearance", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLink: { classPropertyName: "assistiveTextLink", publicName: "assistiveTextLink", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, showResetButton: { classPropertyName: "showResetButton", publicName: "showResetButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "rte-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextAppearance: { classPropertyName: "assistiveTextAppearance", publicName: "assistiveTextAppearance", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLink: { classPropertyName: "assistiveTextLink", publicName: "assistiveTextLink", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, showResetButton: { classPropertyName: "showResetButton", publicName: "showResetButton", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, withSelectAll: { classPropertyName: "withSelectAll", publicName: "withSelectAll", isSignal: true, isRequired: false, transformFunction: null }, optionToDisplay: { classPropertyName: "optionToDisplay", publicName: "optionToDisplay", 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: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: SelectComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true, isSignal: true }, { propertyName: "buttonsContainerRef", first: true, predicate: ["buttonsContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n  <label\n    *ngIf=\"label() && labelPosition() === 'side'\"\n    class=\"rte-select-label\"\n    [attr.data-label-position]=\"labelPosition()\"\n    [attr.id]=\"labelId()\"\n    [attr.for]=\"id()\"\n    >{{ label()\n    }}<span\n      *ngIf=\"required() || showLabelRequirement()\"\n      class=\"requirement-indicator\"\n      aria-hidden=\"true\"\n      [ngClass]=\"{\n        required: required(),\n        'show-label-requirement': showLabelRequirement(),\n      }\"\n      >{{ requirementIndicatorValue() }}</span\n    ></label\n  >\n\n  <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n    <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n      >{{ label()\n      }}<span\n        *ngIf=\"required() || showLabelRequirement()\"\n        class=\"requirement-indicator\"\n        aria-hidden=\"true\"\n        [ngClass]=\"{\n          required: required(),\n          'show-label-requirement': showLabelRequirement(),\n        }\"\n        >{{ requirementIndicatorValue() }}</span\n      ></label\n    >\n  </div>\n  <div\n    rteDropdown\n    [rteDropdownId]=\"'dropdown_select_' + id()\"\n    [rteDropdownPosition]=\"dropdownPosition()\"\n    [rteDropdownOffset]=\"selectDropdownOffset\"\n    [rteDropdownWidth]=\"selectWidth()\"\n    (menuEvent)=\"handleOnClickItem($event.id)\"\n    (clickedOutside)=\"handleOnClickOutside()\"\n    (closedDropdown)=\"handleOnClosingDropdown()\"\n  >\n    <div\n      #selectRef\n      rteDropdownTrigger\n      class=\"rte-select-wrapper\"\n      [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n      [attr.role]=\"'combobox'\"\n      [attr.data-error]=\"isError()\"\n      [attr.data-disabled]=\"disabled()\"\n      [attr.data-read-only]=\"readOnly()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-readonly]=\"readOnly()\"\n      [attr.aria-labelledby]=\"labelId()\"\n      [attr.aria-expanded]=\"isActive()\"\n      [attr.data-active]=\"isActive()\"\n      [ngStyle]=\"{ width: computedWidth() }\"\n      (dropdownTriggered)=\"handleOnClickTrigger()\"\n      (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n    >\n      <div class=\"rte-select-content\">\n        <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n        <div class=\"rte-select-value\">\n          <span>{{ currentOptionLabel() }}</span>\n        </div>\n        <div #buttonsContainerRef class=\"rte-select-right-icons\">\n          <rte-icon-button\n            *ngIf=\"shouldDisplayClearButton()\"\n            name=\"cancel\"\n            variant=\"neutral\"\n            class=\"rte-select-icon-button clear-icon\"\n            [disabled]=\"disabled()\"\n            (clickEvent)=\"handleOnClickClearButton($event)\"\n          />\n          <rte-icon\n            class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n            variant=\"neutral\"\n            [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n          />\n        </div>\n      </div>\n    </div>\n    <rte-dropdown-menu [items]=\"formattedOptions()\" />\n    <rte-assistive-text\n      *ngIf=\"assistiveTextLabel()\"\n      [label]=\"assistiveTextLabel()\"\n      [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n      [showIcon]=\"showAssistiveIcon()\"\n      [href]=\"assistiveTextLink()\"\n      [width]=\"width()\"\n    />\n  </div>\n</div>\n", styles: [".rte-select-container{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;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{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:2px 8px;color:var(--content-secondary);justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{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:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: AssistiveTextComponent, selector: "rte-assistive-text", inputs: ["label", "appearance", "showIcon", "href", "width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "headerDirective", first: true, predicate: SelectHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: SelectFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true, isSignal: true }, { propertyName: "buttonsContainerRef", first: true, predicate: ["buttonsContainerRef"], descendants: true, isSignal: true }, { 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-select-container\" [attr.data-label-position]=\"labelPosition()\">\n  <label\n    *ngIf=\"label() && labelPosition() === 'side'\"\n    class=\"rte-select-label\"\n    [attr.data-label-position]=\"labelPosition()\"\n    [attr.id]=\"labelId()\"\n    [attr.for]=\"id()\"\n    >{{ label()\n    }}<span\n      *ngIf=\"required() || showLabelRequirement()\"\n      class=\"requirement-indicator\"\n      aria-hidden=\"true\"\n      [ngClass]=\"{\n        required: required(),\n        'show-label-requirement': showLabelRequirement(),\n      }\"\n      >{{ requirementIndicatorValue() }}</span\n    ></label\n  >\n\n  <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n    <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n      >{{ label()\n      }}<span\n        *ngIf=\"required() || showLabelRequirement()\"\n        class=\"requirement-indicator\"\n        aria-hidden=\"true\"\n        [ngClass]=\"{\n          required: required(),\n          'show-label-requirement': showLabelRequirement(),\n        }\"\n        >{{ requirementIndicatorValue() }}</span\n      ></label\n    >\n  </div>\n  <div\n    rteDropdown\n    [rteDropdownId]=\"'dropdown_select_' + id()\"\n    [rteDropdownPosition]=\"dropdownPosition()\"\n    [rteDropdownOffset]=\"selectDropdownOffset\"\n    [rteDropdownWidth]=\"selectWidth()\"\n    [rteCloseOnItemClick]=\"multiple() ? false : true\"\n    (menuEvent)=\"handleOnClickItem($event.id)\"\n    (menuChangeEvent)=\"handleOnClickItem($event.id)\"\n    (clickedOutside)=\"handleOnClickOutside()\"\n    (closedDropdown)=\"handleOnClosingDropdown()\"\n  >\n    <div\n      #selectRef\n      rteDropdownTrigger\n      class=\"rte-select-wrapper\"\n      [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n      [attr.role]=\"'combobox'\"\n      [attr.data-error]=\"isError()\"\n      [attr.data-disabled]=\"disabled()\"\n      [attr.data-read-only]=\"readOnly()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-readonly]=\"readOnly()\"\n      [attr.aria-labelledby]=\"labelId()\"\n      [attr.aria-expanded]=\"isActive()\"\n      [attr.data-active]=\"isActive()\"\n      (dropdownTriggered)=\"handleOnClickTrigger()\"\n      (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n    >\n      <div class=\"rte-select-content\">\n        <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n\n        <div class=\"rte-select-value\">\n          @if (this.multiple() && currentDisplayedOption()) {\n            <div class=\"rte-select-multiple-values\">\n              <rte-chip\n                type=\"input\"\n                [label]=\"currentDisplayedOption()!.label\"\n                (close)=\"handleOnCloseChip($event, currentDisplayedOption()!.value)\"\n              />\n              <rte-badge\n                *ngIf=\"internalValue()!.length > 1\"\n                content=\"number\"\n                badgeType=\"brand\"\n                size=\"m\"\n                [count]=\"internalValue()!.length - 1\"\n                [withPlusSign]=\"true\"\n                [simpleBadge]=\"true\"\n              />\n            </div>\n          } @else {\n            <span>{{ currentDisplayedOption()?.label }}</span>\n          }\n        </div>\n        <div #buttonsContainerRef class=\"rte-select-right-icons\">\n          <rte-icon-button\n            *ngIf=\"shouldDisplayClearButton()\"\n            name=\"cancel\"\n            variant=\"neutral\"\n            class=\"rte-select-icon-button clear-icon\"\n            [disabled]=\"disabled()\"\n            (clickEvent)=\"handleOnClickClearButton($event)\"\n          />\n          <rte-icon\n            class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n            variant=\"neutral\"\n            [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n          />\n        </div>\n      </div>\n    </div>\n    <rte-dropdown-menu [items]=\"optionsFormatted()\">\n      @if (hasHeaderContent()) {\n        <ng-template rteDropdownMenuHeader>\n          <div #headerContent>\n            @if (headerTemplate() || headerDirective()?.templateRef) {\n              <ng-container\n                [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"\n              ></ng-container>\n            } @else {\n              <div #headerContent>\n                <ng-content select=\"[select-header]\"></ng-content>\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n      @if (hasFooterContent()) {\n        <ng-template rteDropdownMenuFooter>\n          <div #footerContent>\n            @if (footerTemplate() || footerDirective()?.templateRef) {\n              <ng-container\n                [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"\n              ></ng-container>\n            } @else {\n              <div #footerContent>\n                <ng-content select=\"[select-footer]\"></ng-content>\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    </rte-dropdown-menu>\n    <rte-assistive-text\n      *ngIf=\"assistiveTextLabel()\"\n      [label]=\"assistiveTextLabel()\"\n      [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n      [showIcon]=\"showAssistiveIcon()\"\n      [href]=\"assistiveTextLink()\"\n    />\n  </div>\n</div>\n", styles: [".rte-select-container{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;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{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:2px 8px;color:var(--content-secondary);white-space:normal;overflow-wrap:normal;word-break:normal;align-items:center}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{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:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value .rte-select-multiple-values,.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px;color:var(--content-secondary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:hover{color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:active{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "directive", type: DropdownMenuHeaderDirective, selector: "[rteDropdownMenuHeader]" }, { kind: "directive", type: DropdownMenuFooterDirective, selector: "[rteDropdownMenuFooter]" }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: AssistiveTextComponent, selector: "rte-assistive-text", inputs: ["label", "appearance", "showIcon", "href", "width"] }, { kind: "component", type: ChipComponent, selector: "rte-chip", inputs: ["id", "label", "selected", "disabled", "type", "compactSpacing"], outputs: ["click", "close"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-select", imports: [CommonModule, IconComponent, DropdownModule, IconButtonComponent, AssistiveTextComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: "rte-select", imports: [
+                        CommonModule,
+                        IconComponent,
+                        DropdownModule,
+                        IconButtonComponent,
+                        AssistiveTextComponent,
+                        ChipComponent,
+                        BadgeComponent,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: SelectComponent,
                             multi: true,
                         },
-                    ], template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n  <label\n    *ngIf=\"label() && labelPosition() === 'side'\"\n    class=\"rte-select-label\"\n    [attr.data-label-position]=\"labelPosition()\"\n    [attr.id]=\"labelId()\"\n    [attr.for]=\"id()\"\n    >{{ label()\n    }}<span\n      *ngIf=\"required() || showLabelRequirement()\"\n      class=\"requirement-indicator\"\n      aria-hidden=\"true\"\n      [ngClass]=\"{\n        required: required(),\n        'show-label-requirement': showLabelRequirement(),\n      }\"\n      >{{ requirementIndicatorValue() }}</span\n    ></label\n  >\n\n  <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n    <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n      >{{ label()\n      }}<span\n        *ngIf=\"required() || showLabelRequirement()\"\n        class=\"requirement-indicator\"\n        aria-hidden=\"true\"\n        [ngClass]=\"{\n          required: required(),\n          'show-label-requirement': showLabelRequirement(),\n        }\"\n        >{{ requirementIndicatorValue() }}</span\n      ></label\n    >\n  </div>\n  <div\n    rteDropdown\n    [rteDropdownId]=\"'dropdown_select_' + id()\"\n    [rteDropdownPosition]=\"dropdownPosition()\"\n    [rteDropdownOffset]=\"selectDropdownOffset\"\n    [rteDropdownWidth]=\"selectWidth()\"\n    (menuEvent)=\"handleOnClickItem($event.id)\"\n    (clickedOutside)=\"handleOnClickOutside()\"\n    (closedDropdown)=\"handleOnClosingDropdown()\"\n  >\n    <div\n      #selectRef\n      rteDropdownTrigger\n      class=\"rte-select-wrapper\"\n      [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n      [attr.role]=\"'combobox'\"\n      [attr.data-error]=\"isError()\"\n      [attr.data-disabled]=\"disabled()\"\n      [attr.data-read-only]=\"readOnly()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-readonly]=\"readOnly()\"\n      [attr.aria-labelledby]=\"labelId()\"\n      [attr.aria-expanded]=\"isActive()\"\n      [attr.data-active]=\"isActive()\"\n      [ngStyle]=\"{ width: computedWidth() }\"\n      (dropdownTriggered)=\"handleOnClickTrigger()\"\n      (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n    >\n      <div class=\"rte-select-content\">\n        <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n        <div class=\"rte-select-value\">\n          <span>{{ currentOptionLabel() }}</span>\n        </div>\n        <div #buttonsContainerRef class=\"rte-select-right-icons\">\n          <rte-icon-button\n            *ngIf=\"shouldDisplayClearButton()\"\n            name=\"cancel\"\n            variant=\"neutral\"\n            class=\"rte-select-icon-button clear-icon\"\n            [disabled]=\"disabled()\"\n            (clickEvent)=\"handleOnClickClearButton($event)\"\n          />\n          <rte-icon\n            class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n            variant=\"neutral\"\n            [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n          />\n        </div>\n      </div>\n    </div>\n    <rte-dropdown-menu [items]=\"formattedOptions()\" />\n    <rte-assistive-text\n      *ngIf=\"assistiveTextLabel()\"\n      [label]=\"assistiveTextLabel()\"\n      [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n      [showIcon]=\"showAssistiveIcon()\"\n      [href]=\"assistiveTextLink()\"\n      [width]=\"width()\"\n    />\n  </div>\n</div>\n", styles: [".rte-select-container{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;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{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:2px 8px;color:var(--content-secondary);justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{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:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"] }]
+                    ], template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n  <label\n    *ngIf=\"label() && labelPosition() === 'side'\"\n    class=\"rte-select-label\"\n    [attr.data-label-position]=\"labelPosition()\"\n    [attr.id]=\"labelId()\"\n    [attr.for]=\"id()\"\n    >{{ label()\n    }}<span\n      *ngIf=\"required() || showLabelRequirement()\"\n      class=\"requirement-indicator\"\n      aria-hidden=\"true\"\n      [ngClass]=\"{\n        required: required(),\n        'show-label-requirement': showLabelRequirement(),\n      }\"\n      >{{ requirementIndicatorValue() }}</span\n    ></label\n  >\n\n  <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n    <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n      >{{ label()\n      }}<span\n        *ngIf=\"required() || showLabelRequirement()\"\n        class=\"requirement-indicator\"\n        aria-hidden=\"true\"\n        [ngClass]=\"{\n          required: required(),\n          'show-label-requirement': showLabelRequirement(),\n        }\"\n        >{{ requirementIndicatorValue() }}</span\n      ></label\n    >\n  </div>\n  <div\n    rteDropdown\n    [rteDropdownId]=\"'dropdown_select_' + id()\"\n    [rteDropdownPosition]=\"dropdownPosition()\"\n    [rteDropdownOffset]=\"selectDropdownOffset\"\n    [rteDropdownWidth]=\"selectWidth()\"\n    [rteCloseOnItemClick]=\"multiple() ? false : true\"\n    (menuEvent)=\"handleOnClickItem($event.id)\"\n    (menuChangeEvent)=\"handleOnClickItem($event.id)\"\n    (clickedOutside)=\"handleOnClickOutside()\"\n    (closedDropdown)=\"handleOnClosingDropdown()\"\n  >\n    <div\n      #selectRef\n      rteDropdownTrigger\n      class=\"rte-select-wrapper\"\n      [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n      [attr.role]=\"'combobox'\"\n      [attr.data-error]=\"isError()\"\n      [attr.data-disabled]=\"disabled()\"\n      [attr.data-read-only]=\"readOnly()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-readonly]=\"readOnly()\"\n      [attr.aria-labelledby]=\"labelId()\"\n      [attr.aria-expanded]=\"isActive()\"\n      [attr.data-active]=\"isActive()\"\n      (dropdownTriggered)=\"handleOnClickTrigger()\"\n      (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n    >\n      <div class=\"rte-select-content\">\n        <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n\n        <div class=\"rte-select-value\">\n          @if (this.multiple() && currentDisplayedOption()) {\n            <div class=\"rte-select-multiple-values\">\n              <rte-chip\n                type=\"input\"\n                [label]=\"currentDisplayedOption()!.label\"\n                (close)=\"handleOnCloseChip($event, currentDisplayedOption()!.value)\"\n              />\n              <rte-badge\n                *ngIf=\"internalValue()!.length > 1\"\n                content=\"number\"\n                badgeType=\"brand\"\n                size=\"m\"\n                [count]=\"internalValue()!.length - 1\"\n                [withPlusSign]=\"true\"\n                [simpleBadge]=\"true\"\n              />\n            </div>\n          } @else {\n            <span>{{ currentDisplayedOption()?.label }}</span>\n          }\n        </div>\n        <div #buttonsContainerRef class=\"rte-select-right-icons\">\n          <rte-icon-button\n            *ngIf=\"shouldDisplayClearButton()\"\n            name=\"cancel\"\n            variant=\"neutral\"\n            class=\"rte-select-icon-button clear-icon\"\n            [disabled]=\"disabled()\"\n            (clickEvent)=\"handleOnClickClearButton($event)\"\n          />\n          <rte-icon\n            class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n            variant=\"neutral\"\n            [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n          />\n        </div>\n      </div>\n    </div>\n    <rte-dropdown-menu [items]=\"optionsFormatted()\">\n      @if (hasHeaderContent()) {\n        <ng-template rteDropdownMenuHeader>\n          <div #headerContent>\n            @if (headerTemplate() || headerDirective()?.templateRef) {\n              <ng-container\n                [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"\n              ></ng-container>\n            } @else {\n              <div #headerContent>\n                <ng-content select=\"[select-header]\"></ng-content>\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n      @if (hasFooterContent()) {\n        <ng-template rteDropdownMenuFooter>\n          <div #footerContent>\n            @if (footerTemplate() || footerDirective()?.templateRef) {\n              <ng-container\n                [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"\n              ></ng-container>\n            } @else {\n              <div #footerContent>\n                <ng-content select=\"[select-footer]\"></ng-content>\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    </rte-dropdown-menu>\n    <rte-assistive-text\n      *ngIf=\"assistiveTextLabel()\"\n      [label]=\"assistiveTextLabel()\"\n      [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n      [showIcon]=\"showAssistiveIcon()\"\n      [href]=\"assistiveTextLink()\"\n    />\n  </div>\n</div>\n", styles: [".rte-select-container{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;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{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:2px 8px;color:var(--content-secondary);white-space:normal;overflow-wrap:normal;word-break:normal;align-items:center}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{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:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value .rte-select-multiple-values,.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px;color:var(--content-secondary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:hover{color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:active{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"] }]
         }] });
 
 class TabItemComponent {
@@ -3622,11 +4011,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", "withPlusSign"] }], 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 {
@@ -3850,7 +4239,7 @@ class TabComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "rte-tab", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, overflowType: { classPropertyName: "overflowType", publicName: "overflowType", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "hoverIndicatorRefs", predicate: ["hoverIndicator"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rte-tab-container\" [attr.data-direction]=\"direction()\">\n  <div class=\"rte-tab-border-vertical\" aria-hidden=\"true\" role=\"presentation\" [attr.data-direction]=\"direction()\"></div>\n  <div\n    [ngStyle]=\"{\n      position: 'relative',\n      display: 'flex',\n      'align-items': 'center',\n      'flex-direction': direction() === 'horizontal' ? 'row' : 'column',\n    }\"\n  >\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Previous tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-left' : 'arrow-chevron-up'\"\n      [ngStyle]=\"{\n        opacity: canScrollBackward() ? '1' : '0',\n        'pointer-events': canScrollBackward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollBackward()\"\n    />\n    <div\n      #tabList\n      role=\"tablist\"\n      aria-label=\"Sample Tabs\"\n      class=\"rte-tab\"\n      [attr.data-alignment]=\"shouldDisplayDropdown() ? 'start' : alignment()\"\n      [attr.data-direction]=\"direction()\"\n      [attr.data-overflow-type]=\"overflowType()\"\n    >\n      <span class=\"rte-tab-selected-indicator\" [ngStyle]=\"tabItemSelectedIndicatorStyle()\"></span>\n      <div\n        *ngIf=\"shouldDisplayDropdown() && options().length\"\n        rteDropdown\n        [rteDropdownOffset]=\"10\"\n        (menuEvent)=\"onClickTabItem($event.id)\"\n      >\n        <button\n          rteDropdownTrigger\n          class=\"rte-tab-dropdown-button\"\n          [attr.data-inverted]=\"inverted()\"\n          [attr.data-overflow-type]=\"overflowType()\"\n        >\n          <rte-icon *ngIf=\"selectedTab()?.icon\" appearance=\"filled\" [name]=\"selectedTab()?.icon!\"></rte-icon>\n          <span *ngIf=\"selectedTab()?.label\">{{ selectedTab()?.label }}</span>\n          <rte-badge\n            *ngIf=\"selectedTab()?.badgeCount && selectedTab()?.badgeContent === 'number'\"\n            [badgeType]=\"selectedTab()?.badgeType!\"\n            [badgeContent]=\"selectedTab()?.badgeContent!\"\n            [count]=\"selectedTab()?.badgeCount\"\n            [simpleBadge]=\"true\"\n          ></rte-badge>\n          <rte-icon name=\"arrow-chevron-down\" appearance=\"outlined\"></rte-icon>\n        </button>\n        <rte-dropdown-menu [items]=\"dropdownFilteredOptions()\" />\n      </div>\n      <ng-container *ngFor=\"let option of options(); let idx = index\">\n        <rte-tab-item\n          #tabItem\n          [option]=\"option\"\n          [direction]=\"direction()\"\n          [compactSpacing]=\"compactSpacing()\"\n          [isSelected]=\"isSelected(option.id)\"\n          [inverted]=\"inverted()\"\n          [attr.data-hidden]=\"shouldDisplayDropdown()\"\n          [isHidden]=\"shouldDisplayDropdown()\"\n          (keydown)=\"onKeydownTabItem($event)\"\n          (click)=\"onClickTabItem(option.id)\"\n        ></rte-tab-item>\n      </ng-container>\n    </div>\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Next tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-right' : 'arrow-chevron-down'\"\n      [ngStyle]=\"{\n        opacity: canScrollForward() ? '1' : '0',\n        'pointer-events': canScrollForward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollForward()\"\n    />\n  </div>\n  <div\n    class=\"rte-tab-border-horizontal\"\n    aria-hidden=\"true\"\n    role=\"presentation\"\n    [attr.data-direction]=\"direction()\"\n    [attr.data-compact-spacing]=\"compactSpacing()\"\n    [attr.data-scrollable]=\"isScrollable() && overflowType() === 'scrollable'\"\n  ></div>\n</div>\n", styles: [".rte-tab-container{position:relative;display:flex;flex-direction:column}.rte-tab-container[data-direction=vertical]{flex-direction:row;height:100%}.rte-tab{position:relative;display:flex;height:100%;gap:24px;justify-content:flex-start;padding-bottom:2px;margin-bottom:-2px;margin-left:-2px;scrollbar-width:none;width:100%;padding-top:2px;padding-left:2px;align-items:center}.rte-tab[data-direction=horizontal]{overflow-x:scroll}.rte-tab[data-direction=horizontal][data-overflow-type=dropdown]{overflow:hidden;margin-left:0}.rte-tab[data-direction=vertical]{flex-direction:column;border-bottom:none;gap:4px;height:100%;padding-right:2px;margin-left:-2px;width:max-content;align-items:start;margin-bottom:0}.rte-tab[data-direction=vertical] .rte-tab-selected-indicator{width:2px;transition:top .2s ease,height .2s ease}.rte-tab[data-alignment=center]{justify-content:center}.rte-tab .rte-tab-selected-indicator{position:absolute;bottom:0;height:2px;background:var(--background-brand-selected-default);transition:left .2s ease,width .2s ease;pointer-events:none;z-index:1}.rte-tab .rte-tab-separator{width:24px;flex-shrink:0}.rte-tab-border-horizontal{background-color:var(--background-neutral-regular-default);position:relative;height:2px}.rte-tab-border-horizontal[data-compact-spacing=true][data-scrollable=true]{bottom:5px}.rte-tab-border-horizontal[data-direction=vertical]{display:none}.rte-tab-border-vertical{background-color:var(--background-neutral-regular-default);position:relative;width:2px}.rte-tab-border-vertical[data-direction=horizontal]{display:none}.rte-tab-dropdown-button{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;color:var(--content-secondary);width:max-content;display:flex;align-items:center;gap:12px;background-color:transparent;border:none;cursor:pointer;padding:0;margin:12px}.rte-tab-dropdown-button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:12px;z-index:1}.rte-tab-dropdown-button[data-inverted=true]{color:var(--content-primary-inverse)}\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: TabItemComponent, selector: "rte-tab-item", inputs: ["direction", "option", "compactSpacing", "isSelected", "handleKeydown", "inverted", "isHidden"], outputs: ["click"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { 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: TabComponent, isStandalone: true, selector: "rte-tab", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, overflowType: { classPropertyName: "overflowType", publicName: "overflowType", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "hoverIndicatorRefs", predicate: ["hoverIndicator"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rte-tab-container\" [attr.data-direction]=\"direction()\">\n  <div class=\"rte-tab-border-vertical\" aria-hidden=\"true\" role=\"presentation\" [attr.data-direction]=\"direction()\"></div>\n  <div\n    [ngStyle]=\"{\n      position: 'relative',\n      display: 'flex',\n      'align-items': 'center',\n      'flex-direction': direction() === 'horizontal' ? 'row' : 'column',\n    }\"\n  >\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Previous tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-left' : 'arrow-chevron-up'\"\n      [ngStyle]=\"{\n        opacity: canScrollBackward() ? '1' : '0',\n        'pointer-events': canScrollBackward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollBackward()\"\n    />\n    <div\n      #tabList\n      role=\"tablist\"\n      aria-label=\"Sample Tabs\"\n      class=\"rte-tab\"\n      [attr.data-alignment]=\"shouldDisplayDropdown() ? 'start' : alignment()\"\n      [attr.data-direction]=\"direction()\"\n      [attr.data-overflow-type]=\"overflowType()\"\n    >\n      <span class=\"rte-tab-selected-indicator\" [ngStyle]=\"tabItemSelectedIndicatorStyle()\"></span>\n      <div\n        *ngIf=\"shouldDisplayDropdown() && options().length\"\n        rteDropdown\n        [rteDropdownOffset]=\"10\"\n        (menuEvent)=\"onClickTabItem($event.id)\"\n      >\n        <button\n          rteDropdownTrigger\n          class=\"rte-tab-dropdown-button\"\n          [attr.data-inverted]=\"inverted()\"\n          [attr.data-overflow-type]=\"overflowType()\"\n        >\n          <rte-icon *ngIf=\"selectedTab()?.icon\" appearance=\"filled\" [name]=\"selectedTab()?.icon!\"></rte-icon>\n          <span *ngIf=\"selectedTab()?.label\">{{ selectedTab()?.label }}</span>\n          <rte-badge\n            *ngIf=\"selectedTab()?.badgeCount && selectedTab()?.badgeContent === 'number'\"\n            [badgeType]=\"selectedTab()?.badgeType!\"\n            [badgeContent]=\"selectedTab()?.badgeContent!\"\n            [count]=\"selectedTab()?.badgeCount\"\n            [simpleBadge]=\"true\"\n          ></rte-badge>\n          <rte-icon name=\"arrow-chevron-down\" appearance=\"outlined\"></rte-icon>\n        </button>\n        <rte-dropdown-menu [items]=\"dropdownFilteredOptions()\" />\n      </div>\n      <ng-container *ngFor=\"let option of options(); let idx = index\">\n        <rte-tab-item\n          #tabItem\n          [option]=\"option\"\n          [direction]=\"direction()\"\n          [compactSpacing]=\"compactSpacing()\"\n          [isSelected]=\"isSelected(option.id)\"\n          [inverted]=\"inverted()\"\n          [attr.data-hidden]=\"shouldDisplayDropdown()\"\n          [isHidden]=\"shouldDisplayDropdown()\"\n          (keydown)=\"onKeydownTabItem($event)\"\n          (click)=\"onClickTabItem(option.id)\"\n        ></rte-tab-item>\n      </ng-container>\n    </div>\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Next tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-right' : 'arrow-chevron-down'\"\n      [ngStyle]=\"{\n        opacity: canScrollForward() ? '1' : '0',\n        'pointer-events': canScrollForward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollForward()\"\n    />\n  </div>\n  <div\n    class=\"rte-tab-border-horizontal\"\n    aria-hidden=\"true\"\n    role=\"presentation\"\n    [attr.data-direction]=\"direction()\"\n    [attr.data-compact-spacing]=\"compactSpacing()\"\n    [attr.data-scrollable]=\"isScrollable() && overflowType() === 'scrollable'\"\n  ></div>\n</div>\n", styles: [".rte-tab-container{position:relative;display:flex;flex-direction:column}.rte-tab-container[data-direction=vertical]{flex-direction:row;height:100%}.rte-tab{position:relative;display:flex;height:100%;gap:24px;justify-content:flex-start;padding-bottom:2px;margin-bottom:-2px;margin-left:-2px;scrollbar-width:none;width:100%;padding-top:2px;padding-left:2px;align-items:center}.rte-tab[data-direction=horizontal]{overflow-x:scroll}.rte-tab[data-direction=horizontal][data-overflow-type=dropdown]{overflow:hidden;margin-left:0}.rte-tab[data-direction=vertical]{flex-direction:column;border-bottom:none;gap:4px;height:100%;padding-right:2px;margin-left:-2px;width:max-content;align-items:start;margin-bottom:0}.rte-tab[data-direction=vertical] .rte-tab-selected-indicator{width:2px;transition:top .2s ease,height .2s ease}.rte-tab[data-alignment=center]{justify-content:center}.rte-tab .rte-tab-selected-indicator{position:absolute;bottom:0;height:2px;background:var(--background-brand-selected-default);transition:left .2s ease,width .2s ease;pointer-events:none;z-index:1}.rte-tab .rte-tab-separator{width:24px;flex-shrink:0}.rte-tab-border-horizontal{background-color:var(--background-neutral-regular-default);position:relative;height:2px}.rte-tab-border-horizontal[data-compact-spacing=true][data-scrollable=true]{bottom:5px}.rte-tab-border-horizontal[data-direction=vertical]{display:none}.rte-tab-border-vertical{background-color:var(--background-neutral-regular-default);position:relative;width:2px}.rte-tab-border-vertical[data-direction=horizontal]{display:none}.rte-tab-dropdown-button{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;color:var(--content-secondary);width:max-content;display:flex;align-items:center;gap:12px;background-color:transparent;border:none;cursor:pointer;padding:0;margin:12px}.rte-tab-dropdown-button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:12px;z-index:1}.rte-tab-dropdown-button[data-inverted=true]{color:var(--content-primary-inverse)}\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: TabItemComponent, selector: "rte-tab-item", inputs: ["direction", "option", "compactSpacing", "isSelected", "handleKeydown", "inverted", "isHidden"], outputs: ["click"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { 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", "withPlusSign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
@@ -3861,5 +4250,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