@guildofgleks/ui 21.7.2 → 21.9.0

package/fesm2022/guildofgleks-ui.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, inject, computed, ElementRef, Renderer2, PLATFORM_ID, e
 import { Subject, timer } from 'rxjs';
 import { throttle } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgControl } from '@angular/forms';
 
@@ -400,7 +400,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], propDecorators: { rippleDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleDisabled", required: false }] }], rippleCentred: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleCentred", required: false }] }] } });
 
+/** The built-in look, when neither the instance nor the app asks for anything else. */
+const DEFAULT_VARIANT$1 = 'runic';
 class SpinnerComponent {
+    globalConfig = inject(GOG_CONFIG);
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
      * Covers the viewport with a backdrop while it spins.
@@ -417,16 +420,26 @@ class SpinnerComponent {
      * `runic` and `ring` are built-in presets. Use `custom` to render your own
      * markup via content projection — it inherits the size wrapper, overlay
      * behaviour, and `--gog-spinner-color` theming, but the visuals are yours.
+     *
+     * Unset, falls back to `GOG_CONFIG.spinner.component` (rendered in place of the preset), then
+     * to `GOG_CONFIG.spinner.variant`, then to `runic`.
      */
-    variant = input('runic', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * The app-wide component, and only when this instance has asked for nothing specific. An
+     * explicit `variant` is a decision about *this* spinner and outranks a default set elsewhere —
+     * which is also what keeps `variant="custom"` projecting the caller's own content.
+     */
+    configComponent = computed(() => this.variant() === undefined ? (this.globalConfig.spinner?.component ?? null) : null, ...(ngDevMode ? [{ debugName: "configComponent" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => resolveConfigured(this.variant(), this.globalConfig.spinner?.variant, DEFAULT_VARIANT$1), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerComponent, isStandalone: true, selector: "gog-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "gog-inline-center" }, ngImport: i0, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  @switch (variant()) {\n    @case ('ring') {\n      <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n    }\n    @case ('custom') {\n      <ng-content />\n    }\n    @default {\n      <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n        <!-- Static dim track -->\n        <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n        <!-- Outer arc \u2014 rotates clockwise, long segment -->\n        <circle\n          class=\"gog-spinner__arc-outer\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"26\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n        <circle\n          class=\"gog-spinner__arc-inner\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"18\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n        <g class=\"gog-spinner__ticks\">\n          <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n        </g>\n\n        <!-- Inner rune \u2014 glow pulse only, no transform -->\n        <text\n          class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n          x=\"32\"\n          y=\"32\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n        >\n          \u2726\n        </text>\n      </svg>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerComponent, isStandalone: true, selector: "gog-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "gog-inline-center" }, ngImport: i0, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  @if (configComponent(); as loader) {\n    <!-- The app's own indicator, from `GOG_CONFIG.spinner.component`. It sits inside the same\n         size wrapper as the built-ins, so it inherits the sizing, the overlay and the accessible\n         name \u2014 and it reaches the spinners inside `gog-button` and `gog-autocomplete`, which\n         expose no input of their own. -->\n    <ng-container *ngComponentOutlet=\"loader\" />\n  } @else {\n    @switch (resolvedVariant()) {\n      @case ('ring') {\n        <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n      }\n      @case ('custom') {\n        <ng-content />\n      }\n      @default {\n        <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n          <!-- Static dim track -->\n          <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n          <!-- Outer arc \u2014 rotates clockwise, long segment -->\n          <circle\n            class=\"gog-spinner__arc-outer\"\n            cx=\"32\"\n            cy=\"32\"\n            r=\"26\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"butt\"\n          />\n\n          <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n          <circle\n            class=\"gog-spinner__arc-inner\"\n            cx=\"32\"\n            cy=\"32\"\n            r=\"18\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"butt\"\n          />\n\n          <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n          <g class=\"gog-spinner__ticks\">\n            <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n            <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n            <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n            <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n          </g>\n\n          <!-- Inner rune \u2014 glow pulse only, no transform -->\n          <text\n            class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n            x=\"32\"\n            y=\"32\"\n            text-anchor=\"middle\"\n            dominant-baseline=\"central\"\n          >\n            \u2726\n          </text>\n        </svg>\n      }\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-spinner', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-spinner', imports: [NgComponentOutlet, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-inline-center',
-                    }, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  @switch (variant()) {\n    @case ('ring') {\n      <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n    }\n    @case ('custom') {\n      <ng-content />\n    }\n    @default {\n      <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n        <!-- Static dim track -->\n        <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n        <!-- Outer arc \u2014 rotates clockwise, long segment -->\n        <circle\n          class=\"gog-spinner__arc-outer\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"26\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n        <circle\n          class=\"gog-spinner__arc-inner\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"18\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n        <g class=\"gog-spinner__ticks\">\n          <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n        </g>\n\n        <!-- Inner rune \u2014 glow pulse only, no transform -->\n        <text\n          class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n          x=\"32\"\n          y=\"32\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n        >\n          \u2726\n        </text>\n      </svg>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"] }]
+                    }, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  @if (configComponent(); as loader) {\n    <!-- The app's own indicator, from `GOG_CONFIG.spinner.component`. It sits inside the same\n         size wrapper as the built-ins, so it inherits the sizing, the overlay and the accessible\n         name \u2014 and it reaches the spinners inside `gog-button` and `gog-autocomplete`, which\n         expose no input of their own. -->\n    <ng-container *ngComponentOutlet=\"loader\" />\n  } @else {\n    @switch (resolvedVariant()) {\n      @case ('ring') {\n        <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n      }\n      @case ('custom') {\n        <ng-content />\n      }\n      @default {\n        <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n          <!-- Static dim track -->\n          <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n          <!-- Outer arc \u2014 rotates clockwise, long segment -->\n          <circle\n            class=\"gog-spinner__arc-outer\"\n            cx=\"32\"\n            cy=\"32\"\n            r=\"26\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"butt\"\n          />\n\n          <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n          <circle\n            class=\"gog-spinner__arc-inner\"\n            cx=\"32\"\n            cy=\"32\"\n            r=\"18\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"butt\"\n          />\n\n          <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n          <g class=\"gog-spinner__ticks\">\n            <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n            <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n            <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n            <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n          </g>\n\n          <!-- Inner rune \u2014 glow pulse only, no transform -->\n          <text\n            class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n            x=\"32\"\n            y=\"32\"\n            text-anchor=\"middle\"\n            dominant-baseline=\"central\"\n          >\n            \u2726\n          </text>\n        </svg>\n      }\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 const DEFAULT_DEBOUNCE = 300;
@@ -434,6 +447,27 @@ const DEFAULT_DEBOUNCE = 300;
 const DEFAULT_SIZE$a = 'md';
 class ButtonComponent {
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * What the action means, as opposed to how loudly the button is drawn. `'accent'` — the
+     * default — is the absence of a claim and leaves the button exactly as it was; the four status
+     * names paint it in that status's colour.
+     *
+     * **Orthogonal to `variant`, on purpose.** A destructive action is destructive whether it is
+     * filled, outlined or a ghost, so this does not add a fifth variant: it re-points the colours
+     * all four are built from. `variant="ghost" severity="danger"` is a quiet delete, and
+     * `variant="primary" severity="danger"` is a loud one.
+     *
+     * ```html
+     * <gog-button severity="danger" (gogClick)="deleteAccount()">Delete account</gog-button>
+     * <gog-button variant="outline" severity="warning">Discard draft</gog-button>
+     * ```
+     *
+     * A filled severity button's label is `--gog-<status>-text-color`, which each theme states for
+     * its own hue; a transparent one's is that hue mixed toward the page's ink until it reads as
+     * text, since the raw status colour clears WCAG AA on the page in only five of the eleven
+     * shipped themes. Override `--gog-button-<status>-ink` to change it.
+     */
+    severity = input('accent', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -461,6 +495,35 @@ class ButtonComponent {
      * Use this input instead, especially for icon-only buttons.
      */
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * State and relationship attributes, forwarded to the native `<button>` for the same reason
+     * `ariaLabel` is: this component hides the real button, so an `[attr.aria-*]` written on
+     * `<gog-button>` lands on the custom element — which has no role — and reaches nothing.
+     * It fails silently, with no error and no visible difference.
+     *
+     * `null` (the default) omits the attribute. `false` is **not** the same as `null` here and is
+     * deliberately forwarded: a toggle button in its off state has to say `aria-pressed="false"`,
+     * because a button with no `aria-pressed` at all is not a toggle button — it is a button that
+     * does something, and a screen reader will describe it as one.
+     *
+     * ```html
+     * <gog-button [ariaPressed]="isRtl()" (gogClick)="toggle()">Mirror</gog-button>
+     *
+     * <gog-button [ariaExpanded]="isOpen()" ariaControls="filters" ariaHasPopup="dialog">
+     *   Filters
+     * </gog-button>
+     * ```
+     *
+     * The `[gogButton]` directive needs none of this: it styles an element the consumer owns, so
+     * `aria-pressed` written there already lands where it should.
+     */
+    ariaPressed = input(null, ...(ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []));
+    /** See `ariaPressed`. `false` renders `aria-expanded="false"`; `null` omits the attribute. */
+    ariaExpanded = input(null, ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+    /** Id of the element this button controls — pairs with `ariaExpanded`. See `ariaPressed`. */
+    ariaControls = input(null, ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    /** What this button opens, if anything. See `ariaPressed`. */
+    ariaHasPopup = input(null, ...(ngDevMode ? [{ debugName: "ariaHasPopup" }] : /* istanbul ignore next */ []));
     gogClick = output();
     /** Fully non-interactive: excluded from tab order via the native `disabled` attribute. */
     isNativeDisabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "isNativeDisabled" }] : /* istanbul ignore next */ []));
@@ -484,6 +547,15 @@ class ButtonComponent {
      * Always emitted — `gog-btn` has a rule for every size, `md` included.
      */
     sizeClass = computed(() => `gog-btn--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Size and severity in one binding, because a template may carry only one `[class]`. `'accent'`
+     * emits nothing: it is the absence of a severity, and a `.gog-btn--accent` class would be a
+     * selector that has to exist for no reason.
+     */
+    stateClasses = computed(() => {
+        const severity = this.severity();
+        return severity === 'accent' ? this.sizeClass() : `${this.sizeClass()} gog-btn--${severity}`;
+    }, ...(ngDevMode ? [{ debugName: "stateClasses" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     click$ = new Subject();
     constructor() {
@@ -497,7 +569,7 @@ class ButtonComponent {
         this.click$.next(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaPressed: { classPropertyName: "ariaPressed", publicName: "ariaPressed", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-pressed]=\"ariaPressed()\"\r\n  [attr.aria-expanded]=\"ariaExpanded()\"\r\n  [attr.aria-controls]=\"ariaControls()\"\r\n  [attr.aria-haspopup]=\"ariaHasPopup()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"stateClasses()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -505,8 +577,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // Drives the :host(.gog-host--full-width) rules in the stylesheet — without this
                         // binding the `fullWidth` input has no visible effect.
                         '[class.gog-host--full-width]': 'fullWidth()',
-                    }, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
+                    }, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-pressed]=\"ariaPressed()\"\r\n  [attr.aria-expanded]=\"ariaExpanded()\"\r\n  [attr.aria-controls]=\"ariaControls()\"\r\n  [attr.aria-haspopup]=\"ariaHasPopup()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"stateClasses()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaPressed", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
 
 /** Built-in default, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SIZE$9 = 'md';
@@ -551,6 +623,27 @@ const DEFAULT_SIZE$9 = 'md';
  */
 class GogButtonDirective {
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * What the action means, as opposed to how loudly the button is drawn. `'accent'` — the
+     * default — is the absence of a claim and leaves the button exactly as it was; the four status
+     * names paint it in that status's colour.
+     *
+     * **Orthogonal to `variant`, on purpose.** A destructive action is destructive whether it is
+     * filled, outlined or a ghost, so this does not add a fifth variant: it re-points the colours
+     * all four are built from. `variant="ghost" severity="danger"` is a quiet delete, and
+     * `variant="primary" severity="danger"` is a loud one.
+     *
+     * ```html
+     * <button gogButton severity="danger" type="submit">Delete account</button>
+     * <a gogButton variant="outline" severity="warning" routerLink="/drafts">Discard draft</a>
+     * ```
+     *
+     * A filled severity button's label is `--gog-<status>-text-color`, which each theme states for
+     * its own hue; a transparent one's is that hue mixed toward the page's ink until it reads as
+     * text, since the raw status colour clears WCAG AA on the page in only five of the eleven
+     * shipped themes. Override `--gog-button-<status>-ink` to change it.
+     */
+    severity = input('accent', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'` — as on `gog-button`. */
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
@@ -568,6 +661,8 @@ class GogButtonDirective {
     rippleControl = bindRipple(this.rippleEnabled);
     resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$9), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     variantClass = computed(() => `gog-btn--${this.variant()}`, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
+    /** Empty for `'accent'` — see `stateClasses` on `gog-button` for why that emits no class. */
+    severityClass = computed(() => this.severity() === 'accent' ? '' : ` gog-btn--${this.severity()}`, ...(ngDevMode ? [{ debugName: "severityClass" }] : /* istanbul ignore next */ []));
     /**
      * Unlike `gog-button`, this emits a class for `'md'` too. The component can leave the default
      * size unclassed because its own stylesheet bottoms out at `--gog-button-md-*`; here the class is
@@ -576,7 +671,7 @@ class GogButtonDirective {
      */
     sizeClass = computed(() => `gog-btn--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogButtonDirective, isStandalone: true, selector: "a[gogButton], button[gogButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variantClass() + \" \" + sizeClass()", "class.gog-btn--full-width": "fullWidth()" }, classAttribute: "gog-btn gog-inline-center gog-contained-layout" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogButtonDirective, isStandalone: true, selector: "a[gogButton], button[gogButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variantClass() + \" \" + sizeClass() + severityClass()", "class.gog-btn--full-width": "fullWidth()" }, classAttribute: "gog-btn gog-inline-center gog-contained-layout" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogButtonDirective, decorators: [{
             type: Directive,
@@ -587,11 +682,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     selector: 'a[gogButton], button[gogButton]',
                     host: {
                         class: 'gog-btn gog-inline-center gog-contained-layout',
-                        '[class]': 'variantClass() + " " + sizeClass()',
+                        '[class]': 'variantClass() + " " + sizeClass() + severityClass()',
                         '[class.gog-btn--full-width]': 'fullWidth()',
                     },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
 
 const VERTICAL_ARROWS = ['ArrowDown', 'ArrowUp'];
 const HORIZONTAL_ARROWS = ['ArrowRight', 'ArrowLeft'];
@@ -1074,7 +1169,7 @@ class AccordionComponent {
         handleRovingFocusKeydown(event, headers);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n          <!--\r\n            The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n            Without it the right-hand side is empty while loading and the chevron appears out of\r\n            nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n          -->\r\n          @if (showChevron()) {\r\n            <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n              <!--\r\n                `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n                height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n                the row. A circle takes its diameter from `width` and keeps itself round, so\r\n                filling the chevron's own box is what matches it.\r\n              -->\r\n              <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n            </span>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none;--gog-skeleton-base: var(--gog-border-color)}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n          <!--\r\n            The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n            Without it the right-hand side is empty while loading and the chevron appears out of\r\n            nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n          -->\r\n          @if (showChevron()) {\r\n            <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n              <!--\r\n                `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n                height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n                the row. A circle takes its diameter from `width` and keeps itself round, so\r\n                filling the chevron's own box is what matches it.\r\n              -->\r\n              <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n            </span>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover,.gog-accordion__item--disabled .gog-accordion__header:active{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-hover-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:active{background-color:var(--gog-accordion-press-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none;--gog-skeleton-base: var(--gog-border-color)}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
@@ -1087,7 +1182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                          * already do this; see the loading-state rule in `api-design.instructions.md`.
                          */
                         '[attr.aria-busy]': 'loading() ? "true" : null',
-                    }, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n          <!--\r\n            The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n            Without it the right-hand side is empty while loading and the chevron appears out of\r\n            nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n          -->\r\n          @if (showChevron()) {\r\n            <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n              <!--\r\n                `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n                height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n                the row. A circle takes its diameter from `width` and keeps itself round, so\r\n                filling the chevron's own box is what matches it.\r\n              -->\r\n              <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n            </span>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none;--gog-skeleton-base: var(--gog-border-color)}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
+                    }, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n          <!--\r\n            The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n            Without it the right-hand side is empty while loading and the chevron appears out of\r\n            nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n          -->\r\n          @if (showChevron()) {\r\n            <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n              <!--\r\n                `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n                height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n                the row. A circle takes its diameter from `width` and keeps itself round, so\r\n                filling the chevron's own box is what matches it.\r\n              -->\r\n              <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n            </span>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover,.gog-accordion__item--disabled .gog-accordion__header:active{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-hover-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:active{background-color:var(--gog-accordion-press-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none;--gog-skeleton-base: var(--gog-border-color)}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], openIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIds", required: false }] }, { type: i0.Output, args: ["openIdsChange"] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
 
 /**
@@ -2332,6 +2427,14 @@ const DEFAULT_AUTO_HIDE = true;
 const DEFAULT_HIDE_DELAY$1 = 800;
 const DEFAULT_OVERSCROLL_BEHAVIOR = 'auto';
 const DEFAULT_SHOW_TRACK = true;
+const DEFAULT_HORIZONTAL_WHEEL = false;
+/**
+ * `WheelEvent.deltaY` is only in pixels when `deltaMode` is `DOM_DELTA_PIXEL`. Firefox reports
+ * lines, where a notch is about 3 — scrolling by that raw number moves three pixels and looks
+ * broken. These convert a notch into something comparable to the pixel case: roughly one line of
+ * text, and for the page mode the viewport's own width, resolved at the call site.
+ */
+const WHEEL_LINE_HEIGHT_PX = 16;
 function clamp$1(value, min, max) {
     return Math.min(max, Math.max(min, value));
 }
@@ -2382,6 +2485,28 @@ class ScrollComponent {
      * then to `true`.
      */
     showTrack = input(undefined, ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
+    /**
+     * Turns a vertical wheel into horizontal scrolling, for the case where the container has
+     * nothing to scroll vertically. Without it, hovering a horizontal-only region and turning the
+     * wheel scrolls the *page* — the browser's own behaviour, and the single most reported thing
+     * about this component.
+     *
+     * Only ever acts when all of this holds, so it cannot take a gesture that was meant for
+     * something else: this viewport is not itself scrollable vertically, the event carries no
+     * horizontal delta of its own (a trackpad or `Shift`+wheel already speaks horizontal and the
+     * browser handles those correctly), `ctrlKey` is clear (that is pinch-zoom), and there is
+     * horizontal room left in the direction of the turn. **That last one is the whole
+     * scroll-chaining story:** once the content is against its end, the event is left alone, so
+     * the page picks it up exactly as it would have. Intercepting unconditionally would make the
+     * wheel go dead over a scrolled-to-the-end region, which is a worse bug than the one this
+     * fixes. `overscrollBehavior: 'contain'` still contains it — that boundary is the browser's
+     * and this never reaches past it.
+     *
+     * Unset, falls back to `GOG_CONFIG.scroll.horizontalWheel`, then to `false`. Off by default
+     * because it changes what an existing `axis="horizontal"` instance does with a gesture it
+     * currently passes on, and one `provideGogConfig` line turns it on everywhere.
+     */
+    horizontalWheel = input(undefined, ...(ngDevMode ? [{ debugName: "horizontalWheel" }] : /* istanbul ignore next */ []));
     gogScroll = output();
     gogReachStart = output();
     gogReachEnd = output();
@@ -2432,6 +2557,9 @@ class ScrollComponent {
         this.globalConfig.scroll?.overscrollBehavior ??
         DEFAULT_OVERSCROLL_BEHAVIOR, ...(ngDevMode ? [{ debugName: "resolvedOverscrollBehavior" }] : /* istanbul ignore next */ []));
     resolvedShowTrack = computed(() => this.showTrack() ?? this.globalConfig.scroll?.showTrack ?? DEFAULT_SHOW_TRACK, ...(ngDevMode ? [{ debugName: "resolvedShowTrack" }] : /* istanbul ignore next */ []));
+    resolvedHorizontalWheel = computed(() => this.horizontalWheel() ??
+        this.globalConfig.scroll?.horizontalWheel ??
+        DEFAULT_HORIZONTAL_WHEEL, ...(ngDevMode ? [{ debugName: "resolvedHorizontalWheel" }] : /* istanbul ignore next */ []));
     /**
      * Only applies `resolvedOverscrollBehavior` on an axis that's actually acting as a scroll
      * container — on an axis that's `visible` (see viewportOverflowY/X above) there is no
@@ -2522,6 +2650,46 @@ class ScrollComponent {
         this.interacting.set(true);
         this.restartHideTimer();
     }
+    /**
+     * See the `horizontalWheel` input for the rules. Every early return here hands the event back
+     * to the browser untouched, which is the default this feature is a narrow exception to.
+     */
+    onWheel(event) {
+        if (!this.resolvedHorizontalWheel())
+            return;
+        // Pinch-zoom arrives as a wheel event with ctrlKey set, on every platform.
+        if (event.ctrlKey)
+            return;
+        // The device (or Shift) already produced a horizontal delta; the browser applies it
+        // correctly and translating on top would double the movement.
+        if (event.deltaX !== 0 || event.deltaY === 0)
+            return;
+        const viewport = this.viewportRef().nativeElement;
+        // A viewport that can still scroll vertically was the target of this gesture. Checked
+        // against live geometry rather than `axis`, so `axis="both"` behaves the way a reader
+        // expects on both counts: the wheel scrolls down while there is down to go, and turns into
+        // horizontal only once there is not.
+        if (viewport.scrollHeight - viewport.clientHeight > 0)
+            return;
+        const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth;
+        if (maxScrollLeft <= 0)
+            return;
+        const delta = this.wheelDeltaToPixels(event, viewport.clientWidth);
+        const next = clamp$1(viewport.scrollLeft + delta, 0, maxScrollLeft);
+        // Already against the end in the direction of the turn: leave the event alone so it chains
+        // to the page, which is what it would have done anyway.
+        if (next === viewport.scrollLeft)
+            return;
+        event.preventDefault();
+        viewport.scrollLeft = next;
+    }
+    wheelDeltaToPixels(event, viewportWidth) {
+        if (event.deltaMode === WheelEvent.DOM_DELTA_LINE)
+            return event.deltaY * WHEEL_LINE_HEIGHT_PX;
+        if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE)
+            return event.deltaY * viewportWidth;
+        return event.deltaY;
+    }
     onTrackPointerDown(event, axis) {
         // Only the empty track background pages the view; a click that landed on the thumb
         // itself already got a dedicated handler and stopped propagation before reaching here.
@@ -2676,12 +2844,12 @@ class ScrollComponent {
         state.end = atEnd;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScrollComponent, isStandalone: true, selector: "gog-scroll", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, reachThreshold: { classPropertyName: "reachThreshold", publicName: "reachThreshold", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, overscrollBehavior: { classPropertyName: "overscrollBehavior", publicName: "overscrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogScroll: "gogScroll", gogReachStart: "gogReachStart", gogReachEnd: "gogReachEnd" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (resolvedShowTrack() && showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-normal-thumb-hit-padding)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-thin-thumb-hit-padding)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;inset-inline-end:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{inset-inline:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{inset-inline-end:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb:before{content:\"\";position:absolute;inset:calc(-1 * var(--gog-scroll-thumb-hit-padding))}.gog-scroll__thumb--v{inset-inline:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;inset-inline-end:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScrollComponent, isStandalone: true, selector: "gog-scroll", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, reachThreshold: { classPropertyName: "reachThreshold", publicName: "reachThreshold", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, overscrollBehavior: { classPropertyName: "overscrollBehavior", publicName: "overscrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null }, horizontalWheel: { classPropertyName: "horizontalWheel", publicName: "horizontalWheel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogScroll: "gogScroll", gogReachStart: "gogReachStart", gogReachEnd: "gogReachEnd" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (wheel)=\"onWheel($event)\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (resolvedShowTrack() && showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-normal-thumb-hit-padding)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-thin-thumb-hit-padding)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;inset-inline-end:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{inset-inline:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{inset-inline-end:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb:before{content:\"\";position:absolute;inset:calc(-1 * var(--gog-scroll-thumb-hit-padding))}.gog-scroll__thumb--v{inset-inline:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;inset-inline-end:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScrollComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-scroll', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (resolvedShowTrack() && showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-normal-thumb-hit-padding)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-thin-thumb-hit-padding)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;inset-inline-end:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{inset-inline:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{inset-inline-end:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb:before{content:\"\";position:absolute;inset:calc(-1 * var(--gog-scroll-thumb-hit-padding))}.gog-scroll__thumb--v{inset-inline:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;inset-inline-end:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], reachThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "reachThreshold", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], overscrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscrollBehavior", required: false }] }], showTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrack", required: false }] }], gogScroll: [{ type: i0.Output, args: ["gogScroll"] }], gogReachStart: [{ type: i0.Output, args: ["gogReachStart"] }], gogReachEnd: [{ type: i0.Output, args: ["gogReachEnd"] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+            args: [{ selector: 'gog-scroll', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (wheel)=\"onWheel($event)\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (resolvedShowTrack() && showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-normal-thumb-hit-padding)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-thin-thumb-hit-padding)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;inset-inline-end:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{inset-inline:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{inset-inline-end:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb:before{content:\"\";position:absolute;inset:calc(-1 * var(--gog-scroll-thumb-hit-padding))}.gog-scroll__thumb--v{inset-inline:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;inset-inline-end:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], reachThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "reachThreshold", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], overscrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscrollBehavior", required: false }] }], showTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrack", required: false }] }], horizontalWheel: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalWheel", required: false }] }], gogScroll: [{ type: i0.Output, args: ["gogScroll"] }], gogReachStart: [{ type: i0.Output, args: ["gogReachStart"] }], gogReachEnd: [{ type: i0.Output, args: ["gogReachEnd"] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SEARCH_DEBOUNCE = 300;
@@ -3034,7 +3202,7 @@ class AutocompleteComponent extends GogDropdownBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AutocompleteComponent, isStandalone: true, selector: "gog-autocomplete", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterLocal: { classPropertyName: "filterLocal", publicName: "filterLocal", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogSearch: "gogSearch", gogLoadMore: "gogLoadMore" }, host: { properties: { "style.--gog-autocomplete-min-width": "minWidth()", "attr.aria-busy": "loading() ? \"true\" : null" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"clearValue($event)\"\r\n        >\r\n          <gog-icon name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AutocompleteComponent, isStandalone: true, selector: "gog-autocomplete", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterLocal: { classPropertyName: "filterLocal", publicName: "filterLocal", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogSearch: "gogSearch", gogLoadMore: "gogLoadMore" }, host: { properties: { "style.--gog-autocomplete-min-width": "minWidth()", "attr.aria-busy": "loading() ? \"true\" : null" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-autocomplete\"\n  [class]=\"sizeClass()\"\n  [class.gog-autocomplete--clearable]=\"showClear()\"\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\n  [class.gog-autocomplete--open]=\"isOpen()\"\n  [class.gog-autocomplete--loading]=\"loading()\"\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\n>\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-autocomplete__field\">\n    @if (label() && isFloatLabelActive()) {\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\n        label()\n      }}</label>\n    }\n\n    <!--\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\n      trigger is a button and focus moves onto the option itself.\n    -->\n    <input\n      type=\"text\"\n      class=\"gog-autocomplete__control\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"query()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n\n    <span class=\"gog-autocomplete__actions\">\n      @if (loading()) {\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\n      }\n\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"gog-autocomplete__clear gog-inline-center\"\n          [attr.aria-label]=\"resolvedClearLabel()\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"clearValue($event)\"\n        >\n          <gog-icon name=\"close\" />\n        </button>\n      }\n    </span>\n\n    @if (isOpen() && !resolvedAppendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\n  applied conditionally.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-autocomplete__dropdown\"\n    [class.gog-autocomplete__dropdown--up]=\"\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\n    \"\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-scroll\n      size=\"thin\"\n      [focusable]=\"false\"\n      overscrollBehavior=\"contain\"\n      class=\"gog-autocomplete__scroll\"\n      (gogReachEnd)=\"gogLoadMore.emit()\"\n    >\n      @if (visibleOptions().length === 0) {\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\n      }\n\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\n        <!--\n          A div, not a button: focus stays in the input, so these rows are never focused and a\n          button would only add tab stops and a second Enter handler. The highlight is pointed\n          at with aria-activedescendant instead.\n\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\n          would close the panel and, under forceSelection, wipe the text before the click lands.\n        -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\n        <div\n          class=\"gog-autocomplete__option\"\n          role=\"option\"\n          [id]=\"optionId(i)\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\n          gogRipple\n          [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"onOptionClick(option, $event)\"\n        >\n          @if (optionSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\n            />\n          } @else {\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\n          }\n        </div>\n      }\n    </gog-scroll>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option:active:not([aria-disabled=true]){background-color:var(--gog-autocomplete-option-press-bg)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -3048,7 +3216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                          * rule in `api-design.instructions.md`.
                          */
                         '[attr.aria-busy]': 'loading() ? "true" : null',
-                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"clearValue($event)\"\r\n        >\r\n          <gog-icon name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"] }]
+                    }, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-autocomplete\"\n  [class]=\"sizeClass()\"\n  [class.gog-autocomplete--clearable]=\"showClear()\"\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\n  [class.gog-autocomplete--open]=\"isOpen()\"\n  [class.gog-autocomplete--loading]=\"loading()\"\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\n>\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-autocomplete__field\">\n    @if (label() && isFloatLabelActive()) {\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\n        label()\n      }}</label>\n    }\n\n    <!--\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\n      trigger is a button and focus moves onto the option itself.\n    -->\n    <input\n      type=\"text\"\n      class=\"gog-autocomplete__control\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"query()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n\n    <span class=\"gog-autocomplete__actions\">\n      @if (loading()) {\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\n      }\n\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"gog-autocomplete__clear gog-inline-center\"\n          [attr.aria-label]=\"resolvedClearLabel()\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"clearValue($event)\"\n        >\n          <gog-icon name=\"close\" />\n        </button>\n      }\n    </span>\n\n    @if (isOpen() && !resolvedAppendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\n  applied conditionally.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-autocomplete__dropdown\"\n    [class.gog-autocomplete__dropdown--up]=\"\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\n    \"\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-scroll\n      size=\"thin\"\n      [focusable]=\"false\"\n      overscrollBehavior=\"contain\"\n      class=\"gog-autocomplete__scroll\"\n      (gogReachEnd)=\"gogLoadMore.emit()\"\n    >\n      @if (visibleOptions().length === 0) {\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\n      }\n\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\n        <!--\n          A div, not a button: focus stays in the input, so these rows are never focused and a\n          button would only add tab stops and a second Enter handler. The highlight is pointed\n          at with aria-activedescendant instead.\n\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\n          would close the panel and, under forceSelection, wipe the text before the click lands.\n        -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\n        <div\n          class=\"gog-autocomplete__option\"\n          role=\"option\"\n          [id]=\"optionId(i)\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\n          gogRipple\n          [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"onOptionClick(option, $event)\"\n        >\n          @if (optionSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\n            />\n          } @else {\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\n          }\n        </div>\n      }\n    </gog-scroll>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option:active:not([aria-disabled=true]){background-color:var(--gog-autocomplete-option-press-bg)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filterLocal: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocal", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], gogSearch: [{ type: i0.Output, args: ["gogSearch"] }], gogLoadMore: [{ type: i0.Output, args: ["gogLoadMore"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 /** Beyond this count the badge renders `N+` rather than growing without limit. */
@@ -3395,7 +3563,7 @@ class ButtonToggleGroupComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonToggleGroupComponent, isStandalone: true, selector: "gog-button-toggle-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, optionIcon: { classPropertyName: "optionIcon", publicName: "optionIcon", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "multiple() ? \"group\" : \"radiogroup\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-orientation": "orientation()", "attr.aria-disabled": "isDisabled() ? \"true\" : null" } }, queries: [{ propertyName: "optionSlot", first: true, predicate: GogButtonToggleOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonRefs", predicate: ["toggleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (option of options(); track $index) {\r\n  <button\r\n    #toggleButton\r\n    type=\"button\"\r\n    class=\"gog-button-toggle__button\"\r\n    [class.gog-button-toggle__button--selected]=\"isSelected(option)\"\r\n    [attr.role]=\"multiple() ? null : 'radio'\"\r\n    [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\r\n    [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\r\n    [attr.aria-disabled]=\"isOptionDisabled(option) ? 'true' : null\"\r\n    [disabled]=\"isOptionDisabled(option)\"\r\n    [tabindex]=\"$index === tabStopIndex() ? 0 : -1\"\r\n    (click)=\"onOptionClick(option)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"onBlur()\"\r\n    gogRipple\r\n    [rippleDisabled]=\"!rippleEnabled()\"\r\n  >\r\n    @if (optionSlot(); as slot) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"slot.templateRef\"\r\n        [ngTemplateOutletContext]=\"optionContext(option)\"\r\n      />\r\n    } @else {\r\n      @if (iconOf(option); as icon) {\r\n        <gog-icon class=\"gog-button-toggle__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n      }\r\n      <span class=\"gog-button-toggle__label\">{{ labelOf(option) }}</span>\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;max-width:100%}.gog-button-toggle__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-button-toggle-gap);padding:var(--gog-button-toggle-padding, var(--gog-button-toggle-size-padding, var(--gog-button-md-padding)));border:var(--gog-button-toggle-border-width) var(--gog-button-toggle-border-style) var(--gog-button-toggle-border-color);background-color:var(--gog-button-toggle-bg, var(--gog-button-toggle-rest-bg));color:var(--gog-button-toggle-color, var(--gog-button-toggle-rest-color));font-family:var(--gog-button-toggle-font-family);font-size:var(--gog-button-toggle-font-size, var(--gog-button-toggle-size-font-size, var(--gog-button-md-font-size)));font-weight:var(--gog-button-toggle-font-weight);letter-spacing:var(--gog-button-toggle-letter-spacing);line-height:var(--gog-button-toggle-line-height);text-transform:var(--gog-button-toggle-text-transform);cursor:pointer;white-space:nowrap;transition:background-color var(--gog-button-toggle-transition-duration) var(--gog-easing),border-color var(--gog-button-toggle-transition-duration) var(--gog-easing),color var(--gog-button-toggle-transition-duration) var(--gog-easing)}.gog-button-toggle__button:hover:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-hover-bg);color:var(--gog-button-toggle-hover-color)}.gog-button-toggle__button--selected{border-color:var(--gog-button-toggle-selected-border-color);background-color:var(--gog-button-toggle-selected-bg);color:var(--gog-button-toggle-selected-color)}.gog-button-toggle__button:disabled{opacity:var(--gog-button-toggle-disabled-opacity);cursor:not-allowed}.gog-button-toggle__button:focus-visible{outline:var(--gog-button-toggle-focus-ring-width) solid var(--gog-button-toggle-focus-ring-color);outline-offset:var(--gog-button-toggle-focus-ring-offset);z-index:1}.gog-button-toggle__icon{flex-shrink:0;font-size:var(--gog-button-toggle-icon-size)}.gog-button-toggle__label{min-width:0;overflow:hidden;text-overflow:ellipsis}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:not(:first-of-type){margin-inline-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-end-start-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:last-of-type{border-start-end-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:not(:first-of-type){margin-block-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-start-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:last-of-type{border-end-start-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined) .gog-button-toggle__button--selected{z-index:1}:host(.gog-button-toggle--separated){gap:var(--gog-button-toggle-separated-gap)}:host(.gog-button-toggle--separated) .gog-button-toggle__button{border-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--horizontal){flex-direction:row}:host(.gog-button-toggle--vertical){flex-direction:column}:host(.gog-button-toggle--xsm){--gog-button-toggle-size-padding: var(--gog-button-xsm-padding);--gog-button-toggle-size-font-size: var(--gog-button-xsm-font-size)}:host(.gog-button-toggle--sm){--gog-button-toggle-size-padding: var(--gog-button-sm-padding);--gog-button-toggle-size-font-size: var(--gog-button-sm-font-size)}:host(.gog-button-toggle--md){--gog-button-toggle-size-padding: var(--gog-button-md-padding);--gog-button-toggle-size-font-size: var(--gog-button-md-font-size)}:host(.gog-button-toggle--lg){--gog-button-toggle-size-padding: var(--gog-button-lg-padding);--gog-button-toggle-size-font-size: var(--gog-button-lg-font-size)}:host(.gog-button-toggle--slg){--gog-button-toggle-size-padding: var(--gog-button-slg-padding);--gog-button-toggle-size-font-size: var(--gog-button-slg-font-size)}:host(.gog-host--full-width){display:flex;width:100%}:host(.gog-host--full-width) .gog-button-toggle__button{flex:1 1 0}@media(prefers-reduced-motion:reduce){.gog-button-toggle__button{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonToggleGroupComponent, isStandalone: true, selector: "gog-button-toggle-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, optionIcon: { classPropertyName: "optionIcon", publicName: "optionIcon", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "multiple() ? \"group\" : \"radiogroup\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-orientation": "orientation()", "attr.aria-disabled": "isDisabled() ? \"true\" : null" } }, queries: [{ propertyName: "optionSlot", first: true, predicate: GogButtonToggleOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonRefs", predicate: ["toggleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (option of options(); track $index) {\r\n  <button\r\n    #toggleButton\r\n    type=\"button\"\r\n    class=\"gog-button-toggle__button\"\r\n    [class.gog-button-toggle__button--selected]=\"isSelected(option)\"\r\n    [attr.role]=\"multiple() ? null : 'radio'\"\r\n    [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\r\n    [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\r\n    [attr.aria-disabled]=\"isOptionDisabled(option) ? 'true' : null\"\r\n    [disabled]=\"isOptionDisabled(option)\"\r\n    [tabindex]=\"$index === tabStopIndex() ? 0 : -1\"\r\n    (click)=\"onOptionClick(option)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"onBlur()\"\r\n    gogRipple\r\n    [rippleDisabled]=\"!rippleEnabled()\"\r\n  >\r\n    @if (optionSlot(); as slot) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"slot.templateRef\"\r\n        [ngTemplateOutletContext]=\"optionContext(option)\"\r\n      />\r\n    } @else {\r\n      @if (iconOf(option); as icon) {\r\n        <gog-icon class=\"gog-button-toggle__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n      }\r\n      <span class=\"gog-button-toggle__label\">{{ labelOf(option) }}</span>\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;max-width:100%}.gog-button-toggle__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-button-toggle-gap);padding:var(--gog-button-toggle-padding, var(--gog-button-toggle-size-padding, var(--gog-button-md-padding)));border:var(--gog-button-toggle-border-width) var(--gog-button-toggle-border-style) var(--gog-button-toggle-border-color);background-color:var(--gog-button-toggle-bg, var(--gog-button-toggle-rest-bg));color:var(--gog-button-toggle-color, var(--gog-button-toggle-rest-color));font-family:var(--gog-button-toggle-font-family);font-size:var(--gog-button-toggle-font-size, var(--gog-button-toggle-size-font-size, var(--gog-button-md-font-size)));font-weight:var(--gog-button-toggle-font-weight);letter-spacing:var(--gog-button-toggle-letter-spacing);line-height:var(--gog-button-toggle-line-height);text-transform:var(--gog-button-toggle-text-transform);cursor:pointer;white-space:nowrap;transition:background-color var(--gog-button-toggle-transition-duration) var(--gog-easing),border-color var(--gog-button-toggle-transition-duration) var(--gog-easing),color var(--gog-button-toggle-transition-duration) var(--gog-easing)}.gog-button-toggle__button:hover:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-hover-bg);color:var(--gog-button-toggle-hover-color)}.gog-button-toggle__button:active:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-press-bg)}.gog-button-toggle__button--selected{border-color:var(--gog-button-toggle-selected-border-color);background-color:var(--gog-button-toggle-selected-bg);color:var(--gog-button-toggle-selected-color)}.gog-button-toggle__button--selected:active:not(:disabled){background-color:var(--gog-button-toggle-selected-press-bg)}.gog-button-toggle__button:disabled{opacity:var(--gog-button-toggle-disabled-opacity);cursor:not-allowed}.gog-button-toggle__button:focus-visible{outline:var(--gog-button-toggle-focus-ring-width) solid var(--gog-button-toggle-focus-ring-color);outline-offset:var(--gog-button-toggle-focus-ring-offset);z-index:1}.gog-button-toggle__icon{flex-shrink:0;font-size:var(--gog-button-toggle-icon-size)}.gog-button-toggle__label{min-width:0;overflow:hidden;text-overflow:ellipsis}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:not(:first-of-type){margin-inline-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-end-start-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:last-of-type{border-start-end-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:not(:first-of-type){margin-block-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-start-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:last-of-type{border-end-start-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined) .gog-button-toggle__button--selected{z-index:1}:host(.gog-button-toggle--separated){gap:var(--gog-button-toggle-separated-gap)}:host(.gog-button-toggle--separated) .gog-button-toggle__button{border-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--horizontal){flex-direction:row}:host(.gog-button-toggle--vertical){flex-direction:column}:host(.gog-button-toggle--xsm){--gog-button-toggle-size-padding: var(--gog-button-xsm-padding);--gog-button-toggle-size-font-size: var(--gog-button-xsm-font-size)}:host(.gog-button-toggle--sm){--gog-button-toggle-size-padding: var(--gog-button-sm-padding);--gog-button-toggle-size-font-size: var(--gog-button-sm-font-size)}:host(.gog-button-toggle--md){--gog-button-toggle-size-padding: var(--gog-button-md-padding);--gog-button-toggle-size-font-size: var(--gog-button-md-font-size)}:host(.gog-button-toggle--lg){--gog-button-toggle-size-padding: var(--gog-button-lg-padding);--gog-button-toggle-size-font-size: var(--gog-button-lg-font-size)}:host(.gog-button-toggle--slg){--gog-button-toggle-size-padding: var(--gog-button-slg-padding);--gog-button-toggle-size-font-size: var(--gog-button-slg-font-size)}:host(.gog-host--full-width){display:flex;width:100%}:host(.gog-host--full-width) .gog-button-toggle__button{flex:1 1 0}@media(prefers-reduced-motion:reduce){.gog-button-toggle__button{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonToggleGroupComponent, decorators: [{
             type: Component,
@@ -3405,7 +3573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.aria-label]': 'ariaLabel() || null',
                         '[attr.aria-orientation]': 'orientation()',
                         '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
-                    }, template: "@for (option of options(); track $index) {\r\n  <button\r\n    #toggleButton\r\n    type=\"button\"\r\n    class=\"gog-button-toggle__button\"\r\n    [class.gog-button-toggle__button--selected]=\"isSelected(option)\"\r\n    [attr.role]=\"multiple() ? null : 'radio'\"\r\n    [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\r\n    [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\r\n    [attr.aria-disabled]=\"isOptionDisabled(option) ? 'true' : null\"\r\n    [disabled]=\"isOptionDisabled(option)\"\r\n    [tabindex]=\"$index === tabStopIndex() ? 0 : -1\"\r\n    (click)=\"onOptionClick(option)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"onBlur()\"\r\n    gogRipple\r\n    [rippleDisabled]=\"!rippleEnabled()\"\r\n  >\r\n    @if (optionSlot(); as slot) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"slot.templateRef\"\r\n        [ngTemplateOutletContext]=\"optionContext(option)\"\r\n      />\r\n    } @else {\r\n      @if (iconOf(option); as icon) {\r\n        <gog-icon class=\"gog-button-toggle__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n      }\r\n      <span class=\"gog-button-toggle__label\">{{ labelOf(option) }}</span>\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;max-width:100%}.gog-button-toggle__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-button-toggle-gap);padding:var(--gog-button-toggle-padding, var(--gog-button-toggle-size-padding, var(--gog-button-md-padding)));border:var(--gog-button-toggle-border-width) var(--gog-button-toggle-border-style) var(--gog-button-toggle-border-color);background-color:var(--gog-button-toggle-bg, var(--gog-button-toggle-rest-bg));color:var(--gog-button-toggle-color, var(--gog-button-toggle-rest-color));font-family:var(--gog-button-toggle-font-family);font-size:var(--gog-button-toggle-font-size, var(--gog-button-toggle-size-font-size, var(--gog-button-md-font-size)));font-weight:var(--gog-button-toggle-font-weight);letter-spacing:var(--gog-button-toggle-letter-spacing);line-height:var(--gog-button-toggle-line-height);text-transform:var(--gog-button-toggle-text-transform);cursor:pointer;white-space:nowrap;transition:background-color var(--gog-button-toggle-transition-duration) var(--gog-easing),border-color var(--gog-button-toggle-transition-duration) var(--gog-easing),color var(--gog-button-toggle-transition-duration) var(--gog-easing)}.gog-button-toggle__button:hover:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-hover-bg);color:var(--gog-button-toggle-hover-color)}.gog-button-toggle__button--selected{border-color:var(--gog-button-toggle-selected-border-color);background-color:var(--gog-button-toggle-selected-bg);color:var(--gog-button-toggle-selected-color)}.gog-button-toggle__button:disabled{opacity:var(--gog-button-toggle-disabled-opacity);cursor:not-allowed}.gog-button-toggle__button:focus-visible{outline:var(--gog-button-toggle-focus-ring-width) solid var(--gog-button-toggle-focus-ring-color);outline-offset:var(--gog-button-toggle-focus-ring-offset);z-index:1}.gog-button-toggle__icon{flex-shrink:0;font-size:var(--gog-button-toggle-icon-size)}.gog-button-toggle__label{min-width:0;overflow:hidden;text-overflow:ellipsis}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:not(:first-of-type){margin-inline-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-end-start-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:last-of-type{border-start-end-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:not(:first-of-type){margin-block-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-start-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:last-of-type{border-end-start-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined) .gog-button-toggle__button--selected{z-index:1}:host(.gog-button-toggle--separated){gap:var(--gog-button-toggle-separated-gap)}:host(.gog-button-toggle--separated) .gog-button-toggle__button{border-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--horizontal){flex-direction:row}:host(.gog-button-toggle--vertical){flex-direction:column}:host(.gog-button-toggle--xsm){--gog-button-toggle-size-padding: var(--gog-button-xsm-padding);--gog-button-toggle-size-font-size: var(--gog-button-xsm-font-size)}:host(.gog-button-toggle--sm){--gog-button-toggle-size-padding: var(--gog-button-sm-padding);--gog-button-toggle-size-font-size: var(--gog-button-sm-font-size)}:host(.gog-button-toggle--md){--gog-button-toggle-size-padding: var(--gog-button-md-padding);--gog-button-toggle-size-font-size: var(--gog-button-md-font-size)}:host(.gog-button-toggle--lg){--gog-button-toggle-size-padding: var(--gog-button-lg-padding);--gog-button-toggle-size-font-size: var(--gog-button-lg-font-size)}:host(.gog-button-toggle--slg){--gog-button-toggle-size-padding: var(--gog-button-slg-padding);--gog-button-toggle-size-font-size: var(--gog-button-slg-font-size)}:host(.gog-host--full-width){display:flex;width:100%}:host(.gog-host--full-width) .gog-button-toggle__button{flex:1 1 0}@media(prefers-reduced-motion:reduce){.gog-button-toggle__button{transition:none}}\n"] }]
+                    }, template: "@for (option of options(); track $index) {\r\n  <button\r\n    #toggleButton\r\n    type=\"button\"\r\n    class=\"gog-button-toggle__button\"\r\n    [class.gog-button-toggle__button--selected]=\"isSelected(option)\"\r\n    [attr.role]=\"multiple() ? null : 'radio'\"\r\n    [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\r\n    [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\r\n    [attr.aria-disabled]=\"isOptionDisabled(option) ? 'true' : null\"\r\n    [disabled]=\"isOptionDisabled(option)\"\r\n    [tabindex]=\"$index === tabStopIndex() ? 0 : -1\"\r\n    (click)=\"onOptionClick(option)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"onBlur()\"\r\n    gogRipple\r\n    [rippleDisabled]=\"!rippleEnabled()\"\r\n  >\r\n    @if (optionSlot(); as slot) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"slot.templateRef\"\r\n        [ngTemplateOutletContext]=\"optionContext(option)\"\r\n      />\r\n    } @else {\r\n      @if (iconOf(option); as icon) {\r\n        <gog-icon class=\"gog-button-toggle__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n      }\r\n      <span class=\"gog-button-toggle__label\">{{ labelOf(option) }}</span>\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;max-width:100%}.gog-button-toggle__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-button-toggle-gap);padding:var(--gog-button-toggle-padding, var(--gog-button-toggle-size-padding, var(--gog-button-md-padding)));border:var(--gog-button-toggle-border-width) var(--gog-button-toggle-border-style) var(--gog-button-toggle-border-color);background-color:var(--gog-button-toggle-bg, var(--gog-button-toggle-rest-bg));color:var(--gog-button-toggle-color, var(--gog-button-toggle-rest-color));font-family:var(--gog-button-toggle-font-family);font-size:var(--gog-button-toggle-font-size, var(--gog-button-toggle-size-font-size, var(--gog-button-md-font-size)));font-weight:var(--gog-button-toggle-font-weight);letter-spacing:var(--gog-button-toggle-letter-spacing);line-height:var(--gog-button-toggle-line-height);text-transform:var(--gog-button-toggle-text-transform);cursor:pointer;white-space:nowrap;transition:background-color var(--gog-button-toggle-transition-duration) var(--gog-easing),border-color var(--gog-button-toggle-transition-duration) var(--gog-easing),color var(--gog-button-toggle-transition-duration) var(--gog-easing)}.gog-button-toggle__button:hover:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-hover-bg);color:var(--gog-button-toggle-hover-color)}.gog-button-toggle__button:active:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-press-bg)}.gog-button-toggle__button--selected{border-color:var(--gog-button-toggle-selected-border-color);background-color:var(--gog-button-toggle-selected-bg);color:var(--gog-button-toggle-selected-color)}.gog-button-toggle__button--selected:active:not(:disabled){background-color:var(--gog-button-toggle-selected-press-bg)}.gog-button-toggle__button:disabled{opacity:var(--gog-button-toggle-disabled-opacity);cursor:not-allowed}.gog-button-toggle__button:focus-visible{outline:var(--gog-button-toggle-focus-ring-width) solid var(--gog-button-toggle-focus-ring-color);outline-offset:var(--gog-button-toggle-focus-ring-offset);z-index:1}.gog-button-toggle__icon{flex-shrink:0;font-size:var(--gog-button-toggle-icon-size)}.gog-button-toggle__label{min-width:0;overflow:hidden;text-overflow:ellipsis}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:not(:first-of-type){margin-inline-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-end-start-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:last-of-type{border-start-end-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:not(:first-of-type){margin-block-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-start-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:last-of-type{border-end-start-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined) .gog-button-toggle__button--selected{z-index:1}:host(.gog-button-toggle--separated){gap:var(--gog-button-toggle-separated-gap)}:host(.gog-button-toggle--separated) .gog-button-toggle__button{border-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--horizontal){flex-direction:row}:host(.gog-button-toggle--vertical){flex-direction:column}:host(.gog-button-toggle--xsm){--gog-button-toggle-size-padding: var(--gog-button-xsm-padding);--gog-button-toggle-size-font-size: var(--gog-button-xsm-font-size)}:host(.gog-button-toggle--sm){--gog-button-toggle-size-padding: var(--gog-button-sm-padding);--gog-button-toggle-size-font-size: var(--gog-button-sm-font-size)}:host(.gog-button-toggle--md){--gog-button-toggle-size-padding: var(--gog-button-md-padding);--gog-button-toggle-size-font-size: var(--gog-button-md-font-size)}:host(.gog-button-toggle--lg){--gog-button-toggle-size-padding: var(--gog-button-lg-padding);--gog-button-toggle-size-font-size: var(--gog-button-lg-font-size)}:host(.gog-button-toggle--slg){--gog-button-toggle-size-padding: var(--gog-button-slg-padding);--gog-button-toggle-size-font-size: var(--gog-button-slg-font-size)}:host(.gog-host--full-width){display:flex;width:100%}:host(.gog-host--full-width) .gog-button-toggle__button{flex:1 1 0}@media(prefers-reduced-motion:reduce){.gog-button-toggle__button{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], optionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIcon", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], optionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogButtonToggleOptionDirective), { isSignal: true }] }], buttonRefs: [{ type: i0.ViewChildren, args: ['toggleButton', { isSignal: true }] }] } });
 
 const GOG_TABS_STATE = new InjectionToken('GOG_TABS_STATE');
@@ -3675,7 +3843,7 @@ class TabsComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabsComponent, isStandalone: true, selector: "gog-tabs", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, scrollActiveIntoView: { classPropertyName: "scrollActiveIntoView", publicName: "scrollActiveIntoView", isSignal: true, isRequired: false, transformFunction: null }, showScrollTrack: { classPropertyName: "showScrollTrack", publicName: "showScrollTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", gogTabChange: "gogTabChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
             // forwardRef because the class is not yet defined when this decorator is evaluated.
             { provide: GOG_TABS_STATE, useExisting: forwardRef(() => TabsComponent) },
-        ], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "headerSlot", first: true, predicate: GogTabHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerRefs", predicate: ["tabHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "headerSlot", first: true, predicate: GogTabHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerRefs", predicate: ["tabHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab:active:not(:disabled){background-color:var(--gog-tabs-press-bg);color:var(--gog-tabs-press-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
@@ -3684,7 +3852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         { provide: GOG_TABS_STATE, useExisting: forwardRef(() => TabsComponent) },
                     ], host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"] }]
+                    }, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab:active:not(:disabled){background-color:var(--gog-tabs-press-bg);color:var(--gog-tabs-press-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], scrollActiveIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollActiveIntoView", required: false }] }], showScrollTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollTrack", required: false }] }], gogTabChange: [{ type: i0.Output, args: ["gogTabChange"] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogTabHeaderDirective), { isSignal: true }] }], headerRefs: [{ type: i0.ViewChildren, args: ['tabHeader', { isSignal: true }] }] } });
 
 /**
@@ -5517,7 +5685,7 @@ class ConfirmationDialogComponent {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n      data.cancelText\n    }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n      data.confirmText\n    }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirmation-dialog-gap);min-width:var(--gog-confirmation-dialog-min-width);max-width:var(--gog-confirmation-dialog-max-width);color:var(--gog-confirmation-dialog-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirmation-dialog-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirmation-dialog-actions-gap);margin-top:var(--gog-confirmation-dialog-actions-offset)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n      data.cancelText\n    }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n      data.confirmText\n    }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirmation-dialog-gap);min-width:var(--gog-confirmation-dialog-min-width);max-width:var(--gog-confirmation-dialog-max-width);color:var(--gog-confirmation-dialog-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirmation-dialog-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirmation-dialog-actions-gap);margin-top:var(--gog-confirmation-dialog-actions-offset)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "severity", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
@@ -5797,7 +5965,7 @@ class DialogComponent {
         return rect.width > 0 && rect.height > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-tooltip-z]=\"panelZ(dialog) + 20\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              [attr.aria-label]=\"closeLabel(dialog)\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll\r\n          size=\"thin\"\r\n          [focusable]=\"false\"\r\n          overscrollBehavior=\"contain\"\r\n          class=\"gog-dialog__scroll\"\r\n        >\r\n          <ng-container\r\n            *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\"\r\n          />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-tooltip-z]=\"panelZ(dialog) + 20\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              [attr.aria-label]=\"closeLabel(dialog)\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll\r\n          size=\"thin\"\r\n          [focusable]=\"false\"\r\n          overscrollBehavior=\"contain\"\r\n          class=\"gog-dialog__scroll\"\r\n        >\r\n          <ng-container\r\n            *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\"\r\n          />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
@@ -5925,7 +6093,7 @@ class ToastComponent {
         return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-toast\"\r\n  [class.gog-toast--paused]=\"isPaused()\"\r\n  [class.gog-toast--queued]=\"!isFront()\"\r\n  [class.gog-toast--success]=\"toast().type === 'success'\"\r\n  [class.gog-toast--error]=\"toast().type === 'error'\"\r\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n  [class.gog-toast--info]=\"toast().type === 'info'\"\r\n  [class.gog-toast--visible]=\"visible()\"\r\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n  (mouseenter)=\"pauseAutoDismiss()\"\r\n  (mouseleave)=\"resumeAutoDismiss()\"\r\n  (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n  <div class=\"gog-toast__content\">\r\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n    </span>\r\n    <div class=\"gog-toast__main\">\r\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n      @if (hasActions()) {\r\n        <div class=\"gog-toast__actions\">\r\n          @for (action of toast().actions; track action.label) {\r\n            <gog-button\r\n              class=\"gog-toast__action\"\r\n              variant=\"ghost\"\r\n              size=\"sm\"\r\n              type=\"button\"\r\n              (gogClick)=\"runAction(action)\"\r\n            >\r\n              @if (action.iconName || action.iconTemplate) {\r\n                <gog-icon\r\n                  [template]=\"action.iconTemplate ?? null\"\r\n                  [name]=\"action.iconName ?? 'check'\"\r\n                />\r\n              }\r\n              {{ action.label }}\r\n            </gog-button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <gog-button\r\n      class=\"gog-toast__close\"\r\n      variant=\"ghost\"\r\n      size=\"sm\"\r\n      type=\"button\"\r\n      [ariaLabel]=\"closeLabel\"\r\n      (gogClick)=\"close()\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </gog-button>\r\n  </div>\r\n  @if (!toast().isSticky) {\r\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-inline-start:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-button-padding: var(--gog-toast-action-padding);--gog-button-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-button-padding: var(--gog-toast-close-padding);--gog-button-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast{transition:none;animation:none}.gog-toast__progress{transition:none;animation-timing-function:steps(20,end)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-toast\"\r\n  [class.gog-toast--paused]=\"isPaused()\"\r\n  [class.gog-toast--queued]=\"!isFront()\"\r\n  [class.gog-toast--success]=\"toast().type === 'success'\"\r\n  [class.gog-toast--error]=\"toast().type === 'error'\"\r\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n  [class.gog-toast--info]=\"toast().type === 'info'\"\r\n  [class.gog-toast--visible]=\"visible()\"\r\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n  (mouseenter)=\"pauseAutoDismiss()\"\r\n  (mouseleave)=\"resumeAutoDismiss()\"\r\n  (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n  <div class=\"gog-toast__content\">\r\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n    </span>\r\n    <div class=\"gog-toast__main\">\r\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n      @if (hasActions()) {\r\n        <div class=\"gog-toast__actions\">\r\n          @for (action of toast().actions; track action.label) {\r\n            <gog-button\r\n              class=\"gog-toast__action\"\r\n              variant=\"ghost\"\r\n              size=\"sm\"\r\n              type=\"button\"\r\n              (gogClick)=\"runAction(action)\"\r\n            >\r\n              @if (action.iconName || action.iconTemplate) {\r\n                <gog-icon\r\n                  [template]=\"action.iconTemplate ?? null\"\r\n                  [name]=\"action.iconName ?? 'check'\"\r\n                />\r\n              }\r\n              {{ action.label }}\r\n            </gog-button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <gog-button\r\n      class=\"gog-toast__close\"\r\n      variant=\"ghost\"\r\n      size=\"sm\"\r\n      type=\"button\"\r\n      [ariaLabel]=\"closeLabel\"\r\n      (gogClick)=\"close()\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </gog-button>\r\n  </div>\r\n  @if (!toast().isSticky) {\r\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-inline-start:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-button-padding: var(--gog-toast-action-padding);--gog-button-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-button-padding: var(--gog-toast-close-padding);--gog-button-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast{transition:none;animation:none}.gog-toast__progress{transition:none;animation-timing-function:steps(20,end)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "severity", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
@@ -6668,6 +6836,30 @@ class ChipComponent {
     shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+    /**
+     * Turns the chip into a filter chip: one you toggle on and off, rather than one you press.
+     *
+     * Three states, and `null` — the default — is the one that keeps every existing chip exactly
+     * as it was: no `aria-pressed`, no selected look, and activating it only emits `gogClick`.
+     * Set it to `false` and the chip becomes a toggle that is currently off; `true` and it is on,
+     * which draws the ring and announces `aria-pressed="true"`. A chip with no `aria-pressed` at
+     * all is not a toggle to a screen reader, which is why "off" has to be `false` rather than
+     * absent.
+     *
+     * It is a `model`, so the chip flips it for you on click, Enter and Space — but only while it
+     * is non-null. Bind it two-way and the row of filters needs no click handler:
+     *
+     * ```html
+     * @for (f of filters(); track f.id) {
+     *   <gog-chip [(selected)]="f.on">{{ f.label }}</gog-chip>
+     * }
+     * ```
+     *
+     * `gogClick` still fires, after the flip, so a handler reading `selected()` sees the new
+     * value. If you drive the state yourself from that handler, bind one-way — toggling it there
+     * as well would put it back where it started.
+     */
+    selected = model(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -6689,6 +6881,7 @@ class ChipComponent {
         this.removable() ? 'gog-chip--removable' : null,
         this.disabled() ? 'gog-chip--disabled' : 'gog-chip--interactive',
         this.clickable() ? 'gog-chip--clickable' : null,
+        this.selected() === true ? 'gog-chip--selected' : null,
         this.avatarUrl() ? 'gog-chip--has-avatar' : null,
         this.iconName() ? 'gog-chip--has-icon' : null,
         this.fullWidth() ? 'gog-host--full-width' : null,
@@ -6696,6 +6889,18 @@ class ChipComponent {
         .filter((className) => className !== null)
         .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     isInteractive = computed(() => this.clickable() && !this.disabled(), ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
+    /**
+     * `aria-pressed` needs the `role="button"` it qualifies, so it is written only on a chip that
+     * has one. A selected chip that is disabled keeps its ring — the class does not depend on
+     * this — because "on, and currently unavailable" is a real state and dropping the look would
+     * leave it announced and invisible.
+     */
+    ariaPressed = computed(() => {
+        const selected = this.selected();
+        if (selected === null || !this.isInteractive())
+            return null;
+        return selected ? 'true' : 'false';
+    }, ...(ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []));
     rippleConfigured = resolveRipple(this.ripple, inject(GOG_CONFIG));
     /**
      * A chip that is not interactive is a label, and a label answering a press with a wave is a
@@ -6705,6 +6910,7 @@ class ChipComponent {
     onChipClick(event) {
         if (this.disabled())
             return;
+        this.toggleSelected();
         this.gogClick.emit(event);
     }
     onKeydown(event) {
@@ -6713,21 +6919,29 @@ class ChipComponent {
         if (event.key !== 'Enter' && event.key !== ' ')
             return;
         event.preventDefault();
+        this.toggleSelected();
         this.gogClick.emit(event);
     }
+    /** No-op unless `selected` is in play, so a chip that is not a filter is untouched. */
+    toggleSelected() {
+        const selected = this.selected();
+        if (selected === null)
+            return;
+        this.selected.set(!selected);
+    }
     onRemoveClick(event) {
         event.stopPropagation();
         this.gogRemove.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-chip__surface\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  [attr.role]=\"isInteractive() ? 'button' : null\"\r\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n  (click)=\"onChipClick($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (avatarUrl()) {\r\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n  }\r\n\r\n  @if (iconName()) {\r\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n  }\r\n\r\n  <span class=\"gog-chip__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n\r\n  @if (removable() && !disabled()) {\r\n    <button\r\n      class=\"gog-chip__remove\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"removeAriaLabel()\"\r\n      (click)=\"onRemoveClick($event)\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-chip__surface\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  [attr.role]=\"isInteractive() ? 'button' : null\"\r\n  [attr.aria-pressed]=\"ariaPressed()\"\r\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n  (click)=\"onChipClick($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (avatarUrl()) {\r\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n  }\r\n\r\n  @if (iconName()) {\r\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n  }\r\n\r\n  <span class=\"gog-chip__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n\r\n  @if (removable() && !disabled()) {\r\n    <button\r\n      class=\"gog-chip__remove\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"removeAriaLabel()\"\r\n      (click)=\"onRemoveClick($event)\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}:host(.gog-chip--clickable) .gog-chip__surface:active:not([aria-disabled=true]){background-color:var(--gog-chip-press-bg)}:host(.gog-chip--selected) .gog-chip__surface{box-shadow:var(--gog-chip-selected-shadow)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-chip', imports: [GogRippleDirective, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div\r\n  class=\"gog-chip__surface\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  [attr.role]=\"isInteractive() ? 'button' : null\"\r\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n  (click)=\"onChipClick($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (avatarUrl()) {\r\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n  }\r\n\r\n  @if (iconName()) {\r\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n  }\r\n\r\n  <span class=\"gog-chip__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n\r\n  @if (removable() && !disabled()) {\r\n    <button\r\n      class=\"gog-chip__remove\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"removeAriaLabel()\"\r\n      (click)=\"onRemoveClick($event)\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
+                    }, template: "<div\r\n  class=\"gog-chip__surface\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  [attr.role]=\"isInteractive() ? 'button' : null\"\r\n  [attr.aria-pressed]=\"ariaPressed()\"\r\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n  (click)=\"onChipClick($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (avatarUrl()) {\r\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n  }\r\n\r\n  @if (iconName()) {\r\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n  }\r\n\r\n  <span class=\"gog-chip__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n\r\n  @if (removable() && !disabled()) {\r\n    <button\r\n      class=\"gog-chip__remove\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"removeAriaLabel()\"\r\n      (click)=\"onRemoveClick($event)\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}:host(.gog-chip--clickable) .gog-chip__surface:active:not([aria-disabled=true]){background-color:var(--gog-chip-press-bg)}:host(.gog-chip--selected) .gog-chip__surface{box-shadow:var(--gog-chip-selected-shadow)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
 
 /**
  * Custom markup for the tag's leading icon:
@@ -6818,14 +7032,14 @@ class SelectComponent extends GogDropdownBase {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span\r\n        class=\"gog-select__chevron\"\r\n        [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__clear gog-inline-center\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--clearable]=\"showClear()\"\n  [class]=\"sizeClass()\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    @if (label() && isFloatLabelActive()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\n        label()\n      }}</label>\n    }\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (focus)=\"onFocusIn()\"\n      (blur)=\"onFocusOut()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedLabel() || effectivePlaceholder() }}\n      </span>\n\n      <span\n        class=\"gog-select__chevron\"\n        [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\n        aria-hidden=\"true\"\n      >\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    <!--\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\n      by the stylesheet, which also reserves room for it so it never covers the value text.\n    -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"gog-select__clear gog-inline-center\"\n        [attr.aria-label]=\"resolvedClearLabel()\"\n        (click)=\"clearValue($event)\"\n      >\n        <gog-icon name=\"close\" />\n      </button>\n    }\n\n    @if (isOpen() && !resolvedAppendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!--\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n      focus moved between options via the arrow keys (roving-focus.ts), which already\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n      needed here.\n    -->\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n      <div class=\"gog-select__filter gog-select__filter--top\">\n        <input\n          type=\"text\"\n          class=\"gog-select__filter-input\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"filterQuery()\"\n          (input)=\"onFilterInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.escape)=\"close(); focusTrigger()\"\n        />\n      </div>\n    }\n    <gog-scroll\n      size=\"thin\"\n      [focusable]=\"false\"\n      overscrollBehavior=\"contain\"\n      class=\"gog-select__scroll\"\n    >\n      @if (visibleOptions().length === 0) {\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\n      }\n      @for (option of visibleOptions(); track valueOf(option)) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n          focus is moved between options with the arrow keys, not by tabbing through every\n          one of them. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-select__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\n          [class.gog-select__option--selected]=\"isSelected(option)\"\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\n          (click)=\"selectOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n          gogRipple\n          [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n        >\n          @if (optionSlot(); as slot) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                slot.templateRef;\n                context: optionContext(option, isSelected(option))\n              \"\n            />\n          } @else {\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n              @if (isSelected(option)) {\n                <gog-icon name=\"check\" />\n              }\n            </span>\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\n          }\n        </button>\n      }\n    </gog-scroll>\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\n        <input\n          type=\"text\"\n          class=\"gog-select__filter-input\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"filterQuery()\"\n          (input)=\"onFilterInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.escape)=\"close(); focusTrigger()\"\n        />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover:not(.gog-select__option--disabled){background-color:var(--gog-select-option-hover-bg)}.gog-select__option:active:not(.gog-select__option--disabled){background-color:var(--gog-select-option-press-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-select', imports: [GogRippleDirective, IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-select-min-width]': 'minWidth()',
-                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span\r\n        class=\"gog-select__chevron\"\r\n        [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__clear gog-inline-center\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
+                    }, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--clearable]=\"showClear()\"\n  [class]=\"sizeClass()\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    @if (label() && isFloatLabelActive()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\n        label()\n      }}</label>\n    }\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (focus)=\"onFocusIn()\"\n      (blur)=\"onFocusOut()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedLabel() || effectivePlaceholder() }}\n      </span>\n\n      <span\n        class=\"gog-select__chevron\"\n        [class.gog-select__chevron--auto-rotate]=\"!chevronSlot()\"\n        aria-hidden=\"true\"\n      >\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    <!--\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\n      by the stylesheet, which also reserves room for it so it never covers the value text.\n    -->\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"gog-select__clear gog-inline-center\"\n        [attr.aria-label]=\"resolvedClearLabel()\"\n        (click)=\"clearValue($event)\"\n      >\n        <gog-icon name=\"close\" />\n      </button>\n    }\n\n    @if (isOpen() && !resolvedAppendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <!--\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n      focus moved between options via the arrow keys (roving-focus.ts), which already\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n      needed here.\n    -->\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n      <div class=\"gog-select__filter gog-select__filter--top\">\n        <input\n          type=\"text\"\n          class=\"gog-select__filter-input\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"filterQuery()\"\n          (input)=\"onFilterInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.escape)=\"close(); focusTrigger()\"\n        />\n      </div>\n    }\n    <gog-scroll\n      size=\"thin\"\n      [focusable]=\"false\"\n      overscrollBehavior=\"contain\"\n      class=\"gog-select__scroll\"\n    >\n      @if (visibleOptions().length === 0) {\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\n      }\n      @for (option of visibleOptions(); track valueOf(option)) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n          focus is moved between options with the arrow keys, not by tabbing through every\n          one of them. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-select__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\n          [class.gog-select__option--selected]=\"isSelected(option)\"\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\n          (click)=\"selectOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n          gogRipple\n          [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n        >\n          @if (optionSlot(); as slot) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                slot.templateRef;\n                context: optionContext(option, isSelected(option))\n              \"\n            />\n          } @else {\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n              @if (isSelected(option)) {\n                <gog-icon name=\"check\" />\n              }\n            </span>\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\n          }\n        </button>\n      }\n    </gog-scroll>\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\n        <input\n          type=\"text\"\n          class=\"gog-select__filter-input\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"filterQuery()\"\n          (input)=\"onFilterInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.escape)=\"close(); focusTrigger()\"\n        />\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron--auto-rotate{transition:transform var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--open .gog-select__chevron--auto-rotate{transform:rotate(180deg)}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover:not(.gog-select__option--disabled){background-color:var(--gog-select-option-hover-bg)}.gog-select__option:active:not(.gog-select__option--disabled){background-color:var(--gog-select-option-press-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__chevron--auto-rotate,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 const DEFAULT_GAP$2 = 4;
@@ -7228,7 +7442,7 @@ class MenuComponent {
         }, size, { width: window.innerWidth, height: window.innerHeight }, direction, this.direction()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: MenuComponent, isStandalone: true, selector: "gog-menu", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClosed: "gogClosed" }, queries: [{ propertyName: "items", predicate: GogMenuItemDirective, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  The panel lives in a template because `GogDropdownOverlay` stamps it into `<body>`, never in\r\n  place \u2014 see the class comment for why a menu has no in-place mode.\r\n\r\n  `<ng-content>` sits inside that template on purpose: the consumer's items exist as soon as\r\n  their own view does, and stamping the panel is what attaches them \u2014 so a closed menu puts\r\n  nothing in the accessibility tree, rather than hiding it with CSS.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the panel is the menu container, not a control: its (keydown) drives roving focus between the items, and they are the focusable elements -->\r\n  <div\r\n    [id]=\"menuId\"\r\n    class=\"gog-menu\"\r\n    [class.gog-menu--up]=\"placement()?.direction === 'up'\"\r\n    [style.top.px]=\"placement()?.top\"\r\n    [style.bottom.px]=\"placement()?.bottom\"\r\n    [style.left.px]=\"placement()?.left\"\r\n    [style.--gog-menu-available-height]=\"availableHeight()\"\r\n    [style.z-index]=\"panelZIndex()\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n    (click)=\"onPanelClick($event)\"\r\n  >\r\n    <!--\r\n      The library's own scroller rather than `overflow: auto`: a menu long enough to scroll gets\r\n      the same thin, auto-hiding scrollbar as every other scrollable surface in the package, and\r\n      `overscrollBehavior=\"contain\"` stops a wheel at the end of the list from scrolling the page\r\n      behind the menu. `focusable` is off because the menu's only tab stop is its trigger \u2014 items\r\n      are reached with the arrow keys, and `focusElement()` scrolls them into view.\r\n    -->\r\n    <gog-scroll\r\n      class=\"gog-menu__scroll\"\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n    >\r\n      <ng-content />\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}\n"], dependencies: [{ kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: MenuComponent, isStandalone: true, selector: "gog-menu", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClosed: "gogClosed" }, queries: [{ propertyName: "items", predicate: GogMenuItemDirective, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  The panel lives in a template because `GogDropdownOverlay` stamps it into `<body>`, never in\r\n  place \u2014 see the class comment for why a menu has no in-place mode.\r\n\r\n  `<ng-content>` sits inside that template on purpose: the consumer's items exist as soon as\r\n  their own view does, and stamping the panel is what attaches them \u2014 so a closed menu puts\r\n  nothing in the accessibility tree, rather than hiding it with CSS.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the panel is the menu container, not a control: its (keydown) drives roving focus between the items, and they are the focusable elements -->\r\n  <div\r\n    [id]=\"menuId\"\r\n    class=\"gog-menu\"\r\n    [class.gog-menu--up]=\"placement()?.direction === 'up'\"\r\n    [style.top.px]=\"placement()?.top\"\r\n    [style.bottom.px]=\"placement()?.bottom\"\r\n    [style.left.px]=\"placement()?.left\"\r\n    [style.--gog-menu-available-height]=\"availableHeight()\"\r\n    [style.z-index]=\"panelZIndex()\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n    (click)=\"onPanelClick($event)\"\r\n  >\r\n    <!--\r\n      The library's own scroller rather than `overflow: auto`: a menu long enough to scroll gets\r\n      the same thin, auto-hiding scrollbar as every other scrollable surface in the package, and\r\n      `overscrollBehavior=\"contain\"` stops a wheel at the end of the list from scrolling the page\r\n      behind the menu. `focusable` is off because the menu's only tab stop is its trigger \u2014 items\r\n      are reached with the arrow keys, and `focusElement()` scrolls them into view.\r\n    -->\r\n    <gog-scroll\r\n      class=\"gog-menu__scroll\"\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n    >\r\n      <ng-content />\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}\n"], dependencies: [{ kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -7366,7 +7580,7 @@ class GogTooltipBubbleComponent {
         return typeof value === 'string' ? value : '';
     }, ...(ngDevMode ? [{ debugName: "textContent" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogTooltipBubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogTooltipBubbleComponent, isStandalone: true, selector: "gog-tooltip-bubble", inputs: { bubbleId: { classPropertyName: "bubbleId", publicName: "bubbleId", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "bubbleId()", "class.gog-tooltip--top": "side() === 'top'", "class.gog-tooltip--bottom": "side() === 'bottom'", "class.gog-tooltip--left": "side() === 'left'", "class.gog-tooltip--right": "side() === 'right'", "class.gog-tooltip--visible": "visible()", "class": "extraClass()", "style.top.px": "top()", "style.left.px": "left()", "style.z-index": "zIndex()" }, classAttribute: "gog-tooltip" }, ngImport: i0, template: "<gog-scroll\r\n  class=\"gog-tooltip__scroll\"\r\n  size=\"thin\"\r\n  [focusable]=\"false\"\r\n  overscrollBehavior=\"contain\"\r\n>\r\n  @if (templateContent(); as template) {\r\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n  } @else {\r\n    {{ textContent() }}\r\n  }\r\n</gog-scroll>\r\n<span class=\"gog-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:fixed;top:0;left:0;z-index:var(--gog-tooltip-z);max-width:var(--gog-tooltip-max-width);padding:var(--gog-tooltip-padding);border-radius:var(--gog-tooltip-radius);border:var(--gog-tooltip-border-width) var(--gog-tooltip-border-style) var(--gog-tooltip-border-color);background:var(--gog-tooltip-bg);color:var(--gog-tooltip-color);font-family:var(--gog-tooltip-font-family);font-size:var(--gog-tooltip-font-size);line-height:var(--gog-tooltip-line-height);box-shadow:var(--gog-tooltip-shadow);word-wrap:break-word;opacity:0;transform:scale(.96);transition:opacity var(--gog-tooltip-transition-duration) var(--gog-easing),transform var(--gog-tooltip-transition-duration) var(--gog-easing)}:host(.gog-tooltip--visible){opacity:1;transform:scale(1)}.gog-tooltip__scroll{max-height:var(--gog-tooltip-max-height)}.gog-tooltip__arrow{position:absolute;width:0;height:0;border:var(--gog-tooltip-arrow-size) solid transparent}:host(.gog-tooltip--top) .gog-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--gog-tooltip-bg);border-bottom-width:0}:host(.gog-tooltip--bottom) .gog-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--gog-tooltip-bg);border-top-width:0}:host(.gog-tooltip--left) .gog-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--gog-tooltip-bg);border-right-width:0}:host(.gog-tooltip--right) .gog-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--gog-tooltip-bg);border-left-width:0}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogTooltipBubbleComponent, isStandalone: true, selector: "gog-tooltip-bubble", inputs: { bubbleId: { classPropertyName: "bubbleId", publicName: "bubbleId", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "bubbleId()", "class.gog-tooltip--top": "side() === 'top'", "class.gog-tooltip--bottom": "side() === 'bottom'", "class.gog-tooltip--left": "side() === 'left'", "class.gog-tooltip--right": "side() === 'right'", "class.gog-tooltip--visible": "visible()", "class": "extraClass()", "style.top.px": "top()", "style.left.px": "left()", "style.z-index": "zIndex()" }, classAttribute: "gog-tooltip" }, ngImport: i0, template: "<gog-scroll\r\n  class=\"gog-tooltip__scroll\"\r\n  size=\"thin\"\r\n  [focusable]=\"false\"\r\n  overscrollBehavior=\"contain\"\r\n>\r\n  @if (templateContent(); as template) {\r\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n  } @else {\r\n    {{ textContent() }}\r\n  }\r\n</gog-scroll>\r\n<span class=\"gog-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:fixed;top:0;left:0;z-index:var(--gog-tooltip-z);max-width:var(--gog-tooltip-max-width);padding:var(--gog-tooltip-padding);border-radius:var(--gog-tooltip-radius);border:var(--gog-tooltip-border-width) var(--gog-tooltip-border-style) var(--gog-tooltip-border-color);background:var(--gog-tooltip-bg);color:var(--gog-tooltip-color);font-family:var(--gog-tooltip-font-family);font-size:var(--gog-tooltip-font-size);line-height:var(--gog-tooltip-line-height);box-shadow:var(--gog-tooltip-shadow);word-wrap:break-word;opacity:0;transform:scale(.96);transition:opacity var(--gog-tooltip-transition-duration) var(--gog-easing),transform var(--gog-tooltip-transition-duration) var(--gog-easing)}:host(.gog-tooltip--visible){opacity:1;transform:scale(1)}.gog-tooltip__scroll{max-height:var(--gog-tooltip-max-height)}.gog-tooltip__arrow{position:absolute;width:0;height:0;border:var(--gog-tooltip-arrow-size) solid transparent}:host(.gog-tooltip--top) .gog-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--gog-tooltip-bg);border-bottom-width:0}:host(.gog-tooltip--bottom) .gog-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--gog-tooltip-bg);border-top-width:0}:host(.gog-tooltip--left) .gog-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--gog-tooltip-bg);border-right-width:0}:host(.gog-tooltip--right) .gog-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--gog-tooltip-bg);border-left-width:0}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogTooltipBubbleComponent, decorators: [{
             type: Component,
@@ -7896,7 +8110,7 @@ class MultiselectComponent extends GogDropdownBase {
         return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class]=\"sizeClass()\"\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (focus)=\"onFocusIn()\"\n    (blur)=\"onFocusOut()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    @if (label() && isFloatLabelActive()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\n    }\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ summary().text || effectivePlaceholder() }}\n    </span>\n    <!--\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\n      the whole selection back, so it is bound only while something is actually hidden.\n    -->\n    @if (summary().hidden > 0) {\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\n    }\n\n    <span class=\"gog-ms__actions\">\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronSlot()?.templateRef ?? null\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearValue($event)\"\n          [attr.aria-label]=\"resolvedClearLabel()\"\n        >\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\n        </button>\n      }\n    </span>\n  </div>\n\n  @if (isOpen() && !resolvedAppendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <!--\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n      focus moved between options via the arrow keys (roving-focus.ts), which already\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n      needed here.\n    -->\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\n        <input\n          type=\"text\"\n          class=\"gog-ms__filter-input\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"filterQuery()\"\n          (input)=\"onFilterInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.escape)=\"close(); focusTrigger()\"\n        />\n      </div>\n    }\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\n      <div class=\"gog-ms__options\">\n        @if (visibleOptions().length === 0) {\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\n        }\n        @for (option of visibleOptions(); track valueOf(option)) {\n          <!--\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n            expects: focus moves between options with the arrow keys, not by tabbing\n            through every one. Programmatic .focus() still works on a negative tabindex.\n          -->\n          <button\n            type=\"button\"\n            class=\"gog-ms__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [attr.aria-selected]=\"isSelected(option)\"\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\n            (click)=\"toggleOption(option, $event)\"\n            (keydown)=\"onOptionKeydown($event)\"\n            gogRipple\n            [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n          >\n            @if (optionSlot(); as slot) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  slot.templateRef;\n                  context: optionContext(option, isSelected(option))\n                \"\n              />\n            } @else {\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\n              </span>\n              {{ labelOf(option) }}\n            }\n          </button>\n        }\n      </div>\n    </gog-scroll>\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\n        <input\n          type=\"text\"\n          class=\"gog-ms__filter-input\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"filterQuery()\"\n          (input)=\"onFilterInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.escape)=\"close(); focusTrigger()\"\n        />\n      </div>\n    }\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\n      resolvedSelectAllLabel()\n    }}</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\n      resolvedClearAllLabel()\n    }}</gog-button>\n  </div>\n</ng-template>\n\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\n<ng-template #selectedListTpl>\n  <ul class=\"gog-ms__tooltip-list\">\n    @for (label of selectedLabels(); track label) {\n      <li>{{ label }}</li>\n    }\n  </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option:active:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-press-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "severity", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }, { kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -7910,7 +8124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-multiselect-min-width]': 'minWidth()',
-                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"] }]
+                    }, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class]=\"sizeClass()\"\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (focus)=\"onFocusIn()\"\n    (blur)=\"onFocusOut()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    @if (label() && isFloatLabelActive()) {\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\n    }\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ summary().text || effectivePlaceholder() }}\n    </span>\n    <!--\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\n      the whole selection back, so it is bound only while something is actually hidden.\n    -->\n    @if (summary().hidden > 0) {\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\n    }\n\n    <span class=\"gog-ms__actions\">\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronSlot()?.templateRef ?? null\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearValue($event)\"\n          [attr.aria-label]=\"resolvedClearLabel()\"\n        >\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\n        </button>\n      }\n    </span>\n  </div>\n\n  @if (isOpen() && !resolvedAppendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <!--\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\n      focus moved between options via the arrow keys (roving-focus.ts), which already\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\n      needed here.\n    -->\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\n        <input\n          type=\"text\"\n          class=\"gog-ms__filter-input\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"filterQuery()\"\n          (input)=\"onFilterInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.escape)=\"close(); focusTrigger()\"\n        />\n      </div>\n    }\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\n      <div class=\"gog-ms__options\">\n        @if (visibleOptions().length === 0) {\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\n        }\n        @for (option of visibleOptions(); track valueOf(option)) {\n          <!--\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n            expects: focus moves between options with the arrow keys, not by tabbing\n            through every one. Programmatic .focus() still works on a negative tabindex.\n          -->\n          <button\n            type=\"button\"\n            class=\"gog-ms__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [attr.aria-selected]=\"isSelected(option)\"\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\n            (click)=\"toggleOption(option, $event)\"\n            (keydown)=\"onOptionKeydown($event)\"\n            gogRipple\n            [rippleDisabled]=\"!rippleEnabled() || isOptionDisabled(option)\"\n          >\n            @if (optionSlot(); as slot) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  slot.templateRef;\n                  context: optionContext(option, isSelected(option))\n                \"\n              />\n            } @else {\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\n              </span>\n              {{ labelOf(option) }}\n            }\n          </button>\n        }\n      </div>\n    </gog-scroll>\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\n        <input\n          type=\"text\"\n          class=\"gog-ms__filter-input\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"filterQuery()\"\n          (input)=\"onFilterInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown.escape)=\"close(); focusTrigger()\"\n        />\n      </div>\n    }\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\n      resolvedSelectAllLabel()\n    }}</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\n      resolvedClearAllLabel()\n    }}</gog-button>\n  </div>\n</ng-template>\n\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\n<ng-template #selectedListTpl>\n  <ul class=\"gog-ms__tooltip-list\">\n    @for (label of selectedLabels(); track label) {\n      <li>{{ label }}</li>\n    }\n  </ul>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option:active:not(.gog-ms__option--disabled){background-color:var(--gog-multiselect-option-press-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], clearIconSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogMultiselectClearIconDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }], valueRef: [{ type: i0.ViewChild, args: ['valueEl', { isSignal: true }] }] } });
 /** One shared 2D context; creating a canvas per measurement is what makes this approach slow. */
 let measureContext = null;
@@ -8396,7 +8610,7 @@ class PaginatorComponent {
             this.pageSize.set(size);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === resolvedTotalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n\r\n@if (resolvedShowPageSizeSelect()) {\r\n  <!--\r\n    Bound with `[(pageSize)]`'s writable half, so choosing a size writes straight back through the\r\n    model the consumer bound \u2014 there is no intermediate state to keep in sync. `fullWidth` off so\r\n    the select sizes to its content instead of stretching the paginator row.\r\n\r\n    A plain `@if`, not `@defer`, and that was measured rather than assumed: `@defer` does move\r\n    `SelectComponent` out of this component's static `dependencies` and into\r\n    `deferBlockDependencies`, but ng-packagr flattens the whole library into one FESM, so the\r\n    deferred reference compiles to `Promise.resolve().then(() => select_component)` \u2014 a binding in\r\n    the *same module*, not a dynamic `import()`. With no import boundary there is nothing for a\r\n    bundler to split on and nothing it may drop, so the consumer ships exactly the same bytes,\r\n    minus a placeholder and an SSR pop-in. Making this genuinely lazy needs secondary entry\r\n    points (`@guildofgleks/ui/select`), which is a packaging decision, not a template one.\r\n  -->\r\n  <gog-select\r\n    class=\"gog-paginator__page-size\"\r\n    [options]=\"resolvedPageSizeOptions()\"\r\n    [value]=\"pageSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [fullWidth]=\"false\"\r\n    [size]=\"size()\"\r\n    [ariaLabel]=\"resolvedRowsPerPageLabel()\"\r\n    (valueChange)=\"onPageSizeChange($event)\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}.gog-paginator__page-size{margin-inline-start:auto;min-width:var(--gog-paginator-page-size-min-width)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: SelectComponent, selector: "gog-select", inputs: ["inputId", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === resolvedTotalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n\r\n@if (resolvedShowPageSizeSelect()) {\r\n  <!--\r\n    Bound with `[(pageSize)]`'s writable half, so choosing a size writes straight back through the\r\n    model the consumer bound \u2014 there is no intermediate state to keep in sync. `fullWidth` off so\r\n    the select sizes to its content instead of stretching the paginator row.\r\n\r\n    A plain `@if`, not `@defer`, and that was measured rather than assumed: `@defer` does move\r\n    `SelectComponent` out of this component's static `dependencies` and into\r\n    `deferBlockDependencies`, but ng-packagr flattens the whole library into one FESM, so the\r\n    deferred reference compiles to `Promise.resolve().then(() => select_component)` \u2014 a binding in\r\n    the *same module*, not a dynamic `import()`. With no import boundary there is nothing for a\r\n    bundler to split on and nothing it may drop, so the consumer ships exactly the same bytes,\r\n    minus a placeholder and an SSR pop-in. Making this genuinely lazy needs secondary entry\r\n    points (`@guildofgleks/ui/select`), which is a packaging decision, not a template one.\r\n  -->\r\n  <gog-select\r\n    class=\"gog-paginator__page-size\"\r\n    [options]=\"resolvedPageSizeOptions()\"\r\n    [value]=\"pageSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [fullWidth]=\"false\"\r\n    [size]=\"size()\"\r\n    [ariaLabel]=\"resolvedRowsPerPageLabel()\"\r\n    (valueChange)=\"onPageSizeChange($event)\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}.gog-paginator__page-size{margin-inline-start:auto;min-width:var(--gog-paginator-page-size-min-width)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "severity", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }, { kind: "component", type: SelectComponent, selector: "gog-select", inputs: ["inputId", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -8934,7 +9148,7 @@ class TableComponent {
     /** CSS grid-area for the pagination block */
     paginatorGridArea = computed(() => this.paginatorPosition(), ...(ngDevMode ? [{ debugName: "paginatorGridArea" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <!--\r\n    The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n    table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n    in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n    out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n  -->\r\n  <gog-scroll\r\n    [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n    [style.max-height]=\"maxHeight()\"\r\n    class=\"gog-table-scroll\"\r\n  >\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (hasSelectionColumn()) {\r\n          <col class=\"gog-table__col--select\" />\r\n        }\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (hasSelectionColumn()) {\r\n            <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n              <!--\r\n                Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n                all of, and a checkbox that can only ever check one row is a lie.\r\n              -->\r\n              @if (selectionMode() === 'multiple') {\r\n                <gog-checkbox\r\n                  [checked]=\"allPageRowsSelected()\"\r\n                  [indeterminate]=\"somePageRowsSelected()\"\r\n                  [disabled]=\"loading() || visibleRows().length === 0\"\r\n                  [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n                  (checkedChange)=\"toggleAllOnPage($event)\"\r\n                />\r\n              }\r\n            </th>\r\n          }\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n            <tr\r\n              class=\"gog-table__row\"\r\n              [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n              [class.gog-table__row--selected]=\"isSelected(row)\"\r\n              [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n              [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n              (click)=\"emitRowClick(row, i, $event)\"\r\n              (keydown)=\"onRowKeydown(row, i, $event)\"\r\n            >\r\n              @if (hasSelectionColumn()) {\r\n                <td class=\"gog-table__td gog-table__td--select\">\r\n                  <!--\r\n                    `$event.stopPropagation()` so ticking the box does not also count as a row\r\n                    click: with `interactiveRows` those are two different intents, and firing both\r\n                    from one gesture is how a \"select\" ends up navigating away.\r\n                  -->\r\n                  <gog-checkbox\r\n                    [checked]=\"isSelected(row)\"\r\n                    [ariaLabel]=\"resolvedLabels().selectRow\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          {{ resolvedLabels().total }}: {{ rowCount() }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <!--\r\n          `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n          writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n          intermediate signal, in either direction.\r\n        -->\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [(pageSize)]=\"pageSize\"\r\n          [totalPages]=\"totalPages()\"\r\n          [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n          [pageSizeOptions]=\"pageSizeOptions()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          [ariaLabel]=\"resolvedLabels().pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--auto-layout{table-layout:auto}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:start;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-header-bg);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row--interactive{cursor:pointer}.gog-table__row--interactive:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-inline-end:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:end}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <!--\r\n    The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n    table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n    in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n    out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n  -->\r\n  <gog-scroll\r\n    [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n    [style.max-height]=\"maxHeight()\"\r\n    class=\"gog-table-scroll\"\r\n  >\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (hasSelectionColumn()) {\r\n          <col class=\"gog-table__col--select\" />\r\n        }\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (hasSelectionColumn()) {\r\n            <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n              <!--\r\n                Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n                all of, and a checkbox that can only ever check one row is a lie.\r\n              -->\r\n              @if (selectionMode() === 'multiple') {\r\n                <gog-checkbox\r\n                  [checked]=\"allPageRowsSelected()\"\r\n                  [indeterminate]=\"somePageRowsSelected()\"\r\n                  [disabled]=\"loading() || visibleRows().length === 0\"\r\n                  [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n                  (checkedChange)=\"toggleAllOnPage($event)\"\r\n                />\r\n              }\r\n            </th>\r\n          }\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n            <tr\r\n              class=\"gog-table__row\"\r\n              [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n              [class.gog-table__row--selected]=\"isSelected(row)\"\r\n              [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n              [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n              (click)=\"emitRowClick(row, i, $event)\"\r\n              (keydown)=\"onRowKeydown(row, i, $event)\"\r\n            >\r\n              @if (hasSelectionColumn()) {\r\n                <td class=\"gog-table__td gog-table__td--select\">\r\n                  <!--\r\n                    `$event.stopPropagation()` so ticking the box does not also count as a row\r\n                    click: with `interactiveRows` those are two different intents, and firing both\r\n                    from one gesture is how a \"select\" ends up navigating away.\r\n                  -->\r\n                  <gog-checkbox\r\n                    [checked]=\"isSelected(row)\"\r\n                    [ariaLabel]=\"resolvedLabels().selectRow\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          {{ resolvedLabels().total }}: {{ rowCount() }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <!--\r\n          `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n          writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n          intermediate signal, in either direction.\r\n        -->\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [(pageSize)]=\"pageSize\"\r\n          [totalPages]=\"totalPages()\"\r\n          [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n          [pageSizeOptions]=\"pageSizeOptions()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          [ariaLabel]=\"resolvedLabels().pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--auto-layout{table-layout:auto}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:start;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-header-bg);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row--interactive{cursor:pointer}.gog-table__row--interactive:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-inline-end:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:end}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack", "horizontalWheel"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -9122,11 +9336,22 @@ const GOG_TOKEN_GROUPS = [
             '--gog-font-body',
             '--gog-font-heading',
             '--gog-font-mono',
+            '--gog-font-weight-bold',
+            '--gog-font-weight-heavy',
+            '--gog-font-weight-medium',
+            '--gog-font-weight-semibold',
             '--gog-letter-spacing',
+            '--gog-line-height-loose',
+            '--gog-line-height-none',
+            '--gog-line-height-normal',
+            '--gog-line-height-relaxed',
+            '--gog-line-height-snug',
+            '--gog-line-height-tight',
             '--gog-text-2xl',
             '--gog-text-3xl',
             '--gog-text-lg',
             '--gog-text-md',
+            '--gog-text-slg',
             '--gog-text-sm',
             '--gog-text-transform',
             '--gog-text-xl',
@@ -9176,17 +9401,13 @@ const GOG_TOKEN_GROUPS = [
             '--gog-control-checkbox-label-size-slg',
             '--gog-control-checkbox-label-size-sm',
             '--gog-control-checkbox-label-size-xsm',
+            '--gog-control-clear-icon-ratio',
         ],
     },
     {
         section: 'Field sizing (input / select / multiselect share one scale)',
         layer: 'foundation',
-        tokens: [
-            '--gog-field-icon-glyph',
-            '--gog-field-icon-glyph-sm',
-            '--gog-field-icon-glyph-xsm',
-            '--gog-field-slg-font-size',
-        ],
+        tokens: ['--gog-field-icon-glyph', '--gog-field-icon-glyph-sm', '--gog-field-icon-glyph-xsm'],
     },
     {
         section: 'Float label geometry (input / textarea / select / multiselect)',
@@ -9225,7 +9446,7 @@ const GOG_TOKEN_GROUPS = [
     {
         section: 'Overlay stacking',
         layer: 'foundation',
-        tokens: ['--gog-dropdown-z', '--gog-spinner-overlay-z'],
+        tokens: ['--gog-z-base'],
     },
     {
         section: 'Light palette (also the no-data-theme default)',
@@ -9255,13 +9476,29 @@ const GOG_TOKEN_GROUPS = [
         ],
     },
     {
-        section: 'Derived foundation tokens',
-        layer: 'foundation',
+        section: 'Text on a status fill',
+        layer: 'component',
+        tokens: [
+            '--gog-danger-shade',
+            '--gog-danger-text-color',
+            '--gog-info-shade',
+            '--gog-info-text-color',
+            '--gog-success-shade',
+            '--gog-success-text-color',
+            '--gog-warning-shade',
+            '--gog-warning-text-color',
+        ],
+    },
+    {
+        section: 'Stacking layers',
+        layer: 'component',
         tokens: [
+            '--gog-badge-z',
             '--gog-control-checkbox-padding',
             '--gog-control-icon-offset',
             '--gog-control-padding-x',
             '--gog-control-padding-y',
+            '--gog-dropdown-z',
             '--gog-elevated-surface-color',
             '--gog-field-float-label-over-gap',
             '--gog-field-lg-font-size',
@@ -9274,6 +9511,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-field-md-icon-offset',
             '--gog-field-md-padding-x',
             '--gog-field-md-padding-y',
+            '--gog-field-slg-font-size',
             '--gog-field-slg-icon-inset',
             '--gog-field-slg-icon-offset',
             '--gog-field-slg-padding-x',
@@ -9308,8 +9546,11 @@ const GOG_TOKEN_GROUPS = [
             '--gog-space-md',
             '--gog-space-sm',
             '--gog-space-xs',
+            '--gog-spinner-overlay-z',
+            '--gog-toast-base-z',
             '--gog-toast-gap',
             '--gog-toast-stack-padding',
+            '--gog-tooltip-z',
         ],
     },
     {
@@ -9335,6 +9576,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-accordion-header-gap',
             '--gog-accordion-header-text-transform',
             '--gog-accordion-hover-bg',
+            '--gog-accordion-hover-color',
             '--gog-accordion-hover-ring',
             '--gog-accordion-lg-body-font-size',
             '--gog-accordion-lg-body-line-height',
@@ -9358,6 +9600,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-accordion-md-letter-spacing',
             '--gog-accordion-md-padding-x',
             '--gog-accordion-md-padding-y',
+            '--gog-accordion-press-bg',
             '--gog-accordion-radius',
             '--gog-accordion-slg-body-font-size',
             '--gog-accordion-slg-body-line-height',
@@ -9424,8 +9667,11 @@ const GOG_TOKEN_GROUPS = [
             '--gog-button-ghost-hover-bg',
             '--gog-button-ghost-hover-color',
             '--gog-button-ghost-hover-shadow',
+            '--gog-button-ghost-press-bg',
+            '--gog-button-ghost-press-color',
             '--gog-button-ghost-shadow',
             '--gog-button-ghost-spinner-color',
+            '--gog-button-ghost-toggled-shadow',
             '--gog-button-letter-spacing',
             '--gog-button-lg-font-size',
             '--gog-button-lg-padding',
@@ -9439,16 +9685,22 @@ const GOG_TOKEN_GROUPS = [
             '--gog-button-outline-hover-bg',
             '--gog-button-outline-hover-color',
             '--gog-button-outline-hover-shadow',
+            '--gog-button-outline-press-bg',
+            '--gog-button-outline-press-color',
             '--gog-button-outline-shadow',
             '--gog-button-outline-spinner-color',
+            '--gog-button-outline-toggled-shadow',
             '--gog-button-primary-bg',
             '--gog-button-primary-border',
             '--gog-button-primary-color',
             '--gog-button-primary-hover-bg',
             '--gog-button-primary-hover-color',
             '--gog-button-primary-hover-shadow',
+            '--gog-button-primary-press-bg',
+            '--gog-button-primary-press-color',
             '--gog-button-primary-shadow',
             '--gog-button-primary-spinner-color',
+            '--gog-button-primary-toggled-shadow',
             '--gog-button-radius',
             '--gog-button-secondary-bg',
             '--gog-button-secondary-border',
@@ -9456,19 +9708,53 @@ const GOG_TOKEN_GROUPS = [
             '--gog-button-secondary-hover-bg',
             '--gog-button-secondary-hover-color',
             '--gog-button-secondary-hover-shadow',
+            '--gog-button-secondary-press-bg',
+            '--gog-button-secondary-press-color',
             '--gog-button-secondary-shadow',
             '--gog-button-secondary-spinner-color',
+            '--gog-button-secondary-toggled-shadow',
             '--gog-button-slg-font-size',
             '--gog-button-slg-padding',
             '--gog-button-sm-font-size',
             '--gog-button-sm-padding',
             '--gog-button-spinner-max-size',
             '--gog-button-text-transform',
+            '--gog-button-toggled-ring-width',
             '--gog-button-transition-duration',
             '--gog-button-xsm-font-size',
             '--gog-button-xsm-padding',
         ],
     },
+    {
+        section: 'Button severity',
+        layer: 'component',
+        tokens: [
+            '--gog-button-danger-fill',
+            '--gog-button-danger-fill-hover',
+            '--gog-button-danger-fill-press',
+            '--gog-button-danger-ink',
+            '--gog-button-danger-on-fill',
+            '--gog-button-danger-wash',
+            '--gog-button-info-fill',
+            '--gog-button-info-fill-hover',
+            '--gog-button-info-fill-press',
+            '--gog-button-info-ink',
+            '--gog-button-info-on-fill',
+            '--gog-button-info-wash',
+            '--gog-button-success-fill',
+            '--gog-button-success-fill-hover',
+            '--gog-button-success-fill-press',
+            '--gog-button-success-ink',
+            '--gog-button-success-on-fill',
+            '--gog-button-success-wash',
+            '--gog-button-warning-fill',
+            '--gog-button-warning-fill-hover',
+            '--gog-button-warning-fill-press',
+            '--gog-button-warning-ink',
+            '--gog-button-warning-on-fill',
+            '--gog-button-warning-wash',
+        ],
+    },
     {
         section: 'Button toggle group',
         layer: 'component',
@@ -9488,12 +9774,14 @@ const GOG_TOKEN_GROUPS = [
             '--gog-button-toggle-icon-size',
             '--gog-button-toggle-letter-spacing',
             '--gog-button-toggle-line-height',
+            '--gog-button-toggle-press-bg',
             '--gog-button-toggle-radius',
             '--gog-button-toggle-rest-bg',
             '--gog-button-toggle-rest-color',
             '--gog-button-toggle-selected-bg',
             '--gog-button-toggle-selected-border-color',
             '--gog-button-toggle-selected-color',
+            '--gog-button-toggle-selected-press-bg',
             '--gog-button-toggle-separated-gap',
             '--gog-button-toggle-text-transform',
             '--gog-button-toggle-transition-duration',
@@ -9704,11 +9992,14 @@ const GOG_TOKEN_GROUPS = [
             '--gog-chip-md-padding-inline',
             '--gog-chip-md-remove-size',
             '--gog-chip-pill-radius',
+            '--gog-chip-press-bg',
             '--gog-chip-radius',
             '--gog-chip-remove-color',
             '--gog-chip-remove-hover-color',
             '--gog-chip-remove-inset-ratio',
             '--gog-chip-remove-scale',
+            '--gog-chip-selected-ring-width',
+            '--gog-chip-selected-shadow',
             '--gog-chip-slg-avatar-size',
             '--gog-chip-slg-font-size',
             '--gog-chip-slg-gap',
@@ -9820,6 +10111,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-autocomplete-option-hover-bg',
             '--gog-autocomplete-option-hover-color',
             '--gog-autocomplete-option-padding',
+            '--gog-autocomplete-option-press-bg',
             '--gog-autocomplete-option-radius',
             '--gog-autocomplete-option-selected-bg',
             '--gog-autocomplete-option-selected-color',
@@ -9864,7 +10156,6 @@ const GOG_TOKEN_GROUPS = [
             '--gog-badge-success-color',
             '--gog-badge-warning-bg',
             '--gog-badge-warning-color',
-            '--gog-badge-z',
         ],
     },
     {
@@ -10060,6 +10351,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-multiselect-option-gap-inline',
             '--gog-multiselect-option-height',
             '--gog-multiselect-option-hover-bg',
+            '--gog-multiselect-option-press-bg',
             '--gog-multiselect-option-radius',
             '--gog-multiselect-option-transition-duration',
             '--gog-multiselect-options-padding',
@@ -10100,6 +10392,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-menu-item-icon-size',
             '--gog-menu-item-line-height',
             '--gog-menu-item-padding',
+            '--gog-menu-item-press-bg',
             '--gog-menu-item-radius',
             '--gog-menu-max-height',
             '--gog-menu-max-width',
@@ -10298,6 +10591,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-select-option-gap',
             '--gog-select-option-height',
             '--gog-select-option-hover-bg',
+            '--gog-select-option-press-bg',
             '--gog-select-option-selected-color',
             '--gog-select-option-transition-duration',
             '--gog-select-panel-bg',
@@ -10504,6 +10798,8 @@ const GOG_TOKEN_GROUPS = [
             '--gog-tabs-md-padding',
             '--gog-tabs-panel-color',
             '--gog-tabs-panel-padding',
+            '--gog-tabs-press-bg',
+            '--gog-tabs-press-color',
             '--gog-tabs-rest-bg',
             '--gog-tabs-rest-color',
             '--gog-tabs-slg-font-size',
@@ -10573,7 +10869,6 @@ const GOG_TOKEN_GROUPS = [
             '--gog-toast-action-font-size',
             '--gog-toast-action-padding',
             '--gog-toast-actions-gap',
-            '--gog-toast-base-z',
             '--gog-toast-bg',
             '--gog-toast-border',
             '--gog-toast-close-font-size',
@@ -10681,7 +10976,6 @@ const GOG_TOKEN_GROUPS = [
             '--gog-tooltip-radius',
             '--gog-tooltip-shadow',
             '--gog-tooltip-transition-duration',
-            '--gog-tooltip-z',
         ],
     },
     {
@@ -10712,12 +11006,15 @@ const GOG_TOKEN_GROUPS = [
             '--gog-button-hover-bg',
             '--gog-button-hover-color',
             '--gog-button-hover-shadow',
+            '--gog-button-press-bg',
+            '--gog-button-press-color',
             '--gog-button-shadow',
             '--gog-button-spinner-color',
             '--gog-button-toggle-bg',
             '--gog-button-toggle-color',
             '--gog-button-toggle-font-size',
             '--gog-button-toggle-padding',
+            '--gog-button-toggled-shadow',
             '--gog-calendar-day-bg',
             '--gog-calendar-day-color',
             '--gog-calendar-day-size',