@guildofgleks/ui 21.2.3 → 21.2.4

package/fesm2022/guildofgleks-ui.mjs

@@ -1,11 +1,43 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, output, computed, inject, DestroyRef, TemplateRef, Directive, model, contentChild, ElementRef, signal, effect, untracked, forwardRef, InjectionToken, Injectable, Injector, viewChild, afterNextRender, PLATFORM_ID, ApplicationRef, contentChildren, linkedSignal } from '@angular/core';
+import { InjectionToken, input, ChangeDetectionStrategy, Component, output, computed, inject, DestroyRef, TemplateRef, Directive, model, contentChild, ElementRef, signal, effect, untracked, Injectable, viewChild, PLATFORM_ID, afterNextRender, Injector, ApplicationRef, contentChildren, linkedSignal } from '@angular/core';
 import { Subject, timer } from 'rxjs';
 import { throttle } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgTemplateOutlet, DOCUMENT, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser, NgComponentOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
-import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { NgControl } from '@angular/forms';
+
+/**
+ * Resolves to `{}` — every field falls through to its component's own hardcoded default —
+ * until a `provideGogConfig(...)` call overrides it somewhere in the injector tree.
+ */
+const GOG_CONFIG = new InjectionToken('GOG_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * Sets app-wide (or subtree-wide, if placed in a route's or component's own `providers`
+ * instead of the bootstrap config) defaults for every `@guildofgleks/ui` component that
+ * reads `GOG_CONFIG` — one call instead of a separate injection token per setting:
+ *
+ * ```ts
+ * // app.config.ts
+ * providers: [
+ *   provideGogConfig({
+ *     scroll: { hideDelay: 1000 },
+ *     button: { debounce: 500 },
+ *   }),
+ * ]
+ * ```
+ *
+ * Providing this again further down the injector tree (a route, a single component's own
+ * `providers`) replaces the whole object for that subtree rather than merging with the
+ * parent's — pass everything you want in effect there, not just the one field you're
+ * changing.
+ */
+function provideGogConfig(config) {
+    return { provide: GOG_CONFIG, useValue: config };
+}
 
 class SpinnerComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -27,6 +59,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, 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"] }]
         }], 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;
 class ButtonComponent {
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -39,8 +72,9 @@ class ButtonComponent {
      * guard, not a delay before the first click fires: the first click in a
      * window is emitted immediately (leading edge), and any further clicks
      * within `debounce` ms are silently dropped until the window elapses.
+     * Unset, falls back to `GOG_CONFIG.button.debounce`, then to `300`.
      */
-    debounce = input(300, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
+    debounce = input(undefined, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
     /**
      * Accessible name for the button, forwarded to the native <button>.
      * Setting `aria-label` directly on <gog-button> in a template does NOT
@@ -62,11 +96,13 @@ class ButtonComponent {
         slg: 'md',
     };
     spinnerSize = computed(() => ButtonComponent.SPINNER_SIZE_BY_BUTTON_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
+    globalConfig = inject(GOG_CONFIG);
+    resolvedDebounce = computed(() => this.debounce() ?? this.globalConfig.button?.debounce ?? DEFAULT_DEBOUNCE, ...(ngDevMode ? [{ debugName: "resolvedDebounce" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     click$ = new Subject();
     constructor() {
         this.click$
-            .pipe(throttle(() => timer(this.debounce()), { leading: true, trailing: false }), takeUntilDestroyed(this.destroyRef))
+            .pipe(throttle(() => timer(this.resolvedDebounce()), { leading: true, trailing: false }), takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => this.gogClick.emit(event));
     }
     onClick(event) {
@@ -362,6 +398,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\r\n  [class.gog-accordion--md]=\"size() === 'md'\"\r\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\r\n  class=\"gog-accordion gog-contained-layout\"\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=\"55%\" />\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          >\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:left;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}@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 }] }], 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 }] }] } });
 
+/**
+ * Headless expand/collapse primitive — a trigger toggles a content region open and
+ * closed, in place (no portal/overlay, unlike `gog-select`/`gog-multiselect`). Unopinionated
+ * about markup: project any element as the trigger via `gogCollapsibleTrigger` and any
+ * element as the content via `gogCollapsibleContent`; this component only holds the shared
+ * `open` state and generates the id pair linking them for ARIA.
+ */
+class CollapsibleComponent {
+    static nextUid = 0;
+    /** Two-way bindable open state: `[(open)]="signal"`. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    uid = `gog-collapsible-${CollapsibleComponent.nextUid++}`;
+    contentId = computed(() => `${this.uid}-content`, ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled())
+            return;
+        this.open.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: CollapsibleComponent, isStandalone: true, selector: "gog-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class.gog-collapsible-host--disabled": "disabled()" }, classAttribute: "gog-collapsible-host" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CollapsibleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-collapsible', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'gog-collapsible-host',
+                        '[class.gog-collapsible-host--disabled]': 'disabled()',
+                    }, styles: ["@charset \"UTF-8\";:host{display:contents}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Marks the element that toggles a `gog-collapsible`. Works on any clickable element
+ * (`<button>`, `<a>`, ...) — this only wires the click handler and the ARIA attributes
+ * pointing at the matching `gogCollapsibleContent`; it owns no markup of its own.
+ */
+class GogCollapsibleTriggerDirective {
+    collapsible = inject(CollapsibleComponent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogCollapsibleTriggerDirective, isStandalone: true, selector: "[gogCollapsibleTrigger]", host: { listeners: { "click": "collapsible.toggle()" }, properties: { "class.gog-collapsible__trigger--open": "collapsible.open()", "attr.aria-expanded": "collapsible.open()", "attr.aria-controls": "collapsible.contentId()", "attr.aria-disabled": "collapsible.disabled() ? \"true\" : null" }, classAttribute: "gog-collapsible__trigger" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogCollapsibleTrigger]',
+                    host: {
+                        class: 'gog-collapsible__trigger',
+                        '[class.gog-collapsible__trigger--open]': 'collapsible.open()',
+                        '[attr.aria-expanded]': 'collapsible.open()',
+                        '[attr.aria-controls]': 'collapsible.contentId()',
+                        '[attr.aria-disabled]': 'collapsible.disabled() ? "true" : null',
+                        '(click)': 'collapsible.toggle()',
+                    },
+                }]
+        }] });
+
+/**
+ * Marks the element that a `gog-collapsible` shows and hides. Applies the open/closed
+ * CSS state and the ARIA wiring (`id`, `aria-hidden`, `inert`) to whatever element this is
+ * placed on — that element owns its own content and layout.
+ */
+class GogCollapsibleContentDirective {
+    collapsible = inject(CollapsibleComponent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogCollapsibleContentDirective, isStandalone: true, selector: "[gogCollapsibleContent]", host: { properties: { "class.gog-collapsible__content--open": "collapsible.open()", "id": "collapsible.contentId()", "attr.aria-hidden": "!collapsible.open()", "attr.inert": "!collapsible.open() ? \"\" : null" }, classAttribute: "gog-collapsible__content" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogCollapsibleContent]',
+                    host: {
+                        class: 'gog-collapsible__content',
+                        '[class.gog-collapsible__content--open]': 'collapsible.open()',
+                        '[id]': 'collapsible.contentId()',
+                        '[attr.aria-hidden]': '!collapsible.open()',
+                        '[attr.inert]': '!collapsible.open() ? "" : null',
+                    },
+                }]
+        }] });
+
 const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 6px)';
 const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
     xsm: {
@@ -402,7 +517,7 @@ class CheckboxComponent {
     /**
      * Two-way bindable checked state: `[(checked)]="signal"`.
      * This is the same state Angular Forms drives via `writeValue`/`registerOnChange`
-     * when the component is used with `formControlName`/`[formControl]`/`ngModel`.
+     * when the component is used with `formControlName`/`[formControl]`.
      * Don't wire both a form directive AND `[(checked)]` to the same instance —
      * pick one, otherwise you end up with two competing sources of truth.
      */
@@ -412,8 +527,17 @@ class CheckboxComponent {
     checkboxPadding = GOG_CHECKABLE_CONTROL_PADDING;
     labelSize = computed(() => this.controlSize().labelSize, ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
     iconSize = computed(() => this.controlSize().indicatorSize, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    ngControl = inject(NgControl, { optional: true, self: true });
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Registering through NgControl instead of NG_VALUE_ACCESSOR matches the pattern used
+        // by every other form control in the library — providing NG_VALUE_ACCESSOR on the
+        // component while also injecting NgControl would be a dependency cycle.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
     writeValue(val) {
         this.checked.set(val ?? false);
     }
@@ -443,13 +567,7 @@ class CheckboxComponent {
     onCheckedChange = () => { };
     onTouched = () => { };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "gog-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", 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 }, checkIconTemplate: { classPropertyName: "checkIconTemplate", publicName: "checkIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "style.--gog-checkbox-box-size": "boxSize()", "style.--gog-checkbox-label-size": "labelSize()", "style.--gog-checkbox-icon-size": "iconSize()", "style.--gog-checkbox-padding": "checkboxPadding", "class.gog-host--full-width": "fullWidth()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CheckboxComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-checkbox{width:100%}\n"], dependencies: [{ 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: CheckboxComponent, isStandalone: true, selector: "gog-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", 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 }, checkIconTemplate: { classPropertyName: "checkIconTemplate", publicName: "checkIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "style.--gog-checkbox-box-size": "boxSize()", "style.--gog-checkbox-label-size": "labelSize()", "style.--gog-checkbox-icon-size": "iconSize()", "style.--gog-checkbox-padding": "checkboxPadding", "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-checkbox{width:100%}\n"], dependencies: [{ 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: CheckboxComponent, decorators: [{
             type: Component,
@@ -461,14 +579,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()',
-                    }, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CheckboxComponent),
-                            multi: true,
-                        },
-                    ], template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-checkbox{width:100%}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], checkIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIconTemplate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+                    }, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-checkbox{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], checkIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIconTemplate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
 const DIALOG_REF = new InjectionToken('DIALOG_REF');
@@ -583,6 +695,351 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/** A sub-pixel overflow reading is rounding noise, not real scrollable content. */
+const OVERFLOW_EPSILON = 1;
+/** Portion of the viewport paged per track click, leaving visual continuity with the old view. */
+const TRACK_CLICK_PAGE_RATIO = 0.9;
+/** Built-in fallbacks — the bottom of each input's GOG_CONFIG.scroll ?? this chain. */
+const DEFAULT_SIZE = 'normal';
+const DEFAULT_AUTO_HIDE = true;
+const DEFAULT_HIDE_DELAY = 800;
+const DEFAULT_OVERSCROLL_BEHAVIOR = 'auto';
+function readPx$1(raw, fallback) {
+    const parsed = Number.parseFloat(raw.trim());
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+/**
+ * Drop-in replacement for a native `overflow: auto` region: the content still scrolls
+ * natively (wheel, touch, keyboard, focus-into-view all keep working unmodified), only the
+ * browser's own scrollbar chrome is hidden and replaced with a themeable, draggable
+ * overlay thumb built from plain pointer events + `ResizeObserver` — no CDK involved, to
+ * stay consistent with the rest of this library's hand-rolled overlay/positioning code.
+ */
+class ScrollComponent {
+    /** Which axes get an overlay thumb. Native scrolling on the other axis is unaffected. */
+    axis = input('vertical', ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.scroll.size`, then to `'normal'`. */
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Fades the thumb out after `hideDelay` ms of inactivity; false keeps it always visible.
+     * Unset, falls back to `GOG_CONFIG.scroll.autoHide`, then to `true`.
+     */
+    autoHide = input(undefined, ...(ngDevMode ? [{ debugName: "autoHide" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.scroll.hideDelay`, then to `800`. */
+    hideDelay = input(undefined, ...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
+    /** Pixel distance from an edge that still counts as "reached" for gogReachStart/End. */
+    reachThreshold = input(0, ...(ngDevMode ? [{ debugName: "reachThreshold" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the viewport as its own tab stop (`tabindex="0"`, `role="region"`) per the
+     * WAI-ARIA scrollable-region pattern. Turn off when nesting inside a component that
+     * already owns focus/keyboard handling (a listbox panel, a dialog body) so this doesn't
+     * add a redundant stop — the descendants' own focus still auto-scrolls into view either way.
+     */
+    focusable = input(true, ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the viewport when `focusable` is true and there is no visible label. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * What happens when a scroll gesture reaches this instance's edge. Unset, falls back to
+     * `GOG_CONFIG.scroll.overscrollBehavior`, then to `'auto'`. See `GogScrollOverscrollBehavior`
+     * for what each value does.
+     */
+    overscrollBehavior = input(undefined, ...(ngDevMode ? [{ debugName: "overscrollBehavior" }] : /* istanbul ignore next */ []));
+    gogScroll = output();
+    gogReachStart = output();
+    gogReachEnd = output();
+    viewportRef = viewChild.required('viewport');
+    contentRef = viewChild.required('content');
+    showTrackV = signal(false, ...(ngDevMode ? [{ debugName: "showTrackV" }] : /* istanbul ignore next */ []));
+    showTrackH = signal(false, ...(ngDevMode ? [{ debugName: "showTrackH" }] : /* istanbul ignore next */ []));
+    /**
+     * Flips true once the first real measurement has run. Before that (SSR, or the client
+     * frame before hydration/afterNextRender fires), an allowed axis defaults to `auto` — the
+     * same safe, always-clips behavior this component had before viewportOverflowY/X existed —
+     * rather than guessing `visible` from a `showTrackV`/`H` that just hasn't been measured yet.
+     */
+    measured = signal(false, ...(ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []));
+    /**
+     * `overflow-y`/`overflow-x` on the viewport, driven by measured overflow rather than a
+     * static `axis`-only class. Any axis that isn't *currently, actually* scrolling — because
+     * it's disabled by `axis`, or because it's allowed but the content doesn't overflow it —
+     * gets `visible`, never `hidden`/`auto`. A non-`visible` overflow value makes the viewport
+     * a "scroll container" per spec regardless of whether it has anything to scroll, which
+     * becomes the containing block for `position: sticky` descendants (e.g. gog-table's sticky
+     * header) and a scroll-chaining boundary for wheel input. Left non-visible on a disabled or
+     * unneeded axis, an instance nested inside another scroller — axis="horizontal" wrapping a
+     * table that fits, itself inside a taller outer gog-scroll — would silently swallow the
+     * outer axis's wheel scroll and break its sticky headers, even though this instance itself
+     * never visibly scrolls that axis. `visible` whenever the axis is inert avoids both.
+     */
+    viewportOverflowY = computed(() => {
+        if (this.axis() === 'horizontal')
+            return 'visible';
+        if (!this.measured())
+            return 'auto';
+        return this.showTrackV() ? 'auto' : 'visible';
+    }, ...(ngDevMode ? [{ debugName: "viewportOverflowY" }] : /* istanbul ignore next */ []));
+    viewportOverflowX = computed(() => {
+        if (this.axis() === 'vertical')
+            return 'visible';
+        if (!this.measured())
+            return 'auto';
+        return this.showTrackH() ? 'auto' : 'visible';
+    }, ...(ngDevMode ? [{ debugName: "viewportOverflowX" }] : /* istanbul ignore next */ []));
+    /** App/subtree-wide fallbacks for the inputs above that don't set their own value. */
+    globalConfig = inject(GOG_CONFIG);
+    resolvedSize = computed(() => this.size() ?? this.globalConfig.scroll?.size ?? DEFAULT_SIZE, ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedAutoHide = computed(() => this.autoHide() ?? this.globalConfig.scroll?.autoHide ?? DEFAULT_AUTO_HIDE, ...(ngDevMode ? [{ debugName: "resolvedAutoHide" }] : /* istanbul ignore next */ []));
+    resolvedHideDelay = computed(() => this.hideDelay() ?? this.globalConfig.scroll?.hideDelay ?? DEFAULT_HIDE_DELAY, ...(ngDevMode ? [{ debugName: "resolvedHideDelay" }] : /* istanbul ignore next */ []));
+    resolvedOverscrollBehavior = computed(() => this.overscrollBehavior() ??
+        this.globalConfig.scroll?.overscrollBehavior ??
+        DEFAULT_OVERSCROLL_BEHAVIOR, ...(ngDevMode ? [{ debugName: "resolvedOverscrollBehavior" }] : /* 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
+     * scroll boundary on it to contain in the first place.
+     */
+    viewportOverscrollY = computed(() => this.showTrackV() ? this.resolvedOverscrollBehavior() : 'auto', ...(ngDevMode ? [{ debugName: "viewportOverscrollY" }] : /* istanbul ignore next */ []));
+    viewportOverscrollX = computed(() => this.showTrackH() ? this.resolvedOverscrollBehavior() : 'auto', ...(ngDevMode ? [{ debugName: "viewportOverscrollX" }] : /* istanbul ignore next */ []));
+    thumbSizeV = signal(100, ...(ngDevMode ? [{ debugName: "thumbSizeV" }] : /* istanbul ignore next */ []));
+    thumbPosV = signal(0, ...(ngDevMode ? [{ debugName: "thumbPosV" }] : /* istanbul ignore next */ []));
+    thumbSizeH = signal(100, ...(ngDevMode ? [{ debugName: "thumbSizeH" }] : /* istanbul ignore next */ []));
+    thumbPosH = signal(0, ...(ngDevMode ? [{ debugName: "thumbPosH" }] : /* istanbul ignore next */ []));
+    interacting = signal(false, ...(ngDevMode ? [{ debugName: "interacting" }] : /* istanbul ignore next */ []));
+    dragAxis = signal(null, ...(ngDevMode ? [{ debugName: "dragAxis" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    destroyRef = inject(DestroyRef);
+    resizeObserver = null;
+    updateFrame = null;
+    hideTimer = null;
+    /** Read once per token change instead of per drag/scroll tick — see refreshTokens(). */
+    thumbMinSizePx = 32;
+    dragStartPointer = 0;
+    dragStartScroll = 0;
+    dragTrackLength = 0;
+    dragThumbSizePct = 100;
+    reachState = {
+        vertical: { start: true, end: false },
+        horizontal: { start: true, end: false },
+    };
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => {
+            const viewportEl = this.viewportRef().nativeElement;
+            const contentEl = this.contentRef().nativeElement;
+            this.refreshTokens();
+            // Not implemented by jsdom (so: absent in unit tests) and by very old browsers —
+            // degrades to a single initial measurement instead of tracking live resizes.
+            if (typeof ResizeObserver !== 'undefined') {
+                const observer = new ResizeObserver(() => this.scheduleMeasure());
+                observer.observe(viewportEl);
+                observer.observe(contentEl);
+                this.resizeObserver = observer;
+            }
+            this.scheduleMeasure();
+        });
+        // Re-measures on axis/size changes; guarded because this also fires once before
+        // afterNextRender has run, when there is nothing yet to measure.
+        effect(() => {
+            this.axis();
+            this.resolvedSize();
+            if (!this.resizeObserver)
+                return;
+            this.refreshTokens();
+            this.scheduleMeasure();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+            if (this.updateFrame !== null)
+                cancelAnimationFrame(this.updateFrame);
+            if (this.hideTimer !== null)
+                clearTimeout(this.hideTimer);
+        });
+    }
+    /** Scrolls the viewport exactly like `Element.scrollTo` — this simply forwards to it. */
+    scrollTo(options) {
+        this.viewportRef().nativeElement.scrollTo(options);
+    }
+    scrollToTop(behavior = 'smooth') {
+        this.viewportRef().nativeElement.scrollTo({ top: 0, behavior });
+    }
+    scrollToBottom(behavior = 'smooth') {
+        const el = this.viewportRef().nativeElement;
+        el.scrollTo({ top: el.scrollHeight, behavior });
+    }
+    scrollToLeft(behavior = 'smooth') {
+        this.viewportRef().nativeElement.scrollTo({ left: 0, behavior });
+    }
+    scrollToRight(behavior = 'smooth') {
+        const el = this.viewportRef().nativeElement;
+        el.scrollTo({ left: el.scrollWidth, behavior });
+    }
+    onScroll() {
+        this.interacting.set(true);
+        this.restartHideTimer();
+        this.scheduleMeasure();
+    }
+    onActivity() {
+        this.interacting.set(true);
+        this.restartHideTimer();
+    }
+    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.
+        if (event.target !== event.currentTarget)
+            return;
+        event.preventDefault();
+        const track = event.currentTarget;
+        const rect = track.getBoundingClientRect();
+        const viewportEl = this.viewportRef().nativeElement;
+        if (axis === 'vertical') {
+            const clickRatio = (event.clientY - rect.top) / rect.height;
+            const thumbCenter = this.thumbPosV() / 100 + this.thumbSizeV() / 200;
+            const direction = clickRatio < thumbCenter ? -1 : 1;
+            viewportEl.scrollBy({
+                top: direction * viewportEl.clientHeight * TRACK_CLICK_PAGE_RATIO,
+                behavior: 'smooth',
+            });
+        }
+        else {
+            const clickRatio = (event.clientX - rect.left) / rect.width;
+            const thumbCenter = this.thumbPosH() / 100 + this.thumbSizeH() / 200;
+            const direction = clickRatio < thumbCenter ? -1 : 1;
+            viewportEl.scrollBy({
+                left: direction * viewportEl.clientWidth * TRACK_CLICK_PAGE_RATIO,
+                behavior: 'smooth',
+            });
+        }
+        this.interacting.set(true);
+        this.restartHideTimer();
+    }
+    onThumbPointerDown(event, axis) {
+        event.preventDefault();
+        event.stopPropagation();
+        const thumb = event.currentTarget;
+        thumb.setPointerCapture(event.pointerId);
+        const track = thumb.parentElement;
+        const viewportEl = this.viewportRef().nativeElement;
+        this.dragAxis.set(axis);
+        this.dragStartPointer = axis === 'vertical' ? event.clientY : event.clientX;
+        this.dragStartScroll = axis === 'vertical' ? viewportEl.scrollTop : viewportEl.scrollLeft;
+        this.dragTrackLength = axis === 'vertical' ? track.clientHeight : track.clientWidth;
+        this.dragThumbSizePct = axis === 'vertical' ? this.thumbSizeV() : this.thumbSizeH();
+    }
+    onThumbPointerMove(event, axis) {
+        if (this.dragAxis() !== axis)
+            return;
+        const viewportEl = this.viewportRef().nativeElement;
+        const pointer = axis === 'vertical' ? event.clientY : event.clientX;
+        const delta = pointer - this.dragStartPointer;
+        // Only the track length left over once the thumb's own size is subtracted actually
+        // maps to travel distance — a thumb spanning the whole track has nowhere to move.
+        const freeTrackLength = this.dragTrackLength * (1 - this.dragThumbSizePct / 100);
+        if (freeTrackLength <= 0)
+            return;
+        const scrollable = axis === 'vertical'
+            ? viewportEl.scrollHeight - viewportEl.clientHeight
+            : viewportEl.scrollWidth - viewportEl.clientWidth;
+        const nextScroll = this.dragStartScroll + (delta / freeTrackLength) * scrollable;
+        if (axis === 'vertical') {
+            viewportEl.scrollTop = nextScroll;
+        }
+        else {
+            viewportEl.scrollLeft = nextScroll;
+        }
+    }
+    onThumbPointerUp(event) {
+        const thumb = event.currentTarget;
+        if (thumb.hasPointerCapture(event.pointerId)) {
+            thumb.releasePointerCapture(event.pointerId);
+        }
+        this.dragAxis.set(null);
+        this.restartHideTimer();
+    }
+    restartHideTimer() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+        if (!this.resolvedAutoHide())
+            return;
+        this.hideTimer = setTimeout(() => {
+            if (this.dragAxis() === null)
+                this.interacting.set(false);
+        }, this.resolvedHideDelay());
+    }
+    /** Reads the tokens that feed thumb-size math. Cheap, but still only once per change. */
+    refreshTokens() {
+        const styles = getComputedStyle(this.viewportRef().nativeElement);
+        this.thumbMinSizePx = readPx$1(styles.getPropertyValue('--gog-scroll-thumb-min-size'), 32);
+    }
+    /** Coalesces scroll/resize bursts into one measurement per frame. */
+    scheduleMeasure() {
+        if (this.updateFrame !== null)
+            return;
+        this.updateFrame = requestAnimationFrame(() => {
+            this.updateFrame = null;
+            this.measure();
+        });
+    }
+    measure() {
+        const el = this.viewportRef().nativeElement;
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
+        const axis = this.axis();
+        const canV = axis !== 'horizontal';
+        const canH = axis !== 'vertical';
+        const overflowV = canV && scrollHeight - clientHeight > OVERFLOW_EPSILON;
+        const overflowH = canH && scrollWidth - clientWidth > OVERFLOW_EPSILON;
+        this.showTrackV.set(overflowV);
+        this.showTrackH.set(overflowH);
+        this.measured.set(true);
+        if (overflowV) {
+            const minPct = clientHeight > 0 ? (this.thumbMinSizePx / clientHeight) * 100 : 0;
+            const sizePct = clamp((clientHeight / scrollHeight) * 100, minPct, 100);
+            const scrollableV = scrollHeight - clientHeight;
+            const ratioV = scrollableV > 0 ? scrollTop / scrollableV : 0;
+            this.thumbSizeV.set(sizePct);
+            this.thumbPosV.set(ratioV * (100 - sizePct));
+        }
+        if (overflowH) {
+            const minPct = clientWidth > 0 ? (this.thumbMinSizePx / clientWidth) * 100 : 0;
+            const sizePct = clamp((clientWidth / scrollWidth) * 100, minPct, 100);
+            const scrollableH = scrollWidth - clientWidth;
+            const ratioH = scrollableH > 0 ? scrollLeft / scrollableH : 0;
+            this.thumbSizeH.set(sizePct);
+            this.thumbPosH.set(ratioH * (100 - sizePct));
+        }
+        this.gogScroll.emit({ scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth });
+        // Only for axes this instance actually scrolls — otherwise the disabled axis is
+        // trivially "at both ends" on the very first measurement and fires once for free.
+        if (canV)
+            this.checkReach('vertical', scrollTop, scrollHeight, clientHeight, overflowV);
+        if (canH)
+            this.checkReach('horizontal', scrollLeft, scrollWidth, clientWidth, overflowH);
+    }
+    checkReach(axis, position, scrollSize, clientSize, overflow) {
+        const threshold = this.reachThreshold();
+        const atStart = !overflow || position <= threshold;
+        const atEnd = !overflow || position + clientSize >= scrollSize - threshold;
+        const state = this.reachState[axis];
+        if (atStart && !state.start)
+            this.gogReachStart.emit(axis);
+        if (atEnd && !state.end)
+            this.gogReachEnd.emit(axis);
+        state.start = atStart;
+        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 } }, 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 (showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"!resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\"\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 (showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"!resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\"\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 (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--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__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;right: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{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right: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--v{left:var(--gog-scroll-thumb-inset);right: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;right: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 (showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"!resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\"\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 (showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"!resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\"\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 (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--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__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;right: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{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right: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--v{left:var(--gog-scroll-thumb-inset);right: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;right: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 }] }], 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 }] }] } });
+
 class DialogComponent {
     dialogService = inject(DialogService);
     parentInjector = inject(Injector);
@@ -738,11 +1195,11 @@ 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)) {\n  <div\n    class=\"gog-dialog__backdrop\"\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n    [style.z-index]=\"panelZ(dialog)\"\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n  >\n    <div\n      #panel\n      class=\"gog-dialog__panel\"\n      [attr.data-dialog-id]=\"dialog.id\"\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n      [style.width]=\"dialog.config.width ?? 'auto'\"\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n    >\n      @if (dialog.config.title || dialog.config.closable !== false) {\n        <div\n          class=\"gog-dialog__header\"\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n          (pointerdown)=\"startDrag($event, dialog)\"\n        >\n          @if (dialog.config.title) {\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\n              {{ dialog.config.title }}\n            </h2>\n          }\n          @if (dialog.config.closable !== false) {\n            <button\n              type=\"button\"\n              class=\"gog-dialog__close gog-inline-center\"\n              aria-label=\"Close dialog\"\n              (click)=\"close(dialog)\"\n            >\n              <gog-icon\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\n              />\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"gog-dialog__body\">\n        <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":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);overflow-y:auto;flex:1;max-height:var(--gog-dialog-body-max-height)}@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"] }], 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-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              aria-label=\"Close 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 size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-dialog__scroll\">\r\n          <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\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"], 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,
-            args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n  <div\n    class=\"gog-dialog__backdrop\"\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n    [style.z-index]=\"panelZ(dialog)\"\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n  >\n    <div\n      #panel\n      class=\"gog-dialog__panel\"\n      [attr.data-dialog-id]=\"dialog.id\"\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n      [style.width]=\"dialog.config.width ?? 'auto'\"\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n    >\n      @if (dialog.config.title || dialog.config.closable !== false) {\n        <div\n          class=\"gog-dialog__header\"\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n          (pointerdown)=\"startDrag($event, dialog)\"\n        >\n          @if (dialog.config.title) {\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\n              {{ dialog.config.title }}\n            </h2>\n          }\n          @if (dialog.config.closable !== false) {\n            <button\n              type=\"button\"\n              class=\"gog-dialog__close gog-inline-center\"\n              aria-label=\"Close dialog\"\n              (click)=\"close(dialog)\"\n            >\n              <gog-icon\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\n              />\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"gog-dialog__body\">\n        <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":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);overflow-y:auto;flex:1;max-height:var(--gog-dialog-body-max-height)}@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"] }]
+            args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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-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              aria-label=\"Close 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 size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-dialog__scroll\">\r\n          <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\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"] }]
         }], ctorParameters: () => [] });
 
 class ToastComponent {
@@ -1056,6 +1513,12 @@ class InputfieldComponent {
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /** Defaults to 'current-password' for password fields, 'off' otherwise */
     autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Only applied when `type="number"`. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Only applied when `type="number"`. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Only applied when `type="number"`. */
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     /** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
     errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
@@ -1088,7 +1551,12 @@ class InputfieldComponent {
     showPasswordLabel = input('Show password', ...(ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []));
     /** aria-label for the hide-password button, shown once the password is revealed */
     hidePasswordLabel = input('Hide password', ...(ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []));
-    /** Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`. */
+    /**
+     * Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`.
+     * Always a string, including for `type="number"` — that field's `formControl`/
+     * `formControlName` value is a `number` (or `null` when empty); the string here is only
+     * the raw text shown in the native input.
+     */
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     ngControl = inject(NgControl, { optional: true, self: true });
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
@@ -1096,6 +1564,7 @@ class InputfieldComponent {
     passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     isPasswordField = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordField" }] : /* istanbul ignore next */ []));
+    isNumberField = computed(() => this.type() === 'number', ...(ngDevMode ? [{ debugName: "isNumberField" }] : /* istanbul ignore next */ []));
     effectiveType = computed(() => this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
     effectiveAutocomplete = computed(() => this.autocomplete() || (this.type() === 'password' ? 'current-password' : 'off'), ...(ngDevMode ? [{ debugName: "effectiveAutocomplete" }] : /* istanbul ignore next */ []));
     hasError = this.errorState.hasError;
@@ -1111,6 +1580,7 @@ class InputfieldComponent {
         : this.iconEndLabel(), ...(ngDevMode ? [{ debugName: "effectiveIconEndLabel" }] : /* istanbul ignore next */ []));
     hasIconEnd = computed(() => !!this.iconEndTemplate() || !!this.effectiveIconEnd(), ...(ngDevMode ? [{ debugName: "hasIconEnd" }] : /* istanbul ignore next */ []));
     hasIconEndAction = computed(() => this.isPasswordField() || !!this.iconEndFn(), ...(ngDevMode ? [{ debugName: "hasIconEndAction" }] : /* istanbul ignore next */ []));
+    /** `number` for a `type="number"` field (`null` when empty), `string` otherwise. */
     _onChange = () => { };
     _onTouched = () => { };
     constructor() {
@@ -1125,7 +1595,7 @@ class InputfieldComponent {
         this.errorState.check();
     }
     writeValue(val) {
-        this.value.set(val ?? '');
+        this.value.set(val === null || val === undefined ? '' : String(val));
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -1149,13 +1619,17 @@ class InputfieldComponent {
     onInput(event) {
         const input = event.target;
         this.value.set(input.value);
+        if (this.isNumberField()) {
+            this._onChange(input.value === '' ? null : input.valueAsNumber);
+            return;
+        }
         this._onChange(input.value);
     }
     onBlur() {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"effectiveType()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (visibleError()) {\n    <span\n      class=\"gog-input__error\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n      >{{ visibleError() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ 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: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"placeholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n          (click)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ 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: InputfieldComponent, decorators: [{
             type: Component,
@@ -1165,8 +1639,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // full-width class: this field is full width by default, so the class only appears
                         // once a consumer opts *out* of that.
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"effectiveType()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (visibleError()) {\n    <span\n      class=\"gog-input__error\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n      >{{ visibleError() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"placeholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n          (click)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class TextareaComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
+    errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Native `rows` attribute, controlling the field's initial height. */
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default, matching every other field-style control.
+     * Set to `false` to shrink the field to fit its content instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`. */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ngControl = inject(NgControl, { optional: true, self: true });
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    errorState = new GogErrorState(this.errorMessage, this.errorDisplay, this.ngControl);
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hasError = this.errorState.hasError;
+    visibleError = this.errorState.visibleError;
+    _onChange = () => { };
+    _onTouched = () => { };
+    constructor() {
+        // Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
+        // available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
+        // injecting NgControl would be a dependency cycle.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngDoCheck() {
+        this.errorState.check();
+    }
+    writeValue(val) {
+        this.value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const textarea = event.target;
+        this.value.set(textarea.value);
+        this._onChange(textarea.value);
+    }
+    onBlur() {
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "gog-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <textarea\r\n    class=\"gog-input__field gog-textarea__field\"\r\n    [class.gog-input__field--error]=\"hasError()\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [attr.name]=\"name() || null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [value]=\"value()\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError()\"\r\n    [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n  ></textarea>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"inputId() ? inputId() + '-error' : null\" role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: [".gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__field{resize:vertical;min-height:2.5em;line-height:1.5}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size)}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-textarea', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
+                        // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
+                        // full-width class: this field is full width by default, so the class only appears
+                        // once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <textarea\r\n    class=\"gog-input__field gog-textarea__field\"\r\n    [class.gog-input__field--error]=\"hasError()\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [attr.name]=\"name() || null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [value]=\"value()\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError()\"\r\n    [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n  ></textarea>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"inputId() ? inputId() + '-error' : null\" role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: [".gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__field{resize:vertical;min-height:2.5em;line-height:1.5}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size)}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class ChipComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -1773,11 +2319,11 @@ 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" }, 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--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\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()) {\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    <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      (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        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\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]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\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.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\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:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) 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)));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:left}.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 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));left:0;right:0;z-index:var(--gog-dropdown-z);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-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right: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:left;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)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ 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: 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" }, 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--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-select--sm]=\"size() === 'sm'\"\r\n  [class.gog-select--lg]=\"size() === 'lg'\"\r\n  [class.gog-select--slg]=\"size() === 'slg'\"\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()) {\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    <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      (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        {{ selectedOption()?.name || placeholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    @if (isOpen() && !appendToBody()) {\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]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\r\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\r\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\r\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\r\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\r\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.max-height]=\"appendToBody() ? 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    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-select__scroll\">\r\n      @for (option of options(); track option.id) {\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.id)\"\r\n          [attr.aria-disabled]=\"option.disabled ?? false\"\r\n          [class.gog-select__option--selected]=\"isSelected(option.id)\"\r\n          [class.gog-select__option--disabled]=\"option.disabled ?? false\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n            @if (isSelected(option.id)) {\r\n              <gog-icon name=\"check\" />\r\n            }\r\n          </span>\r\n          <span class=\"gog-select__option-label\">{{ option.name }}</span>\r\n        </button>\r\n      }\r\n    </gog-scroll>\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:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) 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)));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:left}.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 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));left:0;right:0;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;left:unset;right: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:left;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)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ 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"], 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: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, 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--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\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()) {\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    <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      (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        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\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]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\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.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\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:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) 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)));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:left}.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 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));left:0;right:0;z-index:var(--gog-dropdown-z);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-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right: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:left;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)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
+            args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-select--sm]=\"size() === 'sm'\"\r\n  [class.gog-select--lg]=\"size() === 'lg'\"\r\n  [class.gog-select--slg]=\"size() === 'slg'\"\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()) {\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    <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      (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        {{ selectedOption()?.name || placeholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    @if (isOpen() && !appendToBody()) {\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]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\r\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\r\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\r\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\r\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\r\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.max-height]=\"appendToBody() ? 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    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-select__scroll\">\r\n      @for (option of options(); track option.id) {\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.id)\"\r\n          [attr.aria-disabled]=\"option.disabled ?? false\"\r\n          [class.gog-select__option--selected]=\"isSelected(option.id)\"\r\n          [class.gog-select__option--disabled]=\"option.disabled ?? false\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n            @if (isSelected(option.id)) {\r\n              <gog-icon name=\"check\" />\r\n            }\r\n          </span>\r\n          <span class=\"gog-select__option-label\">{{ option.name }}</span>\r\n        </button>\r\n      }\r\n    </gog-scroll>\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:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) 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)));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:left}.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 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));left:0;right:0;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;left:unset;right: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:left;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)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\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 }] }] } });
 
 /** Height of the select-all/clear row, included in the panel height estimate. */
@@ -1829,11 +2375,11 @@ 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: null, 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 }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, 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-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\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()) {\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    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    (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-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\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]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? 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    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\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.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\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)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-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-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { 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: 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 }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, 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-ms-wrapper\"\r\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\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()) {\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    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    (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-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ selectedNames() || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      @if (selectedNames()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearAll($event)\"\r\n          aria-label=\"Clear selection\"\r\n        >\r\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\r\n        </button>\r\n      }\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronTemplate()\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !appendToBody()) {\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]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\r\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\r\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\r\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\r\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\r\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.max-height]=\"appendToBody() ? 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    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @for (option of options(); track option.id) {\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.id)\"\r\n            [attr.aria-disabled]=\"option.disabled ?? false\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option.id)\"\r\n            [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n          >\r\n            <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n              <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\r\n            </span>\r\n            {{ option.name }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\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)\">Select all</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-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-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow:hidden;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { 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"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, 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.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\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()) {\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    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    (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-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\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]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? 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    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\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.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\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)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-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-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
+            args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\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()) {\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    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    (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-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ selectedNames() || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      @if (selectedNames()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearAll($event)\"\r\n          aria-label=\"Clear selection\"\r\n        >\r\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\r\n        </button>\r\n      }\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronTemplate()\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !appendToBody()) {\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]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\r\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\r\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\r\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\r\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\r\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.max-height]=\"appendToBody() ? 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    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @for (option of options(); track option.id) {\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.id)\"\r\n            [attr.aria-disabled]=\"option.disabled ?? false\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option.id)\"\r\n            [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n          >\r\n            <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n              <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\r\n            </span>\r\n            {{ option.name }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\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)\">Select all</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-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-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow:hidden;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
         }], propDecorators: { showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", 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 }] }] } });
 
 class SliderComponent {
@@ -2288,15 +2834,15 @@ class TableComponent {
         return map;
     }, ...(ngDevMode ? [{ debugName: "headerTemplateMap" }] : /* 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 }, 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <div class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--slg]=\"size() === 'slg'\"\r\n      [class.gog-table--md]=\"size() === 'md'\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--sm]=\"size() === 'sm'\"\r\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\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 (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.field()); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\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 $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\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.field()); as bodyTpl) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\r\n                    />\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  </div>\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          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.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--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:left;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-surface);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--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:hover{background-color:var(--gog-table-hover-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-right: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:right}.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", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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 }, 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--slg]=\"size() === 'slg'\"\r\n      [class.gog-table--md]=\"size() === 'md'\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--sm]=\"size() === 'sm'\"\r\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\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 (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.field()); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\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 $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\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.field()); as bodyTpl) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\r\n                    />\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          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".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--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:left;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-surface);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--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:hover{background-color:var(--gog-table-hover-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-right: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:right}.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", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { 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"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-table', imports: [SpinnerComponent, PaginatorComponent, NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-table', imports: [SpinnerComponent, PaginatorComponent, NgTemplateOutlet, IconComponent, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-table-host',
                         '[style.display]': '"block"',
                         '[style.width]': 'fullWidth() ? "100%" : "fit-content"',
-                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <div class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--slg]=\"size() === 'slg'\"\r\n      [class.gog-table--md]=\"size() === 'md'\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--sm]=\"size() === 'sm'\"\r\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\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 (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.field()); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\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 $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\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.field()); as bodyTpl) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\r\n                    />\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  </div>\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          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.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--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:left;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-surface);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--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:hover{background-color:var(--gog-table-hover-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-right: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:right}.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"] }]
+                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--slg]=\"size() === 'slg'\"\r\n      [class.gog-table--md]=\"size() === 'md'\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--sm]=\"size() === 'sm'\"\r\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\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 (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.field()); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\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 $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\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.field()); as bodyTpl) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\r\n                    />\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          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".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--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:left;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-surface);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--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:hover{background-color:var(--gog-table-hover-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-right: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:right}.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"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Column), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
 
 class ThemeService {
@@ -2335,5 +2881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogDropdownBase, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, ThemeService, ToastComponent, ToastContainerComponent, ToastService, defaultCompare };
+export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GOG_CONFIG, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogDropdownBase, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, defaultCompare, provideGogConfig };
 //# sourceMappingURL=guildofgleks-ui.mjs.map