@corto-ai/gds-angular 2.1.4 → 2.1.5-dev.2

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

@@ -1,5 +1,5 @@
 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, makeEnvironmentProviders, 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, numberAttribute, afterRenderEffect, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, makeEnvironmentProviders, TemplateRef, 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';
@@ -9,7 +9,7 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 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';
+import { FocusKeyManager, CdkTrapFocus, FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 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';
@@ -96,6 +96,10 @@ const gdsBrandGearIcon = {
     data: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.06 15.1627H22.1122C21.8932 14.2575 21.537 13.41 21.0652 12.6368L22.443 11.259C23.0062 10.6957 23.0062 9.78525 22.443 9.222L21.528 8.307C20.9647 7.74375 20.0542 7.74375 19.491 8.307L18.1132 9.68475C17.34 9.213 16.4925 8.856 15.5872 8.63775V6.69C15.5872 5.895 14.9422 5.25 14.1472 5.25H12.8535C12.0585 5.25 11.4135 5.895 11.4135 6.69V8.63775C10.5082 8.85675 9.66075 9.213 8.8875 9.68475L7.50975 8.307C6.9465 7.74375 6.036 7.74375 5.47275 8.307L4.55775 9.222C3.9945 9.78525 3.9945 10.6957 4.55775 11.259L5.9355 12.6368C5.46375 13.41 5.10675 14.2575 4.8885 15.1627H2.94C2.145 15.1627 1.5 15.8077 1.5 16.6027V17.8965C1.5 18.6915 2.145 19.3365 2.94 19.3365H4.88775C5.10675 20.2417 5.463 21.0892 5.93475 21.8625L4.557 23.2402C3.99375 23.8035 3.99375 24.714 4.557 25.2772L5.472 26.1922C6.03525 26.7555 6.94575 26.7555 7.509 26.1922L8.88675 24.8145C9.66 25.2862 10.5075 25.6432 11.4127 25.8615V27.8092C11.4127 28.6042 12.0577 29.2492 12.8527 29.2492H14.1465C14.9415 29.2492 15.5865 28.6042 15.5865 27.8092V25.8615C16.4917 25.6425 17.3392 25.2862 18.1125 24.8145L19.4902 26.1922C20.0535 26.7555 20.964 26.7555 21.5272 26.1922L22.4422 25.2772C23.0055 24.714 23.0055 23.8035 22.4422 23.2402L21.0645 21.8625C21.5362 21.0892 21.8932 20.2417 22.1115 19.3365H24.0592C24.8542 19.3365 25.4992 18.6915 25.4992 17.8965V16.6027C25.5 15.8077 24.855 15.1627 24.06 15.1627ZM13.4662 21C11.3947 21 9.71625 19.3215 9.71625 17.25C9.71625 15.1785 11.3947 13.5 13.4662 13.5C15.5377 13.5 17.2162 15.1785 17.2162 17.25C17.2162 19.3215 15.5377 21 13.4662 21Z" fill="var(--gds-pattern-brandIcon-fill-primary)"/><path d="M11.256 11.6722C9.49654 12.372 8.14354 13.881 7.65979 15.7372" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.3" d="M12.8527 5.25C12.0577 5.25 11.4127 5.895 11.4127 6.69V8.63775C10.5075 8.85675 9.66 9.213 8.88675 9.68475L7.509 8.307C6.94575 7.74375 6.03525 7.74375 5.472 8.307L4.557 9.222C3.99375 9.78525 3.99375 10.6958 4.557 11.259L5.93475 12.6368C5.463 13.41 5.106 14.2575 4.88775 15.1628H2.94C2.145 15.1628 1.5 15.8078 1.5 16.6027V17.8965C1.5 18.1943 1.59075 18.4703 1.74525 18.6998C2.1225 18.8273 2.51925 18.912 2.94 18.912H4.8885C6.6225 18.912 8.12925 17.724 8.53425 16.038C8.6565 15.531 8.859 15.0435 9.1365 14.5883C9.37125 14.202 10.455 13.1198 10.8412 12.8843C11.2927 12.6083 11.7817 12.4058 12.2947 12.282C13.9777 11.8748 15.1627 10.3688 15.1627 8.637V6.69C15.1627 6.27 15.078 5.8725 14.9505 5.49525C14.721 5.34075 14.445 5.25 14.1472 5.25H12.8527Z" fill="var(--gds-pattern-brandIcon-fill-highlight)"/><path d="M44.31 27.9127H42.3622C42.1432 27.0075 41.787 26.16 41.3153 25.3867L42.693 24.009C43.2562 23.4458 43.2562 22.5352 42.693 21.972L41.778 21.057C41.2147 20.4937 40.3042 20.4937 39.741 21.057L38.3632 22.4347C37.59 21.963 36.7425 21.606 35.8372 21.3877V19.44C35.8372 18.645 35.1922 18 34.3972 18H33.1035C32.3085 18 31.6635 18.645 31.6635 19.44V21.3877C30.7582 21.6067 29.9107 21.963 29.1375 22.4347L27.7597 21.057C27.1965 20.4937 26.286 20.4937 25.7228 21.057L24.8077 21.972C24.2445 22.5352 24.2445 23.4458 24.8077 24.009L26.1855 25.3867C25.7138 26.16 25.3568 27.0075 25.1385 27.9127H23.19C22.395 27.9127 21.75 28.5577 21.75 29.3527V30.6465C21.75 31.4415 22.395 32.0865 23.19 32.0865H25.1377C25.3567 32.9917 25.713 33.8392 26.1847 34.6125L24.807 35.9902C24.2437 36.5535 24.2437 37.464 24.807 38.0272L25.722 38.9422C26.2853 39.5055 27.1958 39.5055 27.759 38.9422L29.1367 37.5645C29.91 38.0362 30.7575 38.3932 31.6627 38.6115V40.5592C31.6627 41.3542 32.3077 41.9992 33.1027 41.9992H34.3965C35.1915 41.9992 35.8365 41.3542 35.8365 40.5592V38.6115C36.7417 38.3925 37.5892 38.0362 38.3625 37.5645L39.7402 38.9422C40.3035 39.5055 41.214 39.5055 41.7772 38.9422L42.6922 38.0272C43.2555 37.464 43.2555 36.5535 42.6922 35.9902L41.3145 34.6125C41.7862 33.8392 42.1432 32.9917 42.3615 32.0865H44.3092C45.1042 32.0865 45.7492 31.4415 45.7492 30.6465V29.3527C45.75 28.5577 45.105 27.9127 44.31 27.9127ZM33.75 33.75C31.6785 33.75 30 32.0715 30 30C30 27.9285 31.6785 26.25 33.75 26.25C35.8215 26.25 37.5 27.9285 37.5 30C37.5 32.0715 35.8215 33.75 33.75 33.75Z" fill="var(--gds-pattern-brandIcon-fill-secondary)"/><path opacity="0.15" d="M44.31 32.0872C45.105 32.0872 45.75 31.4422 45.75 30.6472V29.3535C45.75 28.5585 45.105 27.9135 44.31 27.9135H42.3622C42.354 27.8797 42.3427 27.8467 42.3337 27.8137C42.2565 27.9847 42.189 28.161 42.138 28.3447C40.4992 28.4422 39.1035 29.5995 38.7165 31.212C38.5942 31.719 38.3917 32.2065 38.115 32.6602C37.8795 33.0465 36.7957 34.1295 36.4095 34.3657C35.958 34.641 35.469 34.8442 34.956 34.968C33.3465 35.3572 32.1915 36.753 32.0947 38.3887C31.9117 38.4397 31.7355 38.5072 31.5645 38.5845C31.5982 38.5927 31.6305 38.6047 31.6642 38.613V40.5607C31.6642 41.3557 32.3092 42.0007 33.1042 42.0007H34.398C35.193 42.0007 35.838 41.3557 35.838 40.5607V38.613C36.7432 38.394 37.5907 38.0377 38.364 37.566L39.7417 38.9437C40.305 39.507 41.2155 39.507 41.7787 38.9437L42.6937 38.0287C43.257 37.4655 43.257 36.555 42.6937 35.9917L41.316 34.614C41.7877 33.8407 42.1447 32.9932 42.363 32.088L44.31 32.0872Z" fill="var(--gds-pattern-brandIcon-fill-shadow)"/></svg>`,
     name: 'brand-gear'
 };
+const gdsBrandIconIcon = {
+    data: ``,
+    name: 'brand-icon'
+};
 const gdsBrandInboxIcon = {
     data: `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Brand"><path id="Vector" d="M16.5625 15.9375H5.1825L5.21406 4.375H14.6875C16.4134 4.375 17.8125 5.77406 17.8125 7.5V14.6875C17.8125 15.3778 17.2528 15.9375 16.5625 15.9375Z" fill="var(--gds-pattern-brandIcon-fill-primary)"/><path id="Vector_2" d="M7.1875 15.9375H3.4375C2.74719 15.9375 2.1875 15.3778 2.1875 14.6875V7.5C2.1875 5.77406 3.58656 4.375 5.3125 4.375C7.03844 4.375 8.4375 5.77406 8.4375 7.5V14.6875C8.4375 15.3778 7.87781 15.9375 7.1875 15.9375Z" fill="var(--gds-pattern-brandIcon-fill-highlight)"/><path id="Vector_3" d="M15.62 9.68684L15.6244 7.18684C15.625 6.84152 15.346 6.56121 15.0006 6.56059L11.2506 6.55371C10.9053 6.55309 10.625 6.83215 10.6244 7.17746C10.6238 7.52277 10.9028 7.80309 11.2481 7.80371L12.8106 7.80652L12.8072 9.68152C12.8066 10.0268 13.0856 10.3071 13.431 10.3078L14.9935 10.3106C15.3394 10.3112 15.6194 10.0321 15.62 9.68684Z" fill="var(--gds-pattern-brandIcon-fill-secondary)"/><path id="Vector_4" d="M6.875 9.0625H3.75C3.40469 9.0625 3.125 8.78281 3.125 8.4375C3.125 8.09219 3.40469 7.8125 3.75 7.8125H6.875C7.22031 7.8125 7.5 8.09219 7.5 8.4375C7.5 8.78281 7.22031 9.0625 6.875 9.0625Z" fill="var(--gds-pattern-brandIcon-fill-primary)"/><path id="Vector_5" opacity="0.3" d="M5.21406 4.38C3.53406 4.4325 2.1875 5.80719 2.1875 7.5V10.3125C3.05031 10.3125 3.75 9.61312 3.75 8.75V7.5C3.75 6.6525 4.41469 5.96812 5.26312 5.94187C5.28812 5.94094 5.31312 5.93938 5.33781 5.9375H6.25C7.11281 5.9375 7.8125 5.23813 7.8125 4.375H5.21406V4.38Z" fill="var(--gds-pattern-brandIcon-fill-highlight)"/><path id="Vector_6" opacity="0.15" d="M17.8125 14.6875V9.6875C16.9497 9.6875 16.25 10.3869 16.25 11.25V14.0625C16.25 14.235 16.11 14.375 15.9375 14.375H14.375C13.5122 14.375 12.8125 15.0744 12.8125 15.9375H16.5625C17.2528 15.9375 17.8125 15.3778 17.8125 14.6875Z" fill="var(--gds-pattern-brandIcon-fill-shadow)"/><path id="Vector_7" d="M3.43347 6.72299C3.5316 6.48393 3.6741 6.2683 3.85128 6.0858C4.02847 5.9033 4.23972 5.75455 4.47566 5.64893" stroke="var(--gds-pattern-brandIcon-fill-highlight)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`,
     name: 'brand-inbox'
@@ -1708,6 +1712,10 @@ const gdsLineCurrencyPoundIcon = {
     data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.1427 4L14.138 4.00001C12.9267 4.0038 11.7692 4.49698 10.9175 5.36666C10.0663 6.23581 9.58918 7.41031 9.58551 8.63289V8.63514V11.7704H6.75C6.33579 11.7704 6 12.1062 6 12.5204C6 12.9346 6.33579 13.2704 6.75 13.2704H9.58551V15.8834L7.36606 19.2828C7.21555 19.5133 7.20344 19.8078 7.33451 20.0499C7.46558 20.292 7.71875 20.4428 7.99406 20.4428H17.9452C18.3594 20.4428 18.6952 20.107 18.6952 19.6928C18.6952 19.2786 18.3594 18.9428 17.9452 18.9428H9.37943L10.9635 16.5166C11.0431 16.3946 11.0855 16.2522 11.0855 16.1065V13.2704H13.7626C14.1769 13.2704 14.5126 12.9346 14.5126 12.5204C14.5126 12.1062 14.1769 11.7704 13.7626 11.7704H11.0855V8.63633C11.0883 7.80044 11.4148 7.00263 11.9892 6.41619C12.5627 5.83059 13.3362 5.50316 14.1404 5.50002C14.9445 5.50316 15.7181 5.83059 16.2916 6.41619C16.8659 7.00266 17.1925 7.80053 17.1952 8.63648V9.53171C17.1952 9.94592 17.531 10.2817 17.9452 10.2817C18.3594 10.2817 18.6952 9.94592 18.6952 9.53171L18.6952 8.63514L18.6952 8.63289C18.6915 7.41031 18.2144 6.23581 17.3632 5.36666C16.5115 4.49698 15.3541 4.0038 14.1427 4Z" fill="currentColor"/></svg>`,
     name: 'line-currency-pound'
 };
+const gdsLineCursorHoverIcon = {
+    data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5C1 3.89543 1.89543 3 3 3H13C14.1046 3 15 3.89543 15 5V10C15 10.8062 14.523 11.501 13.8358 11.8175C13.7656 11.6802 13.6736 11.5523 13.5607 11.4394L13.1148 10.9935C13.613 10.9366 14 10.5135 14 10V5C14 4.44772 13.5523 4 13 4H3C2.44772 4 2 4.44772 2 5V10C2 10.5523 2.44772 11 3 11H7V12H3C1.89543 12 1 11.1046 1 10V5ZM8.85355 8.14645C8.71055 8.00345 8.4955 7.96067 8.30866 8.03806C8.12182 8.11545 8 8.29777 8 8.5V14.5C8 14.7152 8.13771 14.9063 8.34189 14.9743C8.54606 15.0424 8.77087 14.9722 8.9 14.8L10.25 13H12.5C12.7022 13 12.8845 12.8782 12.9619 12.6913C13.0393 12.5045 12.9966 12.2894 12.8536 12.1464L8.85355 8.14645ZM9 13V9.70711L11.2929 12H10C9.84262 12 9.69443 12.0741 9.6 12.2L9 13Z" fill="currentColor"/></svg>`,
+    name: 'line-cursor-hover'
+};
 const gdsLineDatabaseLinkIcon = {
     data: `<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4V16C0 16.6906 0.315303 17.2934 0.774234 17.7798C1.2294 18.2622 1.85301 18.6626 2.56668 18.9825C3.99575 19.6231 5.91738 20 8 20C8.51088 20 9.01207 19.9773 9.49867 19.9336C8.85376 19.5859 8.29843 19.0933 7.87621 18.4995C6.00545 18.4848 4.34946 18.1378 3.18027 17.6137C2.58195 17.3455 2.14382 17.0456 1.86525 16.7503C1.59044 16.4591 1.5 16.2069 1.5 16V6.39242C1.82094 6.61282 2.18063 6.80942 2.56668 6.98248C3.99575 7.6231 5.91738 8 8 8C10.0826 8 12.0042 7.6231 13.4333 6.98248C13.8194 6.80942 14.1791 6.61282 14.5 6.39242V11H15.25C15.5052 11 15.7557 11.0201 16 11.0589V4C16 3.30945 15.6847 2.70664 15.2258 2.22025C14.7706 1.73784 14.147 1.33745 13.4333 1.01752C12.0042 0.376905 10.0826 0 8 0C5.91738 0 3.99575 0.376905 2.56668 1.01752C1.85301 1.33745 1.2294 1.73784 0.774234 2.22025C0.315303 2.70664 0 3.30945 0 4ZM1.5 4C1.5 3.79309 1.59044 3.54091 1.86525 3.24966C2.14382 2.95441 2.58195 2.65449 3.18027 2.38628C4.37519 1.85063 6.07856 1.5 8 1.5C9.92144 1.5 11.6248 1.85063 12.8197 2.38628C13.418 2.65449 13.8562 2.95441 14.1348 3.24966C14.4096 3.54091 14.5 3.79309 14.5 4C14.5 4.20691 14.4096 4.45909 14.1348 4.75034C13.8562 5.04559 13.418 5.3455 12.8197 5.61372C11.6248 6.14937 9.92144 6.5 8 6.5C6.07856 6.5 4.37519 6.14937 3.18027 5.61372C2.58195 5.3455 2.14382 5.04559 1.86525 4.75034C1.59044 4.45909 1.5 4.20691 1.5 4ZM19 15.75C19 13.6789 17.3211 12 15.25 12L15.1482 12.0068C14.7822 12.0565 14.5 12.3703 14.5 12.75C14.5 13.1642 14.8358 13.5 15.25 13.5L15.404 13.5052C16.5748 13.5844 17.5 14.5591 17.5 15.75C17.5 16.9926 16.4926 18 15.25 18L15.2466 18.0046L15.1448 18.0119C14.779 18.0633 14.4983 18.3783 14.5 18.758C14.5019 19.1722 14.8392 19.5065 15.2534 19.5046V19.5L15.4523 19.4948C17.4276 19.3913 19 17.7543 19 15.75ZM12.5 12.75C12.5 12.3358 12.1642 12 11.75 12L11.5508 12.0052C9.57236 12.1087 8 13.7457 8 15.75C8 17.8211 9.67893 19.5 11.75 19.5L11.8518 19.4932C12.2178 19.4435 12.5 19.1297 12.5 18.75C12.5 18.3358 12.1642 18 11.75 18L11.596 17.9948C10.4252 17.9156 9.5 16.9409 9.5 15.75C9.5 14.5074 10.5074 13.5 11.75 13.5L11.8518 13.4932C12.2178 13.4435 12.5 13.1297 12.5 12.75ZM16 15.75C16 15.3358 15.6642 15 15.25 15H11.75L11.6482 15.0068C11.2822 15.0565 11 15.3703 11 15.75C11 16.1642 11.3358 16.5 11.75 16.5H15.25L15.3518 16.4932C15.7178 16.4435 16 16.1297 16 15.75Z" fill="currentColor"/></svg>`,
     name: 'line-database-link'
@@ -1732,6 +1740,10 @@ const gdsLineDisconnectIcon = {
     data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.7803 3.28033C22.0732 2.98744 22.0732 2.51256 21.7803 2.21967C21.4874 1.92678 21.0126 1.92678 20.7197 2.21967L18.7077 4.23161C17.0483 3.05263 14.7323 3.20693 13.2448 4.6945L12.1767 5.76252C11.4933 6.44594 11.4933 7.55398 12.1767 8.2374L15.7625 11.8232C16.446 12.5066 17.554 12.5066 18.2374 11.8232L19.3054 10.7552C20.793 9.26761 20.9473 6.9517 19.7684 5.29228L21.7803 3.28033ZM18.1945 5.75516L18.2173 5.77798L18.2197 5.78033L18.222 5.78267L18.2448 5.80542C19.3187 6.87936 19.3187 8.62056 18.2448 9.6945L17.1767 10.7625C17.0791 10.8602 16.9208 10.8602 16.8232 10.7625L13.2374 7.17674C13.1398 7.07911 13.1398 6.92082 13.2374 6.82318L14.3054 5.75516C15.3794 4.68122 17.1206 4.68122 18.1945 5.75516ZM10.7803 11.2803C11.0732 10.9874 11.0732 10.5126 10.7803 10.2197C10.4874 9.92678 10.0126 9.92678 9.71967 10.2197L8.00001 11.9393L7.53035 11.4697C7.23746 11.1768 6.76258 11.1768 6.46969 11.4697L4.69456 13.2448C3.20701 14.7324 3.0527 17.0483 4.23163 18.7077L2.21967 20.7197C1.92678 21.0126 1.92678 21.4874 2.21967 21.7803C2.51256 22.0732 2.98744 22.0732 3.28033 21.7803L5.29229 19.7684C6.95171 20.9473 9.26766 20.793 10.7552 19.3055L12.5303 17.5303C12.8232 17.2374 12.8232 16.7626 12.5303 16.4697L12.0607 16L13.7803 14.2803C14.0732 13.9874 14.0732 13.5126 13.7803 13.2197C13.4874 12.9268 13.0126 12.9268 12.7197 13.2197L11 14.9393L9.06067 13L10.7803 11.2803ZM7.46631 13.527L7.46967 13.5303L7.47305 13.5337L10.4664 16.527L10.4697 16.5303L10.473 16.5336L10.9394 17L9.69456 18.2448C8.62062 19.3187 6.87942 19.3187 5.80548 18.2448L5.75522 18.1945C4.68128 17.1206 4.68128 15.3794 5.75522 14.3055L7.00002 13.0607L7.46631 13.527Z" fill="currentColor"/></svg>`,
     name: 'line-disconnect'
 };
+const gdsLineDismissCircleIcon = {
+    data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3ZM5.83859 5.96569L5.89645 5.89645C6.07001 5.72288 6.33944 5.7036 6.53431 5.83859L6.60355 5.89645L8 7.293L9.39645 5.89645C9.57001 5.72288 9.83944 5.7036 10.0343 5.83859L10.1036 5.89645C10.2771 6.07001 10.2964 6.33944 10.1614 6.53431L10.1036 6.60355L8.707 8L10.1036 9.39645C10.2771 9.57001 10.2964 9.83944 10.1614 10.0343L10.1036 10.1036C9.92999 10.2771 9.66056 10.2964 9.46569 10.1614L9.39645 10.1036L8 8.707L6.60355 10.1036C6.42999 10.2771 6.16056 10.2964 5.96569 10.1614L5.89645 10.1036C5.72288 9.92999 5.7036 9.66056 5.83859 9.46569L5.89645 9.39645L7.293 8L5.89645 6.60355C5.72288 6.42999 5.7036 6.16056 5.83859 5.96569L5.89645 5.89645L5.83859 5.96569Z" fill="currentColor"/></svg>`,
+    name: 'line-dismiss-circle'
+};
 const gdsLineDismissIcon = {
     data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 3L13 13M13 3L3 13" stroke="currentColor" stroke-linecap="round"/></svg>`,
     name: 'line-dismiss'
@@ -1744,6 +1756,10 @@ const gdsLineDocumentMultipleIcon = {
     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.6312C11.2279 2 11.8002 2.23705 12.2221 2.65901L16.841 7.27786C17.2629 7.69981 17.5 8.27211 17.5 8.86885V17.25C17.5 18.4926 16.4926 19.5 15.25 19.5H6.25C5.00736 19.5 4 18.4926 4 17.25V4.25ZM6.25 3.5C5.83579 3.5 5.5 3.83579 5.5 4.25V17.25C5.5 17.6642 5.83579 18 6.25 18H15.25C15.6642 18 16 17.6642 16 17.25V8.99753H12.7539C11.5113 8.99753 10.5039 7.99017 10.5039 6.74753V3.5H6.25ZM12.0039 4.56209V6.74753C12.0039 7.16174 12.3397 7.49753 12.7539 7.49753H14.9393L12.0039 4.56209Z" fill="currentColor"/><path d="M6.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>`,
     name: 'line-document-multiple'
 };
+const gdsLineDocumentOnePageSparkleIcon = {
+    data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.8777 0.282251L11.226 1.35305C11.3343 1.67859 11.5171 1.97441 11.7599 2.21699C12.0026 2.45957 12.2987 2.64223 12.6245 2.75044L13.6961 3.09845L13.7175 3.10381C13.8001 3.13292 13.8716 3.18692 13.9222 3.25836C13.9728 3.3298 14 3.41516 14 3.50268C14 3.5902 13.9728 3.67556 13.9222 3.747C13.8716 3.81844 13.8001 3.87244 13.7175 3.90155L12.6459 4.24956C12.3201 4.35778 12.0241 4.54044 11.7813 4.78302C11.5385 5.0256 11.3558 5.32141 11.2475 5.64696L10.8992 6.71775C10.87 6.80029 10.816 6.87175 10.7445 6.92231C10.673 6.97286 10.5876 7.00001 10.5 7.00001C10.4124 7.00001 10.327 6.97286 10.2555 6.92231C10.2484 6.91732 10.2416 6.91213 10.2349 6.90675C10.1736 6.85755 10.1271 6.79215 10.1008 6.71775L9.75255 5.64696C9.73383 5.59014 9.71284 5.53422 9.68966 5.47932C9.57963 5.21872 9.42023 4.98116 9.21968 4.77999C9.18154 4.74173 9.14208 4.70496 9.10139 4.66973C8.88302 4.48064 8.62919 4.33588 8.35408 4.24421L7.28247 3.8962C7.19987 3.86708 7.12835 3.81308 7.07776 3.74164C7.02717 3.6702 7 3.58484 7 3.49733C7 3.40981 7.02717 3.32445 7.07776 3.25301C7.12835 3.18157 7.19987 3.12757 7.28247 3.09845L8.35408 2.75044C8.67591 2.63941 8.96768 2.45549 9.20656 2.21307C9.44544 1.97065 9.62497 1.67631 9.73111 1.35305L10.0794 0.282251C10.1085 0.19972 10.1626 0.128252 10.2341 0.0776997C10.3056 0.0271473 10.391 0 10.4786 0C10.5662 0 10.6516 0.0271473 10.7231 0.0776997C10.7946 0.128252 10.8486 0.19972 10.8777 0.282251ZM15.7829 8.21319L15.0175 7.96461C14.7848 7.88731 14.5733 7.75684 14.3999 7.58357C14.2265 7.4103 14.0959 7.199 14.0186 6.96647L13.7698 6.20161C13.749 6.14266 13.7104 6.09161 13.6593 6.05551C13.6083 6.0194 13.5473 6.00001 13.4847 6.00001C13.4221 6.00001 13.3611 6.0194 13.31 6.05551C13.259 6.09161 13.2204 6.14266 13.1996 6.20161L12.9508 6.96647C12.875 7.19737 12.7467 7.40762 12.5761 7.58077C12.4055 7.75392 12.1971 7.8853 11.9672 7.96461L11.2018 8.21319C11.1428 8.23398 11.0917 8.27255 11.0555 8.32358C11.0194 8.37461 11 8.43558 11 8.4981C11 8.56061 11.0194 8.62158 11.0555 8.67261C11.0917 8.72364 11.1428 8.76221 11.2018 8.78301L11.9672 9.03158C12.2003 9.10926 12.412 9.24032 12.5855 9.41428C12.7589 9.58824 12.8893 9.80031 12.9661 10.0335L13.2149 10.7984C13.2357 10.8574 13.2743 10.9084 13.3254 10.9445C13.3764 10.9806 13.4374 11 13.5 11C13.5626 11 13.6236 10.9806 13.6746 10.9445C13.7257 10.9084 13.7643 10.8574 13.7851 10.7984L14.0339 10.0335C14.1113 9.80101 14.2418 9.58972 14.4152 9.41645C14.5886 9.24317 14.8001 9.11271 15.0328 9.03541L15.7982 8.78683C15.8572 8.76603 15.9083 8.72746 15.9445 8.67643C15.9806 8.62541 16 8.56443 16 8.50192C16 8.43941 15.9806 8.37844 15.9445 8.32741C15.9083 8.27638 15.8572 8.23781 15.7982 8.21701L15.7829 8.21319ZM13 11.9009C12.9147 11.8659 12.833 11.8221 12.7561 11.7696C12.5359 11.6094 12.3758 11.399 12.2757 11.1486L12.0155 10.3473C12.0106 10.3343 12.0055 10.3213 12 10.3084V13C12 13.5523 11.5523 14 11 14H5C4.44772 14 4 13.5523 4 13V3C4 2.44772 4.44772 2 5 2H7.42985L8.04186 1.80334C8.202 1.75326 8.36215 1.64308 8.49227 1.51287C8.62238 1.38266 8.72248 1.22239 8.78253 1.0421L8.79629 1H5C3.89543 1 3 1.89543 3 3V13C3 14.1046 3.89543 15 5 15H11C12.1046 15 13 14.1046 13 13V11.9009ZM9.58988 8.49194C9.82312 8.44961 10 8.24546 10 8C10 7.72386 9.77614 7.5 9.5 7.5H6.5L6.41012 7.50806C6.17688 7.55039 6 7.75454 6 8C6 8.27614 6.22386 8.5 6.5 8.5H9.5L9.58988 8.49194ZM10 11.4919C10 11.7374 9.82312 11.9416 9.58988 11.9839L9.5 11.9919H6.5C6.22386 11.9919 6 11.7681 6 11.4919C6 11.2465 6.17688 11.0423 6.41012 11L6.5 10.9919H9.5C9.77614 10.9919 10 11.2158 10 11.4919Z" fill="currentColor"/></svg>`,
+    name: 'line-document-one-page-sparkle'
+};
 const gdsLineDocumentPreviewIcon = {
     data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5859 2C10.9837 2.00004 11.3652 2.15818 11.6465 2.43945L15.5605 6.35352C15.8418 6.63478 16 7.01629 16 7.41406V16C16 17.1046 15.1046 18 14 18H9.81836C10.1064 17.6741 10.3453 17.3338 10.5312 17H14C14.5523 17 15 16.5523 15 16V8H11.5C10.6716 8 10 7.32843 10 6.5V3H6C5.44772 3 5 3.44772 5 4V11.0234C4.65144 11.0544 4.31758 11.1152 4 11.2041V4C4 2.89543 4.89543 2 6 2H10.5859ZM11 6.5C11 6.77614 11.2239 7 11.5 7H14.793L11 3.20703V6.5Z" fill="currentColor"/><path d="M1 15.5C1 14.318 2.736 12 5.5 12C8.261 12 10 14.3 10 15.5C10 16.682 8.261 19 5.5 19C2.739 19 1 16.7 1 15.5ZM4.11107 17.5787C4.5222 17.8534 5.00555 18 5.5 18C6.16304 18 6.79893 17.7366 7.26777 17.2678C7.73661 16.7989 8 16.163 8 15.5C8 15.0055 7.85338 14.5222 7.57867 14.1111C7.30397 13.7 6.91352 13.3795 6.45671 13.1903C5.99989 13.0011 5.49723 12.9516 5.01227 13.048C4.52732 13.1445 4.08186 13.3826 3.73223 13.7322C3.3826 14.0819 3.1445 14.5273 3.04804 15.0123C2.95157 15.4972 3.00108 15.9999 3.1903 16.4567C3.37952 16.9135 3.69995 17.304 4.11107 17.5787ZM6.7472 16.3334C6.91203 16.0867 7 15.7967 7 15.5C7 15.1022 6.84196 14.7206 6.56066 14.4393C6.27936 14.158 5.89782 14 5.5 14C5.20333 14 4.91332 14.088 4.66665 14.2528C4.41997 14.4176 4.22771 14.6519 4.11418 14.926C4.00065 15.2001 3.97094 15.5017 4.02882 15.7926C4.0867 16.0836 4.22956 16.3509 4.43934 16.5607C4.64912 16.7704 4.91639 16.9133 5.20736 16.9712C5.49834 17.0291 5.79994 16.9993 6.07403 16.8858C6.34811 16.7723 6.58238 16.58 6.7472 16.3334Z" fill="currentColor"/></svg>`,
     name: 'line-document-preview'
@@ -2288,6 +2304,10 @@ const gdsLineUpIcon = {
     data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 13.5C7.5 13.7761 7.72386 14 8 14C8.27614 14 8.5 13.7761 8.5 13.5V3.80298L12.1284 7.83448C12.3131 8.03974 12.6292 8.05638 12.8345 7.87165C13.0397 7.68692 13.0564 7.37077 12.8716 7.16552L8.37165 2.16552C8.27683 2.06016 8.14174 2 8 2C7.85826 2 7.72317 2.06016 7.62835 2.16552L3.12836 7.16552C2.94363 7.37077 2.96027 7.68692 3.16552 7.87165C3.37078 8.05638 3.68692 8.03974 3.87165 7.83448L7.5 3.80298V13.5Z" fill="currentColor"/></svg>`,
     name: 'line-up'
 };
+const gdsLineUploadIcon = {
+    data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 3.00098C15.2761 3.00098 15.5 2.77712 15.5 2.50098C15.5 2.25552 15.3231 2.05137 15.0899 2.00903L15 2.00098H4C3.72386 2.00098 3.5 2.22483 3.5 2.50098C3.5 2.74644 3.67688 2.95059 3.91012 2.99292L4 3.00098H15ZM9.50014 17.9988C9.7456 17.9988 9.9497 17.8218 9.99197 17.5885L10 17.4986L9.996 5.70477L13.6414 9.3531C13.8148 9.52683 14.0842 9.54636 14.2792 9.41154L14.3485 9.35375C14.5222 9.18034 14.5418 8.91094 14.407 8.71595L14.3492 8.64664L9.85745 4.14664C9.78495 4.07401 9.69568 4.02833 9.60207 4.00962L9.49608 3.99987C9.33511 3.99987 9.19192 4.076 9.10051 4.19419L4.64386 8.64607C4.44846 8.84119 4.44823 9.15777 4.64336 9.35317C4.8168 9.52686 5.08621 9.54634 5.28117 9.41148L5.35046 9.35368L8.996 5.71277L9 17.4989C9.00008 17.7751 9.224 17.9988 9.50014 17.9988Z" fill="currentColor"/></svg>`,
+    name: 'line-upload'
+};
 const gdsLineViewIcon = {
     data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 3.5C13.8096 3.5 13.25 4.05964 13.25 4.75V15.25C13.25 15.9404 13.8096 16.5 14.5 16.5H17C17.6904 16.5 18.25 15.9404 18.25 15.25V4.75C18.25 4.05964 17.6904 3.5 17 3.5H14.5ZM14.25 4.75C14.25 4.61193 14.3619 4.5 14.5 4.5H17C17.1381 4.5 17.25 4.61193 17.25 4.75V15.25C17.25 15.3881 17.1381 15.5 17 15.5H14.5C14.3619 15.5 14.25 15.3881 14.25 15.25V4.75ZM1.75 5C1.75 4.72386 1.97386 4.5 2.25 4.5H11.25C11.5261 4.5 11.75 4.72386 11.75 5C11.75 5.27614 11.5261 5.5 11.25 5.5H2.25C1.97386 5.5 1.75 5.27614 1.75 5ZM1.75 8.33331C1.75 8.05717 1.97386 7.83331 2.25 7.83331H11.25C11.5261 7.83331 11.75 8.05717 11.75 8.33331C11.75 8.60946 11.5261 8.83331 11.25 8.83331H2.25C1.97386 8.83331 1.75 8.60946 1.75 8.33331ZM2.25 11.1666C1.97386 11.1666 1.75 11.3905 1.75 11.6666C1.75 11.9428 1.97386 12.1666 2.25 12.1666H11.25C11.5261 12.1666 11.75 11.9428 11.75 11.6666C11.75 11.3905 11.5261 11.1666 11.25 11.1666H2.25ZM1.75 14.9999C1.75 14.7238 1.97386 14.4999 2.25 14.4999H11.25C11.5261 14.4999 11.75 14.7238 11.75 14.9999C11.75 15.2761 11.5261 15.4999 11.25 15.4999H2.25C1.97386 15.4999 1.75 15.2761 1.75 14.9999Z" fill="currentColor"/></svg>`,
     name: 'line-view'
@@ -2658,6 +2678,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsBrandAskIcon: gdsBrandAskIcon,
     gdsBrandCreateIcon: gdsBrandCreateIcon,
     gdsBrandGearIcon: gdsBrandGearIcon,
+    gdsBrandIconIcon: gdsBrandIconIcon,
     gdsBrandInboxIcon: gdsBrandInboxIcon,
     gdsBrandTimerIcon: gdsBrandTimerIcon,
     gdsCaIcon: gdsCaIcon,
@@ -3056,16 +3077,19 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLineCurrencyDollarIcon: gdsLineCurrencyDollarIcon,
     gdsLineCurrencyEuroIcon: gdsLineCurrencyEuroIcon,
     gdsLineCurrencyPoundIcon: gdsLineCurrencyPoundIcon,
+    gdsLineCursorHoverIcon: gdsLineCursorHoverIcon,
     gdsLineDatabaseLinkIcon: gdsLineDatabaseLinkIcon,
     gdsLineDateIcon: gdsLineDateIcon,
     gdsLineDeleteIcon: gdsLineDeleteIcon,
     gdsLineDescriptionIcon: gdsLineDescriptionIcon,
     gdsLineDetailsIcon: gdsLineDetailsIcon,
     gdsLineDisconnectIcon: gdsLineDisconnectIcon,
+    gdsLineDismissCircleIcon: gdsLineDismissCircleIcon,
     gdsLineDismissIcon: gdsLineDismissIcon,
     gdsLineDocumentAddIcon: gdsLineDocumentAddIcon,
     gdsLineDocumentIcon: gdsLineDocumentIcon,
     gdsLineDocumentMultipleIcon: gdsLineDocumentMultipleIcon,
+    gdsLineDocumentOnePageSparkleIcon: gdsLineDocumentOnePageSparkleIcon,
     gdsLineDocumentPreviewIcon: gdsLineDocumentPreviewIcon,
     gdsLineDocumentSyncIcon: gdsLineDocumentSyncIcon,
     gdsLineDocumentTableIcon: gdsLineDocumentTableIcon,
@@ -3201,6 +3225,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLineUpIcon: gdsLineUpIcon,
     gdsLineUpLeftIcon: gdsLineUpLeftIcon,
     gdsLineUpRightIcon: gdsLineUpRightIcon,
+    gdsLineUploadIcon: gdsLineUploadIcon,
     gdsLineViewIcon: gdsLineViewIcon,
     gdsLineWalletIcon: gdsLineWalletIcon,
     gdsLineWebsiteIcon: gdsLineWebsiteIcon,
@@ -4516,6 +4541,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class GdsTooltipComponent extends OnBrandChanged {
     #document = inject(DOCUMENT);
+    #destroyRef = inject(DestroyRef);
+    #isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "#isOverflowing" }] : /* istanbul ignore next */ []));
+    #resizeObserver = new ResizeObserver(() => this.#measureOverflow());
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     tooltip = input.required(...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
     onlyTextOverflow = input(false, { ...(ngDevMode ? { debugName: "onlyTextOverflow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -4526,20 +4554,32 @@ class GdsTooltipComponent extends OnBrandChanged {
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     maxWidth = input('100vw', ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
     appendTo = input(this.#document.body, ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    lineClamp = input(1, { ...(ngDevMode ? { debugName: "lineClamp" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    tooltipOffset = input([0, 0], ...(ngDevMode ? [{ debugName: "tooltipOffset" }] : /* istanbul ignore next */ []));
     tooltipVariation = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
+    tooltipEnabled = computed(() => !this.disabled() && (!this.onlyTextOverflow() || this.#isOverflowing()), ...(ngDevMode ? [{ debugName: "tooltipEnabled" }] : /* istanbul ignore next */ []));
     tippyDirective = viewChild.required(TippyDirective);
     span = viewChild.required('span');
-    get isOverflowing() {
-        const span = this.span();
-        if (!span)
-            return false;
-        return span.nativeElement.clientWidth < span.nativeElement.scrollWidth;
-    }
+    #observeSize = afterNextRender(() => {
+        this.#resizeObserver.observe(this.span().nativeElement);
+        this.#destroyRef.onDestroy(() => this.#resizeObserver.disconnect());
+    });
+    #measureOnRender = afterRenderEffect({
+        read: () => {
+            this.tooltip();
+            this.#measureOverflow();
+        }
+    });
+    #updateOffset = afterRenderEffect(() => {
+        // binding [tpOffset] to the template does not work due to Helipopper applying only on ngOnChanges which signal inputs do not trigger.
+        // So we manually update the offset after render;
+        this.tippyDirective().updateProps({ offset: this.tooltipOffset() });
+    });
     #openOnOpen = effect(() => {
         const directive = this.tippyDirective();
         if (!directive)
             return;
-        if (this.open() && (!this.onlyTextOverflow() || this.isOverflowing)) {
+        if (this.open() && (!this.onlyTextOverflow() || this.#isOverflowing())) {
             // give the component time to render before triggering this
             // in case show is true initially
             setTimeout(() => {
@@ -4550,13 +4590,31 @@ class GdsTooltipComponent extends OnBrandChanged {
             directive.hide();
         }
     }, ...(ngDevMode ? [{ debugName: "#openOnOpen" }] : /* istanbul ignore next */ []));
+    #measureOverflow = () => {
+        if (!this.onlyTextOverflow()) {
+            this.#isOverflowing.set(false);
+            return;
+        }
+        const el = this.span()?.nativeElement;
+        if (!el) {
+            this.#isOverflowing.set(false);
+            return;
+        }
+        // 1px slack avoids subpixel false positives. Line-clamp overflow is height-only;
+        // width is a false positive on -webkit-box.
+        const overflowing = this.lineClamp() > 1 ? el.scrollHeight - el.clientHeight > 1 : el.scrollWidth - el.clientWidth > 1;
+        this.#isOverflowing.set(overflowing);
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTooltipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTooltipComponent, isStandalone: true, selector: "gds-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, onlyTextOverflow: { classPropertyName: "onlyTextOverflow", publicName: "onlyTextOverflow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, tooltipInteractive: { classPropertyName: "tooltipInteractive", publicName: "tooltipInteractive", isSignal: true, isRequired: false, transformFunction: null }, useHostWidth: { classPropertyName: "useHostWidth", publicName: "useHostWidth", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tippyDirective", first: true, predicate: TippyDirective, descendants: true, isSignal: true }, { propertyName: "span", first: true, predicate: ["span"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TippyDirective }], ngImport: i0, template: "<span\n  #span\n  class=\"gds-tooltip_container\"\n  [tp]=\"tooltip()\"\n  [tpVariation]=\"tooltipVariation()\"\n  [tpPlacement]=\"tooltipPlacement()\"\n  [tpInteractive]=\"tooltipInteractive()\"\n  [tpIsEnabled]=\"!disabled()\"\n  [tpUseHostWidth]=\"useHostWidth()\"\n  [tpOnlyTextOverflow]=\"onlyTextOverflow()\"\n  [tpUseTextContent]=\"!tooltip()\"\n  [tpMaxWidth]=\"maxWidth()\"\n  [tpAppendTo]=\"appendTo()\"\n>\n  <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTooltipComponent, isStandalone: true, selector: "gds-tooltip", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, onlyTextOverflow: { classPropertyName: "onlyTextOverflow", publicName: "onlyTextOverflow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, tooltipInteractive: { classPropertyName: "tooltipInteractive", publicName: "tooltipInteractive", isSignal: true, isRequired: false, transformFunction: null }, useHostWidth: { classPropertyName: "useHostWidth", publicName: "useHostWidth", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, tooltipOffset: { classPropertyName: "tooltipOffset", publicName: "tooltipOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--line-clamp": "lineClamp() > 1 ? lineClamp() : null", "attr.line-clamp": "lineClamp() > 1 ? lineClamp() : null" } }, viewQueries: [{ propertyName: "tippyDirective", first: true, predicate: TippyDirective, descendants: true, isSignal: true }, { propertyName: "span", first: true, predicate: ["span"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TippyDirective }], ngImport: i0, template: "<span\n  #span\n  class=\"gds-tooltip_container\"\n  [tp]=\"tooltip()\"\n  [tpVariation]=\"tooltipVariation()\"\n  [tpPlacement]=\"tooltipPlacement()\"\n  [tpInteractive]=\"tooltipInteractive()\"\n  [tpIsEnabled]=\"tooltipEnabled()\"\n  [tpUseHostWidth]=\"useHostWidth()\"\n  [tpUseTextContent]=\"!tooltip()\"\n  [tpMaxWidth]=\"maxWidth()\"\n  [tpAppendTo]=\"appendTo()\"\n>\n  <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host[line-clamp] .gds-tooltip_container{white-space:normal;display:-webkit-box;line-clamp:var(--line-clamp);-webkit-line-clamp:var(--line-clamp);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-tooltip', hostDirectives: [TippyDirective], imports: [TippyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  #span\n  class=\"gds-tooltip_container\"\n  [tp]=\"tooltip()\"\n  [tpVariation]=\"tooltipVariation()\"\n  [tpPlacement]=\"tooltipPlacement()\"\n  [tpInteractive]=\"tooltipInteractive()\"\n  [tpIsEnabled]=\"!disabled()\"\n  [tpUseHostWidth]=\"useHostWidth()\"\n  [tpOnlyTextOverflow]=\"onlyTextOverflow()\"\n  [tpUseTextContent]=\"!tooltip()\"\n  [tpMaxWidth]=\"maxWidth()\"\n  [tpAppendTo]=\"appendTo()\"\n>\n  <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}\n"] }]
-        }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], onlyTextOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyTextOverflow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], tooltipInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipInteractive", required: false }] }], useHostWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "useHostWidth", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], tippyDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TippyDirective), { isSignal: true }] }], span: [{ type: i0.ViewChild, args: ['span', { isSignal: true }] }] } });
+            args: [{ selector: 'gds-tooltip', hostDirectives: [TippyDirective], imports: [TippyDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.--line-clamp]': 'lineClamp() > 1 ? lineClamp() : null',
+                        '[attr.line-clamp]': 'lineClamp() > 1 ? lineClamp() : null'
+                    }, template: "<span\n  #span\n  class=\"gds-tooltip_container\"\n  [tp]=\"tooltip()\"\n  [tpVariation]=\"tooltipVariation()\"\n  [tpPlacement]=\"tooltipPlacement()\"\n  [tpInteractive]=\"tooltipInteractive()\"\n  [tpIsEnabled]=\"tooltipEnabled()\"\n  [tpUseHostWidth]=\"useHostWidth()\"\n  [tpUseTextContent]=\"!tooltip()\"\n  [tpMaxWidth]=\"maxWidth()\"\n  [tpAppendTo]=\"appendTo()\"\n>\n  <ng-content />\n</span>\n", styles: ["@layer design-system{:host{display:flex;min-width:0}:host .gds-tooltip_container{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host[line-clamp] .gds-tooltip_container{white-space:normal;display:-webkit-box;line-clamp:var(--line-clamp);-webkit-line-clamp:var(--line-clamp);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}}\n"] }]
+        }], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], onlyTextOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyTextOverflow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPlacement", required: false }] }], tooltipInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipInteractive", required: false }] }], useHostWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "useHostWidth", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], lineClamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineClamp", required: false }] }], tooltipOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOffset", required: false }] }], tippyDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TippyDirective), { isSignal: true }] }], span: [{ type: i0.ViewChild, args: ['span', { isSignal: true }] }] } });
 
 class GdsChipComponent extends OnBrandChanged {
     text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
@@ -4625,7 +4683,7 @@ class GdsChipComponent extends OnBrandChanged {
         return map[chipText.toLowerCase()] ?? 'grey';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChipComponent, isStandalone: true, selector: "gds-chip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.rounded": "this.roundedAttr", "attr.btn": "this.hasDismiss", "attr.width": "this.widthStyle", "attr.compact": "this.compactAttr", "style.--background-color": "this.backgroundStyle", "style.--color": "this.textColorStyle" } }, usesInheritance: true, ngImport: i0, template: "<gds-tooltip\n  onlyTextOverflow\n  [tooltip]=\"text() | titlecase\"\n>\n  {{ text() }}\n</gds-tooltip>\n@if (hasDismiss) {\n  <gds-icon\n    class=\"\n      gds-chip_dismiss\n      gds-icon-size-3xs\n    \"\n    key=\"line-dismiss\"\n    (click)=\"handleDismissed($event)\"\n  />\n}\n", styles: ["@layer design-system{:host{--border-radius: var(--gds-borderRadius-sm);--text-transform: uppercase;--cursor: default;--padding: var(--gds-spacing-2xs) var(--gds-spacing-xs);--min-height: 32px}:host[rounded]{--border-radius: var(--gds-borderRadius-lg);--text-transform: capitalize}:host[btn=true]{--cursor: pointer}:host[width=fixed]{--min-width: 124px;--max-width: 124px}:host[width=auto]{--min-width: auto;--max-width: 100%}:host[width=fit-content]{--min-width: fit-content;--max-width: fit-content}:host[compact]{--padding: 3px var(--gds-spacing-2xs);--min-height: 20px}:host{font:var(--gds-text-captionStrong-shorthand);border-radius:var(--border-radius);text-transform:var(--text-transform);min-width:var(--min-width);max-width:var(--max-width);padding:var(--padding);min-height:var(--min-height);cursor:var(--cursor);color:var(--color);background-color:var(--background-color);display:inline-flex;align-items:center;justify-content:center;height:fit-content;gap:var(--gds-spacing-2xs)}:host .gds-chip_dismiss{margin-left:auto}}\n"], dependencies: [{ kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsChipComponent, isStandalone: true, selector: "gds-chip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.rounded": "this.roundedAttr", "attr.btn": "this.hasDismiss", "attr.width": "this.widthStyle", "attr.compact": "this.compactAttr", "style.--background-color": "this.backgroundStyle", "style.--color": "this.textColorStyle" } }, usesInheritance: true, ngImport: i0, template: "<gds-tooltip\n  onlyTextOverflow\n  [tooltip]=\"text() | titlecase\"\n>\n  {{ text() }}\n</gds-tooltip>\n@if (hasDismiss) {\n  <gds-icon\n    class=\"\n      gds-chip_dismiss\n      gds-icon-size-3xs\n    \"\n    key=\"line-dismiss\"\n    (click)=\"handleDismissed($event)\"\n  />\n}\n", styles: ["@layer design-system{:host{--border-radius: var(--gds-borderRadius-sm);--text-transform: uppercase;--cursor: default;--padding: var(--gds-spacing-2xs) var(--gds-spacing-xs);--min-height: 32px}:host[rounded]{--border-radius: var(--gds-borderRadius-lg);--text-transform: capitalize}:host[btn=true]{--cursor: pointer}:host[width=fixed]{--min-width: 124px;--max-width: 124px}:host[width=auto]{--min-width: auto;--max-width: 100%}:host[width=fit-content]{--min-width: fit-content;--max-width: fit-content}:host[compact]{--padding: 3px var(--gds-spacing-2xs);--min-height: 20px}:host{font:var(--gds-text-captionStrong-shorthand);border-radius:var(--border-radius);text-transform:var(--text-transform);min-width:var(--min-width);max-width:var(--max-width);padding:var(--padding);min-height:var(--min-height);cursor:var(--cursor);color:var(--color);background-color:var(--background-color);display:inline-flex;align-items:center;justify-content:center;height:fit-content;gap:var(--gds-spacing-2xs)}:host .gds-chip_dismiss{margin-left:auto}}\n"], dependencies: [{ kind: "component", type: GdsTooltipComponent, selector: "gds-tooltip", inputs: ["tooltip", "onlyTextOverflow", "disabled", "tooltipPlacement", "tooltipInteractive", "useHostWidth", "open", "maxWidth", "appendTo", "lineClamp", "tooltipOffset"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChipComponent, decorators: [{
             type: Component,
@@ -5196,7 +5254,7 @@ class GdsDocumentItemComponent {
         return !this.clicked.observed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDocumentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDocumentItemComponent, isStandalone: true, selector: "gds-document-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", clicked: "clicked" }, ngImport: i0, template: "<button\n  gds-item-display\n  class=\"gds-mobile-padding-sm\"\n  [ngClass]=\"{ active: active(), 'suppress-click': suppressClick }\"\n  [suppressDismiss]=\"suppressDismissed\"\n  (click)=\"clicked.emit()\"\n  (dismissed)=\"dismissed.emit()\"\n>\n  <gds-icon [key]=\"ext | gdsDoctypeToIcon\" />\n  <div\n    class=\"\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-xs\n      gds-min-width-0\n      gds-mobile-align-items-start\n      gds-mobile-flex-column\n      gds-row-gap-3xs\n      gds-width-100-parent\n    \"\n  >\n    <gds-tooltip\n      [tooltip]=\"fileName\"\n      onlyTextOverflow\n      class=\"\n        gds-mobile-text-body\n        gds-text-body-strong\n        gds-text-primary-primary\n        gds-text-start\n        gds-width-100-parent\n      \"\n    >\n      {{ fileName }}\n    </gds-tooltip>\n\n    @if (subtitle()) {\n      <span class=\"\n        gds-min-width-fit-content\n        gds-text-caption\n        gds-text-primary\n      \">{{ subtitle() }}</span>\n    }\n  </div>\n</button>\n", styles: ["@layer design-system{:host .suppress-click{cursor:default}}\n"], dependencies: [{ kind: "component", type: GdsItemDisplayComponent, selector: "gds-item-display, button[gds-item-display]", inputs: ["suppressDismiss"], outputs: ["dismissed"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsDoctypeToIconPipe, name: "gdsDoctypeToIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDocumentItemComponent, isStandalone: true, selector: "gds-document-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", clicked: "clicked" }, ngImport: i0, template: "<button\n  gds-item-display\n  class=\"gds-mobile-padding-sm\"\n  [ngClass]=\"{ active: active(), 'suppress-click': suppressClick }\"\n  [suppressDismiss]=\"suppressDismissed\"\n  (click)=\"clicked.emit()\"\n  (dismissed)=\"dismissed.emit()\"\n>\n  <gds-icon [key]=\"ext | gdsDoctypeToIcon\" />\n  <div\n    class=\"\n      gds-align-items-center\n      gds-display-flex\n      gds-gap-xs\n      gds-min-width-0\n      gds-mobile-align-items-start\n      gds-mobile-flex-column\n      gds-row-gap-3xs\n      gds-width-100-parent\n    \"\n  >\n    <gds-tooltip\n      [tooltip]=\"fileName\"\n      onlyTextOverflow\n      class=\"\n        gds-mobile-text-body\n        gds-text-body-strong\n        gds-text-primary-primary\n        gds-text-start\n        gds-width-100-parent\n      \"\n    >\n      {{ fileName }}\n    </gds-tooltip>\n\n    @if (subtitle()) {\n      <span class=\"\n        gds-min-width-fit-content\n        gds-text-caption\n        gds-text-primary\n      \">{{ subtitle() }}</span>\n    }\n  </div>\n</button>\n", styles: ["@layer design-system{:host .suppress-click{cursor:default}}\n"], dependencies: [{ kind: "component", type: GdsItemDisplayComponent, selector: "gds-item-display, button[gds-item-display]", inputs: ["suppressDismiss"], outputs: ["dismissed"] }, { 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", "lineClamp", "tooltipOffset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: GdsDoctypeToIconPipe, name: "gdsDoctypeToIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDocumentItemComponent, decorators: [{
             type: Component,
@@ -5328,6 +5386,414 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, 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 GdsTextInputComponent extends GdsSignalFormContainer {
+    input = contentChild(GdsNativeInputDirective, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    #elementRef = inject((ElementRef));
+    nativeElement = this.#elementRef.nativeElement;
+    ngAfterContentInit() {
+        if (!this.input()) {
+            throw new Error('GdsNativeInputDirective is required for this component. Please update the imports to include GdsNativeInputDirective.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTextInputComponent, isStandalone: true, selector: "gds-text-input", host: { listeners: { "click": "input()?.nativeElement?.focus()" }, classAttribute: "gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input\n      gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\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)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'gds-text-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(click)': 'input()?.nativeElement?.focus()',
+                        class: `gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input
+      gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile`
+                    }, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\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)}}\n"] }]
+        }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
+
+const CDK_MENU_CONNECTED_POSITIONS = [
+    {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -4
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+const CDK_MENU_CONNECTED_POSITIONS_TOP = [
+    {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -4
+    },
+    {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+/** for use when the context menu is close to the right side of the container
+ *  so that it doesn't go over the edge, per UX
+ */
+const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_RIGHT = [
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+/** for use when the context menu is close to the left side of the container
+ *  so that it doesn't go over the edge, per UX
+ */
+const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_LEFT = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+
+class GdsDrilldownSelectComponent extends GdsSignalFormControl {
+    #injector = inject(Injector);
+    #destroyRef = inject(DestroyRef);
+    #directive = inject(CdkMenuTrigger);
+    #elementRef = inject(ElementRef);
+    #formField = inject(FormField, { self: true, optional: true });
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    bindValue = input.required(...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
+    bindLabel = input.required(...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    searchable = input(true, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    maxMenuHeight = input('240px', ...(ngDevMode ? [{ debugName: "maxMenuHeight" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    mobileCancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "mobileCancelLabel" }] : /* istanbul ignore next */ []));
+    resetLabel = input('Reset', ...(ngDevMode ? [{ debugName: "resetLabel" }] : /* istanbul ignore next */ []));
+    emptyText = input('No results found', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    backAriaLabel = input('Go back', ...(ngDevMode ? [{ debugName: "backAriaLabel" }] : /* istanbul ignore next */ []));
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    navStack = signal([], ...(ngDevMode ? [{ debugName: "navStack" }] : /* istanbul ignore next */ []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    #selectedPath = signal([], ...(ngDevMode ? [{ debugName: "#selectedPath" }] : /* istanbul ignore next */ []));
+    /** Drill/back/reset clicks cause cdkMenu to close; This flag is used to keep the menu open after these actions. */
+    #reopenAfterInternalNavigation = false;
+    /** Ignore FocusMonitor open after close — cdkMenu refocuses the trigger on escape or hitting enter on a leaf (Escape/select). */
+    #suppressOpenOnFocus = false;
+    menu = viewChild.required('menu');
+    displayedOptions = computed(() => {
+        const searchText = this.searchText().trim().toLowerCase();
+        const stack = this.navStack();
+        const currentOptions = stack[stack.length - 1]?.children ?? this.options();
+        if (!searchText) {
+            return currentOptions;
+        }
+        return this.#flattenOptions(this.options()).filter((option) => String(option[this.bindLabel()]).toLowerCase().includes(searchText));
+    }, ...(ngDevMode ? [{ debugName: "displayedOptions" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.#selectedPath()
+        .map((option) => this.optionLabel(option))
+        .join(' > '), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    activeItems = computed(() => this.#selectedPath().map((option) => option[this.bindValue()]), ...(ngDevMode ? [{ debugName: "activeItems" }] : /* istanbul ignore next */ []));
+    hasNavHeader = computed(() => this.navStack().length > 0 || (this.clearable() && !!this.label()), ...(ngDevMode ? [{ debugName: "hasNavHeader" }] : /* istanbul ignore next */ []));
+    #syncSelectedOption = effect(() => {
+        const pathValues = this.value();
+        this.options();
+        this.bindValue();
+        untracked(() => this.#selectedPath.set(this.#resolvePath(this.options(), pathValues ?? [])));
+    }, ...(ngDevMode ? [{ debugName: "#syncSelectedOption" }] : /* istanbul ignore next */ []));
+    #setupMenuTemplateRef = effect(() => {
+        const menu = this.menu();
+        this.#directive.menuTemplateRef = !this.disabled() ? menu : null;
+    }, ...(ngDevMode ? [{ debugName: "#setupMenuTemplateRef" }] : /* istanbul ignore next */ []));
+    #setMenuPosition = effect(() => {
+        this.#directive.menuPosition = CDK_MENU_CONNECTED_POSITIONS;
+    }, ...(ngDevMode ? [{ debugName: "#setMenuPosition" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Use FocusMonitor instead of (focus) binding so the menu opens on keyboard focus.
+        // For mouse focus, cdkMenuTrigger handles it thru its own click handler.
+        inject(FocusMonitor)
+            .monitor(this.#elementRef.nativeElement)
+            .pipe(takeUntilDestroyed())
+            .subscribe((focusOrigin) => {
+            if (focusOrigin === 'keyboard' && !this.#suppressOpenOnFocus) {
+                this.openMenu();
+            }
+        });
+        this.#directive.opened.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.isOpen.set(true);
+            if (!this.#reopenAfterInternalNavigation) {
+                this.searchText.set('');
+                this.#syncNavStackToSelection();
+                this.#formField?.state().reset(); // Prevents layout shift with error messages. When opening menu, sets touched to false so error messages are not rendered behind the menu.
+            }
+            this.#reopenAfterInternalNavigation = false;
+            this.#scheduleMenuItemFocus();
+        });
+        this.#directive.closed.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.isOpen.set(false);
+            this.#suppressOpenOnFocus = true;
+            setTimeout(() => {
+                this.#suppressOpenOnFocus = false;
+            });
+            if (this.#reopenAfterInternalNavigation) {
+                afterNextRender({
+                    write: () => {
+                        this.openMenu();
+                    }
+                }, { injector: this.#injector });
+                return;
+            }
+            this.#formField?.state().markAsTouched(); //
+            this.navStack.set([]);
+            this.searchText.set('');
+        });
+    }
+    ngAfterViewInit() {
+        const resizeObserver = new ResizeObserver((entries) => {
+            if (entries.length > 0) {
+                this.dropdownWidth.set(entries[0].target.clientWidth);
+            }
+        });
+        resizeObserver.observe(this.#elementRef.nativeElement);
+        this.#destroyRef.onDestroy(() => resizeObserver.disconnect());
+    }
+    onItemClick = (option) => {
+        const path = this.searchText().trim()
+            ? this.#findOptionPathByRef(this.options(), option)
+            : [...this.navStack(), option];
+        this.#setValue(path.map((item) => String(item[this.bindValue()])), true);
+    };
+    onDrilldownClick = (option) => {
+        this.searchText.set('');
+        this.navStack.set(this.#findOptionPathByRef(this.options(), option));
+        // CDKMenu closes when it loses focus. When navStack > 2 and triggers internal navigation, the menu will not close because the menu doesn't lose focus.
+        // Force closing to be consistent so the closed subscription can reopen the menu when internal navigation is triggered. (Same as onBack and onReset and onBreadcrumbClick)
+        this.#reopenAfterInternalNavigation = true;
+        this.#directive.close();
+    };
+    onBack = () => {
+        this.searchText.set('');
+        this.navStack.update((stack) => stack.slice(0, -1));
+        this.#reopenAfterInternalNavigation = true;
+        this.#directive.close();
+    };
+    onReset = () => {
+        this.searchText.set('');
+        this.navStack.set([]);
+        this.#setValue([], false);
+        this.#reopenAfterInternalNavigation = true;
+        this.#directive.close();
+        this.#formField?.state().reset(); // Updating the value to [] renders error message behind the menu. This makes sure touched is false until user closes the menu.
+    };
+    onBreadcrumbClick = (index) => {
+        this.searchText.set('');
+        this.navStack.update((stack) => stack.slice(0, index + 1));
+        this.#reopenAfterInternalNavigation = true;
+        this.#directive.close();
+    };
+    onSearch = (event) => {
+        this.searchText.set(event.target.value);
+    };
+    onSearchKeydown = (event) => {
+        // Typing something in the search causes the menu to focus on a search result.
+        // This allows continous typing without losing focus unless escape/tab/arrowdown key is pressed.
+        if (event.code !== 'Escape' && event.code !== 'Tab' && event.code !== 'ArrowDown') {
+            event.stopPropagation();
+        }
+    };
+    onEscape = () => {
+        this.#directive.close();
+        this.#suppressOpenOnFocus = true;
+        this.#elementRef.nativeElement.focus();
+    };
+    openMenu = () => {
+        if (this.disabled()) {
+            return;
+        }
+        this.#directive.open();
+    };
+    optionLabel = (option) => String(option[this.bindLabel()]);
+    onArrowRight = (option) => {
+        if (option.children?.length) {
+            this.onDrilldownClick(option);
+        }
+    };
+    onArrowLeft = () => {
+        if (this.navStack().length) {
+            this.onBack();
+        }
+    };
+    #setValue = (pathValues, closeMenu = true) => {
+        this.value.set(pathValues);
+        this.touched.set(true);
+        if (closeMenu) {
+            // Focus trigger then close; #suppressOpenOnFocus in onEscape prevents FocusMonitor reopen.
+            afterNextRender({
+                read: () => {
+                    this.#elementRef.nativeElement.focus();
+                    this.onEscape();
+                }
+            }, { injector: this.#injector });
+        }
+    };
+    #resolvePath = (options, pathValues) => {
+        if (!pathValues.length) {
+            return [];
+        }
+        const path = [];
+        let levelOptions = options;
+        for (const value of pathValues) {
+            const match = levelOptions.find((option) => String(option[this.bindValue()]) === value);
+            if (!match) {
+                return [];
+            }
+            path.push(match);
+            levelOptions = match.children ?? [];
+        }
+        return path;
+    };
+    #flattenOptions = (options) => options.flatMap((option) => [option, ...(option.children?.length ? this.#flattenOptions(option.children) : [])]);
+    /** Open at the parent of the selected leaf so the leaf is visible in the current list. */
+    #syncNavStackToSelection = () => {
+        this.navStack.set(this.#selectedPath().slice(0, -1));
+    };
+    #scheduleMenuItemFocus = () => {
+        afterNextRender({
+            write: () => {
+                // Defer past CDK Menu's focusFirstItem so we can override it.
+                setTimeout(() => this.#focusSelectedMenuItemOrTrigger());
+            }
+        }, { injector: this.#injector });
+    };
+    #focusSelectedMenuItemOrTrigger = () => {
+        const menu = this.#directive.getMenu();
+        if (!menu?.items?.length) {
+            return;
+        }
+        const selectedPath = this.#selectedPath();
+        const selectedAtLevel = selectedPath[this.navStack().length];
+        const selectedValue = selectedAtLevel?.[this.bindValue()];
+        const selectedIndex = selectedValue === undefined || selectedValue === null || selectedValue === ''
+            ? -1
+            : this.displayedOptions().findIndex((option) => String(option[this.bindValue()]) === String(selectedValue));
+        if (selectedIndex >= 0) {
+            const item = menu.items.get(selectedIndex);
+            if (item) {
+                menu.setActiveMenuItem(item);
+                return;
+            }
+        }
+        // Prefer trigger over first item so ArrowDown (CdkMenuTrigger) is what enters the list.
+        this.#elementRef.nativeElement.focus({ preventScroll: true });
+    };
+    #findOptionPathByRef = (options, target, parents = []) => {
+        for (const option of options) {
+            const path = [...parents, option];
+            if (option === target) {
+                return path;
+            }
+            if (option.children?.length) {
+                const found = this.#findOptionPathByRef(option.children, target, path);
+                if (found.length > 0) {
+                    return found;
+                }
+            }
+        }
+        return [];
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsDrilldownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsDrilldownSelectComponent, isStandalone: true, selector: "gds-drilldown-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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, maxMenuHeight: { classPropertyName: "maxMenuHeight", publicName: "maxMenuHeight", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, mobileCancelLabel: { classPropertyName: "mobileCancelLabel", publicName: "mobileCancelLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, backAriaLabel: { classPropertyName: "backAriaLabel", publicName: "backAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "button" }, listeners: { "keydown.escape": "onEscape()", "keydown.arrowleft": "onArrowLeft()" }, properties: { "attr.tabindex": "disabled() ? -1 : 0", "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      gds-outline-none\n    " }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0, template: "<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label(), 'gds-user-select-none': !label() }\"\n>\n  {{ label() ? label() : placeholder() }}\n</div>\n\n<gds-icon\n  class=\"\n    gds-icon-primary\n    gds-icon-size-2xs\n  \"\n  key=\"line-chevron-down-stroke\"\n/>\n\n<ng-template #menu>\n  <gds-dropdown\n    [mobileCancelLabel]=\"mobileCancelLabel()\"\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-padding-block-end-2xs\n        gds-padding-block-start-3xs\n        gds-padding-inline-2xs\n      \"\n    >\n      @if (hasNavHeader()) {\n        <div class=\"\n          gds-align-items-center\n          gds-display-flex\n          gds-gap-2xs\n          gds-padding-block-end-2xs\n        \">\n          @if (navStack().length) {\n            <button\n              gds-icon-button\n              variant=\"invisible\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBack()\"\n              [attr.aria-label]=\"backAriaLabel()\"\n            >\n              <gds-icon\n                key=\"line-arrow-left\"\n                class=\"\n                  gds-icon-primary\n                  gds-icon-size-2xs\n                \"\n              />\n            </button>\n          }\n\n          @if (clearable() && label()) {\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n                reset-button\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onReset()\"\n            >\n              {{ resetLabel() }}\n            </button>\n          }\n\n          @for (crumb of navStack(); track $index) {\n            @if ((clearable() && label()) || $index > 0) {\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"\n                  gds-flex-0\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                \"\n              />\n            }\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                breadcrumb\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBreadcrumbClick($index)\"\n            >\n              {{ optionLabel(crumb) }}\n            </button>\n          }\n        </div>\n      }\n\n      @if (searchable()) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            gds-margin-block-end-2xs\n            search\n          \"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n          />\n        </gds-text-input>\n      }\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          gds-gap-3xs\n        \">\n          @for (option of displayedOptions(); track option[bindValue()]) {\n            @if (option.children?.length) {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-gap-xs\n                  gds-padding-block-2xs\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                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (pointerdown)=\"$event.stopPropagation()\"\n                (cdkMenuItemTriggered)=\"onDrilldownClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                tabindex=\"-1\"\n              >\n                <span class=\"\n                  gds-flex-1\n                  gds-min-width-0\n                  gds-truncate\n                \">{{ option[bindLabel()] }}</span>\n                <gds-icon\n                  key=\"line-chevron-right-stroke\"\n                  class=\"\n                    gds-flex-0\n                    gds-icon-primary\n                    gds-icon-size-2xs\n                  \"\n                />\n              </div>\n            } @else {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-padding-block-2xs\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                tabindex=\"-1\"\n                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (cdkMenuItemTriggered)=\"onItemClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n              >\n                {{ option[bindLabel()] }}\n              </div>\n            }\n          } @empty {\n            <div class=\"\n              gds-padding-block-2xs\n              gds-padding-inline-sm\n              gds-text-body\n              gds-text-secondary\n            \">\n              {{ emptyText() }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </gds-dropdown>\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{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)}.reset-button,.breadcrumb{--gds-button-color: var(--gds-palette-text-default-secondary);--gds-button-color-hover: var(--gds-palette-text-default-secondary)}.search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}.item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.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: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "component", type: GdsDropdownComponent, selector: "gds-dropdown", inputs: ["triggerElement", "horizontal", "preventMobileStyling", "allowDefaultTabBehavior", "mobileCancelLabel"] }, { kind: "component", type: GdsTextInputComponent, selector: "gds-text-input" }, { kind: "directive", type: GdsNativeInputDirective, selector: "input" }, { 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: GdsDrilldownSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gds-drilldown-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CdkMenuTrigger,
+                        GdsButtonComponent,
+                        GdsDropdownComponent,
+                        GdsTextInputComponent,
+                        GdsNativeInputDirective,
+                        CdkMenuItem,
+                        CdkTargetMenuAim,
+                        GdsIconComponent,
+                        NgClass,
+                        GdsIconButtonComponent
+                    ], host: {
+                        role: 'button',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
+                        class: `
+      gds-align-items-center
+      gds-display-flex
+      gds-gap-2xs
+      gds-justify-content-between
+      gds-mobile-padding-block-0
+      gds-mobile-text-input-mobile
+      gds-padding-block-3xs
+      gds-padding-inline-xs
+      gds-radius-sm
+      gds-text-input
+      gds-outline-none
+    `,
+                        '[class.is-controlled]': 'isOpen()',
+                        '(keydown.escape)': 'onEscape()',
+                        '(keydown.arrowleft)': 'onArrowLeft()'
+                    }, hostDirectives: [CdkMenuTrigger], template: "<div\n  class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-truncate\n    label\n  \"\n  [ngClass]=\"{ placeholder: !label(), 'gds-user-select-none': !label() }\"\n>\n  {{ label() ? label() : placeholder() }}\n</div>\n\n<gds-icon\n  class=\"\n    gds-icon-primary\n    gds-icon-size-2xs\n  \"\n  key=\"line-chevron-down-stroke\"\n/>\n\n<ng-template #menu>\n  <gds-dropdown\n    [mobileCancelLabel]=\"mobileCancelLabel()\"\n    cdkTargetMenuAim\n    preventMobileStyling\n    allowDefaultTabBehavior\n    [style.minWidth]=\"dropdownWidth() + 'px'\"\n  >\n    <div\n      class=\"\n        gds-display-flex\n        gds-flex-column\n        gds-padding-block-end-2xs\n        gds-padding-block-start-3xs\n        gds-padding-inline-2xs\n      \"\n    >\n      @if (hasNavHeader()) {\n        <div class=\"\n          gds-align-items-center\n          gds-display-flex\n          gds-gap-2xs\n          gds-padding-block-end-2xs\n        \">\n          @if (navStack().length) {\n            <button\n              gds-icon-button\n              variant=\"invisible\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBack()\"\n              [attr.aria-label]=\"backAriaLabel()\"\n            >\n              <gds-icon\n                key=\"line-arrow-left\"\n                class=\"\n                  gds-icon-primary\n                  gds-icon-size-2xs\n                \"\n              />\n            </button>\n          }\n\n          @if (clearable() && label()) {\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                gds-min-height-0\n                gds-padding-0\n                reset-button\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onReset()\"\n            >\n              {{ resetLabel() }}\n            </button>\n          }\n\n          @for (crumb of navStack(); track $index) {\n            @if ((clearable() && label()) || $index > 0) {\n              <gds-icon\n                key=\"line-chevron-right-stroke\"\n                class=\"\n                  gds-flex-0\n                  gds-icon-primary\n                  gds-icon-size-3xs\n                \"\n              />\n            }\n            <button\n              gds-button\n              variant=\"invisible\"\n              size=\"small\"\n              class=\"\n                breadcrumb\n                gds-min-height-0\n                gds-padding-0\n              \"\n              (pointerdown)=\"$event.stopPropagation()\"\n              (clicked)=\"onBreadcrumbClick($index)\"\n            >\n              {{ optionLabel(crumb) }}\n            </button>\n          }\n        </div>\n      }\n\n      @if (searchable()) {\n        <gds-text-input\n          class=\"\n            gds-gap-xs\n            gds-margin-block-end-2xs\n            search\n          \"\n          (pointerdown)=\"$event.stopPropagation()\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <gds-icon\n            leading-visual\n            key=\"line-search\"\n            class=\"\n              gds-icon-secondary\n              gds-icon-size-2xs\n            \"\n          />\n          <input\n            type=\"text\"\n            class=\"\n              gds-background-none\n              gds-border-none\n              gds-flex-1\n              gds-min-width-0\n              gds-outline-none\n              gds-text-body\n            \"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchText()\"\n            (input)=\"onSearch($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n          />\n        </gds-text-input>\n      }\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          gds-gap-3xs\n        \">\n          @for (option of displayedOptions(); track option[bindValue()]) {\n            @if (option.children?.length) {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-gap-xs\n                  gds-padding-block-2xs\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                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (pointerdown)=\"$event.stopPropagation()\"\n                (cdkMenuItemTriggered)=\"onDrilldownClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                tabindex=\"-1\"\n              >\n                <span class=\"\n                  gds-flex-1\n                  gds-min-width-0\n                  gds-truncate\n                \">{{ option[bindLabel()] }}</span>\n                <gds-icon\n                  key=\"line-chevron-right-stroke\"\n                  class=\"\n                    gds-flex-0\n                    gds-icon-primary\n                    gds-icon-size-2xs\n                  \"\n                />\n              </div>\n            } @else {\n              <div\n                class=\"\n                  gds-align-items-center\n                  gds-display-flex\n                  gds-padding-block-2xs\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                tabindex=\"-1\"\n                [ngClass]=\"{ active: activeItems().includes(option[bindValue()]) }\"\n                cdkMenuItem\n                (cdkMenuItemTriggered)=\"onItemClick(option)\"\n                (keydown.escape)=\"onEscape()\"\n                (keydown.arrowleft)=\"onArrowLeft()\"\n                (keydown.arrowright)=\"onArrowRight(option)\"\n              >\n                {{ option[bindLabel()] }}\n              </div>\n            }\n          } @empty {\n            <div class=\"\n              gds-padding-block-2xs\n              gds-padding-inline-sm\n              gds-text-body\n              gds-text-secondary\n            \">\n              {{ emptyText() }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </gds-dropdown>\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{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)}.reset-button,.breadcrumb{--gds-button-color: var(--gds-palette-text-default-secondary);--gds-button-color-hover: var(--gds-palette-text-default-secondary)}.search{--gds-form-control-cursor: text;--gds-form-control-hover-color: var(--gds-palette-background-white);box-sizing:border-box}.item{cursor:pointer;--wrapper-margin-inline: 0px;--wrapper-margin-block: 2px}.item:hover:before,.item.active:before,.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 }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], maxMenuHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxMenuHeight", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], mobileCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileCancelLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], backAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backAriaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
+
 class GdsEmptyStateComponent extends OnBrandChanged {
     #cdnUrl = inject(CDN_URL);
     variant = input('info-circle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -5346,7 +5812,7 @@ class GdsEmptyStateComponent extends OnBrandChanged {
     titleTextSize = computed(() => `gds-text-${this.compact() ? 'subtitle' : 'title'}`, ...(ngDevMode ? [{ debugName: "titleTextSize" }] : /* istanbul ignore next */ []));
     otherTextSize = computed(() => `gds-text-${this.compact() ? 'caption' : 'body'}`, ...(ngDevMode ? [{ debugName: "otherTextSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsEmptyStateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsEmptyStateComponent, isStandalone: true, selector: "gds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, suppressIcon: { classPropertyName: "suppressIcon", publicName: "suppressIcon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-flex-column\n      gds-height-100-parent\n      gds-justify-content-center\n      gds-text-body\n      gds-text-center\n      gds-text-primary-primary\n      gds-width-100-parent\n      gds-gap-sm\n    " }, usesInheritance: true, ngImport: i0, template: "@if (!suppressIcon()) {\n  <img\n    class=\"icon\"\n    [src]=\"imageSrc()\"\n    alt=\"empty state icon\"\n  />\n}\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"titleTextSize()\"\n>\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n  <ng-content select=\"[button]\" />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-secondary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsEmptyStateComponent, isStandalone: true, selector: "gds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, suppressIcon: { classPropertyName: "suppressIcon", publicName: "suppressIcon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "\n      gds-align-items-center\n      gds-display-flex\n      gds-flex-column\n      gds-text-body\n      gds-text-center\n      gds-text-primary-primary\n      gds-width-100-parent\n      gds-gap-sm\n    " }, usesInheritance: true, ngImport: i0, template: "@if (!suppressIcon()) {\n  <img\n    class=\"icon\"\n    [src]=\"imageSrc()\"\n    alt=\"empty state icon\"\n  />\n}\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"titleTextSize()\"\n>\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n  <ng-content select=\"[button]\" />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-secondary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px;justify-content:center;height:100%}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"], dependencies: [{ 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: GdsEmptyStateComponent, decorators: [{
             type: Component,
@@ -5355,15 +5821,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       gds-align-items-center
       gds-display-flex
       gds-flex-column
-      gds-height-100-parent
-      gds-justify-content-center
       gds-text-body
       gds-text-center
       gds-text-primary-primary
       gds-width-100-parent
       gds-gap-sm
     `
-                    }, template: "@if (!suppressIcon()) {\n  <img\n    class=\"icon\"\n    [src]=\"imageSrc()\"\n    alt=\"empty state icon\"\n  />\n}\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"titleTextSize()\"\n>\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n  <ng-content select=\"[button]\" />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-secondary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"] }]
+                    }, template: "@if (!suppressIcon()) {\n  <img\n    class=\"icon\"\n    [src]=\"imageSrc()\"\n    alt=\"empty state icon\"\n  />\n}\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"titleTextSize()\"\n>\n  <ng-content />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-primary-primary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[subtitle]\" />\n</div>\n\n<div class=\"gds-display-none-empty\">\n  <ng-content select=\"[button]\" />\n</div>\n\n<div\n  class=\"\n    gds-display-none-empty\n    gds-text-secondary\n  \"\n  [ngClass]=\"otherTextSize()\"\n>\n  <ng-content select=\"[footer]\" />\n</div>\n", styles: ["@layer design-system{:host{--gds-empty-state-icon-size: 132px;justify-content:center;height:100%}:host .icon{height:var(--gds-empty-state-icon-size);width:var(--gds-empty-state-icon-size)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], suppressIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressIcon", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 
 const GDS_EMPTY_STATE_VARIANTS = [
@@ -5714,17 +6178,39 @@ class GdsFileUploadComponent extends GdsSignalFormControl {
     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();
+    layoutTmpl = contentChild('layoutTmpl', ...(ngDevMode ? [{ debugName: "layoutTmpl" }] : /* istanbul ignore next */ []));
     fileUpload = viewChild.required('fileUpload');
+    changed = output();
+    #emitOnFileChange = effect(() => {
+        this.changed.emit(this.value());
+    }, ...(ngDevMode ? [{ debugName: "#emitOnFileChange" }] : /* istanbul ignore next */ []));
     dragOver = signal(false, ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
-    preventDragEvent = (event, dragOver = false) => {
+    // dragenter/leave fire for every nested element; only clear dragOver when the count returns to 0
+    #dragDepth = 0;
+    onDragOver = (event) => {
+        event.preventDefault();
         event.stopPropagation();
+    };
+    onDragEnter = (event) => {
         event.preventDefault();
-        this.dragOver.set(dragOver);
+        event.stopPropagation();
+        this.#dragDepth++;
+        this.dragOver.set(true);
+    };
+    onDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.#dragDepth = Math.max(0, this.#dragDepth - 1);
+        if (this.#dragDepth === 0) {
+            this.dragOver.set(false);
+        }
     };
     onFileDrop = (event) => {
-        this.preventDragEvent(event);
-        if (!event.dataTransfer)
+        event.preventDefault();
+        event.stopPropagation();
+        this.#dragDepth = 0;
+        this.dragOver.set(false);
+        if (!event.dataTransfer || this.disabled())
             return;
         let files = Array.from(event.dataTransfer.files);
         if (!this.multiple()) {
@@ -5747,21 +6233,22 @@ 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 }, 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 });
+    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": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)" }, properties: { "attr.data-dragover": "dragOver() ? \"\": undefined" }, classAttribute: "\n      gds-height-100-parent\n      gds-width-100-parent\n    " }, queries: [{ propertyName: "layoutTmpl", first: true, predicate: ["layoutTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultTmpl; context: { dragOver: dragOver() }\" />\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<ng-template #defaultTmpl>\n  <div\n    tabindex=\"0\"\n    class=\"\n      container\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    (click)=\"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  </div>\n</ng-template>\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 .container{cursor:var(--cursor)}:host[data-dragover] .container,:host .container:focus{outline:var(--border-color) auto 1px}:host .container{background:var(--background-color);border:2px dashed var(--border-color)}:host .container .text{color:var(--text-color)}:host .container .icon{color:var(--icon-color)}:host .container .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"] }, { 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: GdsFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent, NgClass], host: {
+            args: [{ selector: 'gds-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GdsIconComponent, NgClass, NgTemplateOutlet], host: {
                         '[attr.data-dragover]': 'dragOver() ? "": undefined',
                         '(drop)': 'onFileDrop($event)',
-                        '(dragover)': 'preventDragEvent($event, true)',
-                        '(dragleave)': 'preventDragEvent($event)',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragenter)': 'onDragEnter($event)',
+                        '(dragleave)': 'onDragLeave($event)',
                         class: `
       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() }}</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 }] }] } });
+                    }, template: "<ng-container *ngTemplateOutlet=\"layoutTmpl() ?? defaultTmpl; context: { dragOver: dragOver() }\" />\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<ng-template #defaultTmpl>\n  <div\n    tabindex=\"0\"\n    class=\"\n      container\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    (click)=\"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  </div>\n</ng-template>\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 .container{cursor:var(--cursor)}:host[data-dragover] .container,:host .container:focus{outline:var(--border-color) auto 1px}:host .container{background:var(--background-color);border:2px dashed var(--border-color)}:host .container .text{color:var(--text-color)}:host .container .icon{color:var(--icon-color)}:host .container .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 }] }], layoutTmpl: [{ type: i0.ContentChild, args: ['layoutTmpl', { isSignal: true }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 class GdsFormControlComponent extends GdsSignalFormContainer {
     locked = input(false, { ...(ngDevMode ? { debugName: "locked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -5994,7 +6481,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()\"\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 });
+    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", "lineClamp", "tooltipOffset"] }, { 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,
@@ -6122,27 +6609,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<ng-content />\n<div\n  [innerHTML]=\"inputValue()\"\n  data-testId=\"valueTooltip\"\n  [style.left]=\"currentValueTooltipLeftOffset()\"\n  class=\"\n    gds-border-color-default\n    gds-display-inline-block\n    gds-padding-block-3xs\n    gds-padding-inline-2xs\n    gds-radius-sm\n    gds-text-caption\n    gds-text-center\n    value-tooltip\n  \"\n></div>\n", styles: ["@layer design-system{:host{--gds-form-control-active-color: var(--gds-palette-background-bright);--gds-form-control-background-color: var(--gds-palette-background-bright);--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[invalid][touched]:not(:focus-within,.is-controlled),:host:has(input[invalid][touched],textarea[invalid][touched]):not(:focus-within,.is-controlled){--background-color: var(--invalid-color)}:host[disabled],:host:has(*:disabled,*[disabled=true]){--active-color: var(--disabled-border-color)}:host ::ng-deep input{cursor:var(--cursor);overflow:visible;border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-webkit-slider-thumb{appearance:none;height:20px;width:20px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box;margin-top:-8px}:host ::ng-deep input::-moz-range-thumb{appearance:none;height:20px;width:20px;margin-top:-6px;border-radius:50%;background-color:var(--active-color);border:4px solid var(--gds-palette-background-white);outline:1px solid var(--border-color);box-sizing:border-box}:host ::ng-deep input::-webkit-slider-runnable-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input::-moz-range-track{height:var(--gds-size-3xs);background:var(--background-color);border-radius:var(--gds-borderRadius-sm)}:host ::ng-deep input:focus-visible{outline:2px solid var(--gds-palette-border-dark);outline-offset:10px}:host .value-tooltip{position:absolute;top:-28px;left:0;border:1px solid;color:var(--text-color);background-color:var(--gds-palette-background-white);box-shadow:0 4px 8px #00000024;transform:translate(-50%)}}\n"] }]
         }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
 
-class GdsTextInputComponent extends GdsSignalFormContainer {
-    input = contentChild(GdsNativeInputDirective, ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
-    #elementRef = inject((ElementRef));
-    nativeElement = this.#elementRef.nativeElement;
-    ngAfterContentInit() {
-        if (!this.input()) {
-            throw new Error('GdsNativeInputDirective is required for this component. Please update the imports to include GdsNativeInputDirective.');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsTextInputComponent, isStandalone: true, selector: "gds-text-input", host: { listeners: { "click": "input()?.nativeElement?.focus()" }, classAttribute: "gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input\n      gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile" }, queries: [{ propertyName: "input", first: true, predicate: GdsNativeInputDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\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)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTextInputComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'gds-text-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '(click)': 'input()?.nativeElement?.focus()',
-                        class: `gds-display-flex gds-align-items-center gds-justify-content-center gds-gap-2xs gds-padding-block-3xs gds-padding-inline-xs gds-radius-sm gds-text-input
-      gds-mobile-padding-block-0 gds-mobile-padding-inline-end-0 gds-mobile-text-input-mobile`
-                    }, template: "<ng-content select=\"[leading-visual]\" />\n<ng-content />\n<ng-content select=\"[trailing-visual]\" />\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)}}\n"] }]
-        }], propDecorators: { input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsNativeInputDirective), { isSignal: true }] }] } });
-
 class GdsAutoGrowingTextareaComponent extends GdsSignalFormContainer {
     maxRows = input(...(ngDevMode ? [undefined, { debugName: "maxRows" }] : /* istanbul ignore next */ []));
     dataReplicatedValue = signal('', ...(ngDevMode ? [{ debugName: "dataReplicatedValue" }] : /* istanbul ignore next */ []));
@@ -6441,105 +6907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<ul class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-2xs\n  gds-margin-0\n  gds-padding-0\n\">\n  <ng-content />\n</ul>\n<ul class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-2xs\n  gds-margin-0\n  gds-margin-block-start-auto\n  gds-padding-0\n\">\n  <ng-content select=\"[menu-bottom]\" />\n</ul>\n", styles: ["@layer design-system{:host{box-shadow:-3px 0 4px #00000012 inset;border-right:.5px solid var(--gds-palette-border-default)}}\n"] }]
         }] });
 
-const CDK_MENU_CONNECTED_POSITIONS = [
-    {
-        originX: 'center',
-        originY: 'bottom',
-        overlayX: 'center',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'center',
-        originY: 'top',
-        overlayX: 'center',
-        overlayY: 'bottom',
-        offsetY: -4
-    },
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetY: -4
-    }
-];
-const CDK_MENU_CONNECTED_POSITIONS_TOP = [
-    {
-        originX: 'center',
-        originY: 'top',
-        overlayX: 'center',
-        overlayY: 'bottom',
-        offsetY: -4
-    },
-    {
-        originX: 'center',
-        originY: 'bottom',
-        overlayX: 'center',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetY: -4
-    }
-];
-/** for use when the context menu is close to the right side of the container
- *  so that it doesn't go over the edge, per UX
- */
-const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_RIGHT = [
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetY: -4
-    }
-];
-/** for use when the context menu is close to the left side of the container
- *  so that it doesn't go over the edge, per UX
- */
-const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_LEFT = [
-    {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetY: 4
-    },
-    {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-        offsetY: -4
-    }
-];
-
 class GdsNestedSelectComponent extends GdsSignalFormContainer {
     #injector = inject(Injector);
     #directive = inject(CdkMenuTrigger);
@@ -7222,7 +7589,7 @@ class GdsToastComponent {
     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 */ []));
+    dismissAriaLabel = computed(() => this.toast().options.payload?.dismissAriaLabel ?? 'Dismiss notification', ...(ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []));
     actionAriaLabel = computed(() => this.toast().options.payload?.actionAriaLabel, ...(ngDevMode ? [{ debugName: "actionAriaLabel" }] : /* istanbul ignore next */ []));
     action = (event) => {
         event?.stopPropagation();
@@ -7679,6 +8046,7 @@ class GdsTreeViewListItemComponent {
     expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     hasChildren = input(false, { ...(ngDevMode ? { debugName: "hasChildren" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    disableChevron = input(...(ngDevMode ? [undefined, { debugName: "disableChevron" }] : /* istanbul ignore next */ []));
     clicked = output();
     doubleClicked = output();
     toggleExpanded = output();
@@ -7726,15 +8094,15 @@ class GdsTreeViewListItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsTreeViewListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTreeViewListItemComponent, isStandalone: true, selector: "gds-tree-view-list-item", inputs: { tier: { classPropertyName: "tier", publicName: "tier", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", doubleClicked: "doubleClicked", toggleExpanded: "toggleExpanded" }, host: { properties: { "style.--tier": "tier()" }, classAttribute: "gds-display-contents" }, queries: [{ propertyName: "checkbox", first: true, predicate: GdsCheckboxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "item", first: true, predicate: ["item"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GdsListboxOptionDirective }], ngImport: i0, template: "<div\n  #item\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n    gds-min-width-0\n    gds-position-relative\n    gds-width-100-parent\n    root\n  \"\n  [ngClass]=\"{\n    selected: activeOverride(),\n    disabled: disabled(),\n    dropdown: expanded(),\n    'has-checkbox': hasCheckbox()\n  }\"\n  role=\"treeitem\"\n  [attr.aria-selected]=\"activeOverride()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [tabindex]=\"-1\"\n  (click)=\"onHandleClick($event)\"\n  (keydown.space)=\"onHandleClick($event)\"\n  (dblclick)=\"onHandleDoubleClick($event)\"\n  (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n  (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n  <ng-content select=\"[checkbox]\" />\n  @if (displayChevron()) {\n    <button\n      class=\"\n        chevron-btn\n        gds-background-none\n        gds-min-height-0\n        gds-mobile-margin-inline-end-sm\n      \"\n      gds-icon-button\n      variant=\"primary\"\n      [tabindex]=\"-1\"\n      (clicked)=\"handleToggleExpanded($event)\"\n    >\n      <gds-icon\n        class=\"\n          chevron\n          gds-icon-size-2xs\n          gds-mobile-icon-size-sm\n        \"\n        key=\"line-chevron-right-stroke\"\n      />\n    </button>\n  } @else {\n    <span class=\"gds-width-sm\"></span>\n  }\n\n  @if (icon(); as icon) {\n    <gds-icon\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-sm\n        icon\n      \"\n      [key]=\"icon\"\n    />\n  }\n  <div class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-text-body\n    label\n  \">\n    <ng-content />\n  </div>\n  <div class=\"\n    end-content\n    gds-padding-block-end-2xs\n    gds-text-caption\n  \">\n    <ng-content select=\"[end-content]\" />\n  </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n  <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root: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}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):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}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):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}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsTreeViewListItemComponent, isStandalone: true, selector: "gds-tree-view-list-item", inputs: { tier: { classPropertyName: "tier", publicName: "tier", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disableChevron: { classPropertyName: "disableChevron", publicName: "disableChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", doubleClicked: "doubleClicked", toggleExpanded: "toggleExpanded" }, host: { properties: { "style.--tier": "tier()" }, classAttribute: "gds-display-contents" }, queries: [{ propertyName: "checkbox", first: true, predicate: GdsCheckboxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "item", first: true, predicate: ["item"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GdsListboxOptionDirective }], ngImport: i0, template: "<div\n  #item\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n    gds-min-width-0\n    gds-position-relative\n    gds-width-100-parent\n    root\n  \"\n  [ngClass]=\"{\n    selected: activeOverride(),\n    disabled: disabled(),\n    dropdown: expanded(),\n    'has-checkbox': hasCheckbox()\n  }\"\n  role=\"treeitem\"\n  [attr.aria-selected]=\"activeOverride()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [tabindex]=\"-1\"\n  (click)=\"onHandleClick($event)\"\n  (keydown.space)=\"onHandleClick($event)\"\n  (dblclick)=\"onHandleDoubleClick($event)\"\n  (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n  (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n  <ng-content select=\"[checkbox]\" />\n  @if (displayChevron()) {\n    <button\n      class=\"\n        chevron-btn\n        gds-background-none\n        gds-border-none\n        gds-min-height-0\n        gds-mobile-margin-inline-end-sm\n      \"\n      gds-icon-button\n      variant=\"primary\"\n      [disabled]=\"disableChevron()\"\n      [tabindex]=\"-1\"\n      (clicked)=\"handleToggleExpanded($event)\"\n    >\n      <gds-icon\n        class=\"\n          chevron\n          gds-icon-size-2xs\n          gds-mobile-icon-size-sm\n        \"\n        key=\"line-chevron-right-stroke\"\n      />\n    </button>\n  } @else {\n    <span class=\"gds-width-sm\"></span>\n  }\n\n  @if (icon(); as icon) {\n    <gds-icon\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-sm\n        icon\n      \"\n      [key]=\"icon\"\n    />\n  }\n  <div class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-text-body\n    label\n  \">\n    <ng-content />\n  </div>\n  <div class=\"\n    end-content\n    gds-padding-block-end-2xs\n    gds-text-caption\n  \">\n    <ng-content select=\"[end-content]\" />\n  </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n  <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root: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}:host .root{padding-left:calc(25px * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):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}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):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}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { 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: GdsTreeViewListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gds-tree-view-list-item', imports: [NgClass, GdsIconComponent, GdsIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--tier]': 'tier()',
                         class: 'gds-display-contents'
-                    }, hostDirectives: [GdsListboxOptionDirective], template: "<div\n  #item\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n    gds-min-width-0\n    gds-position-relative\n    gds-width-100-parent\n    root\n  \"\n  [ngClass]=\"{\n    selected: activeOverride(),\n    disabled: disabled(),\n    dropdown: expanded(),\n    'has-checkbox': hasCheckbox()\n  }\"\n  role=\"treeitem\"\n  [attr.aria-selected]=\"activeOverride()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [tabindex]=\"-1\"\n  (click)=\"onHandleClick($event)\"\n  (keydown.space)=\"onHandleClick($event)\"\n  (dblclick)=\"onHandleDoubleClick($event)\"\n  (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n  (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n  <ng-content select=\"[checkbox]\" />\n  @if (displayChevron()) {\n    <button\n      class=\"\n        chevron-btn\n        gds-background-none\n        gds-min-height-0\n        gds-mobile-margin-inline-end-sm\n      \"\n      gds-icon-button\n      variant=\"primary\"\n      [tabindex]=\"-1\"\n      (clicked)=\"handleToggleExpanded($event)\"\n    >\n      <gds-icon\n        class=\"\n          chevron\n          gds-icon-size-2xs\n          gds-mobile-icon-size-sm\n        \"\n        key=\"line-chevron-right-stroke\"\n      />\n    </button>\n  } @else {\n    <span class=\"gds-width-sm\"></span>\n  }\n\n  @if (icon(); as icon) {\n    <gds-icon\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-sm\n        icon\n      \"\n      [key]=\"icon\"\n    />\n  }\n  <div class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-text-body\n    label\n  \">\n    <ng-content />\n  </div>\n  <div class=\"\n    end-content\n    gds-padding-block-end-2xs\n    gds-text-caption\n  \">\n    <ng-content select=\"[end-content]\" />\n  </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n  <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root: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}:host .root{padding-left:calc(var(--gds-spacing-sm) + var(--gds-spacing-md) * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):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}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):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}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"] }]
-        }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsCheckboxComponent), { isSignal: true }] }], item: [{ type: i0.ViewChild, args: ['item', { isSignal: true }] }], tier: [{ type: i0.Input, args: [{ isSignal: true, alias: "tier", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], toggleExpanded: [{ type: i0.Output, args: ["toggleExpanded"] }] } });
+                    }, hostDirectives: [GdsListboxOptionDirective], template: "<div\n  #item\n  class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n    gds-min-width-0\n    gds-position-relative\n    gds-width-100-parent\n    root\n  \"\n  [ngClass]=\"{\n    selected: activeOverride(),\n    disabled: disabled(),\n    dropdown: expanded(),\n    'has-checkbox': hasCheckbox()\n  }\"\n  role=\"treeitem\"\n  [attr.aria-selected]=\"activeOverride()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [tabindex]=\"-1\"\n  (click)=\"onHandleClick($event)\"\n  (keydown.space)=\"onHandleClick($event)\"\n  (dblclick)=\"onHandleDoubleClick($event)\"\n  (keydown.arrowRight)=\"handleToggleExpanded($event, true)\"\n  (keydown.arrowLeft)=\"handleToggleExpanded($event, false)\"\n>\n  <ng-content select=\"[checkbox]\" />\n  @if (displayChevron()) {\n    <button\n      class=\"\n        chevron-btn\n        gds-background-none\n        gds-border-none\n        gds-min-height-0\n        gds-mobile-margin-inline-end-sm\n      \"\n      gds-icon-button\n      variant=\"primary\"\n      [disabled]=\"disableChevron()\"\n      [tabindex]=\"-1\"\n      (clicked)=\"handleToggleExpanded($event)\"\n    >\n      <gds-icon\n        class=\"\n          chevron\n          gds-icon-size-2xs\n          gds-mobile-icon-size-sm\n        \"\n        key=\"line-chevron-right-stroke\"\n      />\n    </button>\n  } @else {\n    <span class=\"gds-width-sm\"></span>\n  }\n\n  @if (icon(); as icon) {\n    <gds-icon\n      class=\"\n        gds-icon-size-xs\n        gds-mobile-icon-size-sm\n        icon\n      \"\n      [key]=\"icon\"\n    />\n  }\n  <div class=\"\n    gds-flex-1\n    gds-min-width-0\n    gds-text-body\n    label\n  \">\n    <ng-content />\n  </div>\n  <div class=\"\n    end-content\n    gds-padding-block-end-2xs\n    gds-text-caption\n  \">\n    <ng-content select=\"[end-content]\" />\n  </div>\n</div>\n\n<div [ngClass]=\"{ 'gds-display-none': !expanded() }\">\n  <ng-content select=\"[expanded-content]\" />\n</div>\n", styles: ["@layer design-system{:host{--tier: 0;--wrapper-margin: 1px;--wrapper-margin-block: 2px;--cursor: pointer;--label-text-color: var(--gds-palette-text-default-primary);--end-content-text-color: var(--gds-palette-text-default-secondary);--icon-color: var(--gds-palette-icon-primary)}:host .disabled{--cursor: not-allowed;--label-text-color: var(--gds-palette-text-default-disabled);--end-content-text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled)}:host:focus-visible{outline:none}:host:focus>.root:before,:host:focus-visible>.root: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}:host .root{padding-left:calc(25px * (var(--tier) - 1));cursor:var(--cursor);padding-block:6px;outline:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .root:focus-within:before,:host .root:hover:not(.disabled):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}:host .label{color:var(--label-text-color)}:host .end-content{color:var(--end-content-text-color)}:host .selected:not(.disabled):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}:host .selected:not(.disabled):not(.has-checkbox):after{content:\"\";position:absolute;border-radius:3px;width:3px;height:61%;top:50%;left:calc(var(--wrapper-margin, 0px) - 1px);transform:translateY(-50%);background:var(--gds-palette-border-selected);padding:0}:host .dropdown .chevron{transition:rotate .2s ease;rotate:90deg}:host .chevron{z-index:1;transition:rotate .2s ease;rotate:0deg}:host .label{z-index:1}:host .end-content{z-index:1}:host .icon{z-index:1;color:var(--icon-color)}:is(body[isMobile=true]) :host .root{padding-block:2px}:is(body[isMobile=true]) :host .chevron-btn{order:1}}\n"] }]
+        }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GdsCheckboxComponent), { isSignal: true }] }], item: [{ type: i0.ViewChild, args: ['item', { isSignal: true }] }], tier: [{ type: i0.Input, args: [{ isSignal: true, alias: "tier", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disableChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableChevron", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], doubleClicked: [{ type: i0.Output, args: ["doubleClicked"] }], toggleExpanded: [{ type: i0.Output, args: ["toggleExpanded"] }] } });
 
 class TreeViewListItemDirective {
     templateRef = inject((TemplateRef));
@@ -7767,11 +8135,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 ?? '' }}</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 });
+    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 class=\"description-text\">{{ 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)}:host .description-text{white-space:pre-wrap}}\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, 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"] }]
+            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 class=\"description-text\">{{ 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)}:host .description-text{white-space:pre-wrap}}\n"] }]
         }], propDecorators: { defaultDescTmpl: [{ type: i0.ViewChild, args: ['defaultDescriptionTmpl', { isSignal: true }] }] } });
 
 class GdsUserPromptService {
@@ -7826,7 +8194,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\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 });
+    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", "lineClamp", "tooltipOffset"] }, { 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,
@@ -7953,7 +8321,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()\"\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 });
+    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-flex-column\n      gds-gap-sm\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: "<ng-content select=\"[header]\" />\n<div class=\"\n  gds-display-flex\n  gds-min-width-0\n  gds-width-100-parent\n\">\n  <div class=\"\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\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 select=\"[footer]\" />\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</div>\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,
@@ -7967,7 +8335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.aria-disabled]': 'disabled()',
                         class: `
       gds-display-flex
-      gds-align-items-center
+      gds-flex-column
+      gds-gap-sm
       gds-border
       gds-border-color-default
       gds-radius-lg
@@ -7982,7 +8351,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()\"\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"] }]
+                    }, template: "<ng-content select=\"[header]\" />\n<div class=\"\n  gds-display-flex\n  gds-min-width-0\n  gds-width-100-parent\n\">\n  <div class=\"\n    gds-display-flex\n    gds-flex-column\n    gds-gap-sm\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 select=\"[footer]\" />\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</div>\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 {
@@ -8078,7 +8447,7 @@ class GdsChatSuggestionComponent {
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsChatSuggestionComponent, isStandalone: true, selector: "button[gds-chat-suggestion]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "disabled() ? \"\" : undefined" }, classAttribute: "gds-radius-sm gds-mobile-radius-md" }, ngImport: i0, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: GdsChatSuggestionComponent, isStandalone: true, selector: "button[gds-chat-suggestion]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "disabled() ? \"\" : undefined" }, classAttribute: "gds-radius-sm gds-mobile-radius-md" }, ngImport: i0, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:is(body[isMobile=true]) :host:disabled{color:var(--gds-palette-text-default-disabled)}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsChatSuggestionComponent, decorators: [{
             type: Component,
@@ -8090,7 +8459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         type: 'button',
                         '[attr.disabled]': 'disabled() ? "" : undefined',
                         '(click)': 'handleClick($event)'
-                    }, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"] }]
+                    }, template: "<ng-content />\n", styles: ["@layer design-system{:host{padding:var(--gds-spacing-2xs);font:var(--gds-text-caption-shorthand);color:var(--gds-palette-text-primary-primary);text-align:start;-webkit-user-select:none;user-select:none;border-width:1px;border-style:solid;border-color:var(--gds-palette-border-primary);background-color:var(--gds-palette-background-white)}:is(body[isMobile=true]) :host{padding:var(--gds-spacing-sm);box-shadow:var(--gds-shadow-element);color:var(--gds-palette-text-default-primary)}:host:disabled{color:var(--gds-palette-text-default-disabled);border-color:var(--gds-neutral-100);background-color:var(--gds-palette-background-disabled);cursor:not-allowed}:is(body[isMobile=true]) :host:disabled{color:var(--gds-palette-text-default-disabled)}:host:not(:disabled):hover{background-color:var(--gds-palette-background-hover)}}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class GdsAutoRoundCurrencyDirective {
@@ -8352,11 +8721,31 @@ class GdsModule {
                 cdnUrl = 'https://cdn.test.cortoaws.com';
                 break;
         }
+        const icon = gdsBrandIconIcon; //the icon object from the icons/index.ts file
+        switch (brand) {
+            // override the data property depending on the brand
+            case GDS_BRANDS.Acctivity:
+                icon.data = gdsAcctivityIconDefaultIcon.data;
+                break;
+            case GDS_BRANDS.LawY:
+                icon.data = gdsLawyIconLightDefaultIcon.data;
+                break;
+            case GDS_BRANDS.Leap:
+                icon.data = gdsLeapIconBlueIcon.data;
+                break;
+            case GDS_BRANDS.CortoDark:
+                icon.data = gdsCortoIconDarkDefaultIcon.data;
+                break;
+            default:
+                icon.data = gdsCortoIconLightDefaultIcon.data;
+                break;
+        }
         return {
             ngModule: GdsModule,
             providers: [
                 provideSvgIconsConfig({
-                    defaultSize: 'sm'
+                    defaultSize: 'sm',
+                    icons: [icon]
                 }),
                 provideAppInitializer(() => {
                     const deviceSignalService = inject(DeviceDetectorSignalService);
@@ -8443,5 +8832,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, 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 };
+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, GdsDrilldownSelectComponent, 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