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

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

@@ -852,7 +852,7 @@ const gdsFilledDetailsIcon = {
     name: 'filled-details'
 };
 const gdsFilledDocumentMultipleIcon = {
-    data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.25C4 3.00736 5.00736 2 6.25 2H10.5039V6.74753C10.5039 7.99017 11.5113 8.99753 12.7539 8.99753H17.5V17.25C17.5 18.4926 16.4926 19.5 15.25 19.5H6.25C5.00736 19.5 4 18.4926 4 17.25V4.25ZM7.75 11.5C7.33579 11.5 7 11.8358 7 12.25C7 12.6642 7.33579 13 7.75 13C8.16421 13 8.5 12.6642 8.5 12.25C8.5 11.8358 8.16421 11.5 7.75 11.5ZM7 15.25C7 15.6642 7.33579 16 7.75 16C8.16421 16 8.5 15.6642 8.5 15.25C8.5 14.8358 8.16421 14.5 7.75 14.5C7.33579 14.5 7 14.8358 7 15.25ZM10 12.25C10 12.6642 10.3358 13 10.75 13H13.8038C14.218 13 14.5538 12.6642 14.5538 12.25C14.5538 11.8358 14.218 11.5 13.8038 11.5H10.75C10.3358 11.5 10 11.8358 10 12.25ZM10.75 14.5C10.3358 14.5 10 14.8358 10 15.25C10 15.6642 10.3358 16 10.75 16H13.8038C14.218 16 14.5538 15.6642 14.5538 15.25C14.5538 14.8358 14.218 14.5 13.8038 14.5H10.75ZM12.0039 6.74753V2.46728C12.0803 2.52611 12.1532 2.59009 12.2221 2.65901L16.841 7.27786C16.9103 7.34721 16.9747 7.42062 17.0338 7.49753H12.7539C12.3397 7.49753 12.0039 7.16174 12.0039 6.74753ZM6.62891 20.5C6.93778 21.3739 7.77121 22 8.75088 22H15.2509C17.8742 22 20.0009 19.8734 20.0009 17.25V11.3689C20.0009 10.7721 19.7638 10.1998 19.3419 9.77788L18.5009 8.93689V17.25C18.5009 19.0449 17.0458 20.5 15.2509 20.5H6.62891Z" fill="currentColor"/></svg>`,
+    data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.25C4 3.00736 5.00736 2 6.25 2H10.5039V6.74753C10.5039 7.99017 11.5113 8.99753 12.7539 8.99753H17.5V17.25C17.5 18.4926 16.4926 19.5 15.25 19.5H6.25C5.00736 19.5 4 18.4926 4 17.25V4.25Z" fill="currentColor"/><path d="M12.0039 6.74753V2.46728C12.0803 2.52611 12.1532 2.59009 12.2221 2.65901L16.841 7.27786C16.9103 7.34721 16.9747 7.42062 17.0338 7.49753H12.7539C12.3397 7.49753 12.0039 7.16174 12.0039 6.74753Z" fill="currentColor"/><path d="M8.75088 22C7.77121 22 6.93778 21.3739 6.62891 20.5H15.2509C17.0458 20.5 18.5009 19.0449 18.5009 17.25V8.93689L19.3419 9.77788C19.7638 10.1998 20.0009 10.7721 20.0009 11.3689V17.25C20.0009 19.8734 17.8742 22 15.2509 22H8.75088Z" fill="currentColor"/></svg>`,
     name: 'filled-document-multiple'
 };
 const gdsFilledDocumentTableIcon = {
@@ -1791,6 +1791,10 @@ const gdsLineEditIcon = {
     data: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6567 4.99599C14.4 4.25277 14.3875 3.04397 13.6291 2.31623C12.8925 1.6094 11.7259 1.62143 11.004 2.34329L9.95007 3.39725L3.33857 10.0087C3.28364 10.0637 3.24226 10.1307 3.21772 10.2044L2.2347 13.1575C2.17462 13.338 2.22215 13.5369 2.35733 13.6708C2.4925 13.8046 2.6919 13.8501 2.87177 13.7883L5.80038 12.7807C5.87225 12.756 5.93753 12.7152 5.99127 12.6614L13.6567 4.99599ZM10.3036 4.45791L4.12922 10.6323L3.50301 12.5136L5.36584 11.8727L11.5421 5.69639L10.3036 4.45791ZM12.2492 4.98929L11.0107 3.7508L11.7111 3.0504C12.0482 2.71338 12.5928 2.70776 12.9367 3.03776C13.2908 3.37753 13.2966 3.94189 12.9496 4.28888L12.2492 4.98929Z" fill="currentColor"/></svg>`,
     name: 'line-edit'
 };
+const gdsLineEmailAlertIcon = {
+    data: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5025 1C15.2934 1 13.5025 2.79086 13.5025 5L13.5023 8L12.5539 8.80035C12.2462 9.06004 12.0923 9.18988 12.0457 9.29132C11.9312 9.54071 12.0391 9.8358 12.2875 9.95252C12.3885 10 12.5898 10 12.9925 10H22.0121C22.4148 10 22.6162 10 22.7172 9.95252C22.9656 9.8358 23.0735 9.5407 22.9589 9.29131C22.9123 9.18987 22.7584 9.06001 22.4507 8.80031L21.5025 8V5C21.5025 2.79086 19.7116 1 17.5025 1ZM19.0025 11C18.7842 11.5826 18.195 12 17.5025 12C16.81 12 16.2208 11.5826 16.0025 11H19.0025ZM22 16.75V11L20.5 11V16.75L20.4942 16.8935C20.4212 17.7929 19.6682 18.5 18.75 18.5H5.25L5.10647 18.4942C4.20711 18.4212 3.5 17.6682 3.5 16.75V9.374L11.6507 13.6637L11.7468 13.706C11.9431 13.7764 12.1619 13.7623 12.3493 13.6637L15.4503 12.0313C15.2878 11.8289 15.1559 11.6003 15.0624 11.3509L14.9309 11L14.1893 11L12 12.1525L3.5 7.679V7.25L3.5058 7.10647C3.57881 6.20711 4.33183 5.5 5.25 5.5H12.4988L12.4988 5C12.4988 4.65753 12.5333 4.32311 12.5989 4H5.25L5.06558 4.00514C3.35645 4.10075 2 5.51697 2 7.25V16.75L2.00514 16.9344C2.10075 18.6435 3.51697 20 5.25 20H18.75L18.9344 19.9949C20.6435 19.8992 22 18.483 22 16.75Z" fill="currentColor"/></svg>`,
+    name: 'line-email-alert'
+};
 const gdsLineEmailArrowDownIcon = {
     data: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.0224 5H6C4.89545 5 4 5.89539 4 7V11H7.5C7.77594 11 7.99963 11.2235 8 11.4994L8.00031 11.5115C8.00073 11.5238 8.00165 11.5443 8.0036 11.5718C8.00757 11.6268 8.01562 11.7087 8.03229 11.8085C8.06586 12.01 8.13214 12.2712 8.2597 12.5264C8.38629 12.7795 8.56836 13.0176 8.83203 13.1934C9.09259 13.3671 9.46246 13.5 10 13.5C10.5375 13.5 10.9074 13.3671 11.168 13.1934C11.4316 13.0176 11.6137 12.7795 11.7403 12.5264C11.8162 12.3745 11.8704 12.2206 11.9089 12.0784C11.9351 11.9816 11.9541 11.8901 11.9677 11.8085C11.9844 11.7087 11.9924 11.6268 11.9964 11.5718C11.9984 11.5443 11.9993 11.5238 11.9997 11.5115L12 11.4991C12 11.223 12.2239 11 12.5 11H16V10.4003C16.3578 10.2174 16.6929 9.99646 17 9.7428V15C17 16.6569 15.6569 18 14 18H6C4.34314 18 3 16.6569 3 15V7C3 5.34314 4.34314 4 6 4H8.20703C8.11591 4.32227 8.05334 4.65662 8.0224 5ZM7.05048 12H4V15C4 16.1046 4.89545 17 6 17H14C15.1046 17 16 16.1046 16 15V12H12.9495C12.9035 12.2643 12.8134 12.6161 12.6347 12.9736C12.4488 13.3455 12.1621 13.7324 11.7227 14.0254C11.2801 14.3204 10.7125 14.5 10 14.5C9.28754 14.5 8.71991 14.3204 8.27734 14.0254C7.83789 13.7324 7.55121 13.3455 7.3653 12.9736C7.18658 12.6161 7.0965 12.2643 7.05048 12ZM13.5 10C15.9853 10 18 7.98528 18 5.5C18 3.01472 15.9853 1 13.5 1C11.0147 1 9 3.01472 9 5.5C9 7.98528 11.0147 10 13.5 10ZM11.1464 5.85355C10.9512 5.65829 10.9512 5.34171 11.1464 5.14645C11.3417 4.95118 11.6583 4.95118 11.8536 5.14645L13 6.29289V3.5C13 3.22386 13.2239 3 13.5 3C13.7761 3 14 3.22386 14 3.5V6.29289L15.1464 5.14645C15.3417 4.95118 15.6583 4.95118 15.8536 5.14645C16.0488 5.34171 16.0488 5.65829 15.8536 5.85355L13.8536 7.85355C13.8056 7.90149 13.7504 7.93766 13.6914 7.96206C13.6333 7.98615 13.5697 7.9996 13.503 7.99999L13.5 8L13.497 7.99999C13.4303 7.9996 13.3667 7.98615 13.3086 7.96206C13.2505 7.93802 13.196 7.90256 13.1486 7.85567L13.146 7.85316L11.1464 5.85355Z" fill="#1A1A1A"/></svg>`,
     name: 'line-email-arrow-down'
@@ -3071,6 +3075,7 @@ var icons = /*#__PURE__*/Object.freeze({
     gdsLineDraftIcon: gdsLineDraftIcon,
     gdsLineDuplicateIcon: gdsLineDuplicateIcon,
     gdsLineEditIcon: gdsLineEditIcon,
+    gdsLineEmailAlertIcon: gdsLineEmailAlertIcon,
     gdsLineEmailArrowDownIcon: gdsLineEmailArrowDownIcon,
     gdsLineEmailCheckmarkIcon: gdsLineEmailCheckmarkIcon,
     gdsLineEmailDismissIcon: gdsLineEmailDismissIcon,
@@ -3806,6 +3811,9 @@ class ButtonBaseDirective {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    // Safari does not set buttons as tabbable by default.
+    // To keep same behavior as chrome, set the tabIndex to 0 by default.
+    tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
     clicked = output();
     isDisabled = computed(() => this.disabled() || this.busy(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     nativeElement = this.#elementRef.nativeElement;
@@ -3815,7 +3823,7 @@ class ButtonBaseDirective {
         this.clicked.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: ButtonBaseDirective, isStandalone: true, inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-busy": "busy() ? \"\" : undefined" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: ButtonBaseDirective, isStandalone: true, inputs: { busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { attributes: { "type": "button" }, listeners: { "click": "handleClick($event)" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined", "attr.tabindex": "tabIndex()", "attr.data-size": "size()", "attr.data-variant": "variant()", "attr.data-busy": "busy() ? \"\" : undefined" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonBaseDirective, decorators: [{
             type: Directive,
@@ -3826,6 +3834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // https://www.a11yproject.com/checklist/#use-the-button-element-for-buttons
                         type: 'button',
                         '[attr.disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.tabindex]': 'tabIndex()',
                         // Custom attributes for CSS
                         '[attr.data-size]': 'size()',
                         '[attr.data-variant]': 'variant()',
@@ -3834,26 +3843,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '(click)': 'handleClick($event)'
                     }
                 }]
-        }], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+        }], propDecorators: { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class GdsButtonComponent extends ButtonBaseDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsButtonComponent, isStandalone: true, selector: "button[gds-button]", usesInheritance: true, ngImport: i0, template: "<div class=\"body\">\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n  <div class=\"label\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsButtonComponent, isStandalone: true, selector: "button[gds-button]", usesInheritance: true, ngImport: i0, template: "<div class=\"body\">\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n  <div class=\"label\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[gds-button]', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"body\">\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n  <div class=\"label\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"] }]
+            args: [{ selector: 'button[gds-button]', imports: [GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"body\">\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n  <div class=\"label\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}}\n"] }]
         }] });
 
 class GdsIconButtonComponent extends ButtonBaseDirective {
     tooltipLabel = input(...(ngDevMode ? [undefined, { debugName: "tooltipLabel" }] : /* istanbul ignore next */ []));
     enableTooltip = computed(() => !this.disabled() && !!this.tooltipLabel()?.trim(), ...(ngDevMode ? [{ debugName: "enableTooltip" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsIconButtonComponent, isStandalone: true, selector: "button[gds-icon-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipLabel()\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"enableTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsIconButtonComponent, isStandalone: true, selector: "button[gds-icon-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipLabel()\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"enableTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[gds-icon-button]', imports: [TippyDirective, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipLabel()\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"enableTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"] }]
+            args: [{ selector: 'button[gds-icon-button]', imports: [TippyDirective, GdsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipLabel()\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"enableTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n  </div>\n</div>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-borderColor-hover: transparent}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host:has(gds-icon:only-child){aspect-ratio:1;padding:unset}}\n"] }]
         }], propDecorators: { tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }] } });
 
 class GdsBannerComponent {
@@ -5445,14 +5454,14 @@ class GdsFeedbackButtonComponent extends ButtonBaseDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeedbackButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeedbackButtonComponent, isStandalone: true, selector: "button[gds-feedback-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, clickedLabel: { classPropertyName: "clickedLabel", publicName: "clickedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--icon": "iconVisible()", "style.--clicked-icon": "clickedIconVisible()" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipTemplate\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"hasTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n    <ng-content select=\"[clicked-icon]\" />\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GdsFeedbackButtonComponent, isStandalone: true, selector: "button[gds-feedback-button]", inputs: { tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, clickedLabel: { classPropertyName: "clickedLabel", publicName: "clickedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--icon": "iconVisible()", "style.--clicked-icon": "clickedIconVisible()" } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipTemplate\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"hasTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n    <ng-content select=\"[clicked-icon]\" />\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"], dependencies: [{ kind: "directive", type: TippyDirective, selector: "[tp]", inputs: ["tpAppendTo", "tp", "tpDelay", "tpDuration", "tpHideOnClick", "tpInteractive", "tpInteractiveBorder", "tpMaxWidth", "tpOffset", "tpPlacement", "tpPopperOptions", "tpShowOnCreate", "tpTrigger", "tpTriggerTarget", "tpZIndex", "tpAnimation", "tpUseTextContent", "tpIsLazy", "tpVariation", "tpIsEnabled", "tpClassName", "tpOnlyTextOverflow", "tpStaticWidthHost", "tpData", "tpUseHostWidth", "tpHideOnEscape", "tpPopperWidth", "tpHost", "tpIsVisible"], outputs: ["tpOnShow", "tpOnHide", "tpIsVisibleChange", "tpVisible"], exportAs: ["tippy"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsFeedbackButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[gds-feedback-button]', imports: [TippyDirective, GdsIconComponent], host: {
                         '[style.--icon]': 'iconVisible()',
                         '[style.--clicked-icon]': 'clickedIconVisible()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipTemplate\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"hasTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n    <ng-content select=\"[clicked-icon]\" />\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"body\"\n  [tp]=\"tooltipTemplate\"\n  tpVariation=\"light\"\n  tpAppendTo=\"parent\"\n  [tpIsEnabled]=\"hasTooltip()\"\n  [tpHideOnClick]=\"false\"\n>\n  @if (busy()) {\n    <gds-icon\n      role=\"progressbar\"\n      class=\"busy-icon\"\n      key=\"loading-kebab\"\n    />\n  }\n\n  <div class=\"\n    gds-display-grid\n    gds-gap-0\n    label\n  \">\n    <ng-content select=\"gds-icon\" />\n    <ng-content select=\"[clicked-icon]\" />\n  </div>\n</div>\n\n<ng-template #tooltipTemplate>\n  {{ tooltipTextContent() }}\n</ng-template>\n", styles: ["@layer design-system{:host{--gds-button-color: var(--gds-palette-text-default-primary);--gds-button-borderColor: var(--gds-palette-border-default);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-disabled: var(--gds-palette-text-default-disabled);--gds-button-borderColor-disabled: var(--gds-palette-border-default);--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-text-default-contrast);--gds-button-borderColor: var(--gds-button-backgroundColor);--gds-button-backgroundColor: var(--gds-palette-button-primary-default);--gds-button-color-hover: var(--gds-button-color);--gds-button-borderColor-hover: var(--gds-button-backgroundColor-hover);--gds-button-backgroundColor-hover: var(--gds-palette-button-primary-hover);--gds-button-borderColor-disabled: var(--gds-button-backgroundColor-disabled);--gds-button-backgroundColor-disabled: var(--gds-palette-button-primary-disabled)}:host[data-variant=invisible]{--gds-button-borderColor: transparent;--gds-button-backgroundColor: transparent;--gds-button-backgroundColor-hover: transparent;--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: transparent}:host{min-height:var(--gds-size-md-rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;padding-inline:10px;border-style:solid;border-radius:var(--gds-borderRadius-sm);border-width:var(--gds-borderWidth-sm);border-color:var(--gds-button-borderColor);background-color:var(--gds-button-backgroundColor);cursor:pointer;font:var(--gds-button-font, var(--gds-text-body-shorthand));color:var(--gds-button-color);user-select:none;-webkit-user-select:none;appearance:none;-webkit-appearance:none;transition:none}:host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-primitive-size-600-rem))}:host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-md-rem))}:host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-lg-rem))}:host[data-busy]{cursor:wait;--label-visibility: hidden}:host .body{display:grid;grid-template-columns:100%;grid-template-rows:100%;max-width:100%}:host .label{grid-column:1/-1;grid-row:1/-1;display:flex;gap:var(--gds-spacing-2xs);align-items:center;justify-content:center;visibility:var(--label-visibility, visible)}:host .busy-icon{grid-column:1/-1;grid-row:1/-1;justify-self:center;color:var(--gds-palette-icon-secondary)}:is(body[isMobile=true]) :host{border-radius:var(--gds-size-xs);min-height:var(--gds-size-lg-rem);padding-inline:var(--gds-spacing-sm)}:is(body[isMobile=true]) :host[data-size=small]{min-height:var(--gds-button-small-minHeight, var(--gds-size-md-rem))}:is(body[isMobile=true]) :host[data-size=medium]{min-height:var(--gds-button-medium-minHeight, var(--gds-size-lg-rem))}:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-button-large-minHeight, var(--gds-size-xl-rem))}:host:disabled{color:var(--gds-button-color-disabled);border-color:var(--gds-button-borderColor-disabled);background-color:var(--gds-button-backgroundColor-disabled);cursor:not-allowed}:host:not(:disabled):hover{color:var(--gds-button-color-hover, var(--gds-button-color));border-color:var(--gds-button-borderColor-hover, var(--gds-button-borderColor));background-color:var(--gds-button-backgroundColor-hover, var(--gds-palette-background-hover))}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:host::-moz-focus-inner{border:0}:host{--gds-button-color: var(--gds-palette-icon-secondary);--gds-button-borderColor: transparent;--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-text-default-primary);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover);--gds-button-color-disabled: var(--gds-palette-icon-disabled);--gds-button-borderColor-disabled: transparent;--gds-button-backgroundColor-disabled: var(--gds-palette-background-disabled);--gds-mobile-button-size: var(--gds-size-lg)}:host[data-variant=primary]{--gds-button-color: var(--gds-palette-icon-primary);--gds-button-backgroundColor: var(--gds-palette-background-white);--gds-button-color-hover: var(--gds-palette-button-primary-hover);--gds-button-backgroundColor-hover: var(--gds-palette-background-hover)}:is(body[isMobile=true]) :host[data-size=default],:is(body[isMobile=true]) :host[data-size=small],:is(body[isMobile=true]) :host[data-size=medium],:is(body[isMobile=true]) :host[data-size=large]{min-height:var(--gds-mobile-button-size);height:var(--gds-mobile-button-size);padding-inline:0}:host{aspect-ratio:1;padding-inline:unset}:host .body{display:grid;grid-template-columns:1fr;grid-template-areas:\"main\";align-items:center;justify-items:center}:host .label ::ng-deep>*{grid-area:main}:host .label ::ng-deep>*:has(+[clicked-icon]){transition:175ms opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--icon));opacity:var(--icon)}:host .label ::ng-deep>[clicked-icon]{transition:.2s opacity ease-out,.15s transform ease-out 50ms;transform:scale(var(--clicked-icon));opacity:var(--clicked-icon)}}\n"] }]
         }], propDecorators: { tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }], clickedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickedLabel", required: false }] }] } });
 
 class GdsFilterChipComponent extends OnBrandChanged {
@@ -5835,7 +5844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class GdsButtonRadioOptionComponent extends GdsRadioOptionDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonRadioOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsButtonRadioOptionComponent, isStandalone: true, selector: "input[gds-button-radio-option]", host: { attributes: { "type": "radio" }, listeners: { "change": "onChange()" }, properties: { "checked": "selected()", "id": "id()", "name": "name()", "disabled": "disabled()", "attr.invalid": "invalid()", "attr.data-label": "label()", "attr.aria-label": "label()" }, classAttribute: "gds-text-caption-strong gds-radius-sm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GdsButtonRadioOptionComponent, isStandalone: true, selector: "input[gds-button-radio-option]", host: { attributes: { "type": "radio" }, listeners: { "change": "onChange()" }, properties: { "checked": "selected()", "id": "id()", "name": "name()", "disabled": "disabled()", "attr.invalid": "invalid()", "attr.data-label": "label()", "attr.tabindex": "selected() ? 0 : -1", "attr.aria-label": "label()" }, classAttribute: "gds-text-caption-strong gds-radius-sm" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsButtonRadioOptionComponent, decorators: [{
             type: Component,
@@ -5852,6 +5861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.invalid]': 'invalid()',
                         '[attr.data-label]': 'label()',
                         // a11y
+                        '[attr.tabindex]': 'selected() ? 0 : -1',
                         '[attr.aria-label]': 'label()'
                     }, styles: ["@layer design-system{:host{border:var(--gds-borderWidth-md) solid;border-color:var(--gds-palette-border-primary);color:var(--gds-palette-text-primary-primary)}:host:hover,:host:checked{border-color:var(--gds-palette-border-selected);background-color:var(--gds-palette-background-hover)}:host[invalid=true],:host:disabled{border-color:inherit;color:inherit;background-color:inherit}:host[invalid=true]:hover,:host[invalid=true]:checked{background-color:var(--gds-palette-helper-error-default)}:host:focus-visible{outline:var(--gds-borderWidth-lg) solid var(--gds-palette-border-dark);outline-offset:2px}:host:before{display:block;content:attr(data-label);padding:var(--gds-spacing-2xs)}}\n"] }]
         }] });
