@design-system-rte/angular 0.12.0 → 0.13.0

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

@@ -8,11 +8,11 @@ import { HttpClient } from '@angular/common/http';
 import { isValidIconName as isValidIconName$1 } from '@design-system-rte/core/components/icon/icon-utils';
 import { labelSize } from '@design-system-rte/core/components/radio-button/radio-button.constants';
 import { TOOLTIP_GAP_ARROW, TOOLTIP_GAP } from '@design-system-rte/core/components/tooltip/tooltip.constants';
-import { getAutoPlacement, getCoordinates } from '@design-system-rte/core/components/utils/auto-placement';
+import { getAutoPlacement, getCoordinates, getAutoAlignment } from '@design-system-rte/core/components/utils/auto-placement';
 import { splitButtonLeftIconSize, splitButtonRightIconSize } from '@design-system-rte/core/components/split-button/split-button.constants';
 import { buttonIconSize } from '@design-system-rte/core/components/button/common/common-button.constants';
 import { CHIP_TYPE_TO_ARIA_ROLE_MAP } from '@design-system-rte/core/components/chip/chip.constants';
-import { SPACE_KEY, ENTER_KEY, BACKSPACE_KEY, DELETE_KEY, ARROW_RIGHT_KEY, ARROW_LEFT_KEY, TAB_KEY } from '@design-system-rte/core/constants/keyboard/keyboard.constants';
+import { SPACE_KEY, ENTER_KEY, BACKSPACE_KEY, DELETE_KEY, ARROW_RIGHT_KEY, ARROW_LEFT_KEY, TAB_KEY, ESCAPE_KEY } from '@design-system-rte/core/constants/keyboard/keyboard.constants';
 import { getShowIcon, getShowText, getDisplayCount, getBadgeIconSize, getShowBadge } from '@design-system-rte/core/components/badge/badge.utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TEXTAREA_ICON_SIZE, TEXTAREA_REQUIREMENT_INDICATOR_VALUE } from '@design-system-rte/core/components/textarea/textarea.constants';
@@ -21,6 +21,7 @@ import { isValidSegmentedControlOptions, focusNextSegmentElement, focusPreviousS
 import { FOCUSABLE_ELEMENTS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
 import { BREADCRUMBS_DEFAULT_ARIA_LABEL } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.constants';
 import { shouldTruncateBreadcrumbs, getBreadcrumbsTruncatedItems } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.utils';
+import { POPOVER_GAP_ARROW, POPOVER_GAP } from '@design-system-rte/core/components/popover/popover.constants';
 
 class ButtonComponent {
     constructor() {
@@ -39,11 +40,11 @@ class ButtonComponent {
         this.click.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.type]=\"buttonType()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{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;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.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;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.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;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-button.neutral:hover{color:var(--content-secondary)}.rte-button.neutral:active{color:var(--content-tertiary)}.rte-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-button.reverse:hover{color:var(--background-hover)}.rte-button.reverse:active{color:var(--content-primary-inverse)}.rte-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.type]=\"buttonType()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0}.rte-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{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;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.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;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.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;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-button.neutral:hover{color:var(--content-secondary)}.rte-button.neutral:active{color:var(--content-tertiary)}.rte-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-button.reverse:hover{color:var(--background-hover)}.rte-button.reverse:active{color:var(--content-primary-inverse)}.rte-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-button", imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.type]=\"buttonType()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{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;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.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;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.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;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-button.neutral:hover{color:var(--content-secondary)}.rte-button.neutral:active{color:var(--content-tertiary)}.rte-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-button.reverse:hover{color:var(--background-hover)}.rte-button.reverse:active{color:var(--content-primary-inverse)}.rte-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"] }]
