@guildofgleks/ui 21.3.2 → 21.4.1

package/fesm2022/guildofgleks-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, ChangeDetectionStrategy, Component, output, computed, DestroyRef, TemplateRef, Directive, model, contentChild, ElementRef, signal, effect, untracked, PLATFORM_ID, ApplicationRef, viewChild, afterNextRender, booleanAttribute, Renderer2, viewChildren, contentChildren, forwardRef, Injectable, Injector, afterRenderEffect, ViewContainerRef, linkedSignal } from '@angular/core';
+import { InjectionToken, inject, input, ChangeDetectionStrategy, Component, output, computed, DestroyRef, booleanAttribute, Directive, isDevMode, TemplateRef, model, contentChild, ElementRef, signal, effect, untracked, PLATFORM_ID, ApplicationRef, viewChild, afterNextRender, Renderer2, viewChildren, contentChildren, forwardRef, Injectable, Injector, afterRenderEffect, ViewContainerRef, linkedSignal } from '@angular/core';
 import { Subject, timer } from 'rxjs';
 import { throttle } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -118,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 const DEFAULT_DEBOUNCE = 300;
 /** Built-in default, used when neither the instance input nor `GOG_CONFIG` supplies one. */
-const DEFAULT_SIZE$9 = 'md';
+const DEFAULT_SIZE$a = 'md';
 class ButtonComponent {
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
@@ -157,7 +157,7 @@ class ButtonComponent {
     };
     globalConfig = inject(GOG_CONFIG);
     /** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
-    resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$9), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$a), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     spinnerSize = computed(() => ButtonComponent.SPINNER_SIZE_BY_BUTTON_SIZE[this.resolvedSize()], ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
     resolvedDebounce = computed(() => resolveConfigured(this.debounce(), this.globalConfig.button?.debounce, DEFAULT_DEBOUNCE), ...(ngDevMode ? [{ debugName: "resolvedDebounce" }] : /* istanbul ignore next */ []));
     /**
@@ -178,7 +178,7 @@ class ButtonComponent {
         this.click$.next(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: [".gog-btn{--gog-spinner-color: var( --gog-btn-spinner-color, var(--gog-btn-variant-spinner-color, var(--gog-btn-primary-spinner-color)) );gap:var(--gog-btn-gap);border:var(--gog-btn-border-width) var(--gog-btn-border-style) var(--gog-btn-border, var(--gog-btn-variant-border, var(--gog-btn-primary-border)));border-radius:var(--gog-btn-radius);padding:var(--gog-btn-padding, var(--gog-btn-size-padding, var(--gog-btn-md-padding)));font-family:var(--gog-btn-font-family);font-weight:var(--gog-btn-font-weight);font-size:var(--gog-btn-font-size, var(--gog-btn-size-font-size, var(--gog-btn-md-font-size)));letter-spacing:var(--gog-btn-letter-spacing);text-transform:var(--gog-btn-text-transform);line-height:var(--gog-btn-line-height);background-color:var(--gog-btn-bg, var(--gog-btn-variant-bg, var(--gog-btn-primary-bg)));color:var(--gog-btn-color, var(--gog-btn-variant-color, var(--gog-btn-primary-color)));box-shadow:var(--gog-btn-shadow, var(--gog-btn-variant-shadow, var(--gog-btn-primary-shadow)));cursor:pointer;transition:background-color var(--gog-btn-transition-duration) var(--gog-easing),box-shadow var(--gog-btn-transition-duration) var(--gog-easing),color var(--gog-btn-transition-duration) var(--gog-easing)}.gog-btn:focus-visible{outline:var(--gog-btn-focus-ring-width) solid var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));outline-offset:var(--gog-btn-focus-ring-offset)}.gog-btn:hover:not(:disabled){background-color:var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));color:var(--gog-btn-hover-color, var(--gog-btn-variant-hover-color, var(--gog-btn-primary-hover-color)));box-shadow:var(--gog-btn-hover-shadow, var(--gog-btn-variant-hover-shadow, var(--gog-btn-primary-hover-shadow)))}.gog-btn:active:not(:disabled){transform:scale(var(--gog-btn-active-scale))}@media(prefers-reduced-motion:reduce){.gog-btn{transition:none}.gog-btn:active:not(:disabled){transform:none}}.gog-btn:disabled{opacity:var(--gog-btn-disabled-opacity);cursor:not-allowed}.gog-btn--primary{--gog-btn-variant-bg: var(--gog-btn-primary-bg);--gog-btn-variant-color: var(--gog-btn-primary-color);--gog-btn-variant-border: var(--gog-btn-primary-border);--gog-btn-variant-shadow: var(--gog-btn-primary-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-primary-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-primary-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-primary-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-primary-spinner-color)}.gog-btn--secondary{--gog-btn-variant-bg: var(--gog-btn-secondary-bg);--gog-btn-variant-color: var(--gog-btn-secondary-color);--gog-btn-variant-border: var(--gog-btn-secondary-border);--gog-btn-variant-shadow: var(--gog-btn-secondary-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-secondary-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-secondary-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-secondary-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-secondary-spinner-color)}.gog-btn--outline{--gog-btn-variant-bg: var(--gog-btn-outline-bg);--gog-btn-variant-color: var(--gog-btn-outline-color);--gog-btn-variant-border: var(--gog-btn-outline-border);--gog-btn-variant-shadow: var(--gog-btn-outline-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-outline-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-outline-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-outline-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-outline-spinner-color)}.gog-btn--ghost{--gog-btn-variant-bg: var(--gog-btn-ghost-bg);--gog-btn-variant-color: var(--gog-btn-ghost-color);--gog-btn-variant-border: var(--gog-btn-ghost-border);--gog-btn-variant-shadow: var(--gog-btn-ghost-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-ghost-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-ghost-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-ghost-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-ghost-spinner-color)}.gog-btn--xsm{--gog-btn-size-padding: var(--gog-btn-xsm-padding);--gog-btn-size-font-size: var(--gog-btn-xsm-font-size)}.gog-btn--sm{--gog-btn-size-padding: var(--gog-btn-sm-padding);--gog-btn-size-font-size: var(--gog-btn-sm-font-size)}.gog-btn--md{--gog-btn-size-padding: var(--gog-btn-md-padding);--gog-btn-size-font-size: var(--gog-btn-md-font-size)}.gog-btn--lg{--gog-btn-size-padding: var(--gog-btn-lg-padding);--gog-btn-size-font-size: var(--gog-btn-lg-font-size)}.gog-btn--slg{--gog-btn-size-padding: var(--gog-btn-slg-padding);--gog-btn-size-font-size: var(--gog-btn-slg-font-size)}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}.gog-btn--loading{position:relative;pointer-events:none;opacity:var(--gog-btn-loading-opacity)}.gog-btn__content--hidden{visibility:hidden}.gog-btn__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:var(--gog-btn-spinner-max-size);max-height:var(--gog-btn-spinner-max-size)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -186,9 +186,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // Drives the :host(.gog-host--full-width) rules in the stylesheet — without this
                         // binding the `fullWidth` input has no visible effect.
                         '[class.gog-host--full-width]': 'fullWidth()',
-                    }, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: [".gog-btn{--gog-spinner-color: var( --gog-btn-spinner-color, var(--gog-btn-variant-spinner-color, var(--gog-btn-primary-spinner-color)) );gap:var(--gog-btn-gap);border:var(--gog-btn-border-width) var(--gog-btn-border-style) var(--gog-btn-border, var(--gog-btn-variant-border, var(--gog-btn-primary-border)));border-radius:var(--gog-btn-radius);padding:var(--gog-btn-padding, var(--gog-btn-size-padding, var(--gog-btn-md-padding)));font-family:var(--gog-btn-font-family);font-weight:var(--gog-btn-font-weight);font-size:var(--gog-btn-font-size, var(--gog-btn-size-font-size, var(--gog-btn-md-font-size)));letter-spacing:var(--gog-btn-letter-spacing);text-transform:var(--gog-btn-text-transform);line-height:var(--gog-btn-line-height);background-color:var(--gog-btn-bg, var(--gog-btn-variant-bg, var(--gog-btn-primary-bg)));color:var(--gog-btn-color, var(--gog-btn-variant-color, var(--gog-btn-primary-color)));box-shadow:var(--gog-btn-shadow, var(--gog-btn-variant-shadow, var(--gog-btn-primary-shadow)));cursor:pointer;transition:background-color var(--gog-btn-transition-duration) var(--gog-easing),box-shadow var(--gog-btn-transition-duration) var(--gog-easing),color var(--gog-btn-transition-duration) var(--gog-easing)}.gog-btn:focus-visible{outline:var(--gog-btn-focus-ring-width) solid var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));outline-offset:var(--gog-btn-focus-ring-offset)}.gog-btn:hover:not(:disabled){background-color:var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));color:var(--gog-btn-hover-color, var(--gog-btn-variant-hover-color, var(--gog-btn-primary-hover-color)));box-shadow:var(--gog-btn-hover-shadow, var(--gog-btn-variant-hover-shadow, var(--gog-btn-primary-hover-shadow)))}.gog-btn:active:not(:disabled){transform:scale(var(--gog-btn-active-scale))}@media(prefers-reduced-motion:reduce){.gog-btn{transition:none}.gog-btn:active:not(:disabled){transform:none}}.gog-btn:disabled{opacity:var(--gog-btn-disabled-opacity);cursor:not-allowed}.gog-btn--primary{--gog-btn-variant-bg: var(--gog-btn-primary-bg);--gog-btn-variant-color: var(--gog-btn-primary-color);--gog-btn-variant-border: var(--gog-btn-primary-border);--gog-btn-variant-shadow: var(--gog-btn-primary-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-primary-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-primary-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-primary-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-primary-spinner-color)}.gog-btn--secondary{--gog-btn-variant-bg: var(--gog-btn-secondary-bg);--gog-btn-variant-color: var(--gog-btn-secondary-color);--gog-btn-variant-border: var(--gog-btn-secondary-border);--gog-btn-variant-shadow: var(--gog-btn-secondary-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-secondary-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-secondary-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-secondary-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-secondary-spinner-color)}.gog-btn--outline{--gog-btn-variant-bg: var(--gog-btn-outline-bg);--gog-btn-variant-color: var(--gog-btn-outline-color);--gog-btn-variant-border: var(--gog-btn-outline-border);--gog-btn-variant-shadow: var(--gog-btn-outline-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-outline-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-outline-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-outline-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-outline-spinner-color)}.gog-btn--ghost{--gog-btn-variant-bg: var(--gog-btn-ghost-bg);--gog-btn-variant-color: var(--gog-btn-ghost-color);--gog-btn-variant-border: var(--gog-btn-ghost-border);--gog-btn-variant-shadow: var(--gog-btn-ghost-shadow);--gog-btn-variant-hover-bg: var(--gog-btn-ghost-hover-bg);--gog-btn-variant-hover-color: var(--gog-btn-ghost-hover-color);--gog-btn-variant-hover-shadow: var(--gog-btn-ghost-hover-shadow);--gog-btn-variant-spinner-color: var(--gog-btn-ghost-spinner-color)}.gog-btn--xsm{--gog-btn-size-padding: var(--gog-btn-xsm-padding);--gog-btn-size-font-size: var(--gog-btn-xsm-font-size)}.gog-btn--sm{--gog-btn-size-padding: var(--gog-btn-sm-padding);--gog-btn-size-font-size: var(--gog-btn-sm-font-size)}.gog-btn--md{--gog-btn-size-padding: var(--gog-btn-md-padding);--gog-btn-size-font-size: var(--gog-btn-md-font-size)}.gog-btn--lg{--gog-btn-size-padding: var(--gog-btn-lg-padding);--gog-btn-size-font-size: var(--gog-btn-lg-font-size)}.gog-btn--slg{--gog-btn-size-padding: var(--gog-btn-slg-padding);--gog-btn-size-font-size: var(--gog-btn-slg-font-size)}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}.gog-btn--loading{position:relative;pointer-events:none;opacity:var(--gog-btn-loading-opacity)}.gog-btn__content--hidden{visibility:hidden}.gog-btn__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:var(--gog-btn-spinner-max-size);max-height:var(--gog-btn-spinner-max-size)}\n"] }]
+                    }, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
 
+/** Built-in default, used when neither the instance input nor `GOG_CONFIG` supplies one. */
+const DEFAULT_SIZE$9 = 'md';
+/**
+ * Makes a consumer's own `<a>` or `<button>` look like a `gog-button`.
+ *
+ * ```html
+ * <a gogButton routerLink="/pricing">See pricing</a>
+ * <a gogButton variant="ghost" href="https://example.com" target="_blank" rel="noreferrer">Docs</a>
+ * <button gogButton variant="outline" size="sm" type="submit">Save</button>
+ * ```
+ *
+ * ## Why this exists next to `gog-button`
+ *
+ * `gog-button` renders its own `<button>`, so it can never *be* a link — and making it one would
+ * mean brokering the router's entire input surface (`routerLink`, `routerLinkActive`,
+ * `queryParams`, `fragment`, `state`, …) through a component that would then have to depend on
+ * `@angular/router`. This package has four peer dependencies and no router, and a navigation
+ * button is not worth a fifth.
+ *
+ * Inverting it costs nothing: the consumer keeps their own element, so `routerLink`, `href`,
+ * `target`, `download`, `type="submit"`, `disabled` and every future directive keep working
+ * because they were never taken away. This is the "headless primitive" axis of
+ * `api-design.instructions.md` — expose the behaviour, not another input.
+ *
+ * ## Which to use
+ *
+ * Use `gog-button` for a button that *does* something in the page — it adds `loading` with a
+ * centred spinner, `debounce` click throttling and the `gogClick` output, none of which a bare
+ * element can provide. Use `[gogButton]` when the element must be a link, or when you need to
+ * keep directives of your own on it.
+ *
+ * ## Accessibility
+ *
+ * The element stays yours, so its semantics stay correct by construction: a link is a link and a
+ * button is a button. Two things this deliberately does **not** do:
+ *
+ * - It does not add `disabled` handling to an `<a>`. There is no such thing — a disabled link is
+ *   just a link. Remove the `href` or render a real `<button>`.
+ * - It does not fake a loading state. `gog-button`'s spinner is a projected child; a directive
+ *   cannot add one without taking over the element's content.
+ */
+class GogButtonDirective {
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'` — as on `gog-button`. */
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Stretches the element to its container's width. A bare attribute is enough:
+     * `<a gogButton fullWidth>`.
+     */
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    globalConfig = inject(GOG_CONFIG);
+    resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$9), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    variantClass = computed(() => `gog-btn--${this.variant()}`, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Unlike `gog-button`, this emits a class for `'md'` too. The component can leave the default
+     * size unclassed because its own stylesheet bottoms out at `--gog-btn-md-*`; here the class is
+     * also what a consumer reads in devtools to see which size is applied, and a silently absent
+     * one reads as "no size resolved".
+     */
+    sizeClass = computed(() => `gog-btn--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogButtonDirective, isStandalone: true, selector: "a[gogButton], button[gogButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variantClass() + \" \" + sizeClass()", "class.gog-btn--full-width": "fullWidth()" }, classAttribute: "gog-btn gog-inline-center gog-contained-layout" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // Restricted to `a` and `button` rather than a bare `[gogButton]`: on a `<div>` or `<span>` the
+                    // result looks like a button and is invisible to the keyboard and to assistive tech, and that
+                    // is exactly the mistake this directive would otherwise make easy.
+                    selector: 'a[gogButton], button[gogButton]',
+                    host: {
+                        class: 'gog-btn gog-inline-center gog-contained-layout',
+                        '[class]': 'variantClass() + " " + sizeClass()',
+                        '[class.gog-btn--full-width]': 'fullWidth()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
+
 const VERTICAL_ARROWS = ['ArrowDown', 'ArrowUp'];
 const HORIZONTAL_ARROWS = ['ArrowRight', 'ArrowLeft'];
 const EDGE_KEYS = ['Home', 'End'];
@@ -273,6 +351,31 @@ function handleRovingFocusKeydown(event, items, options = {}) {
     return true;
 }
 
+/*
+ * The glyphs are from **Lucide** (https://lucide.dev), ISC licensed:
+ *
+ *   Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather
+ *   (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+ *
+ *   Permission to use, copy, modify, and/or distribute this software for any purpose with or
+ *   without fee is hereby granted, provided that the above copyright notice and this permission
+ *   notice appear in all copies.
+ *
+ *   THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO
+ *   THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT
+ *   SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR
+ *   ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF
+ *   CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE
+ *   OR PERFORMANCE OF THIS SOFTWARE.
+ *
+ * They are inlined rather than pulled from `lucide` so the package keeps zero runtime
+ * dependencies. Anything added here must be a Lucide glyph too: a 24×24 grid, `stroke-width`
+ * 2, round caps and joins. Mixing in a set drawn for a different weight (Heroicons is drawn for
+ * 1.5) shows up immediately as uneven visual mass in a row of icons.
+ *
+ * An app that wants a different set does not need a fork — `provideGogIcons` overrides any of
+ * these by name.
+ */
 const ICON_DEFS = {
     check: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
     close: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
@@ -294,38 +397,150 @@ const ICON_DEFS = {
     eye: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`,
     'eye-off': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`,
     copy: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
+    /* ── Actions ─────────────────────────────────────────────────────────────── */
+    search: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`,
+    plus: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>`,
+    minus: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"/></svg>`,
+    trash: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+    pencil: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>`,
+    download: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>`,
+    upload: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>`,
+    refresh: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>`,
+    filter: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>`,
+    'external-link': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>`,
+    /* ── Navigation & chrome ─────────────────────────────────────────────────── */
+    menu: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>`,
+    'more-horizontal': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>`,
+    'more-vertical': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>`,
+    'arrow-left': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>`,
+    'arrow-right': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>`,
+    /* ── Objects & state ─────────────────────────────────────────────────────── */
+    user: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+    settings: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
+    lock: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`,
+    mail: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>`,
+    star: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`,
+    'star-filled': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor"/></svg>`,
 };
 
+/**
+ * Icons an app has registered, keyed by the name `gog-icon` will be asked for. Resolves to `{}`
+ * — only the built-ins are available — until a `provideGogIcons(...)` call fills it in.
+ *
+ * Values are raw `<svg>` markup, injected with `bypassSecurityTrustHtml` exactly like the
+ * built-ins. See `provideGogIcons` for what that means for you.
+ */
+const GOG_ICONS = new InjectionToken('GOG_ICONS', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * Registers icons by name, so `<gog-icon name="cart" />` works for glyphs the library does not
+ * ship. This is the supported way to use your own icon set: the alternative — a `TemplateRef`
+ * per instance through the `template` input — costs a `<ng-template>` at every use site and is
+ * meant for one-offs, not for an icon set.
+ *
+ * ```ts
+ * // app.config.ts
+ * providers: [
+ *   provideGogIcons({
+ *     cart: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">…</svg>',
+ *     user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">…</svg>',
+ *   }),
+ * ]
+ * ```
+ *
+ * **A registered name overrides a built-in of the same name**, which is how you swap the
+ * library's checkmark or chevron for your own without touching every component that renders one.
+ *
+ * **Providing this again further down the injector tree layers onto the parent's set** rather
+ * than replacing it, matching `provideGogConfig`: a lazy feature can register the three icons
+ * only it uses, and the app-wide set stays available inside it.
+ *
+ * ## What to put in the SVG
+ *
+ * Use `stroke="currentColor"` (or `fill="currentColor"`) and a `viewBox`, and leave the sizing
+ * alone — `gog-icon`'s stylesheet drives width, height and stroke width from the
+ * `--gog-icon-*` tokens, so an icon inherits size and colour from wherever it is used, the same
+ * as a built-in.
+ *
+ * ## Security
+ *
+ * The markup is inserted with `DomSanitizer.bypassSecurityTrustHtml`, because Angular's HTML
+ * sanitizer strips SVG and would leave you with nothing. That is safe for what this is for —
+ * static icon markup you wrote or imported at build time — and unsafe for anything derived from
+ * user input or fetched at runtime. **Never build a registered icon string from data you did
+ * not author.** If you need remote icons, fetch them yourself, sanitize them with a real SVG
+ * sanitizer, and register the result.
+ */
+function provideGogIcons(icons) {
+    return {
+        provide: GOG_ICONS,
+        // skipSelf so this reads the *parent* injector's set rather than recursing into the provider
+        // being defined here; optional because at the root there is no parent providing it.
+        useFactory: () => ({
+            ...(inject(GOG_ICONS, { skipSelf: true, optional: true }) ?? {}),
+            ...icons,
+        }),
+    };
+}
+
+/**
+ * Names already warned about, so a missing icon rendered in a `@for` logs once rather than once
+ * per row. Module-level because the point is one message per name per page, not per component.
+ */
+const warnedNames = new Set();
 class IconComponent {
     sanitizer = inject(DomSanitizer);
+    /** App-registered icons; overrides a built-in of the same name. See `provideGogIcons`. */
+    registered = inject(GOG_ICONS);
+    /** A built-in name, or one registered through `provideGogIcons(...)`. */
     name = input('close', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     template = input(null, ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
     ariaLabel = computed(() => this.ariaHidden() ? null : this.title() || this.name(), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    iconSvg = computed(() => this.sanitizer.bypassSecurityTrustHtml(ICON_DEFS[this.name()]), ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
+    /**
+     * The markup to render, or `null` when the name resolves to nothing.
+     *
+     * An unknown name renders **nothing** and warns in dev mode — it never throws. An icon is
+     * decoration: taking an app down mid-render over a typo in a glyph name would be a far worse
+     * failure than the missing glyph, and the warning is what gets the typo fixed.
+     */
+    iconSvg = computed(() => {
+        const name = this.name();
+        const markup = this.registered[name] ?? ICON_DEFS[name];
+        if (!markup) {
+            if (isDevMode() && !warnedNames.has(name)) {
+                warnedNames.add(name);
+                console.warn(`[gog-icon] No icon named "${name}". Register it with provideGogIcons({ '${name}': '<svg…>' }), or use one of the built-ins.`);
+            }
+            return null;
+        }
+        return this.sanitizer.bypassSecurityTrustHtml(markup);
+    }, ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconComponent, isStandalone: true, selector: "gog-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "ariaHidden() ? \"true\" : null", "attr.aria-label": "ariaHidden() ? null : ariaLabel()" }, classAttribute: "gog-icon" }, ngImport: i0, template: `
     @if (template(); as iconTpl) {
       <ng-container *ngTemplateOutlet="iconTpl" />
-    } @else {
-      <span [innerHTML]="iconSvg()"></span>
+    } @else if (iconSvg(); as svg) {
+      <span [innerHTML]="svg"></span>
     }
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect{stroke-width:var(--gog-icon-stroke-width)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect,:host ::ng-deep svg ellipse,:host ::ng-deep svg line,:host ::ng-deep svg polyline,:host ::ng-deep svg polygon{stroke-width:var(--gog-icon-stroke-width)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-icon', imports: [NgTemplateOutlet], template: `
     @if (template(); as iconTpl) {
       <ng-container *ngTemplateOutlet="iconTpl" />
-    } @else {
-      <span [innerHTML]="iconSvg()"></span>
+    } @else if (iconSvg(); as svg) {
+      <span [innerHTML]="svg"></span>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-icon',
                         '[attr.aria-hidden]': 'ariaHidden() ? "true" : null',
                         '[attr.aria-label]': 'ariaHidden() ? null : ariaLabel()',
-                    }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect{stroke-width:var(--gog-icon-stroke-width)}\n"] }]
+                    }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect,:host ::ng-deep svg ellipse,:host ::ng-deep svg line,:host ::ng-deep svg polyline,:host ::ng-deep svg polygon{stroke-width:var(--gog-icon-stroke-width)}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }] } });
 
 class SkeletonComponent {
@@ -621,6 +836,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+/**
+ * Which `data-theme` an overlay rendered into `<body>` has to carry, if any.
+ *
+ * A panel or tooltip bubble is appended to `<body>`, which puts it outside whatever subtree it
+ * was opened from. `data-theme` can be scoped to any subtree — several themes rendering side by
+ * side is a documented use — so an overlay opened inside one of those has to be told which theme
+ * it belongs to, or it silently picks up the document's instead.
+ *
+ * **But only when the theme really is scoped.** When the nearest themed ancestor is the document
+ * element, copying the attribute is not merely redundant, it is actively wrong: the overlay
+ * already inherits everything from `<html>` through `<body>`, and re-stating `data-theme` on it
+ * makes it match `theme.css`'s derived layer (`:root, [data-theme]`) *locally*. That re-declares
+ * every component token on the overlay itself, resolved against the plain preset palette — which
+ * discards anything set on `<html>` that is not part of that preset. Custom properties written
+ * inline on `:root` are the case that bites: a live theme editor sets them there, the page
+ * follows, and every portal keeps rendering the un-edited theme.
+ *
+ * So: return the theme only for a genuinely scoped ancestor, and let inheritance do the work
+ * otherwise.
+ *
+ * Known limitation, currently unreachable: a *scoped* theme that is itself being edited through
+ * inline custom properties would still lose those on the overlay, since only the attribute is
+ * carried across. Copying resolved values instead would mean reading ~1200 properties on every
+ * open, which is not worth it for a case nothing does yet.
+ */
+function scopedOverlayTheme(themeSource, documentElement) {
+    const themedAncestor = themeSource?.closest('[data-theme]');
+    if (!themedAncestor || themedAncestor === documentElement)
+        return null;
+    return themedAncestor.getAttribute('data-theme');
+}
+
 /**
  * Renders a template into `document.body` while keeping it wired to the declaring
  * component: the view is stamped with that component's style encapsulation and reads
@@ -651,11 +898,9 @@ class GogDropdownOverlay {
         this.detach();
         this.hostEl = this.document.createElement('div');
         this.hostEl.classList.add('gog-overlay-host');
-        // `data-theme` can be scoped to any subtree, not just `:root` (see the themes
-        // showcase page), so the host has to copy it from wherever the trigger actually
-        // sits rather than assume the document-wide theme applies.
-        const themedAncestor = themeSource?.closest('[data-theme]');
-        const theme = themedAncestor?.getAttribute('data-theme');
+        // Only for a genuinely scoped theme — see `scopedOverlayTheme` for why copying it when the
+        // theme sits on `<html>` breaks live-edited themes.
+        const theme = scopedOverlayTheme(themeSource, this.document.documentElement);
         if (theme) {
             this.hostEl.setAttribute('data-theme', theme);
         }
@@ -3244,7 +3489,7 @@ const DEFAULT_LOCALE$1 = 'en-US';
  * input nor `GOG_CONFIG.labels` supplies one. Kept as one object so `resolvedLabels` stays a
  * single `computed` instead of nine, and so the set is obvious at a glance.
  */
-const DEFAULT_LABELS$2 = {
+const DEFAULT_LABELS$3 = {
     today: 'Today',
     thisMonth: 'This month',
     previousMonth: 'Previous month',
@@ -3338,15 +3583,15 @@ class CalendarComponent {
     resolvedLabels = computed(() => {
         const configured = this.globalConfig.labels ?? {};
         return {
-            today: resolveConfigured(this.todayLabel(), configured.today, DEFAULT_LABELS$2.today),
-            thisMonth: resolveConfigured(this.thisMonthLabel(), configured.thisMonth, DEFAULT_LABELS$2.thisMonth),
-            previousMonth: resolveConfigured(this.previousMonthLabel(), configured.previousMonth, DEFAULT_LABELS$2.previousMonth),
-            nextMonth: resolveConfigured(this.nextMonthLabel(), configured.nextMonth, DEFAULT_LABELS$2.nextMonth),
-            previousYear: resolveConfigured(this.previousYearLabel(), configured.previousYear, DEFAULT_LABELS$2.previousYear),
-            nextYear: resolveConfigured(this.nextYearLabel(), configured.nextYear, DEFAULT_LABELS$2.nextYear),
-            hours: resolveConfigured(this.hoursLabel(), configured.hours, DEFAULT_LABELS$2.hours),
-            minutes: resolveConfigured(this.minutesLabel(), configured.minutes, DEFAULT_LABELS$2.minutes),
-            seconds: resolveConfigured(this.secondsLabel(), configured.seconds, DEFAULT_LABELS$2.seconds),
+            today: resolveConfigured(this.todayLabel(), configured.today, DEFAULT_LABELS$3.today),
+            thisMonth: resolveConfigured(this.thisMonthLabel(), configured.thisMonth, DEFAULT_LABELS$3.thisMonth),
+            previousMonth: resolveConfigured(this.previousMonthLabel(), configured.previousMonth, DEFAULT_LABELS$3.previousMonth),
+            nextMonth: resolveConfigured(this.nextMonthLabel(), configured.nextMonth, DEFAULT_LABELS$3.nextMonth),
+            previousYear: resolveConfigured(this.previousYearLabel(), configured.previousYear, DEFAULT_LABELS$3.previousYear),
+            nextYear: resolveConfigured(this.nextYearLabel(), configured.nextYear, DEFAULT_LABELS$3.nextYear),
+            hours: resolveConfigured(this.hoursLabel(), configured.hours, DEFAULT_LABELS$3.hours),
+            minutes: resolveConfigured(this.minutesLabel(), configured.minutes, DEFAULT_LABELS$3.minutes),
+            seconds: resolveConfigured(this.secondsLabel(), configured.seconds, DEFAULT_LABELS$3.seconds),
         };
     }, ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
     /** First of the leftmost visible month. */
@@ -4958,7 +5203,7 @@ function toAnnouncement(toast) {
 const DEFAULT_SIZE$1 = 'md';
 const DEFAULT_ERROR_DISPLAY$2 = 'manual';
 const DEFAULT_SHOW_SPIN_BUTTONS = true;
-const DEFAULT_LABELS$1 = {
+const DEFAULT_LABELS$2 = {
     clear: 'Clear',
     increment: 'Increment',
     decrement: 'Decrement',
@@ -5156,9 +5401,9 @@ class InputfieldComponent {
      */
     sizeClass = computed(() => this.resolvedSize() === 'md' ? '' : `gog-input-wrapper--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
     /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
-    resolvedClearLabel = computed(() => resolveConfigured(this.clearAriaLabel(), this.globalConfig.labels?.clear, DEFAULT_LABELS$1.clear), ...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
-    resolvedIncrementLabel = computed(() => resolveConfigured(this.incrementLabel(), this.globalConfig.labels?.increment, DEFAULT_LABELS$1.increment), ...(ngDevMode ? [{ debugName: "resolvedIncrementLabel" }] : /* istanbul ignore next */ []));
-    resolvedDecrementLabel = computed(() => resolveConfigured(this.decrementLabel(), this.globalConfig.labels?.decrement, DEFAULT_LABELS$1.decrement), ...(ngDevMode ? [{ debugName: "resolvedDecrementLabel" }] : /* istanbul ignore next */ []));
+    resolvedClearLabel = computed(() => resolveConfigured(this.clearAriaLabel(), this.globalConfig.labels?.clear, DEFAULT_LABELS$2.clear), ...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
+    resolvedIncrementLabel = computed(() => resolveConfigured(this.incrementLabel(), this.globalConfig.labels?.increment, DEFAULT_LABELS$2.increment), ...(ngDevMode ? [{ debugName: "resolvedIncrementLabel" }] : /* istanbul ignore next */ []));
+    resolvedDecrementLabel = computed(() => resolveConfigured(this.decrementLabel(), this.globalConfig.labels?.decrement, DEFAULT_LABELS$2.decrement), ...(ngDevMode ? [{ debugName: "resolvedDecrementLabel" }] : /* istanbul ignore next */ []));
     resolvedShowSpinButtons = computed(() => resolveConfigured(this.showSpinButtons(), this.globalConfig.inputfield?.showSpinButtons, DEFAULT_SHOW_SPIN_BUTTONS), ...(ngDevMode ? [{ debugName: "resolvedShowSpinButtons" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     /** Disabled and read-only both refuse edits; the affordances that offer one key off this. */
@@ -5224,8 +5469,8 @@ class InputfieldComponent {
         if (!this.isPasswordField())
             return this.iconEndLabel();
         return this.passwordVisible()
-            ? resolveConfigured(this.hidePasswordLabel(), this.globalConfig.labels?.hidePassword, DEFAULT_LABELS$1.hidePassword)
-            : resolveConfigured(this.showPasswordLabel(), this.globalConfig.labels?.showPassword, DEFAULT_LABELS$1.showPassword);
+            ? resolveConfigured(this.hidePasswordLabel(), this.globalConfig.labels?.hidePassword, DEFAULT_LABELS$2.hidePassword)
+            : resolveConfigured(this.showPasswordLabel(), this.globalConfig.labels?.showPassword, DEFAULT_LABELS$2.showPassword);
     }, ...(ngDevMode ? [{ debugName: "effectiveIconEndLabel" }] : /* istanbul ignore next */ []));
     hasIconEnd = computed(() => this.showClear() ||
         !!this.addonEnd() ||
@@ -5788,11 +6033,8 @@ class GogTooltipOverlay {
         this.detach();
         this.componentRef = this.viewContainerRef.createComponent(GogTooltipBubbleComponent);
         const el = this.componentRef.location.nativeElement;
-        // See GogDropdownOverlay.attach — data-theme can be scoped to any subtree, not just
-        // :root, so it has to be copied from the trigger's nearest themed ancestor rather than
-        // assumed from the document.
-        const themedAncestor = themeSource?.closest('[data-theme]');
-        const theme = themedAncestor?.getAttribute('data-theme');
+        // Only for a genuinely scoped theme — see `scopedOverlayTheme`.
+        const theme = scopedOverlayTheme(themeSource, this.document.documentElement);
         if (theme) {
             el.setAttribute('data-theme', theme);
         }
@@ -6571,10 +6813,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumb", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], startDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDisabled", required: false }] }], endDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDisabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }] } });
 
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG.labels` supplies one. */
-const DEFAULT_LABELS = {
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 30, 40, 50];
+/** Off by default: a paginator that silently grew a control would change every existing layout. */
+const DEFAULT_SHOW_PAGE_SIZE_SELECT = false;
+const DEFAULT_LABELS$1 = {
     pagination: 'Pagination',
     previousPage: 'Previous page',
     nextPage: 'Next page',
+    rowsPerPage: 'Rows per page',
     page: (page, isCurrent) => isCurrent ? `Page ${page}, current page` : `Go to page ${page}`,
 };
 class PaginatorComponent {
@@ -6585,7 +6832,35 @@ class PaginatorComponent {
      * buttons instead.
      */
     fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * How many pages there are. Ignored when `totalRecords` is given — see there.
+     */
     totalPages = input(1, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    /**
+     * How many rows exist in total. Given this, the paginator computes the page count itself from
+     * `pageSize`, which is what removes the `computed(() => Math.ceil(total / size))` a consumer
+     * would otherwise have to write and keep in sync with the select below.
+     *
+     * `null` (the default) keeps the old contract: you tell it `totalPages` directly.
+     */
+    totalRecords = input(null, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+    /**
+     * Rows per page. Two-way bindable — `[(pageSize)]="size"` — which is the whole point once
+     * `showPageSizeSelect` is on: the select writes back through this, and nothing has to be
+     * ferried between components by hand. `gog-table` binds its own `pageSize` model straight to
+     * this one.
+     */
+    pageSize = model(DEFAULT_PAGE_SIZE, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to offer the rows-per-page select. Unset, falls back to
+     * `GOG_CONFIG.paginator.showPageSizeSelect`, then to `false`.
+     */
+    showPageSizeSelect = input(undefined, ...(ngDevMode ? [{ debugName: "showPageSizeSelect" }] : /* istanbul ignore next */ []));
+    /**
+     * The choices the select offers. Unset, falls back to
+     * `GOG_CONFIG.paginator.pageSizeOptions`, then to `[10, 20, 30, 40, 50]`.
+     */
+    pageSizeOptions = input(undefined, ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     /**
      * `window` (default): a fixed number of page buttons (`visiblePages`) that slides to keep
      * the current page centered, clamped at the edges — no ellipsis, no pinned boundaries
@@ -6612,34 +6887,58 @@ class PaginatorComponent {
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     globalConfig = inject(GOG_CONFIG);
     /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
-    resolvedAriaLabel = computed(() => resolveConfigured(this.ariaLabel(), this.globalConfig.labels?.pagination, DEFAULT_LABELS.pagination), ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => resolveConfigured(this.ariaLabel(), this.globalConfig.labels?.pagination, DEFAULT_LABELS$1.pagination), ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * The two step buttons. Config-only: unlike the `<nav>` name, these say the same thing on
      * every paginator in an app, so a per-instance input would be dead weight.
      */
-    resolvedPreviousLabel = computed(() => resolveConfigured(undefined, this.globalConfig.labels?.previousPage, DEFAULT_LABELS.previousPage), ...(ngDevMode ? [{ debugName: "resolvedPreviousLabel" }] : /* istanbul ignore next */ []));
-    resolvedNextLabel = computed(() => resolveConfigured(undefined, this.globalConfig.labels?.nextPage, DEFAULT_LABELS.nextPage), ...(ngDevMode ? [{ debugName: "resolvedNextLabel" }] : /* istanbul ignore next */ []));
+    resolvedPreviousLabel = computed(() => resolveConfigured(undefined, this.globalConfig.labels?.previousPage, DEFAULT_LABELS$1.previousPage), ...(ngDevMode ? [{ debugName: "resolvedPreviousLabel" }] : /* istanbul ignore next */ []));
+    resolvedNextLabel = computed(() => resolveConfigured(undefined, this.globalConfig.labels?.nextPage, DEFAULT_LABELS$1.nextPage), ...(ngDevMode ? [{ debugName: "resolvedNextLabel" }] : /* istanbul ignore next */ []));
     /**
      * Names one page button. A method rather than a `computed`, since it takes the page number —
      * the formatter itself is resolved once and only re-read when the config object changes.
      */
     pageLabel(page) {
-        const format = this.globalConfig.labels?.page ?? DEFAULT_LABELS.page;
+        const format = this.globalConfig.labels?.page ?? DEFAULT_LABELS$1.page;
         return format(page, page === this.page());
     }
+    resolvedShowPageSizeSelect = computed(() => resolveConfigured(this.showPageSizeSelect(), this.globalConfig.paginator?.showPageSizeSelect, DEFAULT_SHOW_PAGE_SIZE_SELECT), ...(ngDevMode ? [{ debugName: "resolvedShowPageSizeSelect" }] : /* istanbul ignore next */ []));
+    resolvedRowsPerPageLabel = computed(() => resolveConfigured(undefined, this.globalConfig.labels?.rowsPerPage, DEFAULT_LABELS$1.rowsPerPage), ...(ngDevMode ? [{ debugName: "resolvedRowsPerPageLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * The select takes `{ id, name }` objects because that is `GogDropdownOption`'s default shape —
+     * `optionLabel`/`optionValue` accessors for a list of plain numbers would be more API than the
+     * mapping saves. The current `pageSize` is included even when it is not one of the offered
+     * options, so a programmatic `[pageSize]="15"` shows 15 rather than an empty trigger.
+     */
+    resolvedPageSizeOptions = computed(() => {
+        const options = resolveConfigured(this.pageSizeOptions(), this.globalConfig.paginator?.pageSizeOptions, DEFAULT_PAGE_SIZE_OPTIONS);
+        const current = this.pageSize();
+        const all = options.includes(current) ? options : [...options, current].sort((a, b) => a - b);
+        return all.map((size) => ({ id: size, name: String(size) }));
+    }, ...(ngDevMode ? [{ debugName: "resolvedPageSizeOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * `totalRecords` when supplied, `totalPages` otherwise — every internal read goes through this
+     * so the two inputs cannot disagree anywhere.
+     */
+    resolvedTotalPages = computed(() => {
+        const records = this.totalRecords();
+        if (records === null)
+            return Math.max(1, this.totalPages());
+        return Math.max(1, Math.ceil(Math.max(0, records) / Math.max(1, this.pageSize())));
+    }, ...(ngDevMode ? [{ debugName: "resolvedTotalPages" }] : /* istanbul ignore next */ []));
     pageNumbers = computed(() => {
-        const total = Math.max(1, this.totalPages());
+        const total = this.resolvedTotalPages();
         const current = this.page();
         return this.rangeMode() === 'ellipsis'
             ? this.ellipsisRange(total, current)
             : this.windowRange(total, current);
     }, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Self-clamps whenever `totalPages` shrinks below the current page (or a consumer
+        // Self-clamps whenever the page count shrinks below the current page (or a consumer
         // passes an out-of-range value directly), so every consumer gets correct bounds for
         // free instead of reimplementing this per usage.
         effect(() => {
-            const total = Math.max(1, this.totalPages());
+            const total = this.resolvedTotalPages();
             const current = this.page();
             if (current > total) {
                 this.page.set(total);
@@ -6648,6 +6947,26 @@ class PaginatorComponent {
                 this.page.set(1);
             }
         });
+        /*
+         * A new page size invalidates the current page: "page 5" of 10-row pages is not "page 5" of
+         * 50-row ones, and clamping alone would leave the user somewhere they did not ask to be.
+         * Back to page 1, which is the only position that means the same thing at every size.
+         * `untracked` so this reacts to the size and not to its own write.
+         */
+        let previousSize = null;
+        effect(() => {
+            const size = this.pageSize();
+            // Guarded on an actual change, not on the effect running: the first run must leave an
+            // initial `[page]="3"` alone, and re-running for an unrelated dependency must not snap the
+            // user back to page 1.
+            if (previousSize !== null && previousSize !== size) {
+                untracked(() => {
+                    if (this.page() !== 1)
+                        this.page.set(1);
+                });
+            }
+            previousSize = size;
+        });
     }
     windowRange(total, current) {
         const windowSize = Math.min(Math.max(1, this.visiblePages()), total);
@@ -6685,7 +7004,7 @@ class PaginatorComponent {
         return typeof value === 'number';
     }
     goTo(target) {
-        if (this.disabled() || target < 1 || target > this.totalPages())
+        if (this.disabled() || target < 1 || target > this.resolvedTotalPages())
             return;
         this.page.set(target);
     }
@@ -6695,12 +7014,16 @@ class PaginatorComponent {
     next() {
         this.goTo(this.page() + 1);
     }
+    onPageSizeChange(size) {
+        if (size !== null)
+            this.pageSize.set(size);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === totalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === resolvedTotalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n\r\n@if (resolvedShowPageSizeSelect()) {\r\n  <!--\r\n    Bound with `[(pageSize)]`'s writable half, so choosing a size writes straight back through the\r\n    model the consumer bound \u2014 there is no intermediate state to keep in sync. `fullWidth` off so\r\n    the select sizes to its content instead of stretching the paginator row.\r\n\r\n    A plain `@if`, not `@defer`, and that was measured rather than assumed: `@defer` does move\r\n    `SelectComponent` out of this component's static `dependencies` and into\r\n    `deferBlockDependencies`, but ng-packagr flattens the whole library into one FESM, so the\r\n    deferred reference compiles to `Promise.resolve().then(() => select_component)` \u2014 a binding in\r\n    the *same module*, not a dynamic `import()`. With no import boundary there is nothing for a\r\n    bundler to split on and nothing it may drop, so the consumer ships exactly the same bytes,\r\n    minus a placeholder and an SSR pop-in. Making this genuinely lazy needs secondary entry\r\n    points (`@guildofgleks/ui/select`), which is a packaging decision, not a template one.\r\n  -->\r\n  <gog-select\r\n    class=\"gog-paginator__page-size\"\r\n    [options]=\"resolvedPageSizeOptions()\"\r\n    [value]=\"pageSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [fullWidth]=\"false\"\r\n    [size]=\"size()\"\r\n    [ariaLabel]=\"resolvedRowsPerPageLabel()\"\r\n    (valueChange)=\"onPageSizeChange($event)\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}.gog-paginator__page-size{margin-inline-start:auto;min-width:var(--gog-paginator-page-size-min-width)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: SelectComponent, selector: "gog-select", inputs: ["inputId", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-paginator', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-paginator', imports: [ButtonComponent, SelectComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-paginator',
                         role: 'navigation',
                         '[attr.aria-label]': 'resolvedAriaLabel()',
@@ -6709,8 +7032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // full-width class: this control is full width by default, so the class only
                         // appears once a consumer opts *out* of that.
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === totalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }], showFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstPage", required: false }] }], showLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastPage", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+                    }, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === resolvedTotalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n\r\n@if (resolvedShowPageSizeSelect()) {\r\n  <!--\r\n    Bound with `[(pageSize)]`'s writable half, so choosing a size writes straight back through the\r\n    model the consumer bound \u2014 there is no intermediate state to keep in sync. `fullWidth` off so\r\n    the select sizes to its content instead of stretching the paginator row.\r\n\r\n    A plain `@if`, not `@defer`, and that was measured rather than assumed: `@defer` does move\r\n    `SelectComponent` out of this component's static `dependencies` and into\r\n    `deferBlockDependencies`, but ng-packagr flattens the whole library into one FESM, so the\r\n    deferred reference compiles to `Promise.resolve().then(() => select_component)` \u2014 a binding in\r\n    the *same module*, not a dynamic `import()`. With no import boundary there is nothing for a\r\n    bundler to split on and nothing it may drop, so the consumer ships exactly the same bytes,\r\n    minus a placeholder and an SSR pop-in. Making this genuinely lazy needs secondary entry\r\n    points (`@guildofgleks/ui/select`), which is a packaging decision, not a template one.\r\n  -->\r\n  <gog-select\r\n    class=\"gog-paginator__page-size\"\r\n    [options]=\"resolvedPageSizeOptions()\"\r\n    [value]=\"pageSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [fullWidth]=\"false\"\r\n    [size]=\"size()\"\r\n    [ariaLabel]=\"resolvedRowsPerPageLabel()\"\r\n    (valueChange)=\"onPageSizeChange($event)\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}.gog-paginator__page-size{margin-inline-start:auto;min-width:var(--gog-paginator-page-size-min-width)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], showPageSizeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelect", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }], showFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstPage", required: false }] }], showLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastPage", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class SpinnerOverlayComponent {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
@@ -6864,6 +7187,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
+/** Built-in defaults, used when `GOG_CONFIG.labels` doesn't supply one. */
+const DEFAULT_LABELS = {
+    total: 'Total',
+    pagination: 'Table pagination',
+    selectRow: 'Select row',
+    selectAllRows: 'Select all rows on this page',
+};
 class TableComponent {
     /**
      * The single size modifier, replacing one `[class.gog-table--<size>]` binding per size.
@@ -6876,8 +7206,96 @@ class TableComponent {
      * its columns' content instead.
      */
     fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
-    /** 0 = no pagination */
-    pageSize = input(0, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Rows per page; `0` (the default) means no pagination at all.
+     *
+     * A **`model`**, not an input, so `[pageSize]="20"` still works exactly as before *and*
+     * `[(pageSize)]="size"` becomes possible. That is what lets `showPageSizeSelect` work without
+     * any wiring: the table binds this model straight to its own paginator's `pageSize`, the
+     * select writes back through it, and a consumer who wants to observe or persist the choice
+     * binds two-way. Nothing is ferried between the two components by hand.
+     *
+     * In `lazy` mode a change here is a refetch signal, same as `gogPageChange` — bind
+     * `[(pageSize)]` and reload from it. Changing the size always returns to page 1.
+     */
+    pageSize = model(0, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the paginator offers a rows-per-page select. Forwarded straight to `gog-paginator`;
+     * unset, it falls back to `GOG_CONFIG.paginator.showPageSizeSelect`, then to `false`.
+     */
+    showPageSizeSelect = input(undefined, ...(ngDevMode ? [{ debugName: "showPageSizeSelect" }] : /* istanbul ignore next */ []));
+    /**
+     * The sizes that select offers. Forwarded to `gog-paginator`; unset, falls back to
+     * `GOG_CONFIG.paginator.pageSizeOptions`, then to `[10, 20, 30, 40, 50]`.
+     */
+    pageSizeOptions = input(undefined, ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Hands sorting and paging to the server.
+     *
+     * Off (the default), the table owns the whole data set: it sorts and slices `value` itself, and
+     * `totalPages` comes from `value.length`. On, `value` is **the current page, already sorted** —
+     * the table renders it as given and never re-orders or re-slices it. Supply `totalRecords` so
+     * the paginator knows how many pages exist, and refetch in response to `gogSortChange` /
+     * `gogPageChange`.
+     *
+     * ```html
+     * <gog-table
+     *   [value]="page()"
+     *   [lazy]="true"
+     *   [totalRecords]="total()"
+     *   [pageSize]="20"
+     *   [loading]="loading()"
+     *   (gogSortChange)="sort.set($event); reload()"
+     *   (gogPageChange)="page$.set($event); reload()"
+     * />
+     * ```
+     */
+    lazy = input(false, ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    /**
+     * How many rows exist on the server, across all pages. `lazy` only — without it the table
+     * cannot know how many pages to offer, and pagination is disabled. Ignored when `lazy` is off,
+     * where `value.length` is the truth.
+     */
+    totalRecords = input(null, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+    /**
+     * Makes rows focusable and styles them as clickable, for a table whose rows navigate or open
+     * something. `gogRowClick` fires on a plain click regardless; this is what makes that
+     * affordance **discoverable and reachable by keyboard** (Enter and Space activate the focused
+     * row), which a bare `(gogRowClick)` on a `<tr>` is not.
+     *
+     * If the row's action is better expressed as a control — a link to a detail page, a delete
+     * button — put that in a cell instead. This is for the whole-row-is-the-target case.
+     */
+    interactiveRows = input(false, ...(ngDevMode ? [{ debugName: "interactiveRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Turns on row selection. `'single'` keeps at most one row selected, `'multiple'` any number.
+     *
+     * The selection itself is always a `T[]` (`[(selection)]`), including in `'single'` mode where
+     * it holds zero or one row — one shape rather than a `T | T[] | null` union the consumer has to
+     * narrow on every read.
+     */
+    selectionMode = input('none', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable selected rows: `[(selection)]="selected"`.
+     *
+     * Rows are matched by `dataKey` when one is set, and by object identity otherwise — so with no
+     * `dataKey`, a refetch that produces new objects drops the selection. In `lazy` mode that is
+     * almost always the wrong behaviour: set `dataKey`.
+     */
+    selection = model([], ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /**
+     * Field name (or dot-path) uniquely identifying a row — `'id'` in most data sets.
+     *
+     * Used for selection identity and, when set, as the `@for` track key, which is what lets the
+     * DOM survive a re-fetch of the same page instead of being torn down and rebuilt.
+     */
+    dataKey = input('', ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the checkbox column renders. On by default once `selectionMode` is set; turn it off
+     * for a table that selects by clicking the row itself, and pair it with `interactiveRows` so
+     * that stays reachable by keyboard.
+     */
+    showSelectionColumn = input(true, ...(ngDevMode ? [{ debugName: "showSelectionColumn" }] : /* istanbul ignore next */ []));
     showRowNumbers = input(true, ...(ngDevMode ? [{ debugName: "showRowNumbers" }] : /* istanbul ignore next */ []));
     showTotal = input(false, ...(ngDevMode ? [{ debugName: "showTotal" }] : /* istanbul ignore next */ []));
     emptyPlaceholder = input('-', ...(ngDevMode ? [{ debugName: "emptyPlaceholder" }] : /* istanbul ignore next */ []));
@@ -6893,10 +7311,30 @@ class TableComponent {
     stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
     /** Row density: lg (default) / md (compact) / sm (dense) */
     size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Fires when a header cell changes the sort — including the third click that clears it, which
+     * emits `{ field: '', direction: null }`. In `lazy` mode this is the refetch signal; the table
+     * has already reset to page 1 by the time it fires.
+     */
+    gogSortChange = output();
+    /**
+     * Fires when the page changes, with the new 1-based page. Only ever fires for a *user* action
+     * or a clamp — not for the initial render.
+     */
+    gogPageChange = output();
+    /** Fires when a row is clicked, or activated with Enter/Space when `interactiveRows` is on. */
+    gogRowClick = output();
     columns = contentChildren(GogColumn, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     templates = contentChildren(TemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
     sortState = signal({ field: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+    /**
+     * In `lazy` mode `value` is the server's answer — already sorted, already the right page — so
+     * both this and `visibleRows` become pass-throughs. Re-sorting it locally would reorder one
+     * page against a global ordering, which looks like corruption rather than a bug.
+     */
     sortedData = computed(() => {
+        if (this.lazy())
+            return this.value();
         const { field, direction } = this.sortState();
         const rows = [...this.value()];
         if (!field || !direction)
@@ -6917,11 +7355,16 @@ class TableComponent {
             return direction === 'asc' ? cmp : -cmp;
         });
     }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    /**
+     * How many rows the paginator is dividing. `value.length` normally; `totalRecords` in `lazy`
+     * mode, where `value` is only the current page. Also what `showTotal` reports.
+     */
+    rowCount = computed(() => this.lazy() ? Math.max(0, this.totalRecords() ?? 0) : this.value().length, ...(ngDevMode ? [{ debugName: "rowCount" }] : /* istanbul ignore next */ []));
     totalPages = computed(() => {
         const size = this.pageSize();
         if (!size)
             return 1;
-        return Math.max(1, Math.ceil(this.sortedData().length / size));
+        return Math.max(1, Math.ceil(this.rowCount() / size));
     }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     /**
      * Resets to page 1 whenever the sort changes (a new sort re-orders the whole data set,
@@ -6930,22 +7373,128 @@ class TableComponent {
      * wherever the paginator navigated to. `gog-paginator`'s own `page` model additionally
      * self-clamps against `totalPages` on its own, so this only has to handle the reset case.
      */
-    currentPage = linkedSignal({ ...(ngDevMode ? { debugName: "currentPage" } : /* istanbul ignore next */ {}), source: () => ({ total: this.totalPages(), sortState: this.sortState() }),
+    currentPage = linkedSignal({ ...(ngDevMode ? { debugName: "currentPage" } : /* istanbul ignore next */ {}), source: () => ({
+            total: this.totalPages(),
+            sortState: this.sortState(),
+            pageSize: this.pageSize(),
+        }),
         computation: (src, previous) => {
-            if (!previous || previous.source.sortState !== src.sortState)
+            if (!previous)
+                return 1;
+            // A new sort re-orders everything, and a new page size redraws the boundaries — in both
+            // cases the page the user was on no longer denotes the same rows.
+            if (previous.source.sortState !== src.sortState)
+                return 1;
+            if (previous.source.pageSize !== src.pageSize)
                 return 1;
             return Math.min(Math.max(1, previous.value), src.total);
         } });
+    /** In `lazy` mode the server already sliced the page — see `sortedData`. */
     visibleRows = computed(() => {
         const size = this.pageSize();
-        if (!size)
+        if (this.lazy() || !size)
             return this.sortedData();
         const page = this.currentPage();
         const start = (page - 1) * size;
         return this.sortedData().slice(start, start + size);
     }, ...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
-    hasPagination = computed(() => !this.loading() && this.pageSize() > 0 && this.totalPages() > 1, ...(ngDevMode ? [{ debugName: "hasPagination" }] : /* istanbul ignore next */ []));
-    emptyColspan = computed(() => this.columns().length + (this.showRowNumbers() ? 1 : 0), ...(ngDevMode ? [{ debugName: "emptyColspan" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved the same way `gog-paginator` resolves it, because the footer's own visibility
+     * depends on it — see `hasPagination`.
+     */
+    showsPageSizeSelect = computed(() => resolveConfigured(this.showPageSizeSelect(), this.globalConfig.paginator?.showPageSizeSelect, false), ...(ngDevMode ? [{ debugName: "showsPageSizeSelect" }] : /* istanbul ignore next */ []));
+    /**
+     * Normally the paginator only earns its space once there is more than one page — but the
+     * rows-per-page select lives inside it, and hiding the whole thing at one page would strand the
+     * user on whatever size produced that single page with no way back to a smaller one.
+     */
+    hasPagination = computed(() => !this.loading() &&
+        this.pageSize() > 0 &&
+        (this.totalPages() > 1 || this.showsPageSizeSelect()), ...(ngDevMode ? [{ debugName: "hasPagination" }] : /* istanbul ignore next */ []));
+    globalConfig = inject(GOG_CONFIG);
+    /** `GOG_CONFIG.labels` → the built-in English defaults. No per-instance inputs: these name
+     * table chrome, and an app that relabels them does so once. */
+    resolvedLabels = computed(() => {
+        const configured = this.globalConfig.labels ?? {};
+        return {
+            total: resolveConfigured(undefined, configured.total, DEFAULT_LABELS.total),
+            pagination: resolveConfigured(undefined, configured.tablePagination, DEFAULT_LABELS.pagination),
+            selectRow: resolveConfigured(undefined, configured.selectRow, DEFAULT_LABELS.selectRow),
+            selectAllRows: resolveConfigured(undefined, configured.selectAllRows, DEFAULT_LABELS.selectAllRows),
+        };
+    }, ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
+    hasSelection = computed(() => this.selectionMode() !== 'none', ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+    hasSelectionColumn = computed(() => this.hasSelection() && this.showSelectionColumn(), ...(ngDevMode ? [{ debugName: "hasSelectionColumn" }] : /* istanbul ignore next */ []));
+    emptyColspan = computed(() => this.columns().length + (this.showRowNumbers() ? 1 : 0) + (this.hasSelectionColumn() ? 1 : 0), ...(ngDevMode ? [{ debugName: "emptyColspan" }] : /* istanbul ignore next */ []));
+    /**
+     * Identity for selection and `@for` tracking. `dataKey`'s value when set, the row object
+     * otherwise — the object works for a static data set and breaks the moment rows are re-fetched,
+     * which is exactly what `dataKey` is for.
+     */
+    rowKey(row) {
+        const key = this.dataKey();
+        return key ? getByPath(row, key) : row;
+    }
+    isSelected(row) {
+        const key = this.rowKey(row);
+        return this.selection().some((selected) => this.rowKey(selected) === key);
+    }
+    /** All rows on the current page are selected — drives the header checkbox. */
+    allPageRowsSelected = computed(() => {
+        const rows = this.visibleRows();
+        return rows.length > 0 && rows.every((row) => this.isSelected(row));
+    }, ...(ngDevMode ? [{ debugName: "allPageRowsSelected" }] : /* istanbul ignore next */ []));
+    /** Some but not all — the header checkbox's indeterminate state. */
+    somePageRowsSelected = computed(() => {
+        const rows = this.visibleRows();
+        return rows.some((row) => this.isSelected(row)) && !this.allPageRowsSelected();
+    }, ...(ngDevMode ? [{ debugName: "somePageRowsSelected" }] : /* istanbul ignore next */ []));
+    toggleRowSelection(row, selected) {
+        if (this.selectionMode() === 'single') {
+            this.selection.set(selected ? [row] : []);
+            return;
+        }
+        const key = this.rowKey(row);
+        const without = this.selection().filter((entry) => this.rowKey(entry) !== key);
+        this.selection.set(selected ? [...without, row] : without);
+    }
+    /**
+     * Header checkbox: selects or clears **the current page**, not the whole data set. Anything
+     * else would be a lie in `lazy` mode, where the table has never seen the other pages — and
+     * inconsistent between the two modes, which is worse than either behaviour alone.
+     */
+    toggleAllOnPage(selected) {
+        const rows = this.visibleRows();
+        const pageKeys = new Set(rows.map((row) => this.rowKey(row)));
+        const offPage = this.selection().filter((entry) => !pageKeys.has(this.rowKey(entry)));
+        this.selection.set(selected ? [...offPage, ...rows] : offPage);
+    }
+    constructor() {
+        /*
+         * `gogPageChange` for user navigation and clamps, but *not* for the reset that follows a new
+         * sort: `currentPage` snapping back to 1 there is part of the sort, and a lazy consumer
+         * refetching from both events would fire two requests for one user action. Detected by the
+         * sort having changed in the same computation, and skipped.
+         */
+        let previous = null;
+        effect(() => {
+            const page = this.currentPage();
+            const sort = this.sortState();
+            const size = this.pageSize();
+            const causedByOther = previous && (previous.sort !== sort || previous.size !== size);
+            if (previous && previous.page !== page && !causedByOther) {
+                this.gogPageChange.emit(page);
+            }
+            previous = { page, sort, size };
+        });
+        effect(() => {
+            if (!isDevMode() || !this.lazy() || this.pageSize() <= 0)
+                return;
+            if (this.totalRecords() === null) {
+                console.warn("[gog-table] `lazy` with a `pageSize` but no `totalRecords`: the table cannot know how many pages exist, so pagination stays hidden. Pass the server's total row count.");
+            }
+        });
+    }
     /**
      * A `gogColumnBody` template declared inside the column wins; the string-keyed
      * `<ng-template template="field" type="body">` is the deprecated fallback.
@@ -6968,6 +7517,10 @@ class TableComponent {
     headerContext(col) {
         return { $implicit: col.header(), field: col.field() };
     }
+    /**
+     * Cycles the clicked column asc → desc → unsorted, and emits the result. The emit is last, so
+     * a `lazy` consumer refetching from it already sees `currentPage` reset to 1.
+     */
     toggleSort(col) {
         if (!col.sortable())
             return;
@@ -6982,6 +7535,20 @@ class TableComponent {
         else {
             this.sortState.set({ field: '', direction: null });
         }
+        this.gogSortChange.emit(this.sortState());
+    }
+    /** Click, or Enter/Space on a focused row when `interactiveRows` is on. */
+    emitRowClick(row, index, originalEvent) {
+        this.gogRowClick.emit({ row, index, originalEvent });
+    }
+    /** Enter and Space activate the focused row; Space must not also scroll the page. */
+    onRowKeydown(row, index, event) {
+        if (!this.interactiveRows())
+            return;
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        this.emitRowClick(row, index, event);
     }
     getSortDirection(field) {
         const s = this.sortState();
@@ -7039,16 +7606,23 @@ 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: GogColumn, 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]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [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); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $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); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          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", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, 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]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (hasSelectionColumn()) {\r\n          <col class=\"gog-table__col--select\" />\r\n        }\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (hasSelectionColumn()) {\r\n            <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n              <!--\r\n                Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n                all of, and a checkbox that can only ever check one row is a lie.\r\n              -->\r\n              @if (selectionMode() === 'multiple') {\r\n                <gog-checkbox\r\n                  [checked]=\"allPageRowsSelected()\"\r\n                  [indeterminate]=\"somePageRowsSelected()\"\r\n                  [disabled]=\"loading() || visibleRows().length === 0\"\r\n                  [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n                  (checkedChange)=\"toggleAllOnPage($event)\"\r\n                />\r\n              }\r\n            </th>\r\n          }\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n            <tr\r\n              class=\"gog-table__row\"\r\n              [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n              [class.gog-table__row--selected]=\"isSelected(row)\"\r\n              [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n              [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n              (click)=\"emitRowClick(row, i, $event)\"\r\n              (keydown)=\"onRowKeydown(row, i, $event)\"\r\n            >\r\n              @if (hasSelectionColumn()) {\r\n                <td class=\"gog-table__td gog-table__td--select\">\r\n                  <!--\r\n                    `$event.stopPropagation()` so ticking the box does not also count as a row\r\n                    click: with `interactiveRows` those are two different intents, and firing both\r\n                    from one gesture is how a \"select\" ends up navigating away.\r\n                  -->\r\n                  <gog-checkbox\r\n                    [checked]=\"isSelected(row)\"\r\n                    [ariaLabel]=\"resolvedLabels().selectRow\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          {{ resolvedLabels().total }}: {{ rowCount() }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <!--\r\n          `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n          writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n          intermediate signal, in either direction.\r\n        -->\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [(pageSize)]=\"pageSize\"\r\n          [totalPages]=\"totalPages()\"\r\n          [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n          [pageSizeOptions]=\"pageSizeOptions()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          [ariaLabel]=\"resolvedLabels().pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row--interactive{cursor:pointer}.gog-table__row--interactive:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-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", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checkIconTemplate", "checked"], outputs: ["checkedChange"] }], 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, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-table', imports: [
+                        SpinnerComponent,
+                        PaginatorComponent,
+                        NgTemplateOutlet,
+                        IconComponent,
+                        ScrollComponent,
+                        CheckboxComponent,
+                    ], 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  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [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); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $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); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          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(() => GogColumn), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
+                    }, 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]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (hasSelectionColumn()) {\r\n          <col class=\"gog-table__col--select\" />\r\n        }\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (hasSelectionColumn()) {\r\n            <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n              <!--\r\n                Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n                all of, and a checkbox that can only ever check one row is a lie.\r\n              -->\r\n              @if (selectionMode() === 'multiple') {\r\n                <gog-checkbox\r\n                  [checked]=\"allPageRowsSelected()\"\r\n                  [indeterminate]=\"somePageRowsSelected()\"\r\n                  [disabled]=\"loading() || visibleRows().length === 0\"\r\n                  [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n                  (checkedChange)=\"toggleAllOnPage($event)\"\r\n                />\r\n              }\r\n            </th>\r\n          }\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n            <tr\r\n              class=\"gog-table__row\"\r\n              [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n              [class.gog-table__row--selected]=\"isSelected(row)\"\r\n              [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n              [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n              (click)=\"emitRowClick(row, i, $event)\"\r\n              (keydown)=\"onRowKeydown(row, i, $event)\"\r\n            >\r\n              @if (hasSelectionColumn()) {\r\n                <td class=\"gog-table__td gog-table__td--select\">\r\n                  <!--\r\n                    `$event.stopPropagation()` so ticking the box does not also count as a row\r\n                    click: with `interactiveRows` those are two different intents, and firing both\r\n                    from one gesture is how a \"select\" ends up navigating away.\r\n                  -->\r\n                  <gog-checkbox\r\n                    [checked]=\"isSelected(row)\"\r\n                    [ariaLabel]=\"resolvedLabels().selectRow\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          {{ resolvedLabels().total }}: {{ rowCount() }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <!--\r\n          `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n          writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n          intermediate signal, in either direction.\r\n        -->\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [(pageSize)]=\"pageSize\"\r\n          [totalPages]=\"totalPages()\"\r\n          [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n          [pageSizeOptions]=\"pageSizeOptions()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          [ariaLabel]=\"resolvedLabels().pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row--interactive{cursor:pointer}.gog-table__row--interactive:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-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"] }]
+        }], ctorParameters: () => [], 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 }] }, { type: i0.Output, args: ["pageSizeChange"] }], showPageSizeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelect", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], interactiveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveRows", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], showSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionColumn", 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 }] }], gogSortChange: [{ type: i0.Output, args: ["gogSortChange"] }], gogPageChange: [{ type: i0.Output, args: ["gogPageChange"] }], gogRowClick: [{ type: i0.Output, args: ["gogRowClick"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GogColumn), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
 
 /** Built-in defaults, used when `GOG_CONFIG.theme` doesn't supply one. */
 const DEFAULT_THEME = 'light';
@@ -8168,6 +8742,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-paginator-ellipsis-font-size',
             '--gog-paginator-ellipsis-min-width',
             '--gog-paginator-gap',
+            '--gog-paginator-page-size-min-width',
         ],
     },
     {
@@ -8438,6 +9013,8 @@ const GOG_TOKEN_GROUPS = [
             '--gog-table-padding-h',
             '--gog-table-row-border-width',
             '--gog-table-row-transition-duration',
+            '--gog-table-select-col-width',
+            '--gog-table-selected-bg',
             '--gog-table-slg-padding-v',
             '--gog-table-slg-td-font-size',
             '--gog-table-slg-th-font-size',
@@ -8777,5 +9354,5 @@ const GOG_TOKEN_GROUPS = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AutocompleteComponent, ButtonComponent, ButtonToggleGroupComponent, CalendarComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DialogComponent, DialogService, DividerComponent, GOG_CONFIG, GOG_TABS_STATE, GOG_TOKEN_GROUPS, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogBadgeDirective, GogButtonToggleOptionDirective, GogCheckboxIconDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogColumn, GogColumnBodyDirective, GogColumnHeaderDirective, GogDropdownBase, GogDropdownChevronDirective, GogDropdownOptionDirective, GogFloatLabelState, GogInputAddonEndDirective, GogInputAddonStartDirective, GogMultiselectClearIconDirective, GogTabContentDirective, GogTabHeaderDirective, GogTagIconDirective, GogTooltipDirective, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, ProgressbarComponent, RadioGroupComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TemplateDirective, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, ToggleComponent, addDays, addMonths, addYears, buildMonthGrid, clampDate, copyTimeOnto, daysInMonth, defaultCompare, formatDate, getByPath, isAfterDay, isBeforeDay, isInRange, isSameDay, isSameMonth, isSameOptionValue, isWithinBounds, localeFirstDayOfWeek, monthNames, parseDate, provideGogConfig, readOption, resolveConfigured, startOfDay, weekdayNames, withTime };
+export { AccordionComponent, AutocompleteComponent, ButtonComponent, ButtonToggleGroupComponent, CalendarComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DialogComponent, DialogService, DividerComponent, GOG_CONFIG, GOG_ICONS, GOG_TABS_STATE, GOG_TOKEN_GROUPS, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogBadgeDirective, GogButtonDirective, GogButtonToggleOptionDirective, GogCheckboxIconDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogColumn, GogColumnBodyDirective, GogColumnHeaderDirective, GogDropdownBase, GogDropdownChevronDirective, GogDropdownOptionDirective, GogFloatLabelState, GogInputAddonEndDirective, GogInputAddonStartDirective, GogMultiselectClearIconDirective, GogTabContentDirective, GogTabHeaderDirective, GogTagIconDirective, GogTooltipDirective, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, ProgressbarComponent, RadioGroupComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TemplateDirective, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, ToggleComponent, addDays, addMonths, addYears, buildMonthGrid, clampDate, copyTimeOnto, daysInMonth, defaultCompare, formatDate, getByPath, isAfterDay, isBeforeDay, isInRange, isSameDay, isSameMonth, isSameOptionValue, isWithinBounds, localeFirstDayOfWeek, monthNames, parseDate, provideGogConfig, provideGogIcons, readOption, resolveConfigured, startOfDay, weekdayNames, withTime };
 //# sourceMappingURL=guildofgleks-ui.mjs.map