@@ -6902,13 +6912,18 @@ class GdsSearchBarComponent {
     #setDropdownStyling = () => {
         if (!this.dropdownPanelScroll)
             return;
-        this.#renderer.setStyle(this.dropdownPanelScroll.nativeElement, 'maxHeight', this.maxHeight());
-        this.#renderer.setStyle(this.dropdownPanelScroll.nativeElement, 'minHeight', this.minHeight());
+        const dropdownPanel = this.dropdownPanelScroll.nativeElement;
+        const dropdownPanelParent = this.dropdownPanelScroll.nativeElement.parentElement;
+        if (!dropdownPanelParent)
+            return;
+        this.#renderer.setStyle(dropdownPanel, 'maxHeight', this.maxHeight());
+        this.#renderer.setStyle(dropdownPanel, 'minHeight', this.minHeight());
+        this.#renderer.setStyle(dropdownPanelParent, 'marginTop', '4px');
         // this needs to be last to prevent the dropdown from flashing
-        this.#renderer.setStyle(this.dropdownPanelScroll.nativeElement.parentElement, 'visibility', 'visible');
+        this.#renderer.setStyle(dropdownPanelParent, 'visibility', 'visible');
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSearchBarComponent, isStandalone: true, selector: "gds-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnClose: { classPropertyName: "suppressClearOnClose", publicName: "suppressClearOnClose", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isOpenOverride: { classPropertyName: "isOpenOverride", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showAllItems: { classPropertyName: "showAllItems", publicName: "showAllItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDisabled: "isDisabledChange", focused: "focused", blurred: "blurred", dropdownStateChanged: "dropdownStateChanged", searched: "searched", changed: "changed", value: "valueChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()", "window:resize": "close()" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined" } }, queries: [{ propertyName: "groupItemTmpl", first: true, predicate: ["groupItemTmpl"], descendants: true, isSignal: true }, { propertyName: "dropdownItemTmpl", first: true, predicate: ["itemTmpl"], descendants: true, isSignal: true }, { propertyName: "emptyTmpl", first: true, predicate: ["emptyTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-select\n  #select\n  class=\"\n    gds-radius-sm\n    gds-search-bar_input\n  \"\n  [placeholder]=\"!value() ? placeholder() : ''\"\n  [isOpen]=\"isOpen()\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"value()\"\n  (ngModelChange)=\"setValue($event)\"\n  [items]=\"items()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [loading]=\"loading()\"\n  [markFirst]=\"false\"\n  [groupBy]=\"groupBy()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n  [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n  (focus)=\"handleFocus($event)\"\n  (blur)=\"handleBlur($event)\"\n  (click)=\"handleClick($event)\"\n  (search)=\"handleSearch($event.term)\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n  (change)=\"handleChange($event)\"\n  (clear)=\"handleClear()\"\n>\n  <ng-template\n    ng-optgroup-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-option-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-notfound-tmp\n    let-searchTerm=\"searchTerm\"\n  >\n    <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n  </ng-template>\n  <ng-template ng-loadingtext-tmp>\n    <div class=\"\n      gds-display-flex\n      gds-justify-content-center\n      gds-padding-sm\n      gds-text-body\n      gds-text-primary\n    \">\n      <gds-spinner />\n    </div>\n  </ng-template>\n  <ng-template ng-loadingspinner-tmp />\n  <ng-template ng-clearbutton-tmp>\n    <button\n      gds-icon-button\n      class=\"\n        gds-background-none\n        gds-min-height-0\n        ng-clear-wrapper\n      \"\n      (click)=\"select.handleClearClick()\"\n      (mousedown)=\"onClearMouseDown($event)\"\n      (keydown.enter)=\"onKeydownClear($event)\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-primary\n          gds-icon-size-3xs\n          gds-mobile-icon-size-2xs\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i2.NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSearchBarComponent, isStandalone: true, selector: "gds-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, suppressClearOnClose: { classPropertyName: "suppressClearOnClose", publicName: "suppressClearOnClose", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isOpenOverride: { classPropertyName: "isOpenOverride", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showAllItems: { classPropertyName: "showAllItems", publicName: "showAllItems", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDisabled: "isDisabledChange", focused: "focused", blurred: "blurred", dropdownStateChanged: "dropdownStateChanged", searched: "searched", changed: "changed", value: "valueChange" }, host: { listeners: { "keydown": "setMarkedItemIndex()", "window:resize": "close()" }, properties: { "attr.disabled": "isDisabled() ? \"\" : undefined" } }, queries: [{ propertyName: "groupItemTmpl", first: true, predicate: ["groupItemTmpl"], descendants: true, isSignal: true }, { propertyName: "dropdownItemTmpl", first: true, predicate: ["itemTmpl"], descendants: true, isSignal: true }, { propertyName: "emptyTmpl", first: true, predicate: ["emptyTmpl"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-select\n  #select\n  class=\"\n    gds-radius-sm\n    gds-search-bar_input\n  \"\n  [placeholder]=\"!value() ? placeholder() : ''\"\n  [isOpen]=\"isOpen()\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"value()\"\n  (ngModelChange)=\"setValue($event)\"\n  [items]=\"items()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [loading]=\"loading()\"\n  [markFirst]=\"false\"\n  [groupBy]=\"groupBy()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n  [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n  (focus)=\"handleFocus($event)\"\n  (blur)=\"handleBlur($event)\"\n  (click)=\"handleClick($event)\"\n  (search)=\"handleSearch($event.term)\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n  (change)=\"handleChange($event)\"\n  (clear)=\"handleClear()\"\n>\n  <ng-template\n    ng-optgroup-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-option-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-notfound-tmp\n    let-searchTerm=\"searchTerm\"\n  >\n    <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n  </ng-template>\n  <ng-template ng-loadingtext-tmp>\n    <div class=\"\n      gds-display-flex\n      gds-justify-content-center\n      gds-padding-sm\n      gds-text-body\n      gds-text-primary\n    \">\n      <gds-spinner />\n    </div>\n  </ng-template>\n  <ng-template ng-loadingspinner-tmp />\n  <ng-template ng-clearbutton-tmp>\n    <button\n      gds-icon-button\n      class=\"\n        gds-background-none\n        gds-min-height-0\n        ng-clear-wrapper\n      \"\n      (click)=\"select.handleClearClick()\"\n      (mousedown)=\"onClearMouseDown($event)\"\n      (keydown.enter)=\"onKeydownClear($event)\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-primary\n          gds-icon-size-3xs\n          gds-mobile-icon-size-2xs\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text;--border: .5px solid var(--gds-palette-border-default);--border-radius: var(--gds-borderRadius-sm);--padding: 0px}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:var(--border);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;border-radius:var(--border-radius)!important;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor);border-radius:var(--border-radius)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center;padding:var(--padding)}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: i2.NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GdsSpinnerComponent, selector: "gds-spinner", inputs: ["trackWidth", "size"] }, { kind: "component", type: GdsIconButtonComponent, selector: "button[gds-icon-button]", inputs: ["tooltipLabel"] }, { kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSearchBarComponent, decorators: [{
             type: Component,
@@ -6924,7 +6939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.disabled]': 'isDisabled() ? "" : undefined',
                         '(keydown)': 'setMarkedItemIndex()',
                         '(window:resize)': 'close()'