+            args: [{ selector: "rte-button", imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.type]=\"buttonType()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0}.rte-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{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;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.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;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.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;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-button.neutral:hover{color:var(--content-secondary)}.rte-button.neutral:active{color:var(--content-tertiary)}.rte-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-button.reverse:hover{color:var(--background-hover)}.rte-button.reverse:active{color:var(--content-primary-inverse)}.rte-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"] }]
         }] });
 
 class GridDirective {
@@ -474,11 +475,11 @@ class IconComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: IconComponent, isStandalone: true, selector: "rte-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, providers: [IconService], ngImport: i0, template: "<div class=\"rte-icon-container\" [innerHTML]=\"svgContent\" [style.height]=\"(size())+'px'\" [style.width]=\"(size())+'px'\"></div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-icon-container{display:flex;color:var(--content-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: IconComponent, isStandalone: true, selector: "rte-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, providers: [IconService], ngImport: i0, template: "<div class=\"rte-icon-container\" [innerHTML]=\"svgContent\" [style.height]=\"(size())+'px'\" [style.width]=\"(size())+'px'\"></div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-icon-container{display:flex;color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-icon", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [IconService], template: "<div class=\"rte-icon-container\" [innerHTML]=\"svgContent\" [style.height]=\"(size())+'px'\" [style.width]=\"(size())+'px'\"></div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-icon-container{display:flex;color:var(--content-primary)}\n"] }]
+            args: [{ selector: "rte-icon", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [IconService], template: "<div class=\"rte-icon-container\" [innerHTML]=\"svgContent\" [style.height]=\"(size())+'px'\" [style.width]=\"(size())+'px'\"></div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-icon-container{display:flex;color:inherit}\n"] }]
         }], ctorParameters: () => [] });
 
 class LinkComponent {
@@ -593,7 +594,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div  \n  *ngIf=\"isDisplayed()\"\n  class=\"checkbox-group-container\">\n  <div\n    class=\"checkbox-group-header\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'error': error(),\n        'read-only': readOnly(),\n    }\">\n    <h3\n        *ngIf=\"showGroupTitle()\"\n        class=\"group-title\"\n        >\n        {{ groupTitle() }}\n    </h3>\n    <p\n        *ngIf=\"showHelpText()\"\n        class=\"group-help-text\"\n        >\n        {{ groupHelpText() }}\n\n    </p>\n    <p\n        *ngIf=\"error()\"\n        class=\"group-error-message\"\n        >\n        {{ errorMessage() }}\n    </p>\n  </div>\n  <div class=\"checkbox-group\" \n    [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n    <ng-container \n    *ngFor=\"let item of items(); let i = index\">\n      <rte-checkbox\n      [id]=\"item + '-' + i\"\n      [label]=\"item\"\n      [groupName]=\"groupName()\"\n      [showLabel]=\"showItemsLabel()\"\n      [disabled]=\"disabled()\"\n      [error]=\"error()\"\n      [readOnly]=\"readOnly()\"\n      />\n    </ng-container>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-title{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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{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;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{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-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"] }]
         }] });
 
-// overlay.service.ts
 class OverlayService {
     constructor() {
         this.activeOverlays = new Set();
@@ -604,13 +604,6 @@ class OverlayService {
             if (!this.overlayRoot) {
                 this.overlayRoot = document.createElement("div");
                 this.overlayRoot.id = "overlay-root";
-                this.overlayRoot.style.position = "fixed";
-                this.overlayRoot.style.top = "0";
-                this.overlayRoot.style.left = "0";
-                this.overlayRoot.style.width = "100%";
-                this.overlayRoot.style.height = "100%";
-                this.overlayRoot.style.pointerEvents = "none";
-                this.overlayRoot.style.zIndex = "1000";
                 document.body.appendChild(this.overlayRoot);
             }
         }
@@ -645,7 +638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class TooltipComponent {
     constructor() {
         this.label = input.required();
-        this.position = input("auto");
+        this.position = input("top");
         this.alignment = input("center");
         this.arrow = input(true);
     }
@@ -702,7 +695,7 @@ class TooltipDirective {
         if (this.tooltipRef) {
             const tooltipElement = this.tooltipRef.location.nativeElement;
             const position = this.rteTooltipPosition() === "auto"
-                ? getAutoPlacement(this.hostElement, tooltipElement, "top", this.rteTooltipArrow() ? TOOLTIP_GAP_ARROW : TOOLTIP_GAP)
+                ? getAutoPlacement(this.hostElement, tooltipElement, "top", this.rteTooltipArrow() ? TOOLTIP_GAP_ARROW : TOOLTIP_GAP, true)
                 : this.rteTooltipPosition();
             this.tooltipRef.setInput("label", this.rteTooltip());
             this.tooltipRef.setInput("position", position);
@@ -1017,18 +1010,19 @@ class BadgeComponent {
     constructor() {
         this.badgeType = input("brand");
         this.badgeSize = input("m");
-        this.badgeAppearance = input("text");
+        this.badgeContent = input("number");
         this.count = input();
         this.icon = input("notification");
+        this.simpleBadge = input(false);
         this.isValidIconName = computed(() => isValidIconName(this.icon()));
         this.showIcon = computed(() => getShowIcon({
             size: this.badgeSize(),
-            appearance: this.badgeAppearance(),
+            content: this.badgeContent(),
             iconSize: this.iconSize(),
         }));
         this.showText = computed(() => getShowText({
             size: this.badgeSize(),
-            appearance: this.badgeAppearance(),
+            content: this.badgeContent(),
             count: this.count(),
         }));
         this.displayCount = computed(() => getDisplayCount(this.count()));
@@ -1036,24 +1030,24 @@ class BadgeComponent {
         this.iconSize = computed(() => getBadgeIconSize(this.badgeSize()));
         this.showBadge = computed(() => getShowBadge({
             size: this.badgeSize(),
-            appearance: this.badgeAppearance(),
+            content: this.badgeContent(),
             count: this.count(),
             iconSize: this.iconSize(),
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", 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 }, badgeAppearance: { classPropertyName: "badgeAppearance", publicName: "badgeAppearance", 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 } }, ngImport: i0, template: "<div\n    class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n    data-testid=\"badge\"\n    [ngClass]=\"{'hidden': !showBadge(), 'count-overflow': countOverflow()}\"\n>\n    <rte-icon\n        *ngIf=\"showIcon()\"\n        class=\"badge-icon\"\n        [name]=\"icon()\"\n        [size]=\"iconSize()!\"\n    />\n    <p *ngIf=\"showText()\" class=\"badge-text\">\n        {{displayCount()}}\n    </p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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:0;right:0}.badge.size-s{width:12px;height:12px;top:-3px;right:-3px}.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:-4px;right:-4px;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:-8px;right:-8px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.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: "17.3.12", 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\n    *ngIf=\"showIcon()\"\n    class=\"badge-icon\"\n    [name]=\"icon()\"\n    [size]=\"iconSize()!\"\n  />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ displayCount() }}\n  </span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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:0;right:0}.badge.size-s{width:12px;height:12px;top:-3px;right:-3px}.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:-4px;right:-4px;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:-8px;right:-8px;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: "17.3.12", 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    [ngClass]=\"{'hidden': !showBadge(), 'count-overflow': countOverflow()}\"\n>\n    <rte-icon\n        *ngIf=\"showIcon()\"\n        class=\"badge-icon\"\n        [name]=\"icon()\"\n        [size]=\"iconSize()!\"\n    />\n    <p *ngIf=\"showText()\" class=\"badge-text\">\n        {{displayCount()}}\n    </p>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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:0;right:0}.badge.size-s{width:12px;height:12px;top:-3px;right:-3px}.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:-4px;right:-4px;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:-8px;right:-8px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.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\n    *ngIf=\"showIcon()\"\n    class=\"badge-icon\"\n    [name]=\"icon()\"\n    [size]=\"iconSize()!\"\n  />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ displayCount() }}\n  </span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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:0;right:0}.badge.size-s{width:12px;height:12px;top:-3px;right:-3px}.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:-4px;right:-4px;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:-8px;right:-8px;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 {
     constructor() {
         this.rteBadgeType = input("brand");
         this.rteBadgeSize = input("m");
-        this.rteBadgeAppearance = input("text");
+        this.rteBadgeContent = input("number");
         this.rteBadgeCount = input();
         this.rteBadgeIcon = input("settings");
         this.badgeComponentRef = null;
@@ -1080,7 +1074,7 @@ class BadgeDirective {
         if (this.badgeComponentRef) {
             this.badgeComponentRef.setInput("badgeType", this.rteBadgeType());
             this.badgeComponentRef.setInput("badgeSize", this.rteBadgeSize());
-            this.badgeComponentRef.setInput("badgeAppearance", this.rteBadgeAppearance());
+            this.badgeComponentRef.setInput("badgeContent", this.rteBadgeContent());
             this.badgeComponentRef.setInput("count", this.rteBadgeCount());
             this.badgeComponentRef.setInput("icon", this.rteBadgeIcon());
         }
@@ -1091,7 +1085,7 @@ class BadgeDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: BadgeDirective, isStandalone: true, selector: "[rteBadge]", inputs: { rteBadgeType: { classPropertyName: "rteBadgeType", publicName: "rteBadgeType", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeSize: { classPropertyName: "rteBadgeSize", publicName: "rteBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeAppearance: { classPropertyName: "rteBadgeAppearance", publicName: "rteBadgeAppearance", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeCount: { classPropertyName: "rteBadgeCount", publicName: "rteBadgeCount", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeIcon: { classPropertyName: "rteBadgeIcon", publicName: "rteBadgeIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: BadgeDirective, isStandalone: true, selector: "[rteBadge]", inputs: { rteBadgeType: { classPropertyName: "rteBadgeType", publicName: "rteBadgeType", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeSize: { classPropertyName: "rteBadgeSize", publicName: "rteBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeContent: { classPropertyName: "rteBadgeContent", publicName: "rteBadgeContent", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeCount: { classPropertyName: "rteBadgeCount", publicName: "rteBadgeCount", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeIcon: { classPropertyName: "rteBadgeIcon", publicName: "rteBadgeIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeDirective, decorators: [{
             type: Directive,
@@ -1241,8 +1235,10 @@ class SegmentedControlComponent {
         this.segmentRefs = viewChildren("segment");
         this.sliderLeft = signal(0);
         this.sliderWidth = signal(0);
+        this.sliderTop = signal(0);
         this.segmentSelectedIndicatorStyle = computed(() => ({
             left: `${this.sliderLeft()}px`,
+            top: `${this.sliderTop()}px`,
             width: `${this.sliderWidth()}px`,
         }));
         this.isValidOptions = computed(() => isValidSegmentedControlOptions(this.options()));
@@ -1319,6 +1315,7 @@ class SegmentedControlComponent {
         const segment = this.segmentRefs()[idx]?.nativeElement;
         if (segment) {
             this.sliderWidth.set(segment.offsetWidth);
+            this.sliderTop.set(segment.offsetTop);
             this.sliderLeft.set(segment.offsetLeft);
         }
     }
@@ -1334,11 +1331,11 @@ class SegmentedControlComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", 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\n          *ngIf=\"isSegmentSelected(option.id)\"\n          name=\"check-small\"\n          class=\"rte-selected-icon\"\n          [size]=\"24\"\n      />\n      <div class=\"rte-segment-content\">\n        <ng-container *ngIf=\"option.icon; else label\">\n          <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></rte-icon>\n        </ng-container>\n        <ng-template #label>\n          <span class=\"rte-segment-label\">{{ option.label }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-segmented-control{position:relative;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.12", 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\n          *ngIf=\"isSegmentSelected(option.id)\"\n          name=\"check-small\"\n          class=\"rte-selected-icon\"\n          [size]=\"24\"\n      />\n      <div class=\"rte-segment-content\">\n        <ng-container *ngIf=\"option.icon; else label\">\n          <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></rte-icon>\n        </ng-container>\n        <ng-template #label>\n          <span class=\"rte-segment-label\">{{ option.label }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-segmented-control", imports: [CommonModule, IconComponent], 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\n          *ngIf=\"isSegmentSelected(option.id)\"\n          name=\"check-small\"\n          class=\"rte-selected-icon\"\n          [size]=\"24\"\n      />\n      <div class=\"rte-segment-content\">\n        <ng-container *ngIf=\"option.icon; else label\">\n          <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></rte-icon>\n        </ng-container>\n        <ng-template #label>\n          <span class=\"rte-segment-label\">{{ option.label }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-segmented-control{position:relative;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], 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\n          *ngIf=\"isSegmentSelected(option.id)\"\n          name=\"check-small\"\n          class=\"rte-selected-icon\"\n          [size]=\"24\"\n      />\n      <div class=\"rte-segment-content\">\n        <ng-container *ngIf=\"option.icon; else label\">\n          <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></rte-icon>\n        </ng-container>\n        <ng-template #label>\n          <span class=\"rte-segment-label\">{{ option.label }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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"] }]
         }] });
 
 class BreadcrumbsComponent {
@@ -1366,9 +1363,262 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: "rte-breadcrumbs", imports: [CommonModule, LinkComponent, TooltipDirective, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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    <div class=\"breadcrumb-item\">\n      <rte-link\n        [href]=\"truncatedItems()!.root.link\"\n        [label]=\"truncatedItems()!.root.label\"\n        [subtle]=\"true\"\n      />\n    </div>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    <span class=\"breadcrumb-item\">\n      <rte-icon name=\"more-horiz\" tabIndex=\"0\" role=\"menu\" aria-label=\"More items\" data-testid=\"show-more\" rteTooltipPosition=\"bottom\" [size]=\"12\" [rteTooltip]=\"truncatedItemsText()\"/>\n    </span>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n      <div class=\"breadcrumb-item\">\n        @if (i === truncatedItems()!.remaining.length - 1) {\n          <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item.label\">\n            {{ item.label }}\n          </a>\n        } @else {\n          <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\"/>\n        }\n      </div>\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        <div class=\"breadcrumb-item\">\n          @if (i === items().length - 1) {\n            <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item.label\">\n              {{ item.label }}\n            </a>\n          } @else {\n            <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\"/>\n          }\n        </div>\n        @if (i < items().length - 1) {\n          <span aria-hidden=\"true\" class=\"separator\">/</span>\n        }\n      }\n  }\n</nav>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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)}.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"] }]
         }] });
 
+class BannerComponent {
+    constructor() {
+        this.type = input("default");
+        this.message = input.required();
+        this.position = input("push");
+        this.title = input();
+        this.closable = input(false);
+        this.showIcon = input(false);
+        this.isOpen = input(true);
+        this.actionLabel = input();
+        this.click = output();
+        this.visible = signal(false);
+        this.rendering = signal(false);
+        this.close = output();
+    }
+    ngOnInit() {
+        this.visible.set(this.isOpen());
+        this.rendering.set(this.isOpen());
+        if (this.closable() === false && this.position() === "overlay") {
+            console.warn("Banner: 'closable' and 'close' props must be set when 'position' has 'overlay' value.");
+            return;
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes["isOpen"]) {
+            if (this.isOpen())
+                this.openBanner();
+            else {
+                this.closeBanner();
+            }
+        }
+    }
+    clickAction() {
+        this.click.emit();
+    }
+    closeBanner() {
+        this.visible.set(false);
+        setTimeout(() => {
+            this.rendering.set(false);
+            this.close.emit();
+        }, 200);
+    }
+    openBanner() {
+        if (this.rendering())
+            return;
+        this.rendering.set(true);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => this.visible.set(true));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: BannerComponent, isStandalone: true, selector: "rte-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<section\n  *ngIf=\"rendering()\"\n  class=\"rte-banner-container {{ type() }} {{ position() }}\"\n  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n  <div class=\"rte-banner\">\n    <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n      <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [size]=\"32\" />\n    </div>\n    <div class=\"rte-banner-content\">\n      <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n      <div *ngIf=\"message()\" class=\"rte-banner-message\">\n        <span>{{ message() }}</span>\n        <rte-button\n          *ngIf=\"actionLabel()\"\n          variant=\"neutral\"\n          size=\"s\"\n          [label]=\"actionLabel()!\"\n          [ariaLabel]=\"actionLabel()!\"\n          (click)=\"clickAction()\"\n        />\n      </div>\n    </div>\n    <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n      <rte-icon-button\n        name=\"close\"\n        variant=\"neutral\"\n        ariaLabel=\"close banner\"\n        (click)=\"closeBanner()\"\n      />\n    </div>\n  </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);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, #FFF)}.rte-banner-container .rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-title{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}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message{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-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\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: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }, { kind: "component", type: ButtonComponent, selector: "rte-button", inputs: ["label", "variant", "size", "disabled", "icon", "ariaLabel", "ariaLabelledBy", "buttonType"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-banner", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  *ngIf=\"rendering()\"\n  class=\"rte-banner-container {{ type() }} {{ position() }}\"\n  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n  <div class=\"rte-banner\">\n    <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n      <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [size]=\"32\" />\n    </div>\n    <div class=\"rte-banner-content\">\n      <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n      <div *ngIf=\"message()\" class=\"rte-banner-message\">\n        <span>{{ message() }}</span>\n        <rte-button\n          *ngIf=\"actionLabel()\"\n          variant=\"neutral\"\n          size=\"s\"\n          [label]=\"actionLabel()!\"\n          [ariaLabel]=\"actionLabel()!\"\n          (click)=\"clickAction()\"\n        />\n      </div>\n    </div>\n    <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n      <rte-icon-button\n        name=\"close\"\n        variant=\"neutral\"\n        ariaLabel=\"close banner\"\n        (click)=\"closeBanner()\"\n      />\n    </div>\n  </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);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, #FFF)}.rte-banner-container .rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-title{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}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message{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-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"] }]
+        }] });
+
+class PopoverComponent {
+    constructor() {
+        this.primaryButtonLabel = input.required();
+        this.position = input.required();
+        this.alignment = input();
+        this.content = input();
+        this.arrow = input();
+        this.title = input();
+        this.secondaryButtonLabel = input();
+        this.isOpen = input(false);
+        this.coordinates = input({ top: 0, left: 0 });
+        this.clickPrimaryButton = output();
+        this.clickSecondaryButton = output();
+        this.elementRef = inject(ElementRef);
+        this.element = this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        this.focusFirstElement();
+    }
+    handleKeydown(event) {
+        if (event.key === TAB_KEY) {
+            if (this.isOpen()) {
+                const focusable = this.element.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY);
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                if (event.shiftKey && document.activeElement === first) {
+                    event.preventDefault();
+                    last.focus();
+                }
+                else if (!event.shiftKey && document.activeElement === last) {
+                    event.preventDefault();
+                    first.focus();
+                }
+            }
+        }
+    }
+    handleClickPrimaryButton() {
+        this.clickPrimaryButton.emit();
+    }
+    handleClickSecondaryButton() {
+        this.clickSecondaryButton.emit();
+    }
+    focusFirstElement() {
+        const focusable = this.element.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY);
+        if (focusable.length > 0)
+            focusable[0].focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: PopoverComponent, isStandalone: true, selector: "rte-popover", inputs: { primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, coordinates: { classPropertyName: "coordinates", publicName: "coordinates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPrimaryButton: "clickPrimaryButton", clickSecondaryButton: "clickSecondaryButton" }, ngImport: i0, template: "<div\n  #root\n  class=\"rte-popover\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.data-arrow]=\"arrow()\"\n  [attr.data-position]=\"position()\"\n  [attr.data-alignment]=\"alignment()\"\n  [attr.data-open]=\"isOpen()\"\n  [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n  (keydown)=\"handleKeydown($event)\"\n>\n  <div class=\"popoverInner\">\n    <div class=\"popoverContentContainer\">\n      <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n      <div class=\"popoverContent\">{{ content() }}</div>\n    </div>\n    <div class=\"popoverButtonContainer\">\n      <rte-button\n        *ngIf=\"secondaryButtonLabel()\"\n        variant=\"secondary\"\n        [label]=\"secondaryButtonLabel() || ''\"\n        (click)=\"handleClickSecondaryButton()\"\n      />\n      <rte-button\n        variant=\"primary\"\n        [label]=\"primaryButtonLabel()\"\n        (click)=\"handleClickPrimaryButton()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);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;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "rte-button", inputs: ["label", "variant", "size", "disabled", "icon", "ariaLabel", "ariaLabelledBy", "buttonType"], outputs: ["click"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-popover", imports: [CommonModule, ButtonComponent], standalone: true, template: "<div\n  #root\n  class=\"rte-popover\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.data-arrow]=\"arrow()\"\n  [attr.data-position]=\"position()\"\n  [attr.data-alignment]=\"alignment()\"\n  [attr.data-open]=\"isOpen()\"\n  [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n  (keydown)=\"handleKeydown($event)\"\n>\n  <div class=\"popoverInner\">\n    <div class=\"popoverContentContainer\">\n      <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n      <div class=\"popoverContent\">{{ content() }}</div>\n    </div>\n    <div class=\"popoverButtonContainer\">\n      <rte-button\n        *ngIf=\"secondaryButtonLabel()\"\n        variant=\"secondary\"\n        [label]=\"secondaryButtonLabel() || ''\"\n        (click)=\"handleClickSecondaryButton()\"\n      />\n      <rte-button\n        variant=\"primary\"\n        [label]=\"primaryButtonLabel()\"\n        (click)=\"handleClickPrimaryButton()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);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;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"] }]
+        }], ctorParameters: () => [] });
+
+class PopoverDirective {
+    onClick() {
+        if (!this.popoverRef) {
+            this.showPopover();
+        }
+    }
+    constructor() {
+        this.rtePopoverContent = input.required();
+        this.rtePopoverTitle = input();
+        this.rtePopoverPosition = input("auto");
+        this.rtePopoverAlignment = input("center");
+        this.rtePopoverArrow = input(true);
+        this.rtePopoverPrimaryButtonLabel = input();
+        this.rtePopoverSecondaryButtonLabel = input();
+        this.clickPrimaryButton = output();
+        this.clickSecondaryButton = output();
+        this.rtePopoverCloseOnClickOutside = input(true);
+        this.rtePopoverCloseOnEscape = input(true);
+        this.popoverRef = null;
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.onScroll = () => this.positionPopover();
+        this.onMouseDown = (e) => this.handleClickAway(e);
+        this.onKeyDown = (e) => this.handleKeydown(e);
+        this.overlayService = inject(OverlayService);
+        this.hostElement = this.elementRef.nativeElement;
+        this.hostElement.setAttribute("tabindex", "0");
+    }
+    ngAfterViewInit() {
+        window.addEventListener("scroll", this.onScroll);
+        document.addEventListener("mousedown", this.onMouseDown);
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+    ngOnDestroy() {
+        window.removeEventListener("scroll", this.onScroll);
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+        this.destroyPopover();
+    }
+    showPopover() {
+        if (this.popoverRef) {
+            this.popoverRef.destroy();
+        }
+        this.popoverRef = this.overlayService.create(PopoverComponent, this.viewContainerRef);
+        this.subPrimary?.unsubscribe();
+        this.subSecondary?.unsubscribe();
+        this.subPrimary = this.popoverRef.instance.clickPrimaryButton.subscribe(() => this.handleClickPrimaryButton());
+        this.subSecondary = this.popoverRef.instance.clickSecondaryButton.subscribe(() => this.handleClickSecondaryButton());
+        this.assignDirectiveToComponent();
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.positionPopover();
+            });
+        });
+    }
+    handleClickAway(event) {
+        const elements = [this.hostElement, this.popoverRef?.location.nativeElement];
+        if (elements.some((element) => !element))
+            return;
+        const shouldIgnore = elements.some((element) => element.contains(event.target));
+        if (!shouldIgnore && this.rtePopoverCloseOnClickOutside()) {
+            this.hidePopover();
+        }
+    }
+    handleKeydown(event) {
+        if (event.key === ESCAPE_KEY && this.rtePopoverCloseOnEscape()) {
+            event.preventDefault();
+            this.hidePopover();
+        }
+    }
+    assignDirectiveToComponent() {
+        if (this.popoverRef) {
+            const popoverElement = this.popoverRef.location.nativeElement.children[0];
+            const position = this.rtePopoverPosition() === "auto"
+                ? getAutoPlacement(this.hostElement, popoverElement, "top", this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP)
+                : this.rtePopoverPosition();
+            this.popoverRef.setInput("title", this.rtePopoverTitle());
+            this.popoverRef.setInput("content", this.rtePopoverContent());
+            this.popoverRef.setInput("position", position);
+            this.popoverRef.setInput("alignment", this.rtePopoverAlignment());
+            this.popoverRef.setInput("arrow", this.rtePopoverArrow());
+            this.popoverRef.setInput("primaryButtonLabel", this.rtePopoverPrimaryButtonLabel());
+            this.popoverRef.setInput("secondaryButtonLabel", this.rtePopoverSecondaryButtonLabel());
+        }
+    }
+    handleClickPrimaryButton() {
+        if (!this.popoverRef)
+            return;
+        this.clickPrimaryButton.emit();
+        this.hidePopover();
+    }
+    handleClickSecondaryButton() {
+        this.clickSecondaryButton?.emit();
+        this.hidePopover();
+    }
+    positionPopover() {
+        if (this.popoverRef) {
+            const popoverElement = this.popoverRef.location.nativeElement.children[0];
+            const autoAlignment = getAutoAlignment(this.hostElement, popoverElement, this.popoverRef.instance.position());
+            this.popoverRef.setInput("alignment", autoAlignment);
+            const positions = getCoordinates(this.popoverRef.instance.position(), this.hostElement, popoverElement, this.rtePopoverArrow() ? POPOVER_GAP_ARROW : POPOVER_GAP, autoAlignment);
+            this.renderer.setStyle(this.hostElement, "position", "relative");
+            this.renderer.setStyle(popoverElement, "position", "absolute");
+            this.renderer.setStyle(popoverElement, "top", `${positions.top}px`);
+            this.renderer.setStyle(popoverElement, "left", `${positions.left}px`);
+            this.popoverRef.setInput("isOpen", true);
+        }
+    }
+    hidePopover() {
+        if (this.popoverRef) {
+            this.popoverRef.setInput("isOpen", false);
+            setTimeout(() => this.destroyPopover(), 200);
+        }
+    }
+    destroyPopover() {
+        if (this.popoverRef) {
+            this.subPrimary?.unsubscribe();
+            this.subSecondary?.unsubscribe();
+            this.subPrimary = undefined;
+            this.subSecondary = undefined;
+            this.popoverRef.destroy();
+            this.popoverRef = null;
+            this.overlayService.destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: PopoverDirective, isStandalone: true, selector: "[rtePopover]", inputs: { rtePopoverContent: { classPropertyName: "rtePopoverContent", publicName: "rtePopoverContent", isSignal: true, isRequired: true, transformFunction: null }, rtePopoverTitle: { classPropertyName: "rtePopoverTitle", publicName: "rtePopoverTitle", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverPosition: { classPropertyName: "rtePopoverPosition", publicName: "rtePopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverAlignment: { classPropertyName: "rtePopoverAlignment", publicName: "rtePopoverAlignment", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverArrow: { classPropertyName: "rtePopoverArrow", publicName: "rtePopoverArrow", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverPrimaryButtonLabel: { classPropertyName: "rtePopoverPrimaryButtonLabel", publicName: "rtePopoverPrimaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverSecondaryButtonLabel: { classPropertyName: "rtePopoverSecondaryButtonLabel", publicName: "rtePopoverSecondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverCloseOnClickOutside: { classPropertyName: "rtePopoverCloseOnClickOutside", publicName: "rtePopoverCloseOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, rtePopoverCloseOnEscape: { classPropertyName: "rtePopoverCloseOnEscape", publicName: "rtePopoverCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPrimaryButton: "clickPrimaryButton", clickSecondaryButton: "clickSecondaryButton" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rtePopover]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ["click"]
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeDirective, BreadcrumbsComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, RadioButtonComponent, RadioButtonGroupComponent, SegmentedControlComponent, SplitButtonComponent, SwitchComponent, TextInputComponent, TextareaComponent, TooltipDirective };
+export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SegmentedControlComponent, SplitButtonComponent, SwitchComponent, TextInputComponent, TextareaComponent, TooltipDirective };
 //# sourceMappingURL=design-system-rte-angular.mjs.map