@corto-ai/gds-angular 2.1.3-test.2 → 2.1.3-test.5

package/fesm2022/corto-ai-gds-angular.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, InjectionToken, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
+import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, InjectionToken, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, makeEnvironmentProviders, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
 import { injectRegisterIcons, SvgIconRegistry, SvgIconComponent, provideSvgIconsConfig } from '@ngneat/svg-icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@ngneat/helipopper';
 import { TippyDirective } from '@ngneat/helipopper';
 import { NgClass, NgTemplateOutlet, TitleCasePipe, DOCUMENT as DOCUMENT$1, CommonModule } from '@angular/common';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { Subject, tap, debounceTime, fromEvent, take, map } from 'rxjs';
+import { Subject, tap, debounceTime, fromEvent, take, map, EMPTY } from 'rxjs';
 import { format, intervalToDuration } from 'date-fns';
 import * as i1$2 from '@angular/cdk/a11y';
 import { FocusKeyManager, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
@@ -14,20 +14,18 @@ import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenuItem, CdkMenuTrigger, CdkMenuItemCheckbox, MENU_TRIGGER, CdkMenu, CdkTargetMenuAim } from '@angular/cdk/menu';
 import { FormField } from '@angular/forms/signals';
 import { v4 } from 'uuid';
-import { OverlayModule } from '@angular/cdk/overlay';
-import * as i1$3 from '@ngx-translate/core';
-import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
+import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
-import * as i1$4 from '@angular/material/datepicker';
+import * as i1$3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i1$5 from '@angular/forms';
+import * as i1$4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@ng-select/ng-select';
 import { NgSelectComponent, NgLabelTemplateDirective, NgMultiLabelTemplateDirective, NgFooterTemplateDirective, NgClearButtonTemplateDirective, NgOptionTemplateDirective, NgPlaceholderTemplateDirective, NgSelectModule } from '@ng-select/ng-select';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import * as i1$6 from 'ngx-toastr';
-import { ToastNoAnimation, provideToastr } from 'ngx-toastr';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { provideTippyLoader, provideTippyConfig } from '@ngneat/helipopper/config';
 
@@ -852,7 +850,7 @@ const gdsFilledDetailsIcon = {
     name: 'filled-details'
 };
 const gdsFilledDocumentMultipleIcon = {
-    data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.25C4 3.00736 5.00736 2 6.25 2H10.5039V6.74753C10.5039 7.99017 11.5113 8.99753 12.7539 8.99753H17.5V17.25C17.5 18.4926 16.4926 19.5 15.25 19.5H6.25C5.00736 19.5 4 18.4926 4 17.25V4.25ZM7.75 11.5C7.33579 11.5 7 11.8358 7 12.25C7 12.6642 7.33579 13 7.75 13C8.16421 13 8.5 12.6642 8.5 12.25C8.5 11.8358 8.16421 11.5 7.75 11.5ZM7 15.25C7 15.6642 7.33579 16 7.75 16C8.16421 16 8.5 15.6642 8.5 15.25C8.5 14.8358 8.16421 14.5 7.75 14.5C7.33579 14.5 7 14.8358 7 15.25ZM10 12.25C10 12.6642 10.3358 13 10.75 13H13.8038C14.218 13 14.5538 12.6642 14.5538 12.25C14.5538 11.8358 14.218 11.5 13.8038 11.5H10.75C10.3358 11.5 10 11.8358 10 12.25ZM10.75 14.5C10.3358 14.5 10 14.8358 10 15.25C10 15.6642 10.3358 16 10.75 16H13.8038C14.218 16 14.5538 15.6642 14.5538 15.25C14.5538 14.8358 14.218 14.5 13.8038 14.5H10.75ZM12.0039 6.74753V2.46728C12.0803 2.52611 12.1532 2.59009 12.2221 2.65901L16.841 7.27786C16.9103 7.34721 16.9747 7.42062 17.0338 7.49753H12.7539C12.3397 7.49753 12.0039 7.16174 12.0039 6.74753ZM6.62891 20.5C6.93778 21.3739 7.77121 22 8.75088 22H15.2509C17.8742 22 20.0009 19.8734 20.0009 17.25V11.3689C20.0009 10.7721 19.7638 10.1998 19.3419 9.77788L18.5009 8.93689V17.25C18.5009 19.0449 17.0458 20.5 15.2509 20.5H6.62891Z" fill="currentColor"/></svg>`,
+    data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.25C4 3.00736 5.00736 2 6.25 2H10.5039V6.74753C10.5039 7.99017 11.5113 8.99753 12.7539 8.99753H17.5V17.25C17.5 18.4926 16.4926 19.5 15.25 19.5H6.25C5.00736 19.5 4 18.4926 4 17.25V4.25Z" fill="currentColor"/><path d="M12.0039 6.74753V2.46728C12.0803 2.52611 12.1532 2.59009 12.2221 2.65901L16.841 7.27786C16.9103 7.34721 16.9747 7.42062 17.0338 7.49753H12.7539C12.3397 7.49753 12.0039 7.16174 12.0039 6.74753Z" fill="currentColor"/><path d="M8.75088 22C7.77121 22 6.93778 21.3739 6.62891 20.5H15.2509C17.0458 20.5 18.5009 19.0449 18.5009 17.25V8.93689L19.3419 9.77788C19.7638 10.1998 20.0009 10.7721 20.0009 11.3689V17.25C20.0009 19.8734 17.8742 22 15.2509 22H8.75088Z" fill="currentColor"/></svg>`,
     name: 'filled-document-multiple'
 };
 const gdsFilledDocumentTableIcon = {
@@ -1335,6 +1333,10 @@ const gdsLeapLogoDefaultIcon = {
     data: `<svg viewBox="0 0 314 66" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M86 0V66H134.084L128.558 52.7987H98.8993V0H86Z" fill="#F69139"/><path fill-rule="evenodd" clip-rule="evenodd" d="M274.479 26.4462L293.515 26.3894C302.894 26.3894 302.57 13.198 293.286 13.198H274.454L274.479 26.4462ZM293.515 39.5941H274.479L274.25 66H261.562V0H293.286C319.371 0 319.694 39.5941 293.515 39.5941Z" fill="#F69139"/><path fill-rule="evenodd" clip-rule="evenodd" d="M187.759 13.198V0H136.32V66H187.759V52.7987H149.18V39.5941H174.909V26.3894H149.18V13.198H187.759Z" fill="#F69139"/><path fill-rule="evenodd" clip-rule="evenodd" d="M215.091 39.5941L224.66 16.6881L234.228 39.5941H215.091ZM245.259 66H259.325L231.754 0H231.631H217.688H217.565L189.995 66H204.06L209.574 52.7987H239.744L245.259 66Z" fill="#F69139"/><rect width="66" height="66" fill="#1E365E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M29.0941 28.1532L38.9678 31.6771L34.4036 40.3773L8 52.6404L27.4518 32.7542L29.0941 28.1532ZM34.5091 13L57.1539 23.318L54.0038 49.4321L50.6136 31.3576L29.0941 28.1532L34.5091 13Z" fill="#F69139"/></svg>`,
     name: 'leap-logo-default'
 };
+const gdsLeapLogoMatterAiBackgroundIcon = {
+    data: `<svg width="137" height="137" viewBox="0 0 137 137" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path d="M4.25 34.25C4.25 16.5769 18.5769 2.25 36.25 2.25H100.25C117.923 2.25 132.25 16.5769 132.25 34.25V98.25C132.25 115.923 117.923 130.25 100.25 130.25H36.25C18.5769 130.25 4.25 115.923 4.25 98.25V34.25Z" fill="#F5F5F5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M68.2505 26.7188C46.418 26.7188 28.7192 44.4175 28.7192 66.25C28.7192 73.827 30.8492 80.9012 34.5423 86.9125C34.7931 87.3207 34.8621 87.815 34.7327 88.2763L30.2542 104.248L46.1647 99.7295C46.628 99.598 47.1252 99.6668 47.5353 99.9193C53.5552 103.625 60.6621 105.781 68.2505 105.781C69.1997 105.781 69.9692 106.551 69.9692 107.5C69.9692 108.449 69.1997 109.219 68.2505 109.219C60.2762 109.219 52.7872 107.027 46.3855 103.24L28.2398 108.393C27.6413 108.563 26.9977 108.396 26.557 107.957C26.1163 107.518 25.9474 106.875 26.1154 106.276L31.2225 88.0629C27.4474 81.6679 25.2817 74.2094 25.2817 66.25C25.2817 42.519 44.5195 23.2812 68.2505 23.2812C91.9815 23.2812 111.219 42.519 111.219 66.25C111.219 68.6881 111.016 71.08 110.625 73.4094C110.468 74.3455 109.582 74.9771 108.646 74.8201C107.71 74.663 107.078 73.7768 107.235 72.8406C107.594 70.6984 107.782 68.4967 107.782 66.25C107.782 44.4175 90.083 26.7188 68.2505 26.7188Z" fill="#1E365E"/><path d="M113.972 83.4375V111.742H109.016V83.4375H113.972Z" fill="#32ABE2"/><path d="M85.1004 111.742H79.9506L90.1727 83.4375H95.2451L105.467 111.742H100.24L97.9555 105.198H87.3849L85.1004 111.742ZM92.07 91.8785L88.8562 101.016H96.5228L93.2703 91.8785C93.038 91.1428 92.767 90.291 92.6895 89.7102C92.5734 90.2522 92.341 91.1041 92.07 91.8785Z" fill="#32ABE2"/><path d="M54.5 61.0938C57.3477 61.0938 59.6562 63.4023 59.6562 66.25C59.6562 69.0977 57.3477 71.4062 54.5 71.4062C51.6523 71.4062 49.3438 69.0977 49.3438 66.25C49.3438 63.4023 51.6523 61.0938 54.5 61.0938ZM68.25 61.0938C71.0977 61.0938 73.4062 63.4023 73.4062 66.25C73.4062 69.0977 71.0977 71.4062 68.25 71.4062C65.4023 71.4062 63.0938 69.0977 63.0938 66.25C63.0938 63.4023 65.4023 61.0938 68.25 61.0938ZM82 61.0938C84.8477 61.0938 87.1562 63.4023 87.1562 66.25C87.1562 69.0977 84.8477 71.4062 82 71.4062C79.1523 71.4062 76.8438 69.0977 76.8438 66.25C76.8438 63.4023 79.1523 61.0938 82 61.0938Z" fill="#0060A9"/><path d="M4.25 34.25C4.25 16.5769 18.5769 2.25 36.25 2.25H100.25C117.923 2.25 132.25 16.5769 132.25 34.25V98.25C132.25 115.923 117.923 130.25 100.25 130.25H36.25C18.5769 130.25 4.25 115.923 4.25 98.25V34.25Z" stroke="#D2D7DF" stroke-width="1"/></g></svg>`,
+    name: 'leap-logo-matter-ai-background'
+};
 const gdsLeapLogoMatterAiIcon = {
     data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="24" height="24" fill="url(#pattern0_9507_6078)"/><defs><pattern id="pattern0_9507_6078" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0_9507_6078" transform="scale(0.0104167)"/></pattern><image id="image0_9507_6078" width="96" height="120" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAB4CAYAAAANHffOAAALy0lEQVR4Ae2dzXPbxhXA3y5A1vGHTB860ySWAt1yaUw7lqKbqZ56szLTeJqOLdG39iT7lp5s3XqL/BeYsjNtJz5YueVmeqaH2HFrqP+AYNlNcyvdOIeIwG72gQAIQAAIgAA/pP3NcAZfXBL7dt++fe8tACCRSCQSiURyFCEwYdTqzdqpKjQIZ+8B5XXCQOOEaM5pLXAxh464A4Nw3uEUDGBEZ5zuvDFB7+itDkwBEyGAs0vNBrXMFSD0MoQrOT8651x8lK1Xz1ptmFDGJgCv0oGuiX9Rg3IxhDDakyiMkQtgdrG5AtxaJ4Q0Ii9AtSIqDCg8Bga7nLEXSsXU8ZTxzd8N/6Xa0u81sGjN5LRGCT0nvjPPGT8XW3YPLGtz7+m9LZgARiaA2cWrKwTo5xClYrDSKWwxi22rJ1XdaA+vv89evNqglDbF5iWIVmuG+NwetyBKFwCqGmJZtw60Sl+lv3r2RRtKxCeMtYjTxv4+Xf5ebxkwBkoTAFozMxV+Cwi/ETjRs1zu0ON0s4iWngVtqakxxprQE4QWOo29YQNGTCkC+FW9qVWr7BH4b3KMFR/GJ4hboVMj7w2FC2BuaXUNLNj0WzZogSiKct34ZjzdPA4UhGVZd0PqUTQUvrH35P4mjAAFCmRucfWWaOlY+cfsA7ae539++fT+nzqv9ImbGOF/+v93/946ffaD16ItLolDx3of8tvT756D1//ZeQwlU1gPmFtY+zyk7w0x8C1PWquPw1FLQbU5gnGhkB4w+9HaXQL8j+6+rXJOKMvGP1rfw5SAveHML89vgcLeF+3yfedwY+adDzTRS76Ckhi6Bxxo+WKg3Xty7wZMMXMLq6hG19190aA2X357/yaUwFA9wNb5BD7zHdoQXfYzmHJef7fztRgDsHE2cF8M0ktljQm5BTD30Sq2kL94B7DlH4LKdxGV3T79zrkz4r6WnEMNIQRDHN+BAsmlgmw7v8Keu6YmAbL94unWx3AImV249shnpnbEPOF8kfMECjmwJ1l9O98gx8l1OKQoXQUbluHs1vDecZYPBZFZALbed001YefbpmZ7OoIfeTBEYAfvEQDce9ROVaxbUBCZxgBUPYrCt70DYpL14sm9r+GQgyaqmKz9hBM03MdB+dTbv34szFMDhiRTD3D8OzZo649quj4J4L3iPbv7CiGF9ILUAhCDURN8s0T07cARw7lnWxWJOHUDYxwwJKkFQIIS35gWF0OROPd8x913AkxDkUoAodaPPp4WHFHoPkW16w3IsxdXL8MQpBKAsPPXfbtbR7H1uxi9dBevF9BwwCkjAwVw9mKzISRQ975whFu/i78X4FiAIU/IyUABEGI2fTuto9z6XexewMEL5lOF5h6MUwiAXnK3mWVNRCrHJMA468+HeGSwPxWJArDVj2/wLTt7YZpw6sIdjGt51VCiAELqpw2SIAWooWQBAD3nbkv1c5CQGspljsYKQEOPn8/6kernIKqpYpqjNyfI4yWNFYCp9iuf+Hwgkj6ONWS4+6dUdgkyEisAqlieADglhUaBDhlemJIofB4yosae4aTu2zFgSLB7nnR6Vd4FFEWVcaICGuFQK2QhBxV1w93AYn/MTEusAITr9T3hgLO3mcV1yAnGECoVzD5jDffYTFV014VrrR+6ys00FWCvmqmYm6KMtXAZ3a6ykSZE6OWqAmva0TySvYwouMkNovTqiTCmQUZiVZDw/3gDikrUXK3EzRGNytcXx5ozVfZ80MCFZeB1YkK4FlVGmhChXflVjGELv01oMYhbBv4O5ECpqF7j9C2lSk28GUp8GWIK5BJApWLehuQlR1i5N4YtQ4QIE93CvZafXMYvRC+FMZA0D/BaSh7/D7aoqFYbwXrcCTSF05SBrTixFxDehAGgUy2PGRmqGw0ykisrIg2qmvrP1DAvM+qE3xQeWEgl+vecslNV7EnVTP17RVGaAAg3M7emMMK4SK36zAJ+bxyUJgDFUtspLzXiVFyla09yUgnhjalGWmpO2anKUFXVgBGTJADD3YhTEUngLJGAL4Ulnq2kMvwOr1hEnGKAOXsHUpSRZ6wL1U1mY6W0HoCQfTuLwEi4RN97eu92wnmgXXp7QBkGfYskZi7bESwOemIZhORaB9C1fOMLT/yfkcQKQEzEDHfbMlnmGR7iyyoLtuLeWuANetw+N7iMfXo+oYzzgzLz7DK64re46Anc10rtdWukZZeRM9KHM2pvG3jmHhA7Exam3QtvO4ePw8W5sabWaN4w35h1lbAOnKgaWdIZnUB4Ez8Y+BiiDJxz3NAW/tCzdjKWEYXtM3NcEZxSAzIS7wsiwv3AiWODEw2GxLnRNgxJEW5x49u/5natHIARrZ9jzjI7LeNVkOlzwDHI7GY9KnDG2r0N6FCipDE6AsQKIGBGknzBhqPAy39+sS3GkDP0BJ3PM44kLtCYW1zdBWd6zRhbllGx4kk2Qzl4qwOHyX2RxJMogKJyXyTxJAqgqNwXSTyDZ8IFpeBJohkogLAaktZQsQwUAKoh39Kc2qAIliQb6ZxxjPu9ieuyFxRHKgHgZAN8a2VlLygONe2F3GI3iUIfOrsYx70NU8iHD/YececZEC4UlJVnn7yb6YkoFx7scf8+A2tZ/2S+DRlJHQ/gwdSU4ZKZxkT94a4WrnzEAmtsPTq1AChhfRN0SlPVRVyhGXVc+GMa9bu7YxnX0kfESD/9empT1SmJnc0Lh9pYekEqAThZY5qz25lGp9zFB7sNCD7FMeA65pSMxeWeSgCVitXw7Zb+ILsysHhQ/TBioWntjWW2GuoJaaSkVUH+rvsQpgwx+NZEiNVToVwEz22LhfOAKqV89K6WgQLopQf2k2tFkH3qegDtKlix/eA57YVGGWHBCBYhI/f4DhSApZgNb4eDPo3rhAkJutIZ7xkRjt1u+E7VRq2GaIorfOYnlPb4xrII2/6e+nFhQTVEQCnsYUxpyLZQ2w1ATxFh299VPy4sFEgXg3F9lHOC0hZqY8re3MLquogrjzeSFrL9GbMCaYr6lbM6D6bL1Ohb0RO2Mkj0BWWZ/drrt45B3X0XDMPlOk7If3bx2kp3X7k56mf0o+3PfLa/rX6uzB/ICSKMPxY32/CuU2yLaRNGwCBnnKd+uHUw0dZ+3rLFLnPgKwRYXXikatjHwxAgK9UqW5kdcj1WVtD2J8T/P3jkGMaqbJOafd3vzgnyONeyEquC7Nmvb6H2D2bP/MQ3YswtXN3ElBXRynfFNZu2mRp+EQ+HDg+tL3bWY+0KQdzNuyYrC37bHxGNJbJV6x/Pd0JqCCijDRgBsT2gN/v1mo9xqmrdnVlYbQglGtnK3evQUvK/lsTpJQ/9wnQE0RSqSfQqZevl01bmjLJBXPhyrwnBlTEdqkDjwpe70V/AxSB+BzMlI3G5xyZmicp5iKoDksBWDlzHJ+dSZf+r8FuOAuUtXGs6z53TYsrZFufb+/v0cREqKsrvn5UkH39R8YBYAQgV8z+IXlvltfI8bzya/fDqCrauQa+aEgIxhGB3OFCdicHzxy4YaRdVo+0vdPouDItw2P3rylzkI5mLEkDSQm3drSTU5WlaeRqc8Oa2rZq4CG32njKihS6ri99DlYWDOyjOouqZxdVUj5KnZkE+HdKLE+jX50sLQMUKQNzksp2LX9B7vcI4Lg0vX5+Besm2ppJ7Bo4f+J0Bz/InwaWvBFpMsQavgOmKOQBRnvuOuHOC0kzSRDN0VH5/J18fP/YkyX7vl//NeL1V+5pjaSVWZNj2R3Dypf9u3oAUnH+w1yZ+10XJc4LUQflR4gi+DTkI2/5xk684enOFfi+05wR/+6+mf/q2ASVQ6iK9cRC2/UnI5z8IprIWhJIOKN1vQkkcKgFE2P7oQGxBBpxJWbDHULIOJXGoBBD2+6Mlp3+aTvcHvgcHBuyoOAEPfXIxkWNAXqxexW34DhiQBxV0ZlrBJbRmsCxh9/8mcP4NpB5nJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIimYnwGoCQ5GqttGHQAAAABJRU5ErkJggg=="/></defs></svg>`,
     name: 'leap-logo-matter-ai'
@@ -1791,6 +1793,10 @@ const gdsLineEditIcon = {
     data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6567 4.99599C14.4 4.25277 14.3875 3.04397 13.6291 2.31623C12.8925 1.6094 11.7259 1.62143 11.004 2.34329L9.95007 3.39725L3.33857 10.0087C3.28364 10.0637 3.24226 10.1307 3.21772 10.2044L2.2347 13.1575C2.17462 13.338 2.22215 13.5369 2.35733 13.6708C2.4925 13.8046 2.6919 13.8501 2.87177 13.7883L5.80038 12.7807C5.87225 12.756 5.93753 12.7152 5.99127 12.6614L13.6567 4.99599ZM10.3036 4.45791L4.12922 10.6323L3.50301 12.5136L5.36584 11.8727L11.5421 5.69639L10.3036 4.45791ZM12.2492 4.98929L11.0107 3.7508L11.7111 3.0504C12.0482 2.71338 12.5928 2.70776 12.9367 3.03776C13.2908 3.37753 13.2966 3.94189 12.9496 4.28888L12.2492 4.98929Z" fill="currentColor"/></svg>`,
     name: 'line-edit'
 };
+const gdsLineEmailAlertIcon = {
+    data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5025 1C15.2934 1 13.5025 2.79086 13.5025 5L13.5023 8L12.5539 8.80035C12.2462 9.06004 12.0923 9.18988 12.0457 9.29132C11.9312 9.54071 12.0391 9.8358 12.2875 9.95252C12.3885 10 12.5898 10 12.9925 10H22.0121C22.4148 10 22.6162 10 22.7172 9.95252C22.9656 9.8358 23.0735 9.5407 22.9589 9.29131C22.9123 9.18987 22.7584 9.06001 22.4507 8.80031L21.5025 8V5C21.5025 2.79086 19.7116 1 17.5025 1ZM19.0025 11C18.7842 11.5826 18.195 12 17.5025 12C16.81 12 16.2208 11.5826 16.0025 11H19.0025ZM22 16.75V11L20.5 11V16.75L20.4942 16.8935C20.4212 17.7929 19.6682 18.5 18.75 18.5H5.25L5.10647 18.4942C4.20711 18.4212 3.5 17.6682 3.5 16.75V9.374L11.6507 13.6637L11.7468 13.706C11.9431 13.7764 12.1619 13.7623 12.3493 13.6637L15.4503 12.0313C15.2878 11.8289 15.1559 11.6003 15.0624 11.3509L14.9309 11L14.1893 11L12 12.1525L3.5 7.679V7.25L3.5058 7.10647C3.57881 6.20711 4.33183 5.5 5.25 5.5H12.4988L12.4988 5C12.4988 4.65753 12.5333 4.32311 12.5989 4H5.25L5.06558 4.00514C3.35645 4.10075 2 5.51697 2 7.25V16.75L2.00514 16.9344C2.10075 18.6435 3.51697 20 5.25 20H18.75L18.9344 19.9949C20.6435 19.8992 22 18.483 22 16.75Z" fill="currentColor"/></svg>`,
+    name: 'line-email-alert'
+};
 const gdsLineEmailArrowDownIcon = {
     data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.0224 5H6C4.89545 5 4 5.89539 4 7V11H7.5C7.77594 11 7.99963 11.2235 8 11.4994L8.00031 11.5115C8.00073 11.5238 8.00165 11.5443 8.0036 11.5718C8.00757 11.6268 8.01562 11.7087 8.03229 11.8085C8.06586 12.01 8.13214 12.2712 8.2597 12.5264C8.38629 12.7795 8.56836 13.0176 8.83203 13.1934C9.09259 13.3671 9.46246 13.5 10 13.5C10.5375 13.5 10.9074 13.3671 11.168 13.1934C11.4316 13.0176 11.6137 12.7795 11.7403 12.5264C11.8162 12.3745 11.8704 12.2206 11.9089 12.0784C11.9351 11.9816 11.9541 11.8901 11.9677 11.8085C11.9844 11.7087 11.9924 11.6268 11.9964 11.5718C11.9984 11.5443 11.9993 11.5238 11.9997 11.5115L12 11.4991C12 11.223 12.2239 11 12.5 11H16V10.4003C16.3578 10.2174 16.6929 9.99646 17 9.7428V15C17 16.6569 15.6569 18 14 18H6C4.34314 18 3 16.6569 3 15V7C3 5.34314 4.34314 4 6 4H8.20703C8.11591 4.32227 8.05334 4.65662 8.0224 5ZM7.05048 12H4V15C4 16.1046 4.89545 17 6 17H14C15.1046 17 16 16.1046 16 15V12H12.9495C12.9035 12.2643 12.8134 12.6161 12.6347 12.9736C12.4488 13.3455 12.1621 13.7324 11.7227 14.0254C11.2801 14.3204 10.7125 14.5 10 14.5C9.28754 14.5 8.71991 14.3204 8.27734 14.0254C7.83789 13.7324 7.55121 13.3455 7.3653 12.9736C7.18658 12.6161 7.0965 12.2643 7.05048 12ZM13.5 10C15.9853 10 18 7.98528 18 5.5C18 3.01472 15.9853 1 13.5 1C11.0147 1 9 3.01472 9 5.5C9 7.98528 11.0147 10 13.5 10ZM11.1464 5.85355C10.9512 5.65829 10.9512 5.34171 11.1464 5.14645C11.3417 4.95118 11.6583 4.95118 11.8536 5.14645L13 6.29289V3.5C13 3.22386 13.2239 3 13.5 3C13.7761 3 14 3.22386 14 3.5V6.29289L15.1464 5.14645C15.3417 4.95118 15.6583 4.95118 15.8536 5.14645C16.0488 5.34171 16.0488 5.65829 15.8536 5.85355L13.8536 7.85355C13.8056 7.90149 13.7504 7.93766 13.6914 7.96206C13.6333 7.98615 13.5697 7.9996 13.503 7.99999L13.5 8L13.497 7.99999C13.4303 7.9996 13.3667 7.98615 13.3086 7.96206C13.2505 7.93802 13.196 7.90256 13.1486 7.85567L13.146 7.85316L11.1464 5.85355Z" fill="#1A1A1A"/></svg>`,
     name: 'line-email-arrow-down'
@@ -2957,6 +2963,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLeapIconTransparentOrangeIcon: gdsLeapIconTransparentOrangeIcon,
     gdsLeapIconTransparentWhiteIcon: gdsLeapIconTransparentWhiteIcon,
     gdsLeapLogoDefaultIcon: gdsLeapLogoDefaultIcon,
+    gdsLeapLogoMatterAiBackgroundIcon: gdsLeapLogoMatterAiBackgroundIcon,
     gdsLeapLogoMatterAiIcon: gdsLeapLogoMatterAiIcon,
     gdsLeapLogoOrangeIcon: gdsLeapLogoOrangeIcon,
     gdsLeapLogoWhiteIcon: gdsLeapLogoWhiteIcon,
@@ -3071,6 +3078,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLineDraftIcon: gdsLineDraftIcon,
     gdsLineDuplicateIcon: gdsLineDuplicateIcon,
     gdsLineEditIcon: gdsLineEditIcon,
+    gdsLineEmailAlertIcon: gdsLineEmailAlertIcon,
     gdsLineEmailArrowDownIcon: gdsLineEmailArrowDownIcon,
     gdsLineEmailCheckmarkIcon: gdsLineEmailCheckmarkIcon,
     gdsLineEmailDismissIcon: gdsLineEmailDismissIcon,
@@ -3806,6 +3814,9 @@ class ButtonBaseDirective {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    // Safari does not set buttons as tabbable by default.
+    // To keep same behavior as chrome, set the tabIndex to 0 by default.
+    tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
     clicked = output();
     isDisabled = computed(() => this.disabled() || this.busy(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     nativeElement = this.#elementRef.nativeElement;
@@ -3815,7 +3826,7 @@ class ButtonBaseDirective {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: ButtonBaseDirective, isStandalone: true, inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-busy": "busy() ? \"\" : undefined" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: ButtonBaseDirective, isStandalone: true, inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined", "attr.tabindex": "tabIndex()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-busy": "busy() ? \"\" : undefined" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonBaseDirective, decorators: [{
             type: Directive,
@@ -3826,6 +3837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // https://www.a11yproject.com/checklist/#use-the-button-element-for-buttons
                         type: 'button',
                         '[attr.disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.tabindex]': 'tabIndex()',
                         // Custom attributes for CSS
                         '[attr.data-size]': 'size()',
                         '[attr.data-variant]': 'variant()',
@@ -3834,26 +3846,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '(click)': 'handleClick($event)'
                     }
                 }]
-        }], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+        }], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class GdsButtonComponent extends ButtonBaseDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsButtonComponent, isStandalone: true, selector: "button[gds-button]", usesInheritance: true, ngImport: i0, template: "<div class=\"body\">\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n  <div class=\"label\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsButtonComponent, isStandalone: true, selector: "button[gds-button]", usesInheritance: true, ngImport: i0, template: "<div class=\"body\">\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n  <div class=\"label\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[gds-button]', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"body\">\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n  <div class=\"label\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"] }]
+            args: [{ selector: 'button[gds-button]', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"body\">\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n  <div class=\"label\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"] }]
         }] });
 
 class GdsIconButtonComponent extends ButtonBaseDirective {
     tooltipLabel = input(...(ngDevMode ? [undefined, { debugName: "tooltipLabel" }] : /* istanbul ignore next */ []));
     enableTooltip = computed(() => !this.disabled() && !!this.tooltipLabel()?.trim(), ...(ngDevMode ? [{ debugName: "enableTooltip" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsIconButtonComponent, isStandalone: true, selector: "button[gds-icon-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipLabel()\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"enableTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsIconButtonComponent, isStandalone: true, selector: "button[gds-icon-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipLabel()\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"enableTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[gds-icon-button]', imports: [TippyDirective, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipLabel()\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"enableTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"] }]
+            args: [{ selector: 'button[gds-icon-button]', imports: [TippyDirective, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipLabel()\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"enableTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"] }]
         }], propDecorators: { tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }] } });
 
 class GdsBannerComponent {
@@ -5230,6 +5242,7 @@ class GdsDropdownComponent {
     horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     preventMobileStyling = input(false, { ...(ngDevMode ? { debugName: "preventMobileStyling" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     allowDefaultTabBehavior = input(false, { ...(ngDevMode ? { debugName: "allowDefaultTabBehavior" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    mobileCancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "mobileCancelLabel" }] : /* istanbul ignore next */ []));
     items = contentChildren(CdkMenuItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
     isMobile = signal(this.#deviceDetectorSvc.isMobile(), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
     #keyManager;
@@ -5298,11 +5311,11 @@ class GdsDropdownComponent {
         };
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsDropdownComponent, isStandalone: true, selector: "gds-dropdown", inputs: { triggerElement: { classPropertyName: "triggerElement", publicName: "triggerElement", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, preventMobileStyling: { classPropertyName: "preventMobileStyling", publicName: "preventMobileStyling", isSignal: true, isRequired: false, transformFunction: null }, allowDefaultTabBehavior: { classPropertyName: "allowDefaultTabBehavior", publicName: "allowDefaultTabBehavior", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.horizontal": "horizontal() ? \"\" : undefined", "attr.isMobile": "isMobile() && !preventMobileStyling() ? \"\" : undefined", "animate.enter": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom\" : undefined", "animate.leave": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom leave\" : undefined" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }], ngImport: i0, template: "<div class=\"\n  content\n  gds-background-white\n  gds-display-flex\n  gds-gap-2xs\n  gds-padding-block-3xs\n\">\n  <ng-content />\n</div>\n<div\n  class=\"\n    cancel\n    gds-align-items-center\n    gds-background-white\n    gds-height-xl\n    gds-justify-content-center\n    gds-padding-block-3xs\n    gds-padding-inline-sm\n    gds-text-body-strong\n    gds-text-primary\n    gds-width-100-parent\n  \"\n  cdkMenuItem\n>\n  <span>{{ 'Core.Button.Cancel' | translate }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsDropdownComponent, isStandalone: true, selector: "gds-dropdown", inputs: { triggerElement: { classPropertyName: "triggerElement", publicName: "triggerElement", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, preventMobileStyling: { classPropertyName: "preventMobileStyling", publicName: "preventMobileStyling", isSignal: true, isRequired: false, transformFunction: null }, allowDefaultTabBehavior: { classPropertyName: "allowDefaultTabBehavior", publicName: "allowDefaultTabBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobileCancelLabel: { classPropertyName: "mobileCancelLabel", publicName: "mobileCancelLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.horizontal": "horizontal() ? \"\" : undefined", "attr.isMobile": "isMobile() && !preventMobileStyling() ? \"\" : undefined", "animate.enter": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom\" : undefined", "animate.leave": "!preventMobileStyling() && isMobile() ? \"gds-mobile-slide-bottom leave\" : undefined" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }], ngImport: i0, template: "<div class=\"\n  content\n  gds-background-white\n  gds-display-flex\n  gds-gap-2xs\n  gds-padding-block-3xs\n\">\n  <ng-content />\n</div>\n<div\n  class=\"\n    cancel\n    gds-align-items-center\n    gds-background-white\n    gds-height-xl\n    gds-justify-content-center\n    gds-padding-block-3xs\n    gds-padding-inline-sm\n    gds-text-body-strong\n    gds-text-primary\n    gds-width-100-parent\n  \"\n  cdkMenuItem\n>\n  <span>{{ mobileCancelLabel() }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-dropdown', imports: [OverlayModule, CdkMenuItem, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'gds-dropdown', imports: [OverlayModule, CdkMenuItem], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: CdkMenu,
                             outputs: ['closed']
@@ -5313,8 +5326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '(keydown)': 'onKeydown($event)',
                         '[animate.enter]': '!preventMobileStyling() && isMobile() ? "gds-mobile-slide-bottom" : undefined',
                         '[animate.leave]': '!preventMobileStyling() && isMobile() ? "gds-mobile-slide-bottom leave" : undefined'
-                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"\n  content\n  gds-background-white\n  gds-display-flex\n  gds-gap-2xs\n  gds-padding-block-3xs\n\">\n  <ng-content />\n</div>\n<div\n  class=\"\n    cancel\n    gds-align-items-center\n    gds-background-white\n    gds-height-xl\n    gds-justify-content-center\n    gds-padding-block-3xs\n    gds-padding-inline-sm\n    gds-text-body-strong\n    gds-text-primary\n    gds-width-100-parent\n  \"\n  cdkMenuItem\n>\n  <span>{{ 'Core.Button.Cancel' | translate }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerElement", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], preventMobileStyling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventMobileStyling", required: false }] }], allowDefaultTabBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDefaultTabBehavior", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CdkMenuItem), { ...{ descendants: true }, isSignal: true }] }] } });
+                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"\n  content\n  gds-background-white\n  gds-display-flex\n  gds-gap-2xs\n  gds-padding-block-3xs\n\">\n  <ng-content />\n</div>\n<div\n  class=\"\n    cancel\n    gds-align-items-center\n    gds-background-white\n    gds-height-xl\n    gds-justify-content-center\n    gds-padding-block-3xs\n    gds-padding-inline-sm\n    gds-text-body-strong\n    gds-text-primary\n    gds-width-100-parent\n  \"\n  cdkMenuItem\n>\n  <span>{{ mobileCancelLabel() }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerElement", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], preventMobileStyling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventMobileStyling", required: false }] }], allowDefaultTabBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDefaultTabBehavior", required: false }] }], mobileCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCancelLabel", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CdkMenuItem), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class GdsEmptyStateComponent extends OnBrandChanged {
     #cdnUrl = inject(CDN_URL);
@@ -5390,6 +5403,7 @@ const GDS_EMPTY_STATE_VARIANTS = [
 class GdsFeatureBlockComponent {
     feature = input.required(...(ngDevMode ? [{ debugName: "feature" }] : /* istanbul ignore next */ []));
     index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    learnMoreLabel = input('Learn more', ...(ngDevMode ? [{ debugName: "learnMoreLabel" }] : /* istanbul ignore next */ []));
     icon = computed(() => this.feature().icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     name = computed(() => this.feature().name, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     description = computed(() => this.feature().localeOverrides?.[navigator.language]?.description ?? this.feature().description, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
@@ -5414,7 +5428,7 @@ class GdsFeatureBlockComponent {
         }
     ];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeatureBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeatureBlockComponent, isStandalone: true, selector: "gds-feature-block", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.background": "selectedColor().background", "style.color": "selectedColor().color" }, classAttribute: "gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border" }, ngImport: i0, template: "<span class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-gap-2xs\n  gds-text-body-large-strong\n\">\n  <gds-icon [key]=\"icon() | gdsSvgicon\" />\n  {{ name() }}\n</span>\n<span class=\"\n  gds-line-height-sm\n  gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n  <a\n    class=\"\n      gds-margin-block-start-auto\n      gds-text-body\n      gds-text-primary-primary\n    \"\n    [href]=\"learnMoreLink()\"\n    target=\"_blank\"\n  >\n    {{ 'Gds.FeatureBlock.LearnMore' | translate }}\n  </a>\n}\n", styles: ["@layer design-system{:host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeatureBlockComponent, isStandalone: true, selector: "gds-feature-block", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, learnMoreLabel: { classPropertyName: "learnMoreLabel", publicName: "learnMoreLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.background": "selectedColor().background", "style.color": "selectedColor().color" }, classAttribute: "gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border" }, ngImport: i0, template: "<span class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-gap-2xs\n  gds-text-body-large-strong\n\">\n  <gds-icon [key]=\"icon() | gdsSvgicon\" />\n  {{ name() }}\n</span>\n<span class=\"\n  gds-line-height-sm\n  gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n  <a\n    class=\"\n      gds-margin-block-start-auto\n      gds-text-body\n      gds-text-primary-primary\n    \"\n    [href]=\"learnMoreLink()\"\n    target=\"_blank\"\n  >\n    {{ learnMoreLabel() }}\n  </a>\n}\n", styles: ["@layer design-system{:host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeatureBlockComponent, decorators: [{
             type: Component,
@@ -5422,8 +5436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         class: 'gds-display-flex gds-flex-column gds-gap-sm gds-padding-sm gds-radius-lg gds-border',
                         '[style.background]': 'selectedColor().background',
                         '[style.color]': 'selectedColor().color'
-                    }, imports: [GdsIconComponent, GdsSvgIconPipe, TranslatePipe], template: "<span class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-gap-2xs\n  gds-text-body-large-strong\n\">\n  <gds-icon [key]=\"icon() | gdsSvgicon\" />\n  {{ name() }}\n</span>\n<span class=\"\n  gds-line-height-sm\n  gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n  <a\n    class=\"\n      gds-margin-block-start-auto\n      gds-text-body\n      gds-text-primary-primary\n    \"\n    [href]=\"learnMoreLink()\"\n    target=\"_blank\"\n  >\n    {{ 'Gds.FeatureBlock.LearnMore' | translate }}\n  </a>\n}\n", styles: ["@layer design-system{:host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}}\n"] }]
-        }], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }] } });
+                    }, imports: [GdsIconComponent, GdsSvgIconPipe], template: "<span class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-gap-2xs\n  gds-text-body-large-strong\n\">\n  <gds-icon [key]=\"icon() | gdsSvgicon\" />\n  {{ name() }}\n</span>\n<span class=\"\n  gds-line-height-sm\n  gds-text-body\n\">{{ description() }}</span>\n\n@if (learnMoreLink()) {\n  <a\n    class=\"\n      gds-margin-block-start-auto\n      gds-text-body\n      gds-text-primary-primary\n    \"\n    [href]=\"learnMoreLink()\"\n    target=\"_blank\"\n  >\n    {{ learnMoreLabel() }}\n  </a>\n}\n", styles: ["@layer design-system{:host{width:22.188rem;min-height:10.563rem;border-color:var(--gds-palette-accent-indigo-default)}}\n"] }]
+        }], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], learnMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "learnMoreLabel", required: false }] }] } });
 
 class GdsFeedbackButtonComponent extends ButtonBaseDirective {
     #changeDetector = inject(ChangeDetectorRef);
@@ -5445,18 +5459,19 @@ class GdsFeedbackButtonComponent extends ButtonBaseDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeedbackButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeedbackButtonComponent, isStandalone: true, selector: "button[gds-feedback-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, clickedLabel: { classPropertyName: "clickedLabel", publicName: "clickedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--icon": "iconVisible()", "style.--clicked-icon": "clickedIconVisible()" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipTemplate\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"hasTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n    <ng-content select=\"[clicked-icon]\" />\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeedbackButtonComponent, isStandalone: true, selector: "button[gds-feedback-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, clickedLabel: { classPropertyName: "clickedLabel", publicName: "clickedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--icon": "iconVisible()", "style.--clicked-icon": "clickedIconVisible()" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipTemplate\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"hasTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n    <ng-content select=\"[clicked-icon]\" />\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeedbackButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[gds-feedback-button]', imports: [TippyDirective, GdsIconComponent], host: {
                         '[style.--icon]': 'iconVisible()',
                         '[style.--clicked-icon]': 'clickedIconVisible()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipTemplate\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"hasTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n    <ng-content select=\"[clicked-icon]\" />\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipTemplate\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"hasTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n    <ng-content select=\"[clicked-icon]\" />\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"] }]
         }], propDecorators: { tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }], clickedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickedLabel", required: false }] }] } });
 
 class GdsFilterChipComponent extends OnBrandChanged {
     dismissDisabled = input(false, { ...(ngDevMode ? { debugName: "dismissDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dismissAriaLabel = input('Clear filter', ...(ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []));
     dismiss = new EventEmitter();
     handleDismiss = () => {
         if (!this.dismiss.observed && !this.dismissDisabled())
@@ -5464,11 +5479,11 @@ class GdsFilterChipComponent extends OnBrandChanged {
         this.dismiss.emit();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFilterChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsFilterChipComponent, isStandalone: true, selector: "gds-filter-chip, button[gds-filter-chip]", inputs: { dismissDisabled: { classPropertyName: "dismissDisabled", publicName: "dismissDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "tabIndex": "0" }, listeners: { "keydown.delete": "handleDismiss()", "keydown.backspace": "handleDismiss()" }, classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-2xs\n      gds-padding-inline-2xs\n      gds-radius-sm\n      gds-text-caption\n      gds-text-primary\n      gds-min-height-md\n    " }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n<button\n  gds-icon-button\n  variant=\"primary\"\n  class=\"\n    gds-background-none\n    gds-margin-inline-start-auto\n    gds-min-height-0\n  \"\n  [attr.aria-label]=\"'Features.Activities.Page.Filter.Clear' | translate\"\n  [disabled]=\"dismissDisabled()\"\n  (click)=\"handleDismiss()\"\n>\n  <gds-icon\n    key=\"line-dismiss\"\n    class=\"\n      gds-icon-primary\n      gds-icon-size-3xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}}\n"], dependencies: [{ kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsFilterChipComponent, isStandalone: true, selector: "gds-filter-chip, button[gds-filter-chip]", inputs: { dismissDisabled: { classPropertyName: "dismissDisabled", publicName: "dismissDisabled", isSignal: true, isRequired: false, transformFunction: null }, dismissAriaLabel: { classPropertyName: "dismissAriaLabel", publicName: "dismissAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "tabIndex": "0" }, listeners: { "keydown.delete": "handleDismiss()", "keydown.backspace": "handleDismiss()" }, classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-2xs\n      gds-padding-inline-2xs\n      gds-radius-sm\n      gds-text-caption\n      gds-text-primary\n      gds-min-height-md\n    " }, usesInheritance: true, ngImport: i0, template: "<ng-content />\n<button\n  gds-icon-button\n  variant=\"primary\"\n  class=\"\n    gds-background-none\n    gds-margin-inline-start-auto\n    gds-min-height-0\n  \"\n  [attr.aria-label]=\"dismissAriaLabel()\"\n  [disabled]=\"dismissDisabled()\"\n  (click)=\"handleDismiss()\"\n>\n  <gds-icon\n    key=\"line-dismiss\"\n    class=\"\n      gds-icon-primary\n      gds-icon-size-3xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}}\n"], dependencies: [{ kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFilterChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-filter-chip, button[gds-filter-chip]', imports: [GdsIconButtonComponent, GdsIconComponent, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gds-filter-chip, button[gds-filter-chip]', imports: [GdsIconButtonComponent, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: `
       gds-align-items-center
       gds-display-flex
@@ -5482,8 +5497,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '(keydown.delete)': 'handleDismiss()',
                         '(keydown.backspace)': 'handleDismiss()',
                         tabIndex: '0'
-                    }, template: "<ng-content />\n<button\n  gds-icon-button\n  variant=\"primary\"\n  class=\"\n    gds-background-none\n    gds-margin-inline-start-auto\n    gds-min-height-0\n  \"\n  [attr.aria-label]=\"'Features.Activities.Page.Filter.Clear' | translate\"\n  [disabled]=\"dismissDisabled()\"\n  (click)=\"handleDismiss()\"\n>\n  <gds-icon\n    key=\"line-dismiss\"\n    class=\"\n      gds-icon-primary\n      gds-icon-size-3xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}}\n"] }]
-        }], propDecorators: { dismissDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissDisabled", required: false }] }], dismiss: [{
+                    }, template: "<ng-content />\n<button\n  gds-icon-button\n  variant=\"primary\"\n  class=\"\n    gds-background-none\n    gds-margin-inline-start-auto\n    gds-min-height-0\n  \"\n  [attr.aria-label]=\"dismissAriaLabel()\"\n  [disabled]=\"dismissDisabled()\"\n  (click)=\"handleDismiss()\"\n>\n  <gds-icon\n    key=\"line-dismiss\"\n    class=\"\n      gds-icon-primary\n      gds-icon-size-3xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host{background-color:var(--gds-pattern-label-background-default);padding-block:6px}button:host{cursor:pointer;border:none;width:100%}button:host:focus,button:host:focus-visible,button:host:hover{background-color:var(--gds-pattern-label-background-hover)}button:host:disabled{cursor:not-allowed;outline:none}}\n"] }]
+        }], propDecorators: { dismissDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissDisabled", required: false }] }], dismissAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissAriaLabel", required: false }] }], dismiss: [{
                 type: Output
             }] } });
 
@@ -5662,7 +5677,7 @@ class GdsDateInputComponent extends GdsSignalFormContainer {
                 useValue: navigator.language
             },
             provideNativeDateAdapter()
-        ], queries: [{ propertyName: "inputComponent", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n@if (calendarVisible()) {\n  <div\n    #calendarContainer\n    class=\"gds-date-input_calendar-container\"\n    [ngClass]=\"dropdownPositionClass()\"\n    tabindex=\"-1\"\n    (blur)=\"onCalendarBlur($event)\"\n  >\n    <mat-calendar\n      [(selected)]=\"selectedDate\"\n      [startAt]=\"selectedDate()\"\n      (click)=\"onCalendarClick($event)\"\n      (selectedChange)=\"onSelectedDateChange()\"\n      (viewChanged)=\"onCalendarViewChanged($event)\"\n    />\n  </div>\n}\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .gds-date-input_calendar-container{width:300px;position:absolute;z-index:1;outline:none}:host .gds-date-input_calendar-container.position-top-left{bottom:100%;left:0}:host .gds-date-input_calendar-container.position-top-right{bottom:100%;right:0}:host .gds-date-input_calendar-container.position-bottom-left{top:100%;left:0}:host .gds-date-input_calendar-container.position-bottom-right{top:100%;right:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-icon-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button-touch-target{padding:0;margin:0;height:auto}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-table-header-divider{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{padding:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body tr[aria-hidden]{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body .mat-calendar-body-label{visibility:hidden}:host .gds-date-input_calendar-container ::ng-deep mat-calendar.mat-calendar{border-radius:var(--gds-borderRadius-md);box-shadow:var(--gds-shadow-default);background-color:var(--gds-palette-background-white)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{border-bottom:1px solid var(--gds-palette-border-default);padding-top:var(--gds-spacing-2xs);margin-bottom:var(--gds-spacing-xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls{margin:0 var(--gds-spacing-sm) var(--gds-spacing-2xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button{font-weight:var(--gds-fontWeight-title);color:var(--gds-palette-text-default-primary)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button svg{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-previous-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-next-button{color:var(--gds-palette-button-primary-default);transform:rotate(90deg)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar{--mat-datepicker-calendar-text-font: var(--gds-fontFamily-body);--mat-datepicker-calendar-text-size: var(--gds-fontSize-bodyStrong);--mat-datepicker-calendar-header-text-weight: var(--gds-fontWeight-title);--mat-datepicker-calendar-date-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-header-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-date-selected-state-text-color: var(--gds-palette-text-default-contrast);--mat-datepicker-calendar-date-selected-state-background-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-outline-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--gds-palette-button-primary-default)}}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$4.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "inputComponent", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\n@if (calendarVisible()) {\n  <div\n    #calendarContainer\n    class=\"gds-date-input_calendar-container\"\n    [ngClass]=\"dropdownPositionClass()\"\n    tabindex=\"-1\"\n    (blur)=\"onCalendarBlur($event)\"\n  >\n    <mat-calendar\n      [(selected)]=\"selectedDate\"\n      [startAt]=\"selectedDate()\"\n      (click)=\"onCalendarClick($event)\"\n      (selectedChange)=\"onSelectedDateChange()\"\n      (viewChanged)=\"onCalendarViewChanged($event)\"\n    />\n  </div>\n}\n", styles: ["@layer design-system{:host{--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .gds-date-input_calendar-container{width:300px;position:absolute;z-index:1;outline:none}:host .gds-date-input_calendar-container.position-top-left{bottom:100%;left:0}:host .gds-date-input_calendar-container.position-top-right{bottom:100%;right:0}:host .gds-date-input_calendar-container.position-bottom-left{top:100%;left:0}:host .gds-date-input_calendar-container.position-bottom-right{top:100%;right:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-icon-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-mdc-button-touch-target{padding:0;margin:0;height:auto}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-table-header-divider{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{padding:0}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body tr[aria-hidden]{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-body .mat-calendar-body-label{visibility:hidden}:host .gds-date-input_calendar-container ::ng-deep mat-calendar.mat-calendar{border-radius:var(--gds-borderRadius-md);box-shadow:var(--gds-shadow-default);background-color:var(--gds-palette-background-white)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-header{border-bottom:1px solid var(--gds-palette-border-default);padding-top:var(--gds-spacing-2xs);margin-bottom:var(--gds-spacing-xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls{margin:0 var(--gds-spacing-sm) var(--gds-spacing-2xs)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button{font-weight:var(--gds-fontWeight-title);color:var(--gds-palette-text-default-primary)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-period-button svg{display:none}:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-previous-button,:host .gds-date-input_calendar-container ::ng-deep mat-calendar .mat-calendar-controls .mat-calendar-next-button{color:var(--gds-palette-button-primary-default);transform:rotate(90deg)}:host .gds-date-input_calendar-container ::ng-deep mat-calendar{--mat-datepicker-calendar-text-font: var(--gds-fontFamily-body);--mat-datepicker-calendar-text-size: var(--gds-fontSize-bodyStrong);--mat-datepicker-calendar-header-text-weight: var(--gds-fontWeight-title);--mat-datepicker-calendar-date-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-header-text-color: var(--gds-palette-text-default-primary);--mat-datepicker-calendar-date-selected-state-text-color: var(--gds-palette-text-default-contrast);--mat-datepicker-calendar-date-selected-state-background-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-outline-color: var(--gds-palette-button-primary-default);--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--gds-palette-button-primary-default)}}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$3.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDateInputComponent, decorators: [{
             type: Component,
@@ -5696,8 +5711,10 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
     value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    dragDropLabel = input('Gds.FileUpload.DragAndDrop', ...(ngDevMode ? [{ debugName: "dragDropLabel" }] : /* istanbul ignore next */ []));
-    inputAriaLabel = input('Gds.FileUpload.AriaLabel', ...(ngDevMode ? [{ debugName: "inputAriaLabel" }] : /* istanbul ignore next */ []));
+    dragDropLabel = input('Drag and drop a document here', ...(ngDevMode ? [{ debugName: "dragDropLabel" }] : /* istanbul ignore next */ []));
+    separatorLabel = input('or', ...(ngDevMode ? [{ debugName: "separatorLabel" }] : /* istanbul ignore next */ []));
+    browseLabel = input('Browse your files', ...(ngDevMode ? [{ debugName: "browseLabel" }] : /* istanbul ignore next */ []));
+    inputAriaLabel = input('File upload', ...(ngDevMode ? [{ debugName: "inputAriaLabel" }] : /* istanbul ignore next */ []));
     changed = output();
     fileUpload = viewChild.required('fileUpload');
     dragOver = signal(false, ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
@@ -5731,11 +5748,11 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
         this.fileUpload().nativeElement.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "preventDragEvent($event, true)", "dragleave": "preventDragEvent($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n      gds-height-100-parent\n      gds-width-100-parent\n    " }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n  tabindex=\"0\"\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-height-100-parent\n    gds-justify-content-center\n    gds-padding-md\n    gds-radius-md\n    gds-width-100-parent\n  \"\n  [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n  [attr.inert]=\"disabled() ? '' : undefined\"\n  (keydown.enter)=\"openFileSelector()\"\n>\n  <gds-icon\n    class=\"\n      gds-icon-size-lg\n      icon\n    \"\n    key=\"line-cloud-up\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-2xs\n    gds-text-body\n    gds-text-center\n  \">\n    <span class=\"\n      gds-text-body-large-strong\n      text\n    \">{{ dragDropLabel() | translate }}</span>\n    <span class=\"text\">{{ 'Gds.FileUpload.Separator' | translate }}</span>\n    <a class=\"link\">\n      {{ 'Gds.FileUpload.Browse' | translate }}\n    </a>\n  </div>\n  <span\n    class=\"\n      gds-align-content-center\n      gds-display-flex\n      gds-flex-wrap\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-text-body\n      gds-text-secondary\n    \"\n  >\n    <ng-content />\n  </span>\n\n  <input\n    #fileUpload\n    type=\"file\"\n    class=\"gds-display-none\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [attr.aria-label]=\"inputAriaLabel() | translate\"\n    (change)=\"fileSelected($event)\"\n  />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsFileUploadComponent, isStandalone: true, selector: "gds-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, separatorLabel: { classPropertyName: "separatorLabel", publicName: "separatorLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, inputAriaLabel: { classPropertyName: "inputAriaLabel", publicName: "inputAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "drop": "onFileDrop($event)", "dragover": "preventDragEvent($event, true)", "dragleave": "preventDragEvent($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n      gds-height-100-parent\n      gds-width-100-parent\n    " }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n  tabindex=\"0\"\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-height-100-parent\n    gds-justify-content-center\n    gds-padding-md\n    gds-radius-md\n    gds-width-100-parent\n  \"\n  [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n  [attr.inert]=\"disabled() ? '' : undefined\"\n  (keydown.enter)=\"openFileSelector()\"\n>\n  <gds-icon\n    class=\"\n      gds-icon-size-lg\n      icon\n    \"\n    key=\"line-cloud-up\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-2xs\n    gds-text-body\n    gds-text-center\n  \">\n    <span class=\"\n      gds-text-body-large-strong\n      text\n    \">{{ dragDropLabel() }}</span>\n    <span class=\"text\">{{ separatorLabel() }}</span>\n    <a class=\"link\">\n      {{ browseLabel() }}\n    </a>\n  </div>\n  <span\n    class=\"\n      gds-align-content-center\n      gds-display-flex\n      gds-flex-wrap\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-text-body\n      gds-text-secondary\n    \"\n  >\n    <ng-content />\n  </span>\n\n  <input\n    #fileUpload\n    type=\"file\"\n    class=\"gds-display-none\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [attr.aria-label]=\"inputAriaLabel()\"\n    (change)=\"fileSelected($event)\"\n  />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent, TranslateModule, NgClass], host: {
+            args: [{ selector: 'gds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent, NgClass], host: {
                         '[attr.data-dragover]': 'dragOver() ? "": undefined',
                         '(drop)': 'onFileDrop($event)',
                         '(dragover)': 'preventDragEvent($event, true)',
@@ -5744,20 +5761,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       gds-height-100-parent
       gds-width-100-parent
     `
-                    }, template: "<label\n  tabindex=\"0\"\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-height-100-parent\n    gds-justify-content-center\n    gds-padding-md\n    gds-radius-md\n    gds-width-100-parent\n  \"\n  [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n  [attr.inert]=\"disabled() ? '' : undefined\"\n  (keydown.enter)=\"openFileSelector()\"\n>\n  <gds-icon\n    class=\"\n      gds-icon-size-lg\n      icon\n    \"\n    key=\"line-cloud-up\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-2xs\n    gds-text-body\n    gds-text-center\n  \">\n    <span class=\"\n      gds-text-body-large-strong\n      text\n    \">{{ dragDropLabel() | translate }}</span>\n    <span class=\"text\">{{ 'Gds.FileUpload.Separator' | translate }}</span>\n    <a class=\"link\">\n      {{ 'Gds.FileUpload.Browse' | translate }}\n    </a>\n  </div>\n  <span\n    class=\"\n      gds-align-content-center\n      gds-display-flex\n      gds-flex-wrap\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-text-body\n      gds-text-secondary\n    \"\n  >\n    <ng-content />\n  </span>\n\n  <input\n    #fileUpload\n    type=\"file\"\n    class=\"gds-display-none\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [attr.aria-label]=\"inputAriaLabel() | translate\"\n    (change)=\"fileSelected($event)\"\n  />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
+                    }, template: "<label\n  tabindex=\"0\"\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\n    gds-height-100-parent\n    gds-justify-content-center\n    gds-padding-md\n    gds-radius-md\n    gds-width-100-parent\n  \"\n  [ngClass]=\"{ 'gds-pointer-events-none': disabled() }\"\n  [attr.inert]=\"disabled() ? '' : undefined\"\n  (keydown.enter)=\"openFileSelector()\"\n>\n  <gds-icon\n    class=\"\n      gds-icon-size-lg\n      icon\n    \"\n    key=\"line-cloud-up\"\n    aria-hidden=\"true\"\n  />\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-flex-column\n    gds-gap-2xs\n    gds-text-body\n    gds-text-center\n  \">\n    <span class=\"\n      gds-text-body-large-strong\n      text\n    \">{{ dragDropLabel() }}</span>\n    <span class=\"text\">{{ separatorLabel() }}</span>\n    <a class=\"link\">\n      {{ browseLabel() }}\n    </a>\n  </div>\n  <span\n    class=\"\n      gds-align-content-center\n      gds-display-flex\n      gds-flex-wrap\n      gds-gap-2xs\n      gds-justify-content-center\n      gds-text-body\n      gds-text-secondary\n    \"\n  >\n    <ng-content />\n  </span>\n\n  <input\n    #fileUpload\n    type=\"file\"\n    class=\"gds-display-none\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [attr.aria-label]=\"inputAriaLabel()\"\n    (change)=\"fileSelected($event)\"\n  />\n</label>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--gds-form-control-border-color: var(--gds-palette-border-primary);--gds-form-control-background-color: var(--gds-palette-background-base);--gds-form-control-text-color: var(--gds-palette-text-primary-primary);--icon-color: var(--gds-brand-300);--text-decoration: underline;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--icon-color: var(--disabled-text-color);--border-color: var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--icon-color: var(--invalid-color);--background-color: var(--gds-palette-helper-error-default)}:host,:host label{cursor:var(--cursor)}:host[data-dragover] label,:host label:focus{outline:var(--border-color) auto 1px}:host label{background:var(--background-color);border:2px dashed var(--border-color)}:host label .text{color:var(--text-color)}:host label .icon{color:var(--icon-color)}:host label .link{color:var(--text-color)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], separatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], inputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAriaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
 
 class GdsFormControlComponent extends GdsSignalFormContainer {
     locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFormControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFormControlComponent, isStandalone: true, selector: "gds-form-control", inputs: { locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.locked": "locked() ? \"\" : undefined" }, classAttribute: "gds-display-flex" }, usesInheritance: true, ngImport: i0, template: "<div class=\"\n  gds-text-body\n  gds-whitespace-nowrap\n  label\n\">\n  <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n  body\n  gds-display-flex\n  gds-flex-column\n  gds-min-height-0\n  gds-row-gap-2xs\n  gds-text-body\n  gds-text-primary\n\">\n  <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n  @if (formFieldError(); as errorMessage) {\n    <span class=\"\n      feedback\n      gds-text-caption\n    \">\n      {{ errorMessage | translate }}\n    </span>\n  }\n</div>\n\n<ng-template #lockedTemplate>\n  <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n  <ng-content />\n</ng-template>\n", styles: ["@layer design-system{:host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFormControlComponent, isStandalone: true, selector: "gds-form-control", inputs: { locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.locked": "locked() ? \"\" : undefined" }, classAttribute: "gds-display-flex" }, usesInheritance: true, ngImport: i0, template: "<div class=\"\n  gds-text-body\n  gds-whitespace-nowrap\n  label\n\">\n  <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n  body\n  gds-display-flex\n  gds-flex-column\n  gds-min-height-0\n  gds-row-gap-2xs\n  gds-text-body\n  gds-text-primary\n\">\n  <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n  @if (formFieldError(); as errorMessage) {\n    <span class=\"\n      feedback\n      gds-text-caption\n    \">\n      {{ errorMessage }}\n    </span>\n  }\n</div>\n\n<ng-template #lockedTemplate>\n  <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n  <ng-content />\n</ng-template>\n", styles: ["@layer design-system{:host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFormControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-form-control', imports: [NgTemplateOutlet, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gds-form-control', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gds-display-flex',
                         '[attr.locked]': 'locked() ? "" : undefined'
-                    }, template: "<div class=\"\n  gds-text-body\n  gds-whitespace-nowrap\n  label\n\">\n  <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n  body\n  gds-display-flex\n  gds-flex-column\n  gds-min-height-0\n  gds-row-gap-2xs\n  gds-text-body\n  gds-text-primary\n\">\n  <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n  @if (formFieldError(); as errorMessage) {\n    <span class=\"\n      feedback\n      gds-text-caption\n    \">\n      {{ errorMessage | translate }}\n    </span>\n  }\n</div>\n\n<ng-template #lockedTemplate>\n  <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n  <ng-content />\n</ng-template>\n", styles: ["@layer design-system{:host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}}\n"] }]
+                    }, template: "<div class=\"\n  gds-text-body\n  gds-whitespace-nowrap\n  label\n\">\n  <ng-content select=\"[label]\" />\n</div>\n<div class=\"\n  body\n  gds-display-flex\n  gds-flex-column\n  gds-min-height-0\n  gds-row-gap-2xs\n  gds-text-body\n  gds-text-primary\n\">\n  <ng-container *ngTemplateOutlet=\"locked() ? lockedTemplate : editableTemplate\" />\n  @if (formFieldError(); as errorMessage) {\n    <span class=\"\n      feedback\n      gds-text-caption\n    \">\n      {{ errorMessage }}\n    </span>\n  }\n</div>\n\n<ng-template #lockedTemplate>\n  <ng-content select=\"[locked]\" />\n</ng-template>\n\n<ng-template #editableTemplate>\n  <ng-content />\n</ng-template>\n", styles: ["@layer design-system{:host{flex-direction:column;align-items:baseline;gap:var(--gds-spacing-2xs);--gds-form-control-feedback-display: none;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--gds-form-control-feedback-display: initial;--feedback-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--feedback-color: var(--disabled-text-color)}:host.gds-flex-row .label,:host.gds-flex-row-reverse .label{flex:1}:is(body[isMobile=true]) :host.gds-flex-row,:is(body[isMobile=true]) :host.gds-flex-row-reverse{gap:var(--gds-spacing-sm)}:host .label:empty{display:none}:host .label{color:var(--text-color, var(--gds-palette-text-default-primary))}:host:not(.gds-flex-row):not(.gds-flex-row-reverse) .body{width:100%}:host .feedback{display:var(--gds-form-control-feedback-display);color:var(--feedback-color, var(--gds-palette-text-default-tertiary))}}\n"] }]
         }], propDecorators: { locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }] } });
 
 class GdsMapArrayToRadioOptionsPipe {
@@ -5835,7 +5852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class GdsButtonRadioOptionComponent extends GdsRadioOptionDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonRadioOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsButtonRadioOptionComponent, isStandalone: true, selector: "input[gds-button-radio-option]", host: { attributes: { "type": "radio" }, listeners: { "change": "onChange()" }, properties: { "checked": "selected()", "id": "id()", "name": "name()", "disabled": "disabled()", "attr.invalid": "invalid()", "attr.data-label": "label()", "attr.aria-label": "label()" }, classAttribute: "gds-text-caption-strong gds-radius-sm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsButtonRadioOptionComponent, isStandalone: true, selector: "input[gds-button-radio-option]", host: { attributes: { "type": "radio" }, listeners: { "change": "onChange()" }, properties: { "checked": "selected()", "id": "id()", "name": "name()", "disabled": "disabled()", "attr.invalid": "invalid()", "attr.data-label": "label()", "attr.tabindex": "selected() ? 0 : -1", "attr.aria-label": "label()" }, classAttribute: "gds-text-caption-strong gds-radius-sm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonRadioOptionComponent, decorators: [{
             type: Component,
@@ -5852,6 +5869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.invalid]': 'invalid()',
                         '[attr.data-label]': 'label()',
                         // a11y
+                        '[attr.tabindex]': 'selected() ? 0 : -1',
                         '[attr.aria-label]': 'label()'
                     }, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"] }]
         }] });
@@ -5862,8 +5880,8 @@ class GdsSelectComponent extends GdsSignalFormControl {
     searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     appendTo = input('', ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    loadingText = input('Core.Label.Loading', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
-    clearAriaLabel = input('Gds.Select.Clear.AriaLabel', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    clearAriaLabel = input('Select clear', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
     autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     hideChevron = input(false, { ...(ngDevMode ? { debugName: "hideChevron" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -5977,7 +5995,7 @@ class GdsSelectComponent extends GdsSignalFormControl {
         this.ref().handleClearClick();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText() | translate\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()] | translate\"\n    >\n      {{ item[bindLabel()] | translate }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()] | translate\"\n    >\n      {{ items[0][bindLabel()] | translate }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()] | translate\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] | translate }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel() | translate\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsSelectComponent, isStandalone: true, selector: "gds-select", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideChevron: { classPropertyName: "hideChevron", publicName: "hideChevron", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changed: "changed", searched: "searched", blurred: "blurred", cleared: "cleared", closed: "closed", opened: "opened", bindValue: "bindValueChange", bindLabel: "bindLabelChange", value: "valueChange", items: "itemsChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()" } }, queries: [{ propertyName: "multiLabelTmpl", first: true, predicate: ["multiLabelTmpl"], descendants: true, isSignal: true }, { propertyName: "labelTmpl", first: true, predicate: ["labelTmpl"], descendants: true, isSignal: true }, { propertyName: "optionTmpl", first: true, predicate: ["optionTmpl"], descendants: true, isSignal: true }, { propertyName: "footerTmpl", first: true, predicate: ["footerTmpl"], descendants: true, isSignal: true }, { propertyName: "clearBtnTmpl", first: true, predicate: ["clearBtnTmpl"], descendants: true, isSignal: true }, { propertyName: "placeholderTmpl", first: true, predicate: ["placeholderTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText()\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()]\"\n    >\n      {{ item[bindLabel()] }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()]\"\n    >\n      {{ items[0][bindLabel()] }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()]\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgPlaceholderTemplateDirective, selector: "[ng-placeholder-tmp]" }, { kind: "component", type: GdsCheckboxComponent, selector: "input[type=\"checkbox\"][gds-checkbox]", inputs: ["checked", "touched", "disabled", "readonly", "hidden", "invalid", "tabindex"], outputs: ["checkedChange", "touchedChange", "tabindexChange"] }, { kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSelectComponent, decorators: [{
             type: Component,
@@ -5997,11 +6015,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         GdsTooltipComponent,
                         GdsIconButtonComponent,
                         FormsModule,
-                        TranslatePipe,
                         NgClass
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(keydown)': 'setMarkedItemIndex()'
-                    }, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText() | translate\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()] | translate\"\n    >\n      {{ item[bindLabel()] | translate }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()] | translate\"\n    >\n      {{ items[0][bindLabel()] | translate }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()] | translate\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] | translate }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel() | translate\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"] }]
+                    }, template: "<ng-select\n  class=\"\n    gds-mobile-text-input-mobile\n    gds-text-input\n  \"\n  [ngClass]=\"{ 'ng-select-hide-chevron': hideChevron() }\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [notFoundText]=\"emptyText()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [multiple]=\"multiple()\"\n  [closeOnSelect]=\"!multiple()\"\n  [disabled]=\"disabled()\"\n  [items]=\"items()\"\n  [ngModel]=\"value()\"\n  [loading]=\"loading()\"\n  [loadingText]=\"loadingText()\"\n  [searchable]=\"searchable()\"\n  [clearable]=\"clearable()\"\n  [virtualScroll]=\"virtualScroll()\"\n  [searchFn]=\"itemShouldDisplay\"\n  [appendTo]=\"appendTo()\"\n  [keyDownFn]=\"onKeyDown\"\n  [labelForId]=\"id()\"\n  (ngModelChange)=\"setValue($event)\"\n  (change)=\"onHandleChange($event)\"\n  (search)=\"onSearchChange($event)\"\n  (clear)=\"cleared.emit()\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n>\n  <ng-template\n    ng-label-tmp\n    let-item=\"item\"\n  >\n    <ng-container *ngTemplateOutlet=\"labelTmpl() ?? defaultLabelTmpl; context: { item }\" />\n  </ng-template>\n\n  @if (!value()) {\n    <ng-template ng-placeholder-tmp>\n      <ng-container *ngTemplateOutlet=\"placeholderTmpl() ?? defaultPlaceholderTmpl\" />\n    </ng-template>\n  }\n\n  <ng-template\n    ng-multi-label-tmp\n    let-items=\"items\"\n  >\n    <ng-container *ngTemplateOutlet=\"multiLabelTmpl() ?? defaultMultiLabelTmpl; context: { items }\" />\n  </ng-template>\n\n  <ng-template\n    ng-option-tmp\n    let-option=\"item\"\n    let-selected=\"item$.selected\"\n    let-index=\"index\"\n  >\n    @if (multiple()) {\n      <input\n        type=\"checkbox\"\n        class=\"\n          gds-margin-block-auto\n          gds-margin-inline-3xs\n        \"\n        gds-checkbox\n        [checked]=\"selected\"\n        (mousedown)=\"onCheckboxChanged($event)\"\n      />\n    }\n    <ng-container\n      *ngTemplateOutlet=\"optionTmpl() ?? defaultOptionTmpl; context: { option, marked: markedIndex() === index }\"\n    />\n  </ng-template>\n\n  @if (footerTmpl(); as footerTmpl) {\n    <ng-template ng-footer-tmp>\n      <div\n        class=\"\n          gds-height-100-parent\n          gds-width-100-parent\n        \"\n        (mouseenter)=\"unmarkItem()\"\n      >\n        <ng-container *ngTemplateOutlet=\"footerTmpl\" />\n      </div>\n    </ng-template>\n  }\n\n  <ng-template ng-clearbutton-tmp>\n    <span class=\"ng-clear-wrapper\">\n      <ng-container *ngTemplateOutlet=\"clearBtnTmpl() ?? defaultClearBtnTmpl\" />\n    </span>\n  </ng-template>\n</ng-select>\n\n<ng-template\n  #defaultLabelTmpl\n  let-item=\"item\"\n>\n  @if (value !== undefined) {\n    <gds-tooltip\n      onlyTextOverflow\n      [tooltip]=\"item[bindLabel()]\"\n    >\n      {{ item[bindLabel()] }}\n    </gds-tooltip>\n  }\n</ng-template>\n\n<ng-template\n  #defaultMultiLabelTmpl\n  let-items=\"items\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-inline-flex\n    gds-gap-2xs\n    gds-select--multi-selected-content\n  \">\n    <gds-tooltip\n      onlyOnTextOverflow\n      [tooltip]=\"items[0][bindLabel()]\"\n    >\n      {{ items[0][bindLabel()] }}\n    </gds-tooltip>\n    @if (items.length > 1) {\n      <span gds-badge>+{{ items.length - 1 }}</span>\n    }\n  </div>\n</ng-template>\n\n<ng-template\n  #defaultOptionTmpl\n  let-option=\"option\"\n  let-active=\"marked\"\n>\n  <gds-tooltip\n    class=\"option\"\n    onlyTextOverflow\n    [tooltip]=\"option[bindLabel()]\"\n    [open]=\"active\"\n  >\n    {{ option[bindLabel()] }}\n  </gds-tooltip>\n</ng-template>\n\n<ng-template #defaultPlaceholderTmpl>\n  <span class=\"ng-placeholder\">{{ placeholder() }}</span>\n</ng-template>\n\n<ng-template #defaultClearBtnTmpl>\n  <button\n    #clearButton\n    gds-icon-button\n    class=\"gds-background-none\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClearClicked()\"\n    (keydown.enter)=\"onClearClicked()\"\n  >\n    <gds-icon\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n      \"\n      key=\"line-dismiss\"\n    />\n  </button>\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23cd2127' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host[disabled],:host:has(*:disabled,*[disabled=true]){--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 5.75L8 10.25L12.75 5.75' stroke='%23b2b2b2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");--cursor: not-allowed}:host ng-select.ng-select-clearable,:host ng-select.ng-select-hide-chevron{--arrow-display: none}:host ng-select.ng-select-opened{--arrow-url: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.75 10.25L8 5.75L3.25 10.25' stroke='%231E365E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container{gap:var(--gds-spacing-2xs);flex-wrap:nowrap!important}:host ng-select.ng-select-multiple ::ng-deep .ng-value-container .ng-input{padding-left:0}:host ng-select ::ng-deep .ng-select-container{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ng-select ::ng-deep .ng-select-container ::ng-deep input:focus,:host ng-select ::ng-deep .ng-select-container ::ng-deep textarea:focus{outline:none}:host ng-select ::ng-deep .ng-select-container:focus-within,:host ng-select ::ng-deep .ng-select-container.is-controlled{isolation:isolate;position:relative}:host ng-select ::ng-deep .ng-select-container:focus-within:before,:host ng-select ::ng-deep .ng-select-container.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{min-height:var(--gds-size-lg-rem)}:host ng-select ::ng-deep .ng-select-container:hover{background-color:var(--hover-color)}:host ng-select ::ng-deep .ng-select-container[disabled]::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host ng-select ::ng-deep .ng-select-container[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host ng-select ::ng-deep .ng-select-container:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ng-select ::ng-deep .ng-select-container ::ng-deep *::placeholder{color:var(--placeholder-color)}:host ng-select ::ng-deep .ng-select-container{border-radius:var(--gds-borderRadius-sm);padding-block:var(--gds-spacing-3xs);padding-inline:var(--gds-spacing-xs);gap:var(--gds-spacing-2xs)}:is(body[isMobile=true]) :host ng-select ::ng-deep .ng-select-container{padding-block:0}:host ng-select ::ng-deep .ng-has-value .ng-arrow-wrapper{display:var(--arrow-display);cursor:var(--cursor)}:host ng-select ::ng-deep .ng-arrow-wrapper,:host ng-select ::ng-deep .ng-clear-wrapper{width:var(--gds-size-sm-rem);height:var(--gds-size-sm-rem);display:flex;align-items:center;justify-content:center}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow,:host ng-select ::ng-deep .ng-clear-wrapper .ng-arrow{width:var(--gds-size-sm-rem)!important;height:var(--gds-size-sm-rem)!important;background-image:var(--arrow-url)}:host ng-select ::ng-deep .ng-arrow-wrapper .ng-clear,:host ng-select ::ng-deep .ng-clear-wrapper .ng-clear{font-size:var(--gds-fontSize-bodyLarge)}:host ng-select ::ng-deep .ng-option{display:flex!important;gap:var(--gds-spacing-3xs);padding:11px var(--gds-spacing-sm);border-radius:var(--gds-borderRadius-sm);color:var(--text-color);position:relative}:host ng-select ::ng-deep .ng-option.ng-option-marked:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none;--wrapper-margin-inline: 5px;--wrapper-margin-block: 4px;z-index:-1}:host ng-select ::ng-deep .ng-value-container{overflow:hidden!important;align-items:center;height:var(--gds-primitive-lineHeight-250)}:host ng-select ::ng-deep .ng-value-container .ng-value{height:fit-content}:host ng-select ::ng-deep .ng-placeholder{color:var(--placeholder-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}:host ng-select ::ng-deep .ng-option-disabled{cursor:default!important}:host ng-select ::ng-deep .ng-spinner-loader{border-left-color:var(--gds-palette-text-primary-primary)!important}.gds-select--multi-selected-content{color:var(--gds-palette-text-default-primary);font:var(--gds-text-body-shorthand);min-width:0}}\n"] }]
         }], propDecorators: { clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideChevron", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], searched: [{ type: i0.Output, args: ["searched"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }, { type: i0.Output, args: ["bindValueChange"] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }, { type: i0.Output, args: ["bindLabelChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }, { type: i0.Output, args: ["itemsChange"] }], ref: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgSelectComponent), { isSignal: true }] }], clearButton: [{ type: i0.ViewChild, args: ['clearButton', { ...{
                             read: (ElementRef)
                         }, isSignal: true }] }], multiLabelTmpl: [{ type: i0.ContentChild, args: ['multiLabelTmpl', { isSignal: true }] }], labelTmpl: [{ type: i0.ContentChild, args: ['labelTmpl', { isSignal: true }] }], optionTmpl: [{ type: i0.ContentChild, args: ['optionTmpl', { isSignal: true }] }], footerTmpl: [{ type: i0.ContentChild, args: ['footerTmpl', { isSignal: true }] }], clearBtnTmpl: [{ type: i0.ContentChild, args: ['clearBtnTmpl', { isSignal: true }] }], placeholderTmpl: [{ type: i0.ContentChild, args: ['placeholderTmpl', { isSignal: true }] }] } });
@@ -6533,7 +6550,7 @@ class GdsNestedSelectComponent extends GdsSignalFormContainer {
     bindLabel = input.required(...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
     clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     maxMenuHeight = input('240px', ...(ngDevMode ? [{ debugName: "maxMenuHeight" }] : /* istanbul ignore next */ []));
-    clearAriaLabel = input('Gds.Select.Clear.AriaLabel', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    clearAriaLabel = input('Select clear', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
     menuPosition = input(CDK_MENU_CONNECTED_POSITIONS, ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
     dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
@@ -6664,7 +6681,7 @@ class GdsNestedSelectComponent extends GdsSignalFormContainer {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNestedSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsNestedSelectComponent, isStandalone: true, selector: "gds-nested-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "keydown.escape": "onEscape()" }, properties: { "class.is-controlled": "isOpen()" }, classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-2xs\n      gds-justify-content-between\n      gds-mobile-padding-block-0\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-xs\n      gds-radius-sm\n      gds-text-input\n    " }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"\n  content\n  gds-position-absolute\n\">\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label() }\"\n>\n  {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n  <button\n    gds-icon-button\n    class=\"\n      gds-background-none\n      gds-min-height-0\n    \"\n    [disabled]=\"inputDisabled()\"\n    (click)=\"onClear($event)\"\n    (keydown.enter)=\"onClear($event)\"\n    [attr.aria-label]=\"clearAriaLabel() | translate\"\n  >\n    <gds-icon\n      key=\"line-dismiss\"\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n        icon\n      \"\n    />\n  </button>\n} @else {\n  <gds-icon\n    class=\"\n      gds-icon-primary\n      gds-icon-size-2xs\n      icon\n    \"\n    [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n  />\n}\n\n<ng-template #menu>\n  <gds-dropdown\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      [style.maxHeight]=\"maxMenuHeight()\"\n      class=\"gds-scrollable-vertically\"\n    >\n      <div class=\"\n        gds-display-flex\n        gds-flex-column\n      \">\n        @for (option of options(); track $index) {\n          @if (!option.children?.length) {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              (cdkMenuItemTriggered)=\"onItemClick(option)\"\n              >{{ option[bindLabel()] }}</span\n            >\n          } @else {\n            <span\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              cdkMenuItem\n              [cdkMenuTriggerFor]=\"subMenu\"\n              [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n            >\n              {{ option[bindLabel()] }}\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"gds-icon-size-2xs\"\n              />\n            </span>\n          }\n        }\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n\n<ng-template\n  #subMenu\n  let-data\n>\n  <gds-dropdown\n    cdkTargetMenuAim\n    preventMobileStyling\n  >\n    <div\n      [style.maxHeight]=\"maxMenuHeight()\"\n      class=\"gds-scrollable-vertically\"\n    >\n      <div class=\"\n        gds-display-flex\n        gds-flex-column\n      \">\n        @for (option of data; track $index) {\n          @if (!option.children?.length) {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              (cdkMenuItemTriggered)=\"onItemClick(option)\"\n              >{{ option[bindLabel()] }}</span\n            >\n          } @else {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                gds-text-primary\n                item\n              \"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              role=\"button\"\n              [cdkMenuTriggerFor]=\"subMenu\"\n              [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n            >\n              {{ option[bindLabel()] }}\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"gds-icon-size-2xs\"\n              />\n            </span>\n          }\n        }\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", exportAs: ["cdkTargetMenuAim"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsNestedSelectComponent, isStandalone: true, selector: "gds-nested-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "keydown.escape": "onEscape()" }, properties: { "class.is-controlled": "isOpen()" }, classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-2xs\n      gds-justify-content-between\n      gds-mobile-padding-block-0\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-xs\n      gds-radius-sm\n      gds-text-input\n    " }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div class=\"\n  content\n  gds-position-absolute\n\">\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label() }\"\n>\n  {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n  <button\n    gds-icon-button\n    class=\"\n      gds-background-none\n      gds-min-height-0\n    \"\n    [disabled]=\"inputDisabled()\"\n    (click)=\"onClear($event)\"\n    (keydown.enter)=\"onClear($event)\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n  >\n    <gds-icon\n      key=\"line-dismiss\"\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n        icon\n      \"\n    />\n  </button>\n} @else {\n  <gds-icon\n    class=\"\n      gds-icon-primary\n      gds-icon-size-2xs\n      icon\n    \"\n    [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n  />\n}\n\n<ng-template #menu>\n  <gds-dropdown\n    mobileCancelLabel=\"Cancel\"\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      [style.maxHeight]=\"maxMenuHeight()\"\n      class=\"gds-scrollable-vertically\"\n    >\n      <div class=\"\n        gds-display-flex\n        gds-flex-column\n      \">\n        @for (option of options(); track $index) {\n          @if (!option.children?.length) {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              (cdkMenuItemTriggered)=\"onItemClick(option)\"\n              >{{ option[bindLabel()] }}</span\n            >\n          } @else {\n            <span\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              cdkMenuItem\n              [cdkMenuTriggerFor]=\"subMenu\"\n              [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n            >\n              {{ option[bindLabel()] }}\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"gds-icon-size-2xs\"\n              />\n            </span>\n          }\n        }\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n\n<ng-template\n  #subMenu\n  let-data\n>\n  <gds-dropdown\n    mobileCancelLabel=\"Cancel\"\n    cdkTargetMenuAim\n    preventMobileStyling\n  >\n    <div\n      [style.maxHeight]=\"maxMenuHeight()\"\n      class=\"gds-scrollable-vertically\"\n    >\n      <div class=\"\n        gds-display-flex\n        gds-flex-column\n      \">\n        @for (option of data; track $index) {\n          @if (!option.children?.length) {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              (cdkMenuItemTriggered)=\"onItemClick(option)\"\n              >{{ option[bindLabel()] }}</span\n            >\n          } @else {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                gds-text-primary\n                item\n              \"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              role=\"button\"\n              [cdkMenuTriggerFor]=\"subMenu\"\n              [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n            >\n              {{ option[bindLabel()] }}\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"gds-icon-size-2xs\"\n              />\n            </span>\n          }\n        }\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", exportAs: ["cdkTargetMenuAim"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsNestedSelectComponent, decorators: [{
             type: Component,
@@ -6676,8 +6693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         CdkTargetMenuAim,
                         GdsIconComponent,
                         NgClass,
-                        GdsIconButtonComponent,
-                        TranslatePipe
+                        GdsIconButtonComponent
                     ], host: {
                         role: 'button',
                         class: `
@@ -6694,7 +6710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     `,
                         '[class.is-controlled]': 'isOpen()',
                         '(keydown.escape)': 'onEscape()'
-                    }, hostDirectives: [CdkMenuTrigger], template: "<div class=\"\n  content\n  gds-position-absolute\n\">\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label() }\"\n>\n  {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n  <button\n    gds-icon-button\n    class=\"\n      gds-background-none\n      gds-min-height-0\n    \"\n    [disabled]=\"inputDisabled()\"\n    (click)=\"onClear($event)\"\n    (keydown.enter)=\"onClear($event)\"\n    [attr.aria-label]=\"clearAriaLabel() | translate\"\n  >\n    <gds-icon\n      key=\"line-dismiss\"\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n        icon\n      \"\n    />\n  </button>\n} @else {\n  <gds-icon\n    class=\"\n      gds-icon-primary\n      gds-icon-size-2xs\n      icon\n    \"\n    [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n  />\n}\n\n<ng-template #menu>\n  <gds-dropdown\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      [style.maxHeight]=\"maxMenuHeight()\"\n      class=\"gds-scrollable-vertically\"\n    >\n      <div class=\"\n        gds-display-flex\n        gds-flex-column\n      \">\n        @for (option of options(); track $index) {\n          @if (!option.children?.length) {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              (cdkMenuItemTriggered)=\"onItemClick(option)\"\n              >{{ option[bindLabel()] }}</span\n            >\n          } @else {\n            <span\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              cdkMenuItem\n              [cdkMenuTriggerFor]=\"subMenu\"\n              [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n            >\n              {{ option[bindLabel()] }}\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"gds-icon-size-2xs\"\n              />\n            </span>\n          }\n        }\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n\n<ng-template\n  #subMenu\n  let-data\n>\n  <gds-dropdown\n    cdkTargetMenuAim\n    preventMobileStyling\n  >\n    <div\n      [style.maxHeight]=\"maxMenuHeight()\"\n      class=\"gds-scrollable-vertically\"\n    >\n      <div class=\"\n        gds-display-flex\n        gds-flex-column\n      \">\n        @for (option of data; track $index) {\n          @if (!option.children?.length) {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              (cdkMenuItemTriggered)=\"onItemClick(option)\"\n              >{{ option[bindLabel()] }}</span\n            >\n          } @else {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                gds-text-primary\n                item\n              \"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              role=\"button\"\n              [cdkMenuTriggerFor]=\"subMenu\"\n              [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n            >\n              {{ option[bindLabel()] }}\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"gds-icon-size-2xs\"\n              />\n            </span>\n          }\n        }\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"] }]
+                    }, hostDirectives: [CdkMenuTrigger], template: "<div class=\"\n  content\n  gds-position-absolute\n\">\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label() }\"\n>\n  {{ label() ? label() : inputPlaceholder() }}\n</div>\n\n@if (clearable() && label() && !inputDisabled()) {\n  <button\n    gds-icon-button\n    class=\"\n      gds-background-none\n      gds-min-height-0\n    \"\n    [disabled]=\"inputDisabled()\"\n    (click)=\"onClear($event)\"\n    (keydown.enter)=\"onClear($event)\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n  >\n    <gds-icon\n      key=\"line-dismiss\"\n      class=\"\n        gds-icon-primary\n        gds-icon-size-3xs\n        icon\n      \"\n    />\n  </button>\n} @else {\n  <gds-icon\n    class=\"\n      gds-icon-primary\n      gds-icon-size-2xs\n      icon\n    \"\n    [key]=\"isOpen() ? 'line-chevron-up-stroke' : 'line-chevron-down-stroke'\"\n  />\n}\n\n<ng-template #menu>\n  <gds-dropdown\n    mobileCancelLabel=\"Cancel\"\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      [style.maxHeight]=\"maxMenuHeight()\"\n      class=\"gds-scrollable-vertically\"\n    >\n      <div class=\"\n        gds-display-flex\n        gds-flex-column\n      \">\n        @for (option of options(); track $index) {\n          @if (!option.children?.length) {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              (cdkMenuItemTriggered)=\"onItemClick(option)\"\n              >{{ option[bindLabel()] }}</span\n            >\n          } @else {\n            <span\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              cdkMenuItem\n              [cdkMenuTriggerFor]=\"subMenu\"\n              [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n            >\n              {{ option[bindLabel()] }}\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"gds-icon-size-2xs\"\n              />\n            </span>\n          }\n        }\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n\n<ng-template\n  #subMenu\n  let-data\n>\n  <gds-dropdown\n    mobileCancelLabel=\"Cancel\"\n    cdkTargetMenuAim\n    preventMobileStyling\n  >\n    <div\n      [style.maxHeight]=\"maxMenuHeight()\"\n      class=\"gds-scrollable-vertically\"\n    >\n      <div class=\"\n        gds-display-flex\n        gds-flex-column\n      \">\n        @for (option of data; track $index) {\n          @if (!option.children?.length) {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                item\n              \"\n              role=\"button\"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              (cdkMenuItemTriggered)=\"onItemClick(option)\"\n              >{{ option[bindLabel()] }}</span\n            >\n          } @else {\n            <span\n              class=\"\n                gds-align-items-center\n                gds-display-flex\n                gds-flex-1\n                gds-justify-content-between\n                gds-padding-inline-sm\n                gds-position-relative\n                gds-radius-sm\n                gds-text-body\n                gds-text-primary\n                gds-text-primary\n                item\n              \"\n              [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n              cdkMenuItem\n              role=\"button\"\n              [cdkMenuTriggerFor]=\"subMenu\"\n              [cdkMenuTriggerData]=\"{ $implicit: option.children }\"\n            >\n              {{ option[bindLabel()] }}\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"gds-icon-size-2xs\"\n              />\n            </span>\n          }\n        }\n      </div>\n    </div>\n  </gds-dropdown>\n</ng-template>\n", styles: ["@layer design-system{:host{outline:none;--gds-form-control-cursor: pointer;--background-color: var(--gds-form-control-background-color, var(--gds-palette-background-white));--border-color: var(--gds-form-control-border-color, var(--gds-palette-border-default));--text-color: var(--gds-form-control-text-color, var(--gds-palette-text-default-primary));--active-color: var(--gds-form-control-active-color, var(--gds-palette-border-selected));--cursor: var(--gds-form-control-cursor, auto);--hover-color: var(--gds-form-control-hover-color, var(--gds-palette-background-secondary));--placeholder-color: var(--gds-form-control-placeholder-color, var(--gds-palette-text-default-placeholder));--invalid-color: var(--gds-form-control-invalid-color, var(--gds-palette-helper-error-inverse));--disabled-text-color: var(--gds-form-control-disabled-text-color, var(--gds-palette-text-default-disabled));--disabled-background-color: var( --gds-form-control-disabled-background-color, var(--gds-palette-background-disabled) );--disabled-border-color: var(--gds-form-control-disabled-border-color, var(--gds-palette-border-default))}:host[disabled],:host:has(*:disabled,*[disabled=true]){--background-color: var(--disabled-background-color);--text-color: var(--disabled-text-color);--hover-color: var(--disabled-background-color);--border-color: var(--disabled-border-color);--cursor: not-allowed}:host[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--border-color: var(--invalid-color);--text-color: var(--invalid-color);--placeholder-color: var(--invalid-color);--active-color: var(--invalid-color)}:host{background-color:var(--background-color);border:.5px solid var(--border-color);color:var(--text-color);cursor:var(--cursor)!important}:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--active-color);border-radius:var(--gds-borderRadius-xs)}:host{min-height:var(--gds-size-md-rem)}:is(body[isMobile=true]) :host{min-height:var(--gds-size-lg-rem)}:host:hover{background-color:var(--hover-color)}:host[disabled]::ng-deep svg-icon,:host:has(*:disabled,*[disabled=true])::ng-deep svg-icon{color:var(--disabled-text-color)}:host[invalid][touched]:not(:focus-within,.is-controlled)::ng-deep svg-icon,:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled)::ng-deep svg-icon{color:var(--invalid-color)}:host ::ng-deep *::placeholder{color:var(--placeholder-color)}:host .label{color:var(--text-color)}:host .placeholder{color:var(--placeholder-color);-webkit-user-select:none;user-select:none}:host .chevron{outline:none}:host .content{opacity:0;z-index:-1}.item{padding-block:11px;cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.item[aria-expanded=true]:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible:before{content:\"\";position:absolute;border-radius:var(--gds-borderRadius-sm);width:calc(100% - 2 * var(--wrapper-margin-inline, var(--wrapper-margin, 0px)));height:calc(100% - 2 * var(--wrapper-margin-block, var(--wrapper-margin, 0px)));top:var(--wrapper-margin-block, var(--wrapper-margin, 0px));left:var(--wrapper-margin-inline, var(--wrapper-margin, 0px));background:var(--gds-palette-background-hover);pointer-events:none}.item:focus-visible{outline:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxMenuHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMenuHeight", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
 
 class GdsProgressBarComponent {
@@ -6734,7 +6750,7 @@ class GdsSearchBarComponent {
     leadingIcon = input('titlebar-search', ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
     bindValue = input('id', ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
     bindLabel = input('value', ...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
-    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Search bar', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     isDisabled = model(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     suppressClearOnClose = input(false, { ...(ngDevMode ? { debugName: "suppressClearOnClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -6902,13 +6918,18 @@ class GdsSearchBarComponent {
     #setDropdownStyling = () => {
         if (!this.dropdownPanelScroll)
             return;
-        this.#renderer.setStyle(this.dropdownPanelScroll.nativeElement, 'maxHeight', this.maxHeight());
-        this.#renderer.setStyle(this.dropdownPanelScroll.nativeElement, 'minHeight', this.minHeight());
+        const dropdownPanel = this.dropdownPanelScroll.nativeElement;
+        const dropdownPanelParent = this.dropdownPanelScroll.nativeElement.parentElement;
+        if (!dropdownPanelParent)
+            return;
+        this.#renderer.setStyle(dropdownPanel, 'maxHeight', this.maxHeight());
+        this.#renderer.setStyle(dropdownPanel, 'minHeight', this.minHeight());
+        this.#renderer.setStyle(dropdownPanelParent, 'marginTop', '4px');
         // this needs to be last to prevent the dropdown from flashing
-        this.#renderer.setStyle(this.dropdownPanelScroll.nativeElement.parentElement, 'visibility', 'visible');
+        this.#renderer.setStyle(dropdownPanelParent, 'visibility', 'visible');
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSearchBarComponent, isStandalone: true, selector: "gds-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnClose: { classPropertyName: "suppressClearOnClose", publicName: "suppressClearOnClose", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isOpenOverride: { classPropertyName: "isOpenOverride", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showAllItems: { classPropertyName: "showAllItems", publicName: "showAllItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDisabled: "isDisabledChange", focused: "focused", blurred: "blurred", dropdownStateChanged: "dropdownStateChanged", searched: "searched", changed: "changed", value: "valueChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()", "window:resize": "close()" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined" } }, queries: [{ propertyName: "groupItemTmpl", first: true, predicate: ["groupItemTmpl"], descendants: true, isSignal: true }, { propertyName: "dropdownItemTmpl", first: true, predicate: ["itemTmpl"], descendants: true, isSignal: true }, { propertyName: "emptyTmpl", first: true, predicate: ["emptyTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-select\n  #select\n  class=\"\n    gds-radius-sm\n    gds-search-bar_input\n  \"\n  [placeholder]=\"!value() ? placeholder() : ''\"\n  [isOpen]=\"isOpen()\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"value()\"\n  (ngModelChange)=\"setValue($event)\"\n  [items]=\"items()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [loading]=\"loading()\"\n  [markFirst]=\"false\"\n  [groupBy]=\"groupBy()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n  [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n  (focus)=\"handleFocus($event)\"\n  (blur)=\"handleBlur($event)\"\n  (click)=\"handleClick($event)\"\n  (search)=\"handleSearch($event.term)\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n  (change)=\"handleChange($event)\"\n  (clear)=\"handleClear()\"\n>\n  <ng-template\n    ng-optgroup-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-option-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-notfound-tmp\n    let-searchTerm=\"searchTerm\"\n  >\n    <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n  </ng-template>\n  <ng-template ng-loadingtext-tmp>\n    <div class=\"\n      gds-display-flex\n      gds-justify-content-center\n      gds-padding-sm\n      gds-text-body\n      gds-text-primary\n    \">\n      <gds-spinner />\n    </div>\n  </ng-template>\n  <ng-template ng-loadingspinner-tmp />\n  <ng-template ng-clearbutton-tmp>\n    <button\n      gds-icon-button\n      class=\"\n        gds-background-none\n        gds-min-height-0\n        ng-clear-wrapper\n      \"\n      (click)=\"select.handleClearClick()\"\n      (mousedown)=\"onClearMouseDown($event)\"\n      (keydown.enter)=\"onKeydownClear($event)\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-primary\n          gds-icon-size-3xs\n          gds-mobile-icon-size-2xs\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i2.NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSearchBarComponent, isStandalone: true, selector: "gds-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnClose: { classPropertyName: "suppressClearOnClose", publicName: "suppressClearOnClose", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isOpenOverride: { classPropertyName: "isOpenOverride", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showAllItems: { classPropertyName: "showAllItems", publicName: "showAllItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDisabled: "isDisabledChange", focused: "focused", blurred: "blurred", dropdownStateChanged: "dropdownStateChanged", searched: "searched", changed: "changed", value: "valueChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()", "window:resize": "close()" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined" } }, queries: [{ propertyName: "groupItemTmpl", first: true, predicate: ["groupItemTmpl"], descendants: true, isSignal: true }, { propertyName: "dropdownItemTmpl", first: true, predicate: ["itemTmpl"], descendants: true, isSignal: true }, { propertyName: "emptyTmpl", first: true, predicate: ["emptyTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-select\n  #select\n  class=\"\n    gds-radius-sm\n    gds-search-bar_input\n  \"\n  [placeholder]=\"!value() ? placeholder() : ''\"\n  [isOpen]=\"isOpen()\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"value()\"\n  (ngModelChange)=\"setValue($event)\"\n  [items]=\"items()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [loading]=\"loading()\"\n  [markFirst]=\"false\"\n  [groupBy]=\"groupBy()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n  [ariaLabel]=\"ariaLabel()\"\n  (focus)=\"handleFocus($event)\"\n  (blur)=\"handleBlur($event)\"\n  (click)=\"handleClick($event)\"\n  (search)=\"handleSearch($event.term)\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n  (change)=\"handleChange($event)\"\n  (clear)=\"handleClear()\"\n>\n  <ng-template\n    ng-optgroup-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-option-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-notfound-tmp\n    let-searchTerm=\"searchTerm\"\n  >\n    <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n  </ng-template>\n  <ng-template ng-loadingtext-tmp>\n    <div class=\"\n      gds-display-flex\n      gds-justify-content-center\n      gds-padding-sm\n      gds-text-body\n      gds-text-primary\n    \">\n      <gds-spinner />\n    </div>\n  </ng-template>\n  <ng-template ng-loadingspinner-tmp />\n  <ng-template ng-clearbutton-tmp>\n    <button\n      gds-icon-button\n      class=\"\n        gds-background-none\n        gds-min-height-0\n        ng-clear-wrapper\n      \"\n      (click)=\"select.handleClearClick()\"\n      (mousedown)=\"onClearMouseDown($event)\"\n      (keydown.enter)=\"onKeydownClear($event)\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-primary\n          gds-icon-size-3xs\n          gds-mobile-icon-size-2xs\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text;--border: .5px solid var(--gds-palette-border-default);--border-radius: var(--gds-borderRadius-sm);--padding: 0px}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:var(--border);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;border-radius:var(--border-radius)!important;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor);border-radius:var(--border-radius)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center;padding:var(--padding)}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i2.NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, decorators: [{
             type: Component,
@@ -6917,14 +6938,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         NgSelectModule,
                         NgTemplateOutlet,
                         GdsSpinnerComponent,
-                        TranslatePipe,
                         GdsIconButtonComponent,
                         GdsIconComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.disabled]': 'isDisabled() ? "" : undefined',
                         '(keydown)': 'setMarkedItemIndex()',
                         '(window:resize)': 'close()'
-                    }, template: "<ng-select\n  #select\n  class=\"\n    gds-radius-sm\n    gds-search-bar_input\n  \"\n  [placeholder]=\"!value() ? placeholder() : ''\"\n  [isOpen]=\"isOpen()\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"value()\"\n  (ngModelChange)=\"setValue($event)\"\n  [items]=\"items()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [loading]=\"loading()\"\n  [markFirst]=\"false\"\n  [groupBy]=\"groupBy()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n  [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n  (focus)=\"handleFocus($event)\"\n  (blur)=\"handleBlur($event)\"\n  (click)=\"handleClick($event)\"\n  (search)=\"handleSearch($event.term)\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n  (change)=\"handleChange($event)\"\n  (clear)=\"handleClear()\"\n>\n  <ng-template\n    ng-optgroup-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-option-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-notfound-tmp\n    let-searchTerm=\"searchTerm\"\n  >\n    <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n  </ng-template>\n  <ng-template ng-loadingtext-tmp>\n    <div class=\"\n      gds-display-flex\n      gds-justify-content-center\n      gds-padding-sm\n      gds-text-body\n      gds-text-primary\n    \">\n      <gds-spinner />\n    </div>\n  </ng-template>\n  <ng-template ng-loadingspinner-tmp />\n  <ng-template ng-clearbutton-tmp>\n    <button\n      gds-icon-button\n      class=\"\n        gds-background-none\n        gds-min-height-0\n        ng-clear-wrapper\n      \"\n      (click)=\"select.handleClearClick()\"\n      (mousedown)=\"onClearMouseDown($event)\"\n      (keydown.enter)=\"onKeydownClear($event)\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-primary\n          gds-icon-size-3xs\n          gds-mobile-icon-size-2xs\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"] }]
+                    }, template: "<ng-select\n  #select\n  class=\"\n    gds-radius-sm\n    gds-search-bar_input\n  \"\n  [placeholder]=\"!value() ? placeholder() : ''\"\n  [isOpen]=\"isOpen()\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"value()\"\n  (ngModelChange)=\"setValue($event)\"\n  [items]=\"items()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [loading]=\"loading()\"\n  [markFirst]=\"false\"\n  [groupBy]=\"groupBy()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n  [ariaLabel]=\"ariaLabel()\"\n  (focus)=\"handleFocus($event)\"\n  (blur)=\"handleBlur($event)\"\n  (click)=\"handleClick($event)\"\n  (search)=\"handleSearch($event.term)\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n  (change)=\"handleChange($event)\"\n  (clear)=\"handleClear()\"\n>\n  <ng-template\n    ng-optgroup-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-option-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-notfound-tmp\n    let-searchTerm=\"searchTerm\"\n  >\n    <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n  </ng-template>\n  <ng-template ng-loadingtext-tmp>\n    <div class=\"\n      gds-display-flex\n      gds-justify-content-center\n      gds-padding-sm\n      gds-text-body\n      gds-text-primary\n    \">\n      <gds-spinner />\n    </div>\n  </ng-template>\n  <ng-template ng-loadingspinner-tmp />\n  <ng-template ng-clearbutton-tmp>\n    <button\n      gds-icon-button\n      class=\"\n        gds-background-none\n        gds-min-height-0\n        ng-clear-wrapper\n      \"\n      (click)=\"select.handleClearClick()\"\n      (mousedown)=\"onClearMouseDown($event)\"\n      (keydown.enter)=\"onKeydownClear($event)\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-primary\n          gds-icon-size-3xs\n          gds-mobile-icon-size-2xs\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text;--border: .5px solid var(--gds-palette-border-default);--border-radius: var(--gds-borderRadius-sm);--padding: 0px}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:var(--border);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;border-radius:var(--border-radius)!important;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor);border-radius:var(--border-radius)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center;padding:var(--padding)}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }, { type: i0.Output, args: ["isDisabledChange"] }], suppressClearOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnClose", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isOpenOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFunction", required: false }] }], showAllItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllItems", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], groupItemTmpl: [{ type: i0.ContentChild, args: ['groupItemTmpl', { isSignal: true }] }], dropdownItemTmpl: [{ type: i0.ContentChild, args: ['itemTmpl', { isSignal: true }] }], emptyTmpl: [{ type: i0.ContentChild, args: ['emptyTmpl', { isSignal: true }] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], dropdownStateChanged: [{ type: i0.Output, args: ["dropdownStateChanged"] }], searched: [{ type: i0.Output, args: ["searched"] }], changed: [{ type: i0.Output, args: ["changed"] }], select: [{ type: i0.ViewChild, args: ['select', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class GdsSidebarItemComponent {
@@ -6999,7 +7019,7 @@ class GdsSplitButtonComponent extends ButtonBaseDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSplitButtonComponent, isStandalone: true, selector: "gds-split-button", inputs: { trailingDropdown: { classPropertyName: "trailingDropdown", publicName: "trailingDropdown", isSignal: true, isRequired: true, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingAriaLabel: { classPropertyName: "leadingAriaLabel", publicName: "leadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.enter": "onEnter()", "keydown.arrowDown": "onArrowDown()" }, classAttribute: "gds-display-flex gds-radius-sm" }, viewQueries: [{ propertyName: "leadingBtn", first: true, predicate: ["leadingBtn"], descendants: true, isSignal: true }, { propertyName: "trailingBtn", first: true, predicate: ["trailingBtn"], descendants: true, isSignal: true }, { propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #leadingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-right-0\n    gds-radius-top-right-0\n    gds-split-button_button\n    gds-split-button_leading\n  \"\n  tabindex=\"-1\"\n  [size]=\"size()\"\n  [busy]=\"busy()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"leadingAriaLabel()\"\n  (click)=\"clicked.emit($event)\"\n>\n  <ng-content />\n</button>\n\n<button\n  #trailingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-left-0\n    gds-radius-top-left-0\n    gds-split-button_button\n    gds-split-button_trailing\n  \"\n  tabindex=\"-1\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"trailingAriaLabel()\"\n  [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n  [cdkMenuPosition]=\"menuPosition()\"\n  (cdkMenuClosed)=\"onMenuClosed()\"\n>\n  <gds-icon\n    [key]=\"trailingIcon()\"\n    class=\"gds-icon-size-2xs\"\n  />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSplitButtonComponent, isStandalone: true, selector: "gds-split-button", inputs: { trailingDropdown: { classPropertyName: "trailingDropdown", publicName: "trailingDropdown", isSignal: true, isRequired: true, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingAriaLabel: { classPropertyName: "leadingAriaLabel", publicName: "leadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.enter": "onEnter()", "keydown.arrowDown": "onArrowDown()" }, classAttribute: "gds-display-flex gds-radius-sm" }, viewQueries: [{ propertyName: "leadingBtn", first: true, predicate: ["leadingBtn"], descendants: true, isSignal: true }, { propertyName: "trailingBtn", first: true, predicate: ["trailingBtn"], descendants: true, isSignal: true }, { propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #leadingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-right-0\n    gds-radius-top-right-0\n    gds-split-button_button\n    gds-split-button_leading\n  \"\n  [tabIndex]=\"-1\"\n  [size]=\"size()\"\n  [busy]=\"busy()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"leadingAriaLabel()\"\n  (click)=\"clicked.emit($event)\"\n>\n  <ng-content />\n</button>\n\n<button\n  #trailingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-left-0\n    gds-radius-top-left-0\n    gds-split-button_button\n    gds-split-button_trailing\n  \"\n  [tabIndex]=\"-1\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"trailingAriaLabel()\"\n  [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n  [cdkMenuPosition]=\"menuPosition()\"\n  (cdkMenuClosed)=\"onMenuClosed()\"\n>\n  <gds-icon\n    [key]=\"trailingIcon()\"\n    class=\"gds-icon-size-2xs\"\n  />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSplitButtonComponent, decorators: [{
             type: Component,
@@ -7008,7 +7028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         tabindex: '0',
                         '(keydown.enter)': 'onEnter()',
                         '(keydown.arrowDown)': 'onArrowDown()'
-                    }, template: "<button\n  #leadingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-right-0\n    gds-radius-top-right-0\n    gds-split-button_button\n    gds-split-button_leading\n  \"\n  tabindex=\"-1\"\n  [size]=\"size()\"\n  [busy]=\"busy()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"leadingAriaLabel()\"\n  (click)=\"clicked.emit($event)\"\n>\n  <ng-content />\n</button>\n\n<button\n  #trailingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-left-0\n    gds-radius-top-left-0\n    gds-split-button_button\n    gds-split-button_trailing\n  \"\n  tabindex=\"-1\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"trailingAriaLabel()\"\n  [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n  [cdkMenuPosition]=\"menuPosition()\"\n  (cdkMenuClosed)=\"onMenuClosed()\"\n>\n  <gds-icon\n    [key]=\"trailingIcon()\"\n    class=\"gds-icon-size-2xs\"\n  />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"] }]
+                    }, template: "<button\n  #leadingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-right-0\n    gds-radius-top-right-0\n    gds-split-button_button\n    gds-split-button_leading\n  \"\n  [tabIndex]=\"-1\"\n  [size]=\"size()\"\n  [busy]=\"busy()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"leadingAriaLabel()\"\n  (click)=\"clicked.emit($event)\"\n>\n  <ng-content />\n</button>\n\n<button\n  #trailingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-left-0\n    gds-radius-top-left-0\n    gds-split-button_button\n    gds-split-button_trailing\n  \"\n  [tabIndex]=\"-1\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"trailingAriaLabel()\"\n  [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n  [cdkMenuPosition]=\"menuPosition()\"\n  (cdkMenuClosed)=\"onMenuClosed()\"\n>\n  <gds-icon\n    [key]=\"trailingIcon()\"\n    class=\"gds-icon-size-2xs\"\n  />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"] }]
         }], propDecorators: { trailingDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDropdown", required: true }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], leadingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingAriaLabel", required: false }] }], trailingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAriaLabel", required: false }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], leadingBtn: [{ type: i0.ViewChild, args: ['leadingBtn', { isSignal: true }] }], trailingBtn: [{ type: i0.ViewChild, args: ['trailingBtn', { isSignal: true }] }], menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }] } });
 
 class GdsTimelineItemComponent {
@@ -7026,11 +7046,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"\n  gds-display-flex\n  gds-flex-column\n  timeline\n\">\n  <div class=\"\n    end\n    gds-display-flex\n    gds-height-2xs\n    gds-justify-content-center\n  \">\n    @if (!end()) {\n      <span class=\"gds-timeline_edge\"></span>\n    }\n  </div>\n  <ng-content select=\"[tag]\" />\n  <div class=\"\n    gds-display-flex\n    gds-flex-grow-1\n    gds-justify-content-center\n    start\n  \">\n    @if (!start() || connectorType() === 'content') {\n      <span class=\"\n        gds-timeline_edge\n        start\n      \"></span>\n    }\n  </div>\n</div>\n<div class=\"\n  content\n  gds-flex-grow-1\n  gds-padding-block-2xs\n\">\n  <ng-content />\n</div>\n", styles: ["@layer design-system{:host[connectorType=content] .gds-timeline_edge{margin-block:var(--gds-spacing-2xs)}:host:hover{background-color:var(--gds-palette-background-hover)}:host .gds-timeline_edge{width:1px;background-color:var(--gds-palette-border-default)}:host .content{overflow:hidden}:host .timeline{width:40px}}\n"] }]
         }], propDecorators: { end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], connectorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectorType", required: false }] }] } });
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-class GdsToastComponent extends ToastNoAnimation {
-    get status() {
-        const type = this.toastPackage.toastType.split('-').pop();
-        switch (type) {
+class GdsToastContainerComponent {
+    toaster = inject(ToastrService);
+    hostClass = computed(() => `toast-container ${this.toaster.positionClass}`, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsToastContainerComponent, isStandalone: true, selector: "gds-toast-container", host: { properties: { "class": "hostClass()" } }, ngImport: i0, template: `
+    @for (toast of toaster.toasts(); track toast.toastId) {
+      <gds-toast [toast]="toast" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: GdsToastComponent, selector: "gds-toast", inputs: ["toast"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gds-toast-container',
+                    template: `
+    @for (toast of toaster.toasts(); track toast.toastId) {
+      <gds-toast [toast]="toast" />
+    }
+  `,
+                    host: {
+                        '[class]': 'hostClass()'
+                    },
+                    imports: [GdsToastComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+const GDS_TOASTER_CONFIG = new InjectionToken('GDS_TOASTER_CONFIG');
+const GDS_TOAST_CONTAINER = new InjectionToken('GDS_TOAST_CONTAINER');
+const DEFAULT_CONFIG = {
+    timeOut: 5000,
+    extendedTimeOut: 1000,
+    positionClass: 'toast-top-left',
+    preventDuplicates: true,
+    tapToDismiss: false,
+    disableTimeOut: false,
+    payload: {}
+};
+const provideToaster = (customOptions = {}) => makeEnvironmentProviders([
+    {
+        provide: GDS_TOASTER_CONFIG,
+        useValue: { ...DEFAULT_CONFIG, ...customOptions }
+    },
+    { provide: GDS_TOAST_CONTAINER, useValue: GdsToastContainerComponent }
+]);
+
+class ToastrService {
+    #overlay = inject(Overlay);
+    #container = inject(GDS_TOAST_CONTAINER);
+    #globalConfig = inject(GDS_TOASTER_CONFIG);
+    #toasts = signal([], ...(ngDevMode ? [{ debugName: "#toasts" }] : /* istanbul ignore next */ []));
+    #actionSubjects = new Map();
+    #timeouts = new Map();
+    #overlayRef = null;
+    #nextId = 0;
+    /** Visible toasts for the overlay stack container. */
+    toasts = this.#toasts.asReadonly();
+    get positionClass() {
+        return this.#globalConfig.positionClass;
+    }
+    success = (message, title, override) => this.#show('success', message, title, override);
+    error = (message, title, override) => this.#show('error', message, title, override);
+    info = (message, title, override) => this.#show('info', message, title, override);
+    warning = (message, title, override) => this.#show('warning', message, title, override);
+    show = (message, title, override) => this.#show('show', message, title, override);
+    clear = (toastId) => {
+        if (!toastId) {
+            [...this.#toasts()].forEach((toast) => this.remove(toast.toastId));
+            return;
+        }
+        this.remove(toastId);
+    };
+    remove = (toastId) => {
+        const timeout = this.#timeouts.get(toastId);
+        if (timeout != null) {
+            clearTimeout(timeout);
+            this.#timeouts.delete(toastId);
+        }
+        const existed = this.#toasts().some((toast) => toast.toastId === toastId);
+        if (!existed) {
+            return;
+        }
+        this.#toasts.update((toasts) => toasts.filter((toast) => toast.toastId !== toastId));
+        const actionSub = this.#actionSubjects.get(toastId);
+        this.#actionSubjects.delete(toastId);
+        // Defer complete: callers often clear() inside onAction.map(). Completing the Subject
+        // synchronously during that emission stops the value from reaching downstream operators.
+        queueMicrotask(() => actionSub?.complete());
+        if (this.#toasts().length === 0) {
+            this.#overlayRef?.dispose();
+            this.#overlayRef = null;
+        }
+    };
+    triggerAction = (toastId, event) => this.#actionSubjects.get(toastId)?.next(event);
+    /** Clears the auto-dismiss timer (e.g. while the pointer is over the toast). */
+    pauseTimeout = (toastId) => {
+        const timeout = this.#timeouts.get(toastId);
+        if (timeout == null) {
+            return;
+        }
+        clearTimeout(timeout);
+        this.#timeouts.delete(toastId);
+    };
+    /** Starts the post-hover dismiss timer using extendedTimeOut. */
+    resumeTimeout = (toastId) => {
+        const instance = this.#toasts().find((toast) => toast.toastId === toastId);
+        if (!instance || instance.options.disableTimeOut) {
+            return;
+        }
+        this.pauseTimeout(toastId);
+        const extendedTimeOutMs = instance.options.extendedTimeOut ?? this.#globalConfig.extendedTimeOut;
+        // 0 keeps the toast open after hover (ngx-toastr behavior).
+        if (!extendedTimeOutMs) {
+            return;
+        }
+        const timeout = setTimeout(() => this.remove(toastId), extendedTimeOutMs);
+        this.#timeouts.set(toastId, timeout);
+    };
+    #show = (toastType, message = '', title = '', override = {}) => {
+        const options = {
+            ...this.#globalConfig,
+            ...override,
+            payload: {
+                ...this.#globalConfig.payload,
+                ...override.payload
+            }
+        };
+        const existing = this.#toasts().find((toast) => toast.toastType === toastType && toast.message === message && toast.title === title);
+        if (this.#globalConfig.preventDuplicates !== false && existing) {
+            return this.#toActiveToast(existing);
+        }
+        const toastId = ++this.#nextId;
+        const actionSub = new Subject();
+        this.#actionSubjects.set(toastId, actionSub);
+        const instance = {
+            toastId,
+            toastType,
+            title,
+            message,
+            options
+        };
+        this.#toasts.update((toasts) => [...toasts, instance]);
+        this.#ensureOverlayOpen();
+        this.#scheduleTimeout(instance);
+        return {
+            toastId,
+            message,
+            title,
+            toastType,
+            onAction: actionSub.asObservable()
+        };
+    };
+    #toActiveToast = (instance) => ({
+        toastId: instance.toastId,
+        message: instance.message,
+        title: instance.title,
+        toastType: instance.toastType,
+        onAction: this.#actionSubjects.get(instance.toastId)?.asObservable() ?? EMPTY
+    });
+    #scheduleTimeout = (instance) => {
+        if (instance.options.disableTimeOut) {
+            return;
+        }
+        const timeOutMs = instance.options.timeOut;
+        const timeout = setTimeout(() => this.remove(instance.toastId), timeOutMs);
+        this.#timeouts.set(instance.toastId, timeout);
+    };
+    #ensureOverlayOpen = () => {
+        if (this.#overlayRef) {
+            return;
+        }
+        this.#overlayRef = this.#overlay.create({
+            hasBackdrop: false,
+            panelClass: [
+                'gds-toast-overlay-pane',
+                'gds-position-fixed',
+                'gds-inset-0',
+                'gds-pointer-events-none',
+                'gds-margin-0',
+                'gds-max-width-unset'
+            ],
+            positionStrategy: this.#overlay.position().global().top('0').left('0'),
+            scrollStrategy: this.#overlay.scrollStrategies.noop(),
+            width: '100%',
+            height: '100%'
+        });
+        this.#overlayRef.attach(new ComponentPortal(this.#container));
+        this.#overlayRef.detachments().subscribe(() => {
+            this.#overlayRef = null;
+            if (this.#toasts().length > 0) {
+                this.clear();
+            }
+        });
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastrService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class GdsToastComponent {
+    #toaster = inject(ToastrService);
+    toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
+    status = computed(() => {
+        switch (this.toast().toastType) {
             case 'error':
                 return 'danger';
             case 'success':
@@ -7040,45 +7262,63 @@ class GdsToastComponent extends ToastNoAnimation {
             default:
                 return 'default';
         }
-    }
-    options;
-    // eslint-disable-next-line @angular-eslint/prefer-inject
-    constructor(toastrSvc, toastPackage, appRef) {
-        super(toastrSvc, toastPackage, appRef);
-        this.options = toastPackage.config;
-    }
-    get actionLabel() {
-        return this.options.payload?.actionLabel;
-    }
-    get dismissAriaLabel() {
-        return this.options.payload?.dismissAriaLabel ?? 'Gds.Toast.Dismiss.AriaLabel';
-    }
-    get actionAriaLabel() {
-        return this.options.payload?.actionAriaLabel;
-    }
+    }, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    title = computed(() => this.toast().title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    message = computed(() => this.toast().message, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    actionLabel = computed(() => this.toast().options.payload?.actionLabel, ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    dismissAriaLabel = computed(() => this.toast().options.payload?.dismissAriaLabel ?? 'Gds.Toast.Dismiss.AriaLabel', ...(ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []));
+    actionAriaLabel = computed(() => this.toast().options.payload?.actionAriaLabel, ...(ngDevMode ? [{ debugName: "actionAriaLabel" }] : /* istanbul ignore next */ []));
     action = (event) => {
-        event.stopPropagation();
-        this.toastPackage.triggerAction(event);
-        return false;
+        event?.stopPropagation();
+        this.#toaster.triggerAction(this.toast().toastId, event);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, deps: [{ token: i1$6.ToastrService }, { token: i1$6.ToastPackage }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsToastComponent, isStandalone: true, selector: "gds-toast", host: { attributes: { "animate.enter": "gds-scale-in gds-fade-in", "animate.leave": "gds-scale-out gds-fade-out" }, properties: { "attr.type": "status", "class.gds-responsive-sm-width-100-parent": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"\n    gds-border\n    gds-display-flex\n    gds-gap-sm\n    gds-padding-block-2xs\n    gds-padding-inline-sm\n    gds-radius-sm\n    gds-responsive-sm-padding-3xs\n    gds-toaster--container\n  \"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-height-md\n    gds-justify-content-center\n  \">\n    <gds-icon\n      key=\"filled-info\"\n      class=\"\n        gds-icon-size-xs\n        gds-toaster--icon\n      \"\n    />\n  </div>\n  <div class=\"\n    gds-align-items-center\n    gds-column-gap-sm\n    gds-display-flex\n    gds-flex-1\n    gds-flex-wrap\n    gds-row-gap-2xs\n  \">\n    @if (title) {\n      <div class=\"\n        gds-height-fit-content\n        gds-text-body-strong\n        gds-text-primary\n        gds-width-fit-content\n      \">\n        {{ title | translate }}\n      </div>\n    }\n    @if (message) {\n      <div\n        class=\"\n          gds-height-fit-content\n          gds-text-body\n          gds-text-primary\n          gds-width-fit-content\n        \"\n        [innerHtml]=\"message | translate\"\n      ></div>\n    }\n    @if (actionLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-border-none\n          gds-toaster--action-btn\n        \"\n        [attr.aria-label]=\"actionAriaLabel | translate\"\n        (clicked)=\"action($event)\"\n      >\n        {{ actionLabel | translate }}\n      </button>\n    }\n  </div>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-height-md\n    gds-justify-content-center\n  \">\n    <button\n      gds-icon-button\n      class=\"gds-background-none\"\n      variant=\"primary\"\n      [attr.aria-label]=\"dismissAriaLabel | translate\"\n      (clicked)=\"remove()\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  </div>\n</div>\n", styles: ["@layer design-system{:host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    remove = () => {
+        this.#toaster.remove(this.toast().toastId);
+    };
+    onHostClick(event) {
+        if (!this.toast().options.tapToDismiss) {
+            return;
+        }
+        const target = event.target;
+        if (target?.closest('button')) {
+            return;
+        }
+        this.remove();
+    }
+    onMouseEnter = () => {
+        if (this.toast().options.disableTimeOut) {
+            return;
+        }
+        this.#toaster.pauseTimeout(this.toast().toastId);
+    };
+    onMouseLeave = () => {
+        if (this.toast().options.disableTimeOut) {
+            return;
+        }
+        this.#toaster.resumeTimeout(this.toast().toastId);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsToastComponent, isStandalone: true, selector: "gds-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "animate.enter": "gds-scale-in gds-fade-in", "animate.leave": "gds-scale-out gds-fade-out" }, listeners: { "click": "onHostClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "attr.type": "status()" }, classAttribute: "gds-responsive-sm-width-100-parent" }, ngImport: i0, template: "<div\n  class=\"\n    gds-border\n    gds-display-flex\n    gds-gap-sm\n    gds-padding-block-2xs\n    gds-padding-inline-sm\n    gds-radius-sm\n    gds-responsive-sm-padding-3xs\n    gds-toaster--container\n  \"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-height-md\n    gds-justify-content-center\n  \">\n    <gds-icon\n      key=\"filled-info\"\n      class=\"\n        gds-icon-size-xs\n        gds-toaster--icon\n      \"\n    />\n  </div>\n  <div class=\"\n    gds-align-items-center\n    gds-column-gap-sm\n    gds-display-flex\n    gds-flex-1\n    gds-flex-wrap\n    gds-row-gap-2xs\n  \">\n    @if (title()) {\n      <div class=\"\n        gds-height-fit-content\n        gds-text-body-strong\n        gds-text-primary\n        gds-width-fit-content\n      \">\n        {{ title() }}\n      </div>\n    }\n    @if (message()) {\n      <div\n        class=\"\n          gds-height-fit-content\n          gds-text-body\n          gds-text-primary\n          gds-width-fit-content\n        \"\n        [innerHtml]=\"message()\"\n      ></div>\n    }\n    @if (actionLabel()) {\n      <button\n        gds-button\n        class=\"\n          gds-border-none\n          gds-toaster--action-btn\n        \"\n        [attr.aria-label]=\"actionAriaLabel()\"\n        (clicked)=\"action($event)\"\n      >\n        {{ actionLabel() }}\n      </button>\n    }\n  </div>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-height-md\n    gds-justify-content-center\n  \">\n    <button\n      gds-icon-button\n      class=\"gds-background-none\"\n      variant=\"primary\"\n      [attr.aria-label]=\"dismissAriaLabel()\"\n      (clicked)=\"remove()\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  </div>\n</div>\n", styles: ["@layer design-system{:host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gds-toast', imports: [GdsIconComponent, GdsIconButtonComponent, GdsButtonComponent, TranslatePipe], host: {
-                        '[attr.type]': 'status',
-                        '[class.gds-responsive-sm-width-100-parent]': 'true',
+                        '[attr.type]': 'status()',
+                        class: 'gds-responsive-sm-width-100-parent',
                         'animate.enter': 'gds-scale-in gds-fade-in',
-                        'animate.leave': 'gds-scale-out gds-fade-out'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"\n    gds-border\n    gds-display-flex\n    gds-gap-sm\n    gds-padding-block-2xs\n    gds-padding-inline-sm\n    gds-radius-sm\n    gds-responsive-sm-padding-3xs\n    gds-toaster--container\n  \"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-height-md\n    gds-justify-content-center\n  \">\n    <gds-icon\n      key=\"filled-info\"\n      class=\"\n        gds-icon-size-xs\n        gds-toaster--icon\n      \"\n    />\n  </div>\n  <div class=\"\n    gds-align-items-center\n    gds-column-gap-sm\n    gds-display-flex\n    gds-flex-1\n    gds-flex-wrap\n    gds-row-gap-2xs\n  \">\n    @if (title) {\n      <div class=\"\n        gds-height-fit-content\n        gds-text-body-strong\n        gds-text-primary\n        gds-width-fit-content\n      \">\n        {{ title | translate }}\n      </div>\n    }\n    @if (message) {\n      <div\n        class=\"\n          gds-height-fit-content\n          gds-text-body\n          gds-text-primary\n          gds-width-fit-content\n        \"\n        [innerHtml]=\"message | translate\"\n      ></div>\n    }\n    @if (actionLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-border-none\n          gds-toaster--action-btn\n        \"\n        [attr.aria-label]=\"actionAriaLabel | translate\"\n        (clicked)=\"action($event)\"\n      >\n        {{ actionLabel | translate }}\n      </button>\n    }\n  </div>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-height-md\n    gds-justify-content-center\n  \">\n    <button\n      gds-icon-button\n      class=\"gds-background-none\"\n      variant=\"primary\"\n      [attr.aria-label]=\"dismissAriaLabel | translate\"\n      (clicked)=\"remove()\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  </div>\n</div>\n", styles: ["@layer design-system{:host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.ToastrService }, { type: i1$6.ToastPackage }, { type: i0.ApplicationRef }] });
+                        'animate.leave': 'gds-scale-out gds-fade-out',
+                        '(click)': 'onHostClick($event)',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"\n    gds-border\n    gds-display-flex\n    gds-gap-sm\n    gds-padding-block-2xs\n    gds-padding-inline-sm\n    gds-radius-sm\n    gds-responsive-sm-padding-3xs\n    gds-toaster--container\n  \"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-height-md\n    gds-justify-content-center\n  \">\n    <gds-icon\n      key=\"filled-info\"\n      class=\"\n        gds-icon-size-xs\n        gds-toaster--icon\n      \"\n    />\n  </div>\n  <div class=\"\n    gds-align-items-center\n    gds-column-gap-sm\n    gds-display-flex\n    gds-flex-1\n    gds-flex-wrap\n    gds-row-gap-2xs\n  \">\n    @if (title()) {\n      <div class=\"\n        gds-height-fit-content\n        gds-text-body-strong\n        gds-text-primary\n        gds-width-fit-content\n      \">\n        {{ title() }}\n      </div>\n    }\n    @if (message()) {\n      <div\n        class=\"\n          gds-height-fit-content\n          gds-text-body\n          gds-text-primary\n          gds-width-fit-content\n        \"\n        [innerHtml]=\"message()\"\n      ></div>\n    }\n    @if (actionLabel()) {\n      <button\n        gds-button\n        class=\"\n          gds-border-none\n          gds-toaster--action-btn\n        \"\n        [attr.aria-label]=\"actionAriaLabel()\"\n        (clicked)=\"action($event)\"\n      >\n        {{ actionLabel() }}\n      </button>\n    }\n  </div>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-height-md\n    gds-justify-content-center\n  \">\n    <button\n      gds-icon-button\n      class=\"gds-background-none\"\n      variant=\"primary\"\n      [attr.aria-label]=\"dismissAriaLabel()\"\n      (clicked)=\"remove()\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  </div>\n</div>\n", styles: ["@layer design-system{:host{pointer-events:auto;--background-color: var(--gds-pattern-toast-default-backgroundColor-rest);--icon-color: var(--gds-pattern-toast-default-iconColor-rest);--action-btn-backgroundColor: var(--gds-pattern-toast-default-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-default-btnColor-hover);--action-btn-color: var(--gds-palette-text-default-contrast)}:host[type=success]{--background-color: var(--gds-palette-helper-success-default);--icon-color: var(--gds-palette-helper-success-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-success-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-success-btnColor-hover)}:host[type=warning]{--background-color: var(--gds-palette-helper-warning-default);--icon-color: var(--gds-palette-helper-warning-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-warning-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-warning-btnColor-hover)}:host[type=danger]{--background-color: var(--gds-palette-helper-error-default);--icon-color: var(--gds-palette-helper-error-inverse);--action-btn-backgroundColor: var(--gds-pattern-toast-error-btnColor-rest);--action-btn-backgroundColor-hover: var(--gds-pattern-toast-error-btnColor-hover)}:host .gds-toaster--container{background-color:var(--background-color)}:host .gds-toaster--icon{color:var(--icon-color)}:host .gds-toaster--action-btn{--gds-button-backgroundColor: var(--action-btn-backgroundColor);--gds-button-backgroundColor-hover: var(--action-btn-backgroundColor-hover);--gds-button-color: var(--action-btn-color)}}\n"] }]
+        }], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }] } });
 
 class GdsListboxBaseDirective {
     tabindex = signal(0, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
     items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     _keyManager;
     _activeId = signal(null, ...(ngDevMode ? [{ debugName: "_activeId" }] : /* istanbul ignore next */ []));
+    #pointerInteraction = false;
     // Maintain a single key manager instance in case of dynamic item changes.
     #setupKeyManager = effect(() => {
         const items = this.items();
@@ -7105,7 +7345,20 @@ class GdsListboxBaseDirective {
     ngOnDestroy() {
         this._keyManager?.destroy();
     }
+    onPointerDown() {
+        this.#pointerInteraction = true;
+    }
+    onPointerUp() {
+        // Reset after focus handlers from the same gesture have run.
+        queueMicrotask(() => {
+            this.#pointerInteraction = false;
+        });
+    }
     onFocus() {
+        if (this.#pointerInteraction) {
+            // When event comes from pointer interaction, don't focus the first item
+            return;
+        }
         this.tabindex.set(-1);
         this._keyManager?.setFirstItemActive();
     }
@@ -7150,7 +7403,7 @@ class GdsListboxDirective extends GdsListboxBaseDirective {
         super.onKeydown(event);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsListboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsListboxDirective, isStandalone: true, selector: "[gdsListbox]", inputs: { onNavigatePastLastOption: { classPropertyName: "onNavigatePastLastOption", publicName: "onNavigatePastLastOption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsListboxDirective, isStandalone: true, selector: "[gdsListbox]", inputs: { onNavigatePastLastOption: { classPropertyName: "onNavigatePastLastOption", publicName: "onNavigatePastLastOption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsListboxDirective, decorators: [{
             type: Directive,
@@ -7160,7 +7413,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         role: 'listbox',
                         '[attr.tabindex]': 'tabindex()',
                         '(keydown)': 'onKeydown($event)',
-                        '(focus)': 'onFocus()'
+                        '(focus)': 'onFocus()',
+                        '(pointerdown)': 'onPointerDown()',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerUp()'
                     }
                 }]
         }], propDecorators: { onNavigatePastLastOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "onNavigatePastLastOption", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GdsListboxOption), { ...{ descendants: true }, isSignal: true }] }] } });
@@ -7386,7 +7642,7 @@ class GdsVirtualScrollListboxDirective extends GdsListboxBaseDirective {
         return Number.isFinite(index) ? index : null;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsVirtualScrollListboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsVirtualScrollListboxDirective, isStandalone: true, selector: "[gdsListboxVirtualScroll]", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, optionIndexAttribute: { classPropertyName: "optionIndexAttribute", publicName: "optionIndexAttribute", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentFocusedIndex: "currentFocusedIndex" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "focusin": "onFocusIn($event)" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsVirtualScrollListboxDirective, isStandalone: true, selector: "[gdsListboxVirtualScroll]", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, optionIndexAttribute: { classPropertyName: "optionIndexAttribute", publicName: "optionIndexAttribute", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentFocusedIndex: "currentFocusedIndex" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "focusin": "onFocusIn($event)", "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsVirtualScrollListboxDirective, decorators: [{
             type: Directive,
@@ -7397,7 +7653,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.tabindex]': 'tabindex()',
                         '(keydown)': 'onKeydown($event)',
                         '(focus)': 'onFocus()',
-                        '(focusin)': 'onFocusIn($event)'
+                        '(focusin)': 'onFocusIn($event)',
+                        '(pointerdown)': 'onPointerDown()',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerUp()'
                     }
                 }]
         }], propDecorators: { options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GdsListboxOption), { ...{ descendants: true }, isSignal: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], optionIndexAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndexAttribute", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], currentFocusedIndex: [{ type: i0.Output, args: ["currentFocusedIndex"] }] } });
@@ -7508,11 +7767,11 @@ class GdsUserPromptComponent extends GdsDialogBaseDirective {
         return this.config.data?.secondaryTextVariant ?? 'default';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsUserPromptComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' | translate }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' | translate }}\n    </button>\n    @if (config.data?.secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ config.data?.secondaryLabel ?? '' | translate }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span>{{ desc | translate }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsUserPromptComponent, isStandalone: true, selector: "gds-user-prompt-dialog", viewQueries: [{ propertyName: "defaultDescTmpl", first: true, predicate: ["defaultDescriptionTmpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span>{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"], dependencies: [{ kind: "component", type: GdsDialogComponent, selector: "dialog[gds-dialog]", inputs: ["type", "background", "headerLabelAlignment", "showFooterBorder", "closeOnBackdropClick", "suppressDismissBtn"], outputs: ["closed", "canceled"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsUserPromptComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, TranslatePipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' | translate }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' | translate }}\n    </button>\n    @if (config.data?.secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ config.data?.secondaryLabel ?? '' | translate }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span>{{ desc | translate }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"] }]
+            args: [{ selector: 'gds-user-prompt-dialog', imports: [GdsDialogComponent, GdsButtonComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog\n  gds-dialog\n  class=\"\n    dialog\n    gds-height-fit-content\n    gds-width-fit-content\n  \"\n  [closeOnBackdropClick]=\"config.data?.closeOnBackdropClick\"\n  (canceled)=\"close()\"\n  (closed)=\"close()\"\n  [suppressDismissBtn]=\"config.data?.suppressDismissBtn\"\n>\n  <span header-label>{{ config.data?.title ?? '' }}</span>\n  <ng-container *ngTemplateOutlet=\"descTemplate\" />\n  <div\n    footer-actions-primary\n    class=\"\n      gds-display-flex\n      gds-gap-2xs\n      gds-mobile-flex-row-reverse\n      gds-mobile-padding-block-start-2xs\n    \"\n  >\n    <button\n      gds-button\n      class=\"\n        gds-mobile-padding-inline-2xs\n        gds-mobile-text-primary-primary\n      \"\n      [variant]=\"isMobile() ? 'invisible' : 'primary'\"\n      (clicked)=\"confirm()\"\n    >\n      {{ config.data?.primaryLabel ?? '' }}\n    </button>\n    @if (config.data?.secondaryLabel; as secondaryLabel) {\n      <button\n        gds-button\n        class=\"\n          gds-mobile-padding-inline-2xs\n          secondary-button\n        \"\n        [attr.secondary-text-variant]=\"secondaryTextVariant\"\n        footer-actions-primary\n        [variant]=\"isMobile() ? 'invisible' : 'default'\"\n        (clicked)=\"close()\"\n      >\n        {{ secondaryLabel }}\n      </button>\n    }\n  </div>\n</dialog>\n\n<ng-template #defaultDescriptionTmpl>\n  <span>{{ desc }}</span>\n</ng-template>\n", styles: ["@layer design-system{:host[isActive=true]{outline:2px solid}:is(body[isMobile=true]) :host .dialog{--gds-dialog-base-gap: var(--gds-spacing-2xs)}@media(max-width:484px){:host .dialog{max-width:calc(100% - 2 * var(--gds-spacing-sm))}}:host .secondary-button{--color: var(--gds-palette-text-primary-primary)}:host .secondary-button[secondary-text-variant=error]{--color: var(--gds-palette-helper-error-inverse)}:host .secondary-button{color:var(--color)}}\n"] }]
         }], propDecorators: { defaultDescTmpl: [{ type: i0.ViewChild, args: ['defaultDescriptionTmpl', { isSignal: true }] }] } });
 
 class GdsUserPromptService {
@@ -7524,8 +7783,8 @@ class GdsUserPromptService {
         return this.#open({
             title,
             description,
-            primaryLabel: 'Core.Button.Confirm',
-            secondaryLabel: 'Core.Button.Cancel',
+            primaryLabel: 'Confirm',
+            secondaryLabel: 'Cancel',
             secondaryTextVariant: 'default',
             closeOnBackdropClick: true,
             suppressDismissBtn: false,
@@ -7536,7 +7795,7 @@ class GdsUserPromptService {
         return this.#open({
             title,
             description,
-            primaryLabel: 'Core.Button.Ok',
+            primaryLabel: 'Ok',
             secondaryLabel: '',
             secondaryTextVariant: 'default',
             closeOnBackdropClick: true,
@@ -7567,7 +7826,7 @@ class GdsHistoryComponent {
     menuTmpl = contentChild('menuTmpl', ...(ngDevMode ? [{ debugName: "menuTmpl" }] : /* istanbul ignore next */ []));
     menuPosition = CDK_MENU_CONNECTED_POSITIONS;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsHistoryComponent, isStandalone: true, selector: "gds-history", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null }, suppressCloseBtn: { classPropertyName: "suppressCloseBtn", publicName: "suppressCloseBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemHovered: "itemHovered" }, queries: [{ propertyName: "contentTmpl", first: true, predicate: ["contentTmpl"], descendants: true, isSignal: true }, { propertyName: "menuTmpl", first: true, predicate: ["menuTmpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-padding-sm\n\">\n  <span class=\"\n    gds-flex-grow-1\n    gds-text-primary-primary\n    gds-text-subtitle\n  \">{{ title() }}</span>\n  @if (!suppressCloseBtn()) {\n    <button\n      gds-icon-button\n      variant=\"primary\"\n      class=\"gds-background-none\"\n      (clicked)=\"closed.emit()\"\n      [attr.aria-label]=\"'Dismiss'\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  }\n</div>\n@if (loading()) {\n  <gds-spinner class=\"\n    gds-margin-block-auto\n    gds-margin-inline-auto\n  \" />\n} @else {\n  <div class=\"gds-scrollable-vertically\">\n    <ol\n      role=\"list\"\n      class=\"gds-list-unstyled\"\n    >\n      @for (item of reversed(); track $index) {\n        <li\n          gds-timeline-item\n          [connectorType]=\"connectorType()\"\n          [start]=\"$last\"\n          [end]=\"$first\"\n          (mouseenter)=\"itemHovered.emit(item)\"\n          (mouseleave)=\"itemHovered.emit(null)\"\n        >\n          <div\n            tag\n            class=\"\n              gds-display-flex\n              gds-justify-content-center\n            \"\n          >\n            @if (item.badgeType === 'icon') {\n              <gds-icon\n                class=\"\n                  badge-icon\n                  gds-background-base\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                  gds-padding-3xs\n                  gds-radius-2xl\n                \"\n                [key]=\"item.badgeData | gdsSvgicon\"\n              />\n            } @else {\n              <span\n                gds-badge\n                [ngClass]=\"{\n                  'gds-background-dark-strong gds-text-default-contrast': $first,\n                  'gds-background-white': !$first\n                }\"\n                >{{ item.badgeData }}</span\n              >\n            }\n          </div>\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-2xs\n          \">\n            <div class=\"\n              gds-align-items-start\n              gds-display-flex\n              gds-gap-3xs\n              gds-margin-inline-end-3xs\n            \">\n              <div class=\"\n                gds-display-flex\n                gds-flex-column\n                gds-flex-grow-1\n                gds-gap-2xs\n                item-content\n              \">\n                <gds-tooltip\n                  class=\"\n                    gds-flex-grow-1\n                    gds-text-body\n                    gds-text-primary\n                  \"\n                  [tooltip]=\"item.title\"\n                  onlyTextOverflow\n                >\n                  {{ item.title }}\n                </gds-tooltip>\n                @for (label of item.labels; track $index) {\n                  <gds-tooltip\n                    class=\"\n                      gds-text-caption\n                      gds-text-secondary\n                    \"\n                    onlyTextOverflow\n                    [tooltip]=\"label\"\n                  >\n                    {{ label }}\n                  </gds-tooltip>\n                }\n                <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n              </div>\n              @if (menuTmpl() && !$first) {\n                <button\n                  gds-icon-button\n                  variant=\"primary\"\n                  class=\"\n                    gds-background-none\n                    gds-min-height-0\n                  \"\n                  [attr.ariaLabel]=\"'Menu'\"\n                  [cdkMenuTriggerFor]=\"menu\"\n                  [cdkMenuPosition]=\"menuPosition\"\n                  #trigger=\"cdkMenuTriggerFor\"\n                >\n                  <gds-icon\n                    key=\"filled-menu-more\"\n                    class=\"gds-icon-size-2xs\"\n                  />\n                </button>\n                <ng-template #menu>\n                  <gds-dropdown (click)=\"trigger.close()\">\n                    <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n                  </gds-dropdown>\n                </ng-template>\n              }\n            </div>\n          </div>\n        </li>\n      }\n    </ol>\n  </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTimelineItemComponent, selector: "li[gds-timeline-item]", inputs: ["end", "start", "connectorType"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsHistoryComponent, isStandalone: true, selector: "gds-history", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, connectorType: { classPropertyName: "connectorType", publicName: "connectorType", isSignal: true, isRequired: false, transformFunction: null }, suppressCloseBtn: { classPropertyName: "suppressCloseBtn", publicName: "suppressCloseBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", itemHovered: "itemHovered" }, queries: [{ propertyName: "contentTmpl", first: true, predicate: ["contentTmpl"], descendants: true, isSignal: true }, { propertyName: "menuTmpl", first: true, predicate: ["menuTmpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-padding-sm\n\">\n  <span class=\"\n    gds-flex-grow-1\n    gds-text-primary-primary\n    gds-text-subtitle\n  \">{{ title() }}</span>\n  @if (!suppressCloseBtn()) {\n    <button\n      gds-icon-button\n      variant=\"primary\"\n      class=\"gds-background-none\"\n      (clicked)=\"closed.emit()\"\n      [attr.aria-label]=\"'Dismiss'\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  }\n</div>\n@if (loading()) {\n  <gds-spinner class=\"\n    gds-margin-block-auto\n    gds-margin-inline-auto\n  \" />\n} @else {\n  <div class=\"gds-scrollable-vertically\">\n    <ol\n      role=\"list\"\n      class=\"gds-list-unstyled\"\n    >\n      @for (item of reversed(); track $index) {\n        <li\n          gds-timeline-item\n          [connectorType]=\"connectorType()\"\n          [start]=\"$last\"\n          [end]=\"$first\"\n          (mouseenter)=\"itemHovered.emit(item)\"\n          (mouseleave)=\"itemHovered.emit(null)\"\n        >\n          <div\n            tag\n            class=\"\n              gds-display-flex\n              gds-justify-content-center\n            \"\n          >\n            @if (item.badgeType === 'icon') {\n              <gds-icon\n                class=\"\n                  badge-icon\n                  gds-background-base\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                  gds-padding-3xs\n                  gds-radius-2xl\n                \"\n                [key]=\"item.badgeData | gdsSvgicon\"\n              />\n            } @else {\n              <span\n                gds-badge\n                [ngClass]=\"{\n                  'gds-background-dark-strong gds-text-default-contrast': $first,\n                  'gds-background-white': !$first\n                }\"\n                >{{ item.badgeData }}</span\n              >\n            }\n          </div>\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-2xs\n          \">\n            <div class=\"\n              gds-align-items-start\n              gds-display-flex\n              gds-gap-3xs\n              gds-margin-inline-end-3xs\n            \">\n              <div class=\"\n                gds-display-flex\n                gds-flex-column\n                gds-flex-grow-1\n                gds-gap-2xs\n                item-content\n              \">\n                <gds-tooltip\n                  class=\"\n                    gds-flex-grow-1\n                    gds-text-body\n                    gds-text-primary\n                  \"\n                  [tooltip]=\"item.title\"\n                  onlyTextOverflow\n                >\n                  {{ item.title }}\n                </gds-tooltip>\n                @for (label of item.labels; track $index) {\n                  <gds-tooltip\n                    class=\"\n                      gds-text-caption\n                      gds-text-secondary\n                    \"\n                    onlyTextOverflow\n                    [tooltip]=\"label\"\n                  >\n                    {{ label }}\n                  </gds-tooltip>\n                }\n                <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n              </div>\n              @if (menuTmpl() && !$first) {\n                <button\n                  gds-icon-button\n                  variant=\"primary\"\n                  class=\"\n                    gds-background-none\n                    gds-min-height-0\n                  \"\n                  [attr.ariaLabel]=\"'Menu'\"\n                  [cdkMenuTriggerFor]=\"menu\"\n                  [cdkMenuPosition]=\"menuPosition\"\n                  #trigger=\"cdkMenuTriggerFor\"\n                >\n                  <gds-icon\n                    key=\"filled-menu-more\"\n                    class=\"gds-icon-size-2xs\"\n                  />\n                </button>\n                <ng-template #menu>\n                  <gds-dropdown\n                    mobileCancelLabel=\"Cancel\"\n                    (click)=\"trigger.close()\"\n                  >\n                    <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n                  </gds-dropdown>\n                </ng-template>\n              }\n            </div>\n          </div>\n        </li>\n      }\n    </ol>\n  </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsTimelineItemComponent, selector: "li[gds-timeline-item]", inputs: ["end", "start", "connectorType"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsSvgIconPipe, name: "gdsSvgicon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsHistoryComponent, decorators: [{
             type: Component,
@@ -7584,7 +7843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         NgTemplateOutlet,
                         NgClass,
                         GdsSvgIconPipe
-                    ], template: "<div class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-padding-sm\n\">\n  <span class=\"\n    gds-flex-grow-1\n    gds-text-primary-primary\n    gds-text-subtitle\n  \">{{ title() }}</span>\n  @if (!suppressCloseBtn()) {\n    <button\n      gds-icon-button\n      variant=\"primary\"\n      class=\"gds-background-none\"\n      (clicked)=\"closed.emit()\"\n      [attr.aria-label]=\"'Dismiss'\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  }\n</div>\n@if (loading()) {\n  <gds-spinner class=\"\n    gds-margin-block-auto\n    gds-margin-inline-auto\n  \" />\n} @else {\n  <div class=\"gds-scrollable-vertically\">\n    <ol\n      role=\"list\"\n      class=\"gds-list-unstyled\"\n    >\n      @for (item of reversed(); track $index) {\n        <li\n          gds-timeline-item\n          [connectorType]=\"connectorType()\"\n          [start]=\"$last\"\n          [end]=\"$first\"\n          (mouseenter)=\"itemHovered.emit(item)\"\n          (mouseleave)=\"itemHovered.emit(null)\"\n        >\n          <div\n            tag\n            class=\"\n              gds-display-flex\n              gds-justify-content-center\n            \"\n          >\n            @if (item.badgeType === 'icon') {\n              <gds-icon\n                class=\"\n                  badge-icon\n                  gds-background-base\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                  gds-padding-3xs\n                  gds-radius-2xl\n                \"\n                [key]=\"item.badgeData | gdsSvgicon\"\n              />\n            } @else {\n              <span\n                gds-badge\n                [ngClass]=\"{\n                  'gds-background-dark-strong gds-text-default-contrast': $first,\n                  'gds-background-white': !$first\n                }\"\n                >{{ item.badgeData }}</span\n              >\n            }\n          </div>\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-2xs\n          \">\n            <div class=\"\n              gds-align-items-start\n              gds-display-flex\n              gds-gap-3xs\n              gds-margin-inline-end-3xs\n            \">\n              <div class=\"\n                gds-display-flex\n                gds-flex-column\n                gds-flex-grow-1\n                gds-gap-2xs\n                item-content\n              \">\n                <gds-tooltip\n                  class=\"\n                    gds-flex-grow-1\n                    gds-text-body\n                    gds-text-primary\n                  \"\n                  [tooltip]=\"item.title\"\n                  onlyTextOverflow\n                >\n                  {{ item.title }}\n                </gds-tooltip>\n                @for (label of item.labels; track $index) {\n                  <gds-tooltip\n                    class=\"\n                      gds-text-caption\n                      gds-text-secondary\n                    \"\n                    onlyTextOverflow\n                    [tooltip]=\"label\"\n                  >\n                    {{ label }}\n                  </gds-tooltip>\n                }\n                <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n              </div>\n              @if (menuTmpl() && !$first) {\n                <button\n                  gds-icon-button\n                  variant=\"primary\"\n                  class=\"\n                    gds-background-none\n                    gds-min-height-0\n                  \"\n                  [attr.ariaLabel]=\"'Menu'\"\n                  [cdkMenuTriggerFor]=\"menu\"\n                  [cdkMenuPosition]=\"menuPosition\"\n                  #trigger=\"cdkMenuTriggerFor\"\n                >\n                  <gds-icon\n                    key=\"filled-menu-more\"\n                    class=\"gds-icon-size-2xs\"\n                  />\n                </button>\n                <ng-template #menu>\n                  <gds-dropdown (click)=\"trigger.close()\">\n                    <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n                  </gds-dropdown>\n                </ng-template>\n              }\n            </div>\n          </div>\n        </li>\n      }\n    </ol>\n  </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"] }]
+                    ], template: "<div class=\"\n  gds-align-items-center\n  gds-display-flex\n  gds-padding-sm\n\">\n  <span class=\"\n    gds-flex-grow-1\n    gds-text-primary-primary\n    gds-text-subtitle\n  \">{{ title() }}</span>\n  @if (!suppressCloseBtn()) {\n    <button\n      gds-icon-button\n      variant=\"primary\"\n      class=\"gds-background-none\"\n      (clicked)=\"closed.emit()\"\n      [attr.aria-label]=\"'Dismiss'\"\n    >\n      <gds-icon\n        key=\"line-dismiss\"\n        class=\"gds-icon-size-3xs\"\n      />\n    </button>\n  }\n</div>\n@if (loading()) {\n  <gds-spinner class=\"\n    gds-margin-block-auto\n    gds-margin-inline-auto\n  \" />\n} @else {\n  <div class=\"gds-scrollable-vertically\">\n    <ol\n      role=\"list\"\n      class=\"gds-list-unstyled\"\n    >\n      @for (item of reversed(); track $index) {\n        <li\n          gds-timeline-item\n          [connectorType]=\"connectorType()\"\n          [start]=\"$last\"\n          [end]=\"$first\"\n          (mouseenter)=\"itemHovered.emit(item)\"\n          (mouseleave)=\"itemHovered.emit(null)\"\n        >\n          <div\n            tag\n            class=\"\n              gds-display-flex\n              gds-justify-content-center\n            \"\n          >\n            @if (item.badgeType === 'icon') {\n              <gds-icon\n                class=\"\n                  badge-icon\n                  gds-background-base\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                  gds-padding-3xs\n                  gds-radius-2xl\n                \"\n                [key]=\"item.badgeData | gdsSvgicon\"\n              />\n            } @else {\n              <span\n                gds-badge\n                [ngClass]=\"{\n                  'gds-background-dark-strong gds-text-default-contrast': $first,\n                  'gds-background-white': !$first\n                }\"\n                >{{ item.badgeData }}</span\n              >\n            }\n          </div>\n          <div class=\"\n            gds-display-flex\n            gds-flex-column\n            gds-gap-2xs\n          \">\n            <div class=\"\n              gds-align-items-start\n              gds-display-flex\n              gds-gap-3xs\n              gds-margin-inline-end-3xs\n            \">\n              <div class=\"\n                gds-display-flex\n                gds-flex-column\n                gds-flex-grow-1\n                gds-gap-2xs\n                item-content\n              \">\n                <gds-tooltip\n                  class=\"\n                    gds-flex-grow-1\n                    gds-text-body\n                    gds-text-primary\n                  \"\n                  [tooltip]=\"item.title\"\n                  onlyTextOverflow\n                >\n                  {{ item.title }}\n                </gds-tooltip>\n                @for (label of item.labels; track $index) {\n                  <gds-tooltip\n                    class=\"\n                      gds-text-caption\n                      gds-text-secondary\n                    \"\n                    onlyTextOverflow\n                    [tooltip]=\"label\"\n                  >\n                    {{ label }}\n                  </gds-tooltip>\n                }\n                <ng-container *ngTemplateOutlet=\"contentTmpl() ?? null; context: { $implicit: item }\" />\n              </div>\n              @if (menuTmpl() && !$first) {\n                <button\n                  gds-icon-button\n                  variant=\"primary\"\n                  class=\"\n                    gds-background-none\n                    gds-min-height-0\n                  \"\n                  [attr.ariaLabel]=\"'Menu'\"\n                  [cdkMenuTriggerFor]=\"menu\"\n                  [cdkMenuPosition]=\"menuPosition\"\n                  #trigger=\"cdkMenuTriggerFor\"\n                >\n                  <gds-icon\n                    key=\"filled-menu-more\"\n                    class=\"gds-icon-size-2xs\"\n                  />\n                </button>\n                <ng-template #menu>\n                  <gds-dropdown\n                    mobileCancelLabel=\"Cancel\"\n                    (click)=\"trigger.close()\"\n                  >\n                    <ng-container *ngTemplateOutlet=\"menuTmpl() ?? null; context: { $implicit: item }\" />\n                  </gds-dropdown>\n                </ng-template>\n              }\n            </div>\n          </div>\n        </li>\n      }\n    </ol>\n  </div>\n}\n", styles: ["@layer design-system{:host{display:flex;flex-direction:column;height:100%;background:var(--gds-palette-background-hover);overflow:hidden}:host .item-content{overflow:hidden}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], connectorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectorType", required: false }] }], suppressCloseBtn: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressCloseBtn", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], itemHovered: [{ type: i0.Output, args: ["itemHovered"] }], contentTmpl: [{ type: i0.ContentChild, args: ['contentTmpl', { isSignal: true }] }], menuTmpl: [{ type: i0.ContentChild, args: ['menuTmpl', { isSignal: true }] }] } });
 
 class StylableButtonComponent {
@@ -7604,6 +7863,7 @@ class GdsChatExpandableListComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     displayLimit = input(1, { ...(ngDevMode ? { debugName: "displayLimit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     onlyEmitExpandedEvent = input(false, { ...(ngDevMode ? { debugName: "onlyEmitExpandedEvent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    expandAriaLabel = input('Show additional items', ...(ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
     expandClicked = output();
     expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     hiddenCount = computed(() => this.items().length - this.displayLimit(), ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
@@ -7618,12 +7878,12 @@ class GdsChatExpandableListComponent {
         this.expanded.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatExpandableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChatExpandableListComponent, isStandalone: true, selector: "dl[gds-chat-expandable-list]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, displayLimit: { classPropertyName: "displayLimit", publicName: "displayLimit", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitExpandedEvent: { classPropertyName: "onlyEmitExpandedEvent", publicName: "onlyEmitExpandedEvent", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandClicked: "expandClicked", expanded: "expandedChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"dt\">\n  <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n  <dd class=\"gds-expandable-list_item\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n    @if ($last && showExpandAction()) {\n      <gds-stylable-button\n        (click)=\"expand()\"\n        class=\"gds-expandable-list_action\"\n      >\n        <span\n          gds-badge\n          [attr.aria-label]=\"'Gds.ChatExpandableList.Expand.Aria.Label' | translate: { count: hiddenCount() }\"\n        >\n          +{{ hiddenCount() }}\n        </span>\n      </gds-stylable-button>\n    }\n  </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: ["@layer design-system{:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StylableButtonComponent, selector: "gds-stylable-button" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChatExpandableListComponent, isStandalone: true, selector: "dl[gds-chat-expandable-list]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, displayLimit: { classPropertyName: "displayLimit", publicName: "displayLimit", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitExpandedEvent: { classPropertyName: "onlyEmitExpandedEvent", publicName: "onlyEmitExpandedEvent", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandClicked: "expandClicked", expanded: "expandedChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"dt\">\n  <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n  <dd class=\"gds-expandable-list_item\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n    @if ($last && showExpandAction()) {\n      <gds-stylable-button\n        (click)=\"expand()\"\n        class=\"gds-expandable-list_action\"\n      >\n        <span\n          gds-badge\n          [attr.aria-label]=\"expandAriaLabel()\"\n        >\n          +{{ hiddenCount() }}\n        </span>\n      </gds-stylable-button>\n    }\n  </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: ["@layer design-system{:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}}\n"], dependencies: [{ kind: "component", type: GdsBadgeComponent, selector: "span[gds-badge]", inputs: ["icon", "tooltip", "tooltipInteractive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StylableButtonComponent, selector: "gds-stylable-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatExpandableListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dl[gds-chat-expandable-list]', imports: [GdsBadgeComponent, NgTemplateOutlet, StylableButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"dt\">\n  <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n  <dd class=\"gds-expandable-list_item\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n    @if ($last && showExpandAction()) {\n      <gds-stylable-button\n        (click)=\"expand()\"\n        class=\"gds-expandable-list_action\"\n      >\n        <span\n          gds-badge\n          [attr.aria-label]=\"'Gds.ChatExpandableList.Expand.Aria.Label' | translate: { count: hiddenCount() }\"\n        >\n          +{{ hiddenCount() }}\n        </span>\n      </gds-stylable-button>\n    }\n  </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: ["@layer design-system{:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], displayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLimit", required: false }] }], onlyEmitExpandedEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyEmitExpandedEvent", required: false }] }], expandClicked: [{ type: i0.Output, args: ["expandClicked"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+            args: [{ selector: 'dl[gds-chat-expandable-list]', imports: [GdsBadgeComponent, NgTemplateOutlet, StylableButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"dt\">\n  <dt class=\"gds-display-none\"></dt>\n</ng-content>\n@for (item of displayItems(); track $index) {\n  <dd class=\"gds-expandable-list_item\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item, index: $index }\" />\n    @if ($last && showExpandAction()) {\n      <gds-stylable-button\n        (click)=\"expand()\"\n        class=\"gds-expandable-list_action\"\n      >\n        <span\n          gds-badge\n          [attr.aria-label]=\"expandAriaLabel()\"\n        >\n          +{{ hiddenCount() }}\n        </span>\n      </gds-stylable-button>\n    }\n  </dd>\n}\n<ng-content select=\"[trailing]\" />\n", styles: ["@layer design-system{:host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gds-spacing-2xs)}:host .gds-expandable-list_item{display:flex;align-items:center;min-width:0}:host .gds-expandable-list_action{margin-inline-start:var(--gds-spacing-2xs)}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], displayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLimit", required: false }] }], onlyEmitExpandedEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyEmitExpandedEvent", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], expandClicked: [{ type: i0.Output, args: ["expandClicked"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class GdsMessageInputComponent {
     mode = input('type', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
@@ -7631,9 +7891,9 @@ class GdsMessageInputComponent {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     suppressClearOnSubmit = input(false, { ...(ngDevMode ? { debugName: "suppressClearOnSubmit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     enableIcon = input(false, { ...(ngDevMode ? { debugName: "enableIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    textareaAriaLabel = input('Gds.MessageInput.Textarea.AriaLabel', ...(ngDevMode ? [{ debugName: "textareaAriaLabel" }] : /* istanbul ignore next */ []));
-    sendButtonAriaLabel = input('Gds.MessageInput.SendButton.AriaLabel', ...(ngDevMode ? [{ debugName: "sendButtonAriaLabel" }] : /* istanbul ignore next */ []));
-    cancelButtonAriaLabel = input('Gds.MessageInput.CancelButton.AriaLabel', ...(ngDevMode ? [{ debugName: "cancelButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    textareaAriaLabel = input('Message input', ...(ngDevMode ? [{ debugName: "textareaAriaLabel" }] : /* istanbul ignore next */ []));
+    sendButtonAriaLabel = input('Send message', ...(ngDevMode ? [{ debugName: "sendButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    cancelButtonAriaLabel = input('Cancel message', ...(ngDevMode ? [{ debugName: "cancelButtonAriaLabel" }] : /* istanbul ignore next */ []));
     sent = output();
     canceled = output();
     changed = output();
@@ -7693,7 +7953,7 @@ class GdsMessageInputComponent {
         this.textarea().nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsMessageInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n      gds-display-flex\n      gds-align-items-center\n      gds-border\n      gds-border-color-default\n      gds-radius-lg\n      gds-padding-xs\n      gds-padding-inline-2xs\n      gds-background-white\n      gds-position-relative\n      gds-overflow-hidden\n\n      gds-mobile-radius-sm\n      gds-mobile-padding-0\n      " }, viewQueries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-xs\n  gds-width-100-parent\n\">\n  <gds-auto-growing-text-area\n    class=\"\n      gds-mobile-padding-block-2xs\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-2xs\n      gds-text-input\n      gds-text-primary\n      textarea\n    \"\n    [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n    [maxRows]=\"8\"\n  >\n    <textarea\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      rows=\"1\"\n      (input)=\"handleChange($event)\"\n      (keydown.enter)=\"handleSubmit($event)\"\n      [attr.aria-label]=\"textareaAriaLabel() | translate\"\n      >{{ value() }}</textarea\n    >\n  </gds-auto-growing-text-area>\n  <div\n    #slot\n    class=\"gds-display-contents\"\n    [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n  >\n    <ng-content />\n  </div>\n</div>\n<button\n  gds-icon-button\n  class=\"\n    gds-align-self-end\n    gds-background-none\n    gds-margin-block-end-0\n    gds-mobile-right-0\n    gds-padding-0\n    gds-right-2xs\n    trailing-icon\n  \"\n  variant=\"primary\"\n  [disabled]=\"disabled() && !enableIcon()\"\n  (clicked)=\"handleSubmit()\"\n  (mouseenter)=\"iconHoveringChanged($event)\"\n  (mouseleave)=\"iconHoveringChanged($event)\"\n  [attr.aria-label]=\"iconAriaLabel() | translate\"\n>\n  <gds-icon\n    [key]=\"icon()\"\n    class=\"\n      gds-icon-size-xs\n      gds-mobile-icon-size-2xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsAutoGrowingTextareaComponent, selector: "gds-auto-growing-text-area", inputs: ["maxRows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeTextareaDirective, selector: "textarea" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsMessageInputComponent, isStandalone: true, selector: "gds-message-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnSubmit: { classPropertyName: "suppressClearOnSubmit", publicName: "suppressClearOnSubmit", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, textareaAriaLabel: { classPropertyName: "textareaAriaLabel", publicName: "textareaAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, sendButtonAriaLabel: { classPropertyName: "sendButtonAriaLabel", publicName: "sendButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonAriaLabel: { classPropertyName: "cancelButtonAriaLabel", publicName: "cancelButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sent: "sent", canceled: "canceled", changed: "changed", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled()", "class.gds-background-disabled": "disabled()", "class.gds-padding-block-end-2xs": "hasChildren()" }, classAttribute: "\n      gds-display-flex\n      gds-align-items-center\n      gds-border\n      gds-border-color-default\n      gds-radius-lg\n      gds-padding-xs\n      gds-padding-inline-2xs\n      gds-background-white\n      gds-position-relative\n      gds-overflow-hidden\n\n      gds-mobile-radius-sm\n      gds-mobile-padding-0\n      " }, viewQueries: [{ propertyName: "textarea", first: true, predicate: GdsNativeTextareaDirective, descendants: true, isSignal: true }, { propertyName: "slot", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-xs\n  gds-width-100-parent\n\">\n  <gds-auto-growing-text-area\n    class=\"\n      gds-mobile-padding-block-2xs\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-2xs\n      gds-text-input\n      gds-text-primary\n      textarea\n    \"\n    [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n    [maxRows]=\"8\"\n  >\n    <textarea\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      rows=\"1\"\n      (input)=\"handleChange($event)\"\n      (keydown.enter)=\"handleSubmit($event)\"\n      [attr.aria-label]=\"textareaAriaLabel()\"\n      >{{ value() }}</textarea\n    >\n  </gds-auto-growing-text-area>\n  <div\n    #slot\n    class=\"gds-display-contents\"\n    [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n  >\n    <ng-content />\n  </div>\n</div>\n<button\n  gds-icon-button\n  class=\"\n    gds-align-self-end\n    gds-background-none\n    gds-margin-block-end-0\n    gds-mobile-right-0\n    gds-padding-0\n    gds-right-2xs\n    trailing-icon\n  \"\n  variant=\"primary\"\n  [disabled]=\"disabled() && !enableIcon()\"\n  (clicked)=\"handleSubmit()\"\n  (mouseenter)=\"iconHoveringChanged($event)\"\n  (mouseleave)=\"iconHoveringChanged($event)\"\n  [attr.aria-label]=\"iconAriaLabel()\"\n>\n  <gds-icon\n    [key]=\"icon()\"\n    class=\"\n      gds-icon-size-xs\n      gds-mobile-icon-size-2xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsAutoGrowingTextareaComponent, selector: "gds-auto-growing-text-area", inputs: ["maxRows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GdsNativeTextareaDirective, selector: "textarea" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsMessageInputComponent, decorators: [{
             type: Component,
@@ -7702,8 +7962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         GdsIconButtonComponent,
                         GdsAutoGrowingTextareaComponent,
                         NgClass,
-                        GdsNativeTextareaDirective,
-                        TranslatePipe
+                        GdsNativeTextareaDirective
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.aria-disabled]': 'disabled()',
                         class: `
@@ -7723,7 +7982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       `,
                         '[class.gds-background-disabled]': 'disabled()',
                         '[class.gds-padding-block-end-2xs]': 'hasChildren()'
-                    }, template: "<div class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-xs\n  gds-width-100-parent\n\">\n  <gds-auto-growing-text-area\n    class=\"\n      gds-mobile-padding-block-2xs\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-2xs\n      gds-text-input\n      gds-text-primary\n      textarea\n    \"\n    [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n    [maxRows]=\"8\"\n  >\n    <textarea\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      rows=\"1\"\n      (input)=\"handleChange($event)\"\n      (keydown.enter)=\"handleSubmit($event)\"\n      [attr.aria-label]=\"textareaAriaLabel() | translate\"\n      >{{ value() }}</textarea\n    >\n  </gds-auto-growing-text-area>\n  <div\n    #slot\n    class=\"gds-display-contents\"\n    [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n  >\n    <ng-content />\n  </div>\n</div>\n<button\n  gds-icon-button\n  class=\"\n    gds-align-self-end\n    gds-background-none\n    gds-margin-block-end-0\n    gds-mobile-right-0\n    gds-padding-0\n    gds-right-2xs\n    trailing-icon\n  \"\n  variant=\"primary\"\n  [disabled]=\"disabled() && !enableIcon()\"\n  (clicked)=\"handleSubmit()\"\n  (mouseenter)=\"iconHoveringChanged($event)\"\n  (mouseleave)=\"iconHoveringChanged($event)\"\n  [attr.aria-label]=\"iconAriaLabel() | translate\"\n>\n  <gds-icon\n    [key]=\"icon()\"\n    class=\"\n      gds-icon-size-xs\n      gds-mobile-icon-size-2xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"] }]
+                    }, template: "<div class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-xs\n  gds-width-100-parent\n\">\n  <gds-auto-growing-text-area\n    class=\"\n      gds-mobile-padding-block-2xs\n      gds-mobile-text-input-mobile\n      gds-padding-block-3xs\n      gds-padding-inline-2xs\n      gds-text-input\n      gds-text-primary\n      textarea\n    \"\n    [ngClass]=\"{ 'gds-padding-inline-end-md': !hasChildren() }\"\n    [maxRows]=\"8\"\n  >\n    <textarea\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      rows=\"1\"\n      (input)=\"handleChange($event)\"\n      (keydown.enter)=\"handleSubmit($event)\"\n      [attr.aria-label]=\"textareaAriaLabel()\"\n      >{{ value() }}</textarea\n    >\n  </gds-auto-growing-text-area>\n  <div\n    #slot\n    class=\"gds-display-contents\"\n    [ngClass]=\"{ 'gds-display-none': !hasChildren() }\"\n  >\n    <ng-content />\n  </div>\n</div>\n<button\n  gds-icon-button\n  class=\"\n    gds-align-self-end\n    gds-background-none\n    gds-margin-block-end-0\n    gds-mobile-right-0\n    gds-padding-0\n    gds-right-2xs\n    trailing-icon\n  \"\n  variant=\"primary\"\n  [disabled]=\"disabled() && !enableIcon()\"\n  (clicked)=\"handleSubmit()\"\n  (mouseenter)=\"iconHoveringChanged($event)\"\n  (mouseleave)=\"iconHoveringChanged($event)\"\n  [attr.aria-label]=\"iconAriaLabel()\"\n>\n  <gds-icon\n    [key]=\"icon()\"\n    class=\"\n      gds-icon-size-xs\n      gds-mobile-icon-size-2xs\n    \"\n  />\n</button>\n", styles: ["@layer design-system{:host ::ng-deep input:focus,:host ::ng-deep textarea:focus{outline:none}:host:focus-within,:host.is-controlled{isolation:isolate;position:relative}:host:focus-within:before,:host.is-controlled:before{z-index:-1;content:\"\";position:absolute;inset:0;border-bottom:var(--gds-borderWidth-lg) solid var(--gds-palette-border-selected);border-radius:var(--gds-borderRadius-xs)}:is(body[isMobile=true]) :host .textarea{--placeholder-color: var(--gds-palette-text-default-placeholder)}:is(body[isMobile=true]) :host .trailing-icon:focus-visible{outline-offset:calc(var(--gds-spacing-3xs) * -1)}:host[aria-disabled=true]{cursor:not-allowed}:host .trailing-icon{border-color:transparent;box-sizing:content-box}}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suppressClearOnSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnSubmit", required: false }] }], enableIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableIcon", required: false }] }], textareaAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaAriaLabel", required: false }] }], sendButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonAriaLabel", required: false }] }], cancelButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonAriaLabel", required: false }] }], sent: [{ type: i0.Output, args: ["sent"] }], canceled: [{ type: i0.Output, args: ["canceled"] }], changed: [{ type: i0.Output, args: ["changed"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], textarea: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GdsNativeTextareaDirective), { isSignal: true }] }], slot: [{ type: i0.ViewChild, args: ['slot', { isSignal: true }] }] } });
 
 class GdsChatPromptComponent {
@@ -8026,16 +8285,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteMenu", required: true }] }], autocompleteOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteOptions", required: false }] }], valueProp: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueProp", required: false }] }], autocompleteSelected: [{ type: i0.Output, args: ["autocompleteSelected"] }] } });
 
-const provideToaster = (customOptions = {}) => {
-    const defaultOptions = {
-        toastComponent: GdsToastComponent,
-        timeOut: 5000,
-        positionClass: 'toast-top-left',
-        preventDuplicates: true
-    };
-    return provideToastr({ ...defaultOptions, ...customOptions });
-};
-
 const OPERATING_SYSTEM = {
     windows: 'windows',
     mac: 'mac',
@@ -8097,7 +8346,7 @@ class GdsModule {
         switch (env) {
             case 'local':
             case 'dev':
-                cdnUrl = 'https://cdn.cortoaws.com';
+                cdnUrl = 'https://cdn.dev.cortoaws.com';
                 break;
             case 'test':
                 cdnUrl = 'https://cdn.test.cortoaws.com';
@@ -8194,5 +8443,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BrandEnum, CDN_URL, CONTACT_INITIALS_REGEX, GDS_BRANDS, GDS_EMPTY_STATE_VARIANTS, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuItemVariantEnum, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, isGdsBrand, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
+export { BrandEnum, CDN_URL, CONTACT_INITIALS_REGEX, GDS_BRANDS, GDS_EMPTY_STATE_VARIANTS, GDS_TOASTER_CONFIG, GDS_TOAST_CONTAINER, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuItemVariantEnum, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, ToastrService, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, isGdsBrand, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
 //# sourceMappingURL=corto-ai-gds-angular.mjs.map