-                    }, template: "<ng-select\n  #select\n  class=\"\n    gds-radius-sm\n    gds-search-bar_input\n  \"\n  [placeholder]=\"!value() ? placeholder() : ''\"\n  [isOpen]=\"isOpen()\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"value()\"\n  (ngModelChange)=\"setValue($event)\"\n  [items]=\"items()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [loading]=\"loading()\"\n  [markFirst]=\"false\"\n  [groupBy]=\"groupBy()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n  [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n  (focus)=\"handleFocus($event)\"\n  (blur)=\"handleBlur($event)\"\n  (click)=\"handleClick($event)\"\n  (search)=\"handleSearch($event.term)\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n  (change)=\"handleChange($event)\"\n  (clear)=\"handleClear()\"\n>\n  <ng-template\n    ng-optgroup-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-option-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-notfound-tmp\n    let-searchTerm=\"searchTerm\"\n  >\n    <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n  </ng-template>\n  <ng-template ng-loadingtext-tmp>\n    <div class=\"\n      gds-display-flex\n      gds-justify-content-center\n      gds-padding-sm\n      gds-text-body\n      gds-text-primary\n    \">\n      <gds-spinner />\n    </div>\n  </ng-template>\n  <ng-template ng-loadingspinner-tmp />\n  <ng-template ng-clearbutton-tmp>\n    <button\n      gds-icon-button\n      class=\"\n        gds-background-none\n        gds-min-height-0\n        ng-clear-wrapper\n      \"\n      (click)=\"select.handleClearClick()\"\n      (mousedown)=\"onClearMouseDown($event)\"\n      (keydown.enter)=\"onKeydownClear($event)\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-primary\n          gds-icon-size-3xs\n          gds-mobile-icon-size-2xs\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:.5px solid var(--gds-palette-border-default);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"] }]
+                    }, template: "<ng-select\n  #select\n  class=\"\n    gds-radius-sm\n    gds-search-bar_input\n  \"\n  [placeholder]=\"!value() ? placeholder() : ''\"\n  [isOpen]=\"isOpen()\"\n  [disabled]=\"isDisabled()\"\n  [ngModel]=\"value()\"\n  (ngModelChange)=\"setValue($event)\"\n  [items]=\"items()\"\n  [bindValue]=\"bindValue()\"\n  [bindLabel]=\"bindLabel()\"\n  [loading]=\"loading()\"\n  [markFirst]=\"false\"\n  [groupBy]=\"groupBy()\"\n  [dropdownPosition]=\"dropdownPosition()\"\n  [searchFn]=\"showAllItems() ? showAllItemsSearchFunction : searchFunction()\"\n  [ariaLabel]=\"ariaLabel() ?? 'Core.Accessibility.Searchbar' | translate\"\n  (focus)=\"handleFocus($event)\"\n  (blur)=\"handleBlur($event)\"\n  (click)=\"handleClick($event)\"\n  (search)=\"handleSearch($event.term)\"\n  (open)=\"handleOpened()\"\n  (close)=\"handleClosed()\"\n  (change)=\"handleChange($event)\"\n  (clear)=\"handleClear()\"\n>\n  <ng-template\n    ng-optgroup-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"groupItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-option-tmp\n    let-item=\"item\"\n    let-index=\"index\"\n  >\n    <div class=\"\n      gds-display-flex\n      gds-padding-block-3xs\n      gds-padding-inline-0\n      gds-text-body\n      gds-text-primary\n    \">\n      <ng-container *ngTemplateOutlet=\"dropdownItemTmpl(); context: { item, marked: markedIndex() === index }\" />\n    </div>\n  </ng-template>\n  <ng-template\n    ng-notfound-tmp\n    let-searchTerm=\"searchTerm\"\n  >\n    <ng-container *ngTemplateOutlet=\"emptyTmpl(); context: { searchTerm }\" />\n  </ng-template>\n  <ng-template ng-loadingtext-tmp>\n    <div class=\"\n      gds-display-flex\n      gds-justify-content-center\n      gds-padding-sm\n      gds-text-body\n      gds-text-primary\n    \">\n      <gds-spinner />\n    </div>\n  </ng-template>\n  <ng-template ng-loadingspinner-tmp />\n  <ng-template ng-clearbutton-tmp>\n    <button\n      gds-icon-button\n      class=\"\n        gds-background-none\n        gds-min-height-0\n        ng-clear-wrapper\n      \"\n      (click)=\"select.handleClearClick()\"\n      (mousedown)=\"onClearMouseDown($event)\"\n      (keydown.enter)=\"onKeydownClear($event)\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-primary\n          gds-icon-size-3xs\n          gds-mobile-icon-size-2xs\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </ng-template>\n</ng-select>\n", styles: ["@layer design-system{gds-search-bar{display:flex;max-width:var(--search-bar-max-width, 560px);min-width:230px;width:100%;position:relative;--background-color: var(--gds-palette-background-white);--text-color: var(--gds-palette-text-default-primary);--icon-color: var(--gds-palette-icon-primary);--cursor: text;--border: .5px solid var(--gds-palette-border-default);--border-radius: var(--gds-borderRadius-sm);--padding: 0px}gds-search-bar[disabled]{--background-color: var(--gds-palette-background-disabled);--text-color: var(--gds-palette-text-default-disabled);--icon-color: var(--gds-palette-icon-disabled);--cursor: not-allowed}gds-search-bar .gds-search-bar_icon{min-width:var(--gds-spacing-sm);color:var(--icon-color)}gds-search-bar .gds-search-bar_input{background-color:var(--background-color);border:var(--border);color:var(--text-color);box-sizing:border-box;text-overflow:ellipsis;width:100%;border-radius:var(--border-radius)!important;font:var(--gds-text-body-shorthand)}:is(body[isMobile=true]) gds-search-bar .gds-search-bar_input{font:var(--gds-text-inputMobile-shorthand)}gds-search-bar .gds-search-bar_input::placeholder{color:var(--gds-palette-text-default-secondary);width:100%}gds-search-bar .gds-search-bar_input:focus-visible{outline:none}gds-search-bar .gds-search-bar_end-content{display:flex;align-items:center;gap:var(--gds-spacing-2xs)}gds-search-bar .gds-search-bar_clear-button{cursor:pointer}gds-search-bar ng-select.ng-select .leading-icon{height:var(--gds-iconSize-2xs);width:var(--gds-iconSize-2xs);color:var(--icon-color);margin-right:var(--gds-size-3xs-rem)}gds-search-bar ng-select.ng-select .ng-select-container{padding:6px var(--gds-spacing-xs);cursor:var(--cursor);border-radius:var(--border-radius)}:is(body[isMobile=true]) gds-search-bar ng-select.ng-select .ng-select-container{padding-block:11px}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container{display:flex;justify-content:var(--search-bar-placeholder-justify, \"center\");align-items:center;padding:var(--padding)}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container:focus-within{justify-content:unset}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 calc(12px + var(--gds-iconSize-xs))}gds-search-bar ng-select.ng-select .ng-select-container .ng-value-container .ng-input>input{vertical-align:baseline;cursor:var(--cursor)}gds-search-bar ng-select.ng-select .ng-select-container .ng-clear-wrapper[gds-icon-button]{--gds-mobile-button-size: var(--gds-iconSize-2xs)}gds-search-bar ng-select.ng-select .ng-dropdown-panel{padding:var(--gds-spacing-3xs) 2px;visibility:hidden}gds-search-bar ng-select.ng-select .ng-dropdown-panel .ng-option{overflow:unset!important}gds-search-bar ng-select.ng-select .ng-dropdown-panel .scroll-host{padding:0 2px}}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }, { type: i0.Output, args: ["isDisabledChange"] }], suppressClearOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressClearOnClose", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isOpenOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFunction", required: false }] }], showAllItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllItems", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], groupItemTmpl: [{ type: i0.ContentChild, args: ['groupItemTmpl', { isSignal: true }] }], dropdownItemTmpl: [{ type: i0.ContentChild, args: ['itemTmpl', { isSignal: true }] }], emptyTmpl: [{ type: i0.ContentChild, args: ['emptyTmpl', { isSignal: true }] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], dropdownStateChanged: [{ type: i0.Output, args: ["dropdownStateChanged"] }], searched: [{ type: i0.Output, args: ["searched"] }], changed: [{ type: i0.Output, args: ["changed"] }], select: [{ type: i0.ViewChild, args: ['select', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class GdsSidebarItemComponent {
@@ -6999,7 +7014,7 @@ class GdsSplitButtonComponent extends ButtonBaseDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSplitButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSplitButtonComponent, isStandalone: true, selector: "gds-split-button", inputs: { trailingDropdown: { classPropertyName: "trailingDropdown", publicName: "trailingDropdown", isSignal: true, isRequired: true, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingAriaLabel: { classPropertyName: "leadingAriaLabel", publicName: "leadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.enter": "onEnter()", "keydown.arrowDown": "onArrowDown()" }, classAttribute: "gds-display-flex gds-radius-sm" }, viewQueries: [{ propertyName: "leadingBtn", first: true, predicate: ["leadingBtn"], descendants: true, isSignal: true }, { propertyName: "trailingBtn", first: true, predicate: ["trailingBtn"], descendants: true, isSignal: true }, { propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #leadingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-right-0\n    gds-radius-top-right-0\n    gds-split-button_button\n    gds-split-button_leading\n  \"\n  tabindex=\"-1\"\n  [size]=\"size()\"\n  [busy]=\"busy()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"leadingAriaLabel()\"\n  (click)=\"clicked.emit($event)\"\n>\n  <ng-content />\n</button>\n\n<button\n  #trailingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-left-0\n    gds-radius-top-left-0\n    gds-split-button_button\n    gds-split-button_trailing\n  \"\n  tabindex=\"-1\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"trailingAriaLabel()\"\n  [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n  [cdkMenuPosition]=\"menuPosition()\"\n  (cdkMenuClosed)=\"onMenuClosed()\"\n>\n  <gds-icon\n    [key]=\"trailingIcon()\"\n    class=\"gds-icon-size-2xs\"\n  />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: GdsSplitButtonComponent, isStandalone: true, selector: "gds-split-button", inputs: { trailingDropdown: { classPropertyName: "trailingDropdown", publicName: "trailingDropdown", isSignal: true, isRequired: true, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingAriaLabel: { classPropertyName: "leadingAriaLabel", publicName: "leadingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "menuPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown.enter": "onEnter()", "keydown.arrowDown": "onArrowDown()" }, classAttribute: "gds-display-flex gds-radius-sm" }, viewQueries: [{ propertyName: "leadingBtn", first: true, predicate: ["leadingBtn"], descendants: true, isSignal: true }, { propertyName: "trailingBtn", first: true, predicate: ["trailingBtn"], descendants: true, isSignal: true }, { propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #leadingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-right-0\n    gds-radius-top-right-0\n    gds-split-button_button\n    gds-split-button_leading\n  \"\n  [tabIndex]=\"-1\"\n  [size]=\"size()\"\n  [busy]=\"busy()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"leadingAriaLabel()\"\n  (click)=\"clicked.emit($event)\"\n>\n  <ng-content />\n</button>\n\n<button\n  #trailingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-left-0\n    gds-radius-top-left-0\n    gds-split-button_button\n    gds-split-button_trailing\n  \"\n  [tabIndex]=\"-1\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"trailingAriaLabel()\"\n  [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n  [cdkMenuPosition]=\"menuPosition()\"\n  (cdkMenuClosed)=\"onMenuClosed()\"\n>\n  <gds-icon\n    [key]=\"trailingIcon()\"\n    class=\"gds-icon-size-2xs\"\n  />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"], dependencies: [{ kind: "component", type: GdsIconComponent, selector: "gds-icon", inputs: ["key", "width", "height", "color"] }, { kind: "component", type: GdsButtonComponent, selector: "button[gds-button]" }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsSplitButtonComponent, decorators: [{
             type: Component,
@@ -7008,7 +7023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         tabindex: '0',
                         '(keydown.enter)': 'onEnter()',
                         '(keydown.arrowDown)': 'onArrowDown()'
-                    }, template: "<button\n  #leadingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-right-0\n    gds-radius-top-right-0\n    gds-split-button_button\n    gds-split-button_leading\n  \"\n  tabindex=\"-1\"\n  [size]=\"size()\"\n  [busy]=\"busy()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"leadingAriaLabel()\"\n  (click)=\"clicked.emit($event)\"\n>\n  <ng-content />\n</button>\n\n<button\n  #trailingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-left-0\n    gds-radius-top-left-0\n    gds-split-button_button\n    gds-split-button_trailing\n  \"\n  tabindex=\"-1\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"trailingAriaLabel()\"\n  [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n  [cdkMenuPosition]=\"menuPosition()\"\n  (cdkMenuClosed)=\"onMenuClosed()\"\n>\n  <gds-icon\n    [key]=\"trailingIcon()\"\n    class=\"gds-icon-size-2xs\"\n  />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"] }]
+                    }, template: "<button\n  #leadingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-right-0\n    gds-radius-top-right-0\n    gds-split-button_button\n    gds-split-button_leading\n  \"\n  [tabIndex]=\"-1\"\n  [size]=\"size()\"\n  [busy]=\"busy()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"leadingAriaLabel()\"\n  (click)=\"clicked.emit($event)\"\n>\n  <ng-content />\n</button>\n\n<button\n  #trailingBtn\n  gds-button\n  class=\"\n    gds-radius-bottom-left-0\n    gds-radius-top-left-0\n    gds-split-button_button\n    gds-split-button_trailing\n  \"\n  [tabIndex]=\"-1\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"trailingAriaLabel()\"\n  [cdkMenuTriggerFor]=\"!disabled() ? trailingDropdown() : undefined\"\n  [cdkMenuPosition]=\"menuPosition()\"\n  (cdkMenuClosed)=\"onMenuClosed()\"\n>\n  <gds-icon\n    [key]=\"trailingIcon()\"\n    class=\"gds-icon-size-2xs\"\n  />\n</button>\n", styles: ["@layer design-system{:host{--border-separator-width: .5px;--border-separator: var(--border-separator-width) solid var(--gds-palette-border-default)}:host:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--gds-button-outlineColor, var(--gds-neutral-700));outline-offset:1px}:is(body[isMobile=true]) :host{--border-separator-width: 1px}:host .gds-split-button_leading{border-right:none;padding-inline:var(--gds-spacing-xs)}:host .gds-split-button_trailing,:host .gds-split-button_trailing:not(:disabled):hover{border-left:var(--border-separator);padding-inline:var(--gds-spacing-3xs)}:is(body[isMobile=true]) :host .gds-split-button_trailing,:is(body[isMobile=true]) :host .gds-split-button_trailing:not(:disabled):hover{padding-inline:10px}}\n"] }]
         }], propDecorators: { trailingDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDropdown", required: true }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], leadingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingAriaLabel", required: false }] }], trailingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAriaLabel", required: false }] }], menuPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuPosition", required: false }] }], leadingBtn: [{ type: i0.ViewChild, args: ['leadingBtn', { isSignal: true }] }], trailingBtn: [{ type: i0.ViewChild, args: ['trailingBtn', { isSignal: true }] }], menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }] } });
 
 class GdsTimelineItemComponent {
@@ -7079,6 +7094,7 @@ class GdsListboxBaseDirective {
     items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     _keyManager;
     _activeId = signal(null, ...(ngDevMode ? [{ debugName: "_activeId" }] : /* istanbul ignore next */ []));
+    #pointerInteraction = false;
     // Maintain a single key manager instance in case of dynamic item changes.
     #setupKeyManager = effect(() => {
         const items = this.items();
@@ -7105,7 +7121,20 @@ class GdsListboxBaseDirective {
     ngOnDestroy() {
         this._keyManager?.destroy();
     }
+    onPointerDown() {
+        this.#pointerInteraction = true;
+    }
+    onPointerUp() {
+        // Reset after focus handlers from the same gesture have run.
+        queueMicrotask(() => {
+            this.#pointerInteraction = false;
+        });
+    }
     onFocus() {
+        if (this.#pointerInteraction) {
+            // When event comes from pointer interaction, don't focus the first item
+            return;
+        }
         this.tabindex.set(-1);
         this._keyManager?.setFirstItemActive();
     }
@@ -7150,7 +7179,7 @@ class GdsListboxDirective extends GdsListboxBaseDirective {
         super.onKeydown(event);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsListboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsListboxDirective, isStandalone: true, selector: "[gdsListbox]", inputs: { onNavigatePastLastOption: { classPropertyName: "onNavigatePastLastOption", publicName: "onNavigatePastLastOption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsListboxDirective, isStandalone: true, selector: "[gdsListbox]", inputs: { onNavigatePastLastOption: { classPropertyName: "onNavigatePastLastOption", publicName: "onNavigatePastLastOption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsListboxDirective, decorators: [{
             type: Directive,
@@ -7160,7 +7189,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         role: 'listbox',
                         '[attr.tabindex]': 'tabindex()',
                         '(keydown)': 'onKeydown($event)',
-                        '(focus)': 'onFocus()'
+                        '(focus)': 'onFocus()',
+                        '(pointerdown)': 'onPointerDown()',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerUp()'
                     }
                 }]
         }], propDecorators: { onNavigatePastLastOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "onNavigatePastLastOption", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GdsListboxOption), { ...{ descendants: true }, isSignal: true }] }] } });
@@ -7386,7 +7418,7 @@ class GdsVirtualScrollListboxDirective extends GdsListboxBaseDirective {
         return Number.isFinite(index) ? index : null;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsVirtualScrollListboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsVirtualScrollListboxDirective, isStandalone: true, selector: "[gdsListboxVirtualScroll]", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, optionIndexAttribute: { classPropertyName: "optionIndexAttribute", publicName: "optionIndexAttribute", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentFocusedIndex: "currentFocusedIndex" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "focusin": "onFocusIn($event)" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GdsVirtualScrollListboxDirective, isStandalone: true, selector: "[gdsListboxVirtualScroll]", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, optionIndexAttribute: { classPropertyName: "optionIndexAttribute", publicName: "optionIndexAttribute", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentFocusedIndex: "currentFocusedIndex" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocus()", "focusin": "onFocusIn($event)", "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()" }, properties: { "attr.tabindex": "tabindex()" } }, queries: [{ propertyName: "options", predicate: GdsListboxOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GdsVirtualScrollListboxDirective, decorators: [{
             type: Directive,
@@ -7397,7 +7429,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.tabindex]': 'tabindex()',
                         '(keydown)': 'onKeydown($event)',
                         '(focus)': 'onFocus()',
-                        '(focusin)': 'onFocusIn($event)'
+                        '(focusin)': 'onFocusIn($event)',
+                        '(pointerdown)': 'onPointerDown()',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerUp()'
                     }
                 }]
         }], propDecorators: { options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GdsListboxOption), { ...{ descendants: true }, isSignal: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], optionIndexAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndexAttribute", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], currentFocusedIndex: [{ type: i0.Output, args: ["currentFocusedIndex"] }] } });