@guildofgleks/ui 0.0.1 → 21.2.2

package/fesm2022/guildofgleks-ui.mjs

@@ -1,24 +1,31 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, output, computed, inject, DestroyRef, TemplateRef, Directive, ElementRef, contentChild, signal, effect, model, forwardRef, InjectionToken, Injectable, Injector, viewChild, afterNextRender, ApplicationRef, EnvironmentInjector, PLATFORM_ID, createComponent, contentChildren } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, output, computed, inject, DestroyRef, TemplateRef, Directive, model, contentChild, ElementRef, signal, effect, untracked, forwardRef, InjectionToken, Injectable, Injector, viewChild, afterNextRender, PLATFORM_ID, ApplicationRef, contentChildren, linkedSignal } from '@angular/core';
 import { Subject, timer } from 'rxjs';
 import { throttle } from 'rxjs/operators';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet, DOCUMENT, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 
 class SpinnerComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * `runic` and `ring` are built-in presets. Use `custom` to render your own
+     * markup via content projection — it inherits the size wrapper, overlay
+     * behaviour, and `--gog-spinner-color` theming, but the visuals are yours.
+     */
+    variant = input('runic', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerComponent, isStandalone: true, selector: "gog-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "gog-inline-center" }, ngImport: i0, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n    <!-- Static dim track -->\n    <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n    <!-- Outer arc \u2014 rotates clockwise, long segment -->\n    <circle\n      class=\"gog-spinner__arc-outer\"\n      cx=\"32\"\n      cy=\"32\"\n      r=\"26\"\n      stroke-width=\"2.5\"\n      stroke-linecap=\"butt\"\n    />\n\n    <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n    <circle\n      class=\"gog-spinner__arc-inner\"\n      cx=\"32\"\n      cy=\"32\"\n      r=\"18\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"butt\"\n    />\n\n    <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n    <g class=\"gog-spinner__ticks\">\n      <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n      <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n      <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n      <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n    </g>\n\n    <!-- Inner rune \u2014 glow pulse only, no transform -->\n    <text\n      class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n      x=\"32\"\n      y=\"32\"\n      text-anchor=\"middle\"\n      dominant-baseline=\"central\"\n    >\n      \u2726\n    </text>\n  </svg>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:8000;background:var(--gog-spinner-overlay-bg, rgba(10, 8, 3, .65));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:gog-spinner-fade-in .2s ease}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm, 18px);height:var(--gog-spinner-size-sm, 18px)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md, 48px);height:var(--gog-spinner-size-md, 48px)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg, 96px);height:var(--gog-spinner-size-lg, 96px)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--accent-dim));opacity:.35}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--accent-color));stroke-dasharray:100 63;transform-origin:32px 32px;animation:gog-spin-cw 1.4s linear infinite,gog-arc-outer-pulse 2.8s ease-in-out infinite;filter:drop-shadow(0 0 5px var(--gog-spinner-color, var(--accent-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--accent-bright));stroke-dasharray:35 78;transform-origin:32px 32px;animation:gog-spin-ccw 2s linear infinite,gog-arc-inner-pulse 2.8s ease-in-out infinite;filter:drop-shadow(0 0 4px var(--gog-spinner-color, var(--accent-bright)));opacity:.75}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw 6s linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--accent-bright));opacity:.85;filter:drop-shadow(0 0 3px var(--gog-spinner-color, var(--accent-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse 2.8s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--gog-spinner-color, var(--accent-color)))}.gog-spinner__rune{font-family:var(--font-heading),serif;fill:var(--gog-spinner-color, var(--accent-bright));font-size:var(--gog-spinner-rune-size, 20px)}.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:1}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes gog-arc-inner-pulse{0%,to{opacity:.75}50%{opacity:.45}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerComponent, isStandalone: true, selector: "gog-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "gog-inline-center" }, ngImport: i0, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  @switch (variant()) {\n    @case ('ring') {\n      <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n    }\n    @case ('custom') {\n      <ng-content />\n    }\n    @default {\n      <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n        <!-- Static dim track -->\n        <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n        <!-- Outer arc \u2014 rotates clockwise, long segment -->\n        <circle\n          class=\"gog-spinner__arc-outer\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"26\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n        <circle\n          class=\"gog-spinner__arc-inner\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"18\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n        <g class=\"gog-spinner__ticks\">\n          <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n        </g>\n\n        <!-- Inner rune \u2014 glow pulse only, no transform -->\n        <text\n          class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n          x=\"32\"\n          y=\"32\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n        >\n          \u2726\n        </text>\n      </svg>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-spinner', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-inline-center',
-                    }, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n    <!-- Static dim track -->\n    <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n    <!-- Outer arc \u2014 rotates clockwise, long segment -->\n    <circle\n      class=\"gog-spinner__arc-outer\"\n      cx=\"32\"\n      cy=\"32\"\n      r=\"26\"\n      stroke-width=\"2.5\"\n      stroke-linecap=\"butt\"\n    />\n\n    <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n    <circle\n      class=\"gog-spinner__arc-inner\"\n      cx=\"32\"\n      cy=\"32\"\n      r=\"18\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"butt\"\n    />\n\n    <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n    <g class=\"gog-spinner__ticks\">\n      <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n      <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n      <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n      <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n    </g>\n\n    <!-- Inner rune \u2014 glow pulse only, no transform -->\n    <text\n      class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n      x=\"32\"\n      y=\"32\"\n      text-anchor=\"middle\"\n      dominant-baseline=\"central\"\n    >\n      \u2726\n    </text>\n  </svg>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:8000;background:var(--gog-spinner-overlay-bg, rgba(10, 8, 3, .65));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:gog-spinner-fade-in .2s ease}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm, 18px);height:var(--gog-spinner-size-sm, 18px)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md, 48px);height:var(--gog-spinner-size-md, 48px)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg, 96px);height:var(--gog-spinner-size-lg, 96px)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--accent-dim));opacity:.35}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--accent-color));stroke-dasharray:100 63;transform-origin:32px 32px;animation:gog-spin-cw 1.4s linear infinite,gog-arc-outer-pulse 2.8s ease-in-out infinite;filter:drop-shadow(0 0 5px var(--gog-spinner-color, var(--accent-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--accent-bright));stroke-dasharray:35 78;transform-origin:32px 32px;animation:gog-spin-ccw 2s linear infinite,gog-arc-inner-pulse 2.8s ease-in-out infinite;filter:drop-shadow(0 0 4px var(--gog-spinner-color, var(--accent-bright)));opacity:.75}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw 6s linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--accent-bright));opacity:.85;filter:drop-shadow(0 0 3px var(--gog-spinner-color, var(--accent-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse 2.8s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--gog-spinner-color, var(--accent-color)))}.gog-spinner__rune{font-family:var(--font-heading),serif;fill:var(--gog-spinner-color, var(--accent-bright));font-size:var(--gog-spinner-rune-size, 20px)}.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:1}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes gog-arc-inner-pulse{0%,to{opacity:.75}50%{opacity:.45}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap{animation:none}}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+                    }, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  @switch (variant()) {\n    @case ('ring') {\n      <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n    }\n    @case ('custom') {\n      <ng-content />\n    }\n    @default {\n      <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n        <!-- Static dim track -->\n        <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n        <!-- Outer arc \u2014 rotates clockwise, long segment -->\n        <circle\n          class=\"gog-spinner__arc-outer\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"26\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n        <circle\n          class=\"gog-spinner__arc-inner\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"18\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n        <g class=\"gog-spinner__ticks\">\n          <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n        </g>\n\n        <!-- Inner rune \u2014 glow pulse only, no transform -->\n        <text\n          class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n          x=\"32\"\n          y=\"32\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n        >\n          \u2726\n        </text>\n      </svg>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class ButtonComponent {
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -26,11 +33,35 @@ class ButtonComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    debounce = input(300, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum time, in ms, between accepted clicks. This is a spam/double-click
+     * guard, not a delay before the first click fires: the first click in a
+     * window is emitted immediately (leading edge), and any further clicks
+     * within `debounce` ms are silently dropped until the window elapses.
+     */
+    debounce = input(300, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the button, forwarded to the native <button>.
+     * Setting `aria-label` directly on <gog-button> in a template does NOT
+     * work — that attribute lands on the custom element host, not on the
+     * actual interactive <button> inside it, so assistive tech never sees it.
+     * Use this input instead, especially for icon-only buttons.
+     */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     gogClick = output();
+    /** Fully non-interactive: excluded from tab order via the native `disabled` attribute. */
+    isNativeDisabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "isNativeDisabled" }] : /* istanbul ignore next */ []));
+    /** Logically blocked from activating (disabled OR loading), used to guard click handling. */
     isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    spinnerSize = computed(() => (this.size() === 'lg' ? 'md' : 'sm'), ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
+    static SPINNER_SIZE_BY_BUTTON_SIZE = {
+        xsm: 'sm',
+        sm: 'sm',
+        md: 'sm',
+        lg: 'md',
+        slg: 'lg',
+    };
+    spinnerSize = computed(() => ButtonComponent.SPINNER_SIZE_BY_BUTTON_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     click$ = new Subject();
     constructor() {
@@ -44,12 +75,104 @@ 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 }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, ngImport: i0, template: "<button\n  (click)=\"onClick($event)\"\n  [attr.disabled]=\"isDisabled() ? true : null\"\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\n  [class.gog-cursor-wait]=\"loading()\"\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\n  [class.gog-btn--lg]=\"size() === 'lg'\"\n  [class.gog-btn--loading]=\"loading()\"\n  [class.gog-btn--md]=\"size() === 'md'\"\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\n  [class.gog-btn--sm]=\"size() === 'sm'\"\n  [type]=\"type()\"\n  class=\"gog-btn gog-inline-center gog-contained-layout fw-black font-heading\"\n>\n  @if (loading()) {\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\n  }\n\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", styles: [".gog-btn{--gog-btn-bg: var(--accent-color);--gog-btn-color: var(--primary-color);--gog-btn-border: transparent;--gog-btn-radius: var(--radius);--gog-btn-padding: var(--btn-md-padding);--gog-btn-font-size: var(--btn-md-font-size);--gog-btn-shadow: none;--gog-btn-hover-bg: var(--accent-bright);--gog-btn-hover-shadow: 0 0 12px color-mix(in srgb, var(--accent-bright) 35%, transparent);--gog-spinner-color: var(--text-color);gap:8px;border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-btn-border);border-radius:var(--gog-btn-radius);padding:var(--gog-btn-padding);font-size:var(--gog-btn-font-size);letter-spacing:1px;text-transform:uppercase;background-color:var(--gog-btn-bg);color:var(--gog-btn-color);box-shadow:var(--gog-btn-shadow);cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease,color .15s ease;line-height:1}.gog-btn:focus-visible{outline:3px solid var(--gog-btn-hover-bg);outline-offset:3px}.gog-btn:hover:not(:disabled){background-color:var(--gog-btn-hover-bg);box-shadow:var(--gog-btn-hover-shadow)}.gog-btn:active:not(:disabled){transform:scale(.97)}@media(prefers-reduced-motion:reduce){.gog-btn{transition:none}.gog-btn:active:not(:disabled){transform:none}}.gog-btn:disabled{opacity:.4;cursor:not-allowed}.gog-btn--primary{--gog-btn-bg: var(--accent-color);--gog-btn-color: var(--primary-color);--gog-btn-hover-bg: var(--accent-bright);--gog-btn-hover-shadow: 0 0 16px color-mix(in srgb, var(--accent-bright) 45%, transparent)}.gog-btn--secondary{--gog-btn-bg: var(--secondary-color);--gog-btn-color: var(--primary-color);--gog-btn-hover-bg: var(--accent-color);--gog-btn-hover-shadow: none}.gog-btn--outline{--gog-btn-bg: transparent;--gog-btn-color: var(--accent-color);--gog-btn-border: var(--accent-color);--gog-btn-hover-bg: var(--accent-color);--gog-btn-hover-shadow: none;--gog-spinner-color: var(--accent-color)}.gog-btn--outline:hover:not(:disabled){color:var(--primary-color)}.gog-btn--ghost{--gog-btn-bg: transparent;--gog-btn-color: var(--accent-color);--gog-btn-hover-bg: color-mix(in srgb, var(--accent-color) 12%, transparent);--gog-btn-hover-shadow: none;--gog-spinner-color: var(--accent-color)}.gog-btn--sm{--gog-btn-padding: var(--btn-sm-padding);--gog-btn-font-size: var(--btn-sm-font-size)}.gog-btn--lg{--gog-btn-padding: var(--btn-lg-padding);--gog-btn-font-size: var(--btn-lg-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}.gog-btn__content--hidden{visibility:hidden}.gog-btn__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:70%;max-height:70%}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel"] }], 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\n  (click)=\"onClick($event)\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\n  [class.gog-btn--xsm]=\"size() === 'xsm'\"\n  [class.gog-btn--sm]=\"size() === 'sm'\"\n  [class.gog-btn--md]=\"size() === 'md'\"\n  [class.gog-btn--lg]=\"size() === 'lg'\"\n  [class.gog-btn--slg]=\"size() === 'slg'\"\n  [class.gog-btn--loading]=\"loading()\"\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\n  [class.gog-cursor-wait]=\"loading()\"\n  [type]=\"type()\"\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\n>\n  @if (loading()) {\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\n  }\n\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-button', imports: [SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"onClick($event)\"\n  [attr.disabled]=\"isDisabled() ? true : null\"\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\n  [class.gog-cursor-wait]=\"loading()\"\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\n  [class.gog-btn--lg]=\"size() === 'lg'\"\n  [class.gog-btn--loading]=\"loading()\"\n  [class.gog-btn--md]=\"size() === 'md'\"\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\n  [class.gog-btn--sm]=\"size() === 'sm'\"\n  [type]=\"type()\"\n  class=\"gog-btn gog-inline-center gog-contained-layout fw-black font-heading\"\n>\n  @if (loading()) {\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\n  }\n\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", styles: [".gog-btn{--gog-btn-bg: var(--accent-color);--gog-btn-color: var(--primary-color);--gog-btn-border: transparent;--gog-btn-radius: var(--radius);--gog-btn-padding: var(--btn-md-padding);--gog-btn-font-size: var(--btn-md-font-size);--gog-btn-shadow: none;--gog-btn-hover-bg: var(--accent-bright);--gog-btn-hover-shadow: 0 0 12px color-mix(in srgb, var(--accent-bright) 35%, transparent);--gog-spinner-color: var(--text-color);gap:8px;border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-btn-border);border-radius:var(--gog-btn-radius);padding:var(--gog-btn-padding);font-size:var(--gog-btn-font-size);letter-spacing:1px;text-transform:uppercase;background-color:var(--gog-btn-bg);color:var(--gog-btn-color);box-shadow:var(--gog-btn-shadow);cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease,color .15s ease;line-height:1}.gog-btn:focus-visible{outline:3px solid var(--gog-btn-hover-bg);outline-offset:3px}.gog-btn:hover:not(:disabled){background-color:var(--gog-btn-hover-bg);box-shadow:var(--gog-btn-hover-shadow)}.gog-btn:active:not(:disabled){transform:scale(.97)}@media(prefers-reduced-motion:reduce){.gog-btn{transition:none}.gog-btn:active:not(:disabled){transform:none}}.gog-btn:disabled{opacity:.4;cursor:not-allowed}.gog-btn--primary{--gog-btn-bg: var(--accent-color);--gog-btn-color: var(--primary-color);--gog-btn-hover-bg: var(--accent-bright);--gog-btn-hover-shadow: 0 0 16px color-mix(in srgb, var(--accent-bright) 45%, transparent)}.gog-btn--secondary{--gog-btn-bg: var(--secondary-color);--gog-btn-color: var(--primary-color);--gog-btn-hover-bg: var(--accent-color);--gog-btn-hover-shadow: none}.gog-btn--outline{--gog-btn-bg: transparent;--gog-btn-color: var(--accent-color);--gog-btn-border: var(--accent-color);--gog-btn-hover-bg: var(--accent-color);--gog-btn-hover-shadow: none;--gog-spinner-color: var(--accent-color)}.gog-btn--outline:hover:not(:disabled){color:var(--primary-color)}.gog-btn--ghost{--gog-btn-bg: transparent;--gog-btn-color: var(--accent-color);--gog-btn-hover-bg: color-mix(in srgb, var(--accent-color) 12%, transparent);--gog-btn-hover-shadow: none;--gog-spinner-color: var(--accent-color)}.gog-btn--sm{--gog-btn-padding: var(--btn-sm-padding);--gog-btn-font-size: var(--btn-sm-font-size)}.gog-btn--lg{--gog-btn-padding: var(--btn-lg-padding);--gog-btn-font-size: var(--btn-lg-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}.gog-btn__content--hidden{visibility:hidden}.gog-btn__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:70%;max-height:70%}\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 }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
+            args: [{ selector: 'gog-button', imports: [SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        // 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\n  (click)=\"onClick($event)\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\n  [class.gog-btn--xsm]=\"size() === 'xsm'\"\n  [class.gog-btn--sm]=\"size() === 'sm'\"\n  [class.gog-btn--md]=\"size() === 'md'\"\n  [class.gog-btn--lg]=\"size() === 'lg'\"\n  [class.gog-btn--slg]=\"size() === 'slg'\"\n  [class.gog-btn--loading]=\"loading()\"\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\n  [class.gog-cursor-wait]=\"loading()\"\n  [type]=\"type()\"\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\n>\n  @if (loading()) {\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\n  }\n\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\n    <ng-content></ng-content>\n  </span>\n</button>\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"] }]
+        }], 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"] }] } });
+
+const ROVING_FOCUS_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+function isRovingFocusKey(key) {
+    return ROVING_FOCUS_KEYS.includes(key);
+}
+function nextRovingFocusIndex(key, currentIndex, count) {
+    const lastIndex = count - 1;
+    switch (key) {
+        case 'Home':
+            return 0;
+        case 'End':
+            return lastIndex;
+        case 'ArrowDown':
+            return (currentIndex + 1) % count;
+        case 'ArrowUp':
+            return (currentIndex - 1 + count) % count;
+    }
+}
+/**
+ * Arrow/Home/End navigation across a roving-tabindex-style list of focusable elements.
+ * `event.currentTarget` must be one of `items`. Returns false (and leaves the event
+ * untouched) for any other key, or when `items` doesn't contain the current target,
+ * so callers can safely invoke this unconditionally from a keydown handler.
+ */
+function handleRovingFocusKeydown(event, items) {
+    if (!isRovingFocusKey(event.key) || items.length === 0) {
+        return false;
+    }
+    const current = event.currentTarget;
+    const index = items.indexOf(current);
+    if (index === -1) {
+        return false;
+    }
+    event.preventDefault();
+    const nextIndex = nextRovingFocusIndex(event.key, index, items.length);
+    items[nextIndex]?.focus();
+    return true;
+}
+
+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>`,
+    'chevron-up': `<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-chevron-up-icon lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>`,
+    'chevron-down': `<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-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>`,
+    sort: `<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-down-up-icon lucide-arrow-down-up"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></svg>`,
+    'sort-up': `<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-up-narrow-wide-icon lucide-arrow-up-narrow-wide"><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/><path d="M11 12h4"/><path d="M11 16h7"/><path d="M11 20h10"/></svg>`,
+    'sort-down': `<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-down-wide-narrow-icon lucide-arrow-down-wide-narrow"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="M11 4h10"/><path d="M11 8h7"/><path d="M11 12h4"/></svg>`,
+    success: `<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>`,
+    error: `<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-bug-icon lucide-bug"><path d="M12 20v-9"/><path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/><path d="M14.12 3.88 16 2"/><path d="M21 21a4 4 0 0 0-3.81-4"/><path d="M21 5a4 4 0 0 1-3.55 3.97"/><path d="M22 13h-4"/><path d="M3 21a4 4 0 0 1 3.81-4"/><path d="M3 5a4 4 0 0 0 3.55 3.97"/><path d="M6 13H2"/><path d="m8 2 1.88 1.88"/><path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/></svg>`,
+    warning: `<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-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`,
+    info: `<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-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+    checkbox: `<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-square-icon lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`,
+    'checkbox-checked': `<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>`,
+    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>`,
+};
+
+class IconComponent {
+    sanitizer = inject(DomSanitizer);
+    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 */ []));
+    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>
+    }
+  `, 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 });
+}
+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>
+    }
+  `, 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"] }]
+        }], 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 GogAccordionContentDirective {
     templateRef = inject(TemplateRef);
@@ -85,31 +208,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 class AccordionComponent {
-    host = inject((ElementRef));
+    static nextUid = 0;
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     expandFirst = input(false, ...(ngDevMode ? [{ debugName: "expandFirst" }] : /* istanbul ignore next */ []));
     multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     showChevron = input(true, ...(ngDevMode ? [{ debugName: "showChevron" }] : /* istanbul ignore next */ []));
+    /**
+     * When set, wraps each header button in `role="heading"` with this `aria-level`,
+     * so screen-reader users navigating by headings can find accordion sections.
+     * Left unset by default since not every accordion instance represents document structure
+     * (e.g. one nested inside a card).
+     */
+    headingLevel = input(undefined, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable set of currently open item ids. Exposed as a model so consumers
+     * can drive the accordion externally (e.g. `[(openIds)]="mySet"`) instead of only
+     * reacting to the `gogToggle` output.
+     */
+    openIds = model(new Set(), ...(ngDevMode ? [{ debugName: "openIds" }] : /* istanbul ignore next */ []));
     gogToggle = output();
     headerTpl = contentChild(GogAccordionHeaderDirective, ...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
     chevronTpl = contentChild(GogAccordionChevronDirective, ...(ngDevMode ? [{ debugName: "chevronTpl" }] : /* istanbul ignore next */ []));
     contentTpl = contentChild(GogAccordionContentDirective, ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
-    openIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "openIds" }] : /* istanbul ignore next */ []));
+    /**
+     * Unique per-instance id prefix. Prevents duplicate DOM ids (and therefore broken
+     * aria-controls/aria-labelledby wiring) when several accordions render on the same
+     * page and their items happen to share `id` values (e.g. ids coming straight from a DB).
+     */
+    uid = `gog-acc-${AccordionComponent.nextUid++}`;
+    host = inject((ElementRef));
+    /**
+     * Tracks whether the expandFirst auto-open has already run, independently of
+     * `openIds` itself. Reading `openIds().size` directly inside the effect would
+     * re-subscribe the effect to every future toggle (since `openIds()` gets read
+     * on every run once `expandFirst` is true), causing pointless re-evaluation
+     * on each click and re-opening the first item if `items` is later replaced
+     * with a new array reference after the user closed everything by hand.
+     */
+    autoExpanded = signal(false, ...(ngDevMode ? [{ debugName: "autoExpanded" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const items = this.items();
-            if (!this.expandFirst() || items.length === 0 || this.openIds().size > 0) {
+            if (!this.expandFirst() || items.length === 0 || untracked(this.autoExpanded)) {
                 return;
             }
             this.openIds.set(new Set([items[0].id]));
+            this.autoExpanded.set(true);
         });
     }
     isOpen(id) {
         return this.openIds().has(id);
     }
     toggle(item) {
+        if (item.disabled) {
+            return;
+        }
         const id = item.id;
         const current = this.openIds();
         const next = new Set(current);
@@ -124,233 +279,49 @@ class AccordionComponent {
         this.openIds.set(next);
         this.gogToggle.emit({ item, open: next.has(id) });
     }
-    onHeaderKeydown(event, index) {
-        const keys = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
-        if (!keys.includes(event.key)) {
-            return;
-        }
+    onHeaderKeydown(event) {
         const host = this.host.nativeElement;
-        const headers = Array.from(host.querySelectorAll('.gog-accordion__header'));
-        if (headers.length === 0) {
-            return;
-        }
-        event.preventDefault();
-        const lastIndex = headers.length - 1;
-        const nextIndex = event.key === 'Home'
-            ? 0
-            : event.key === 'End'
-                ? lastIndex
-                : event.key === 'ArrowDown'
-                    ? (index + 1) % headers.length
-                    : (index - 1 + headers.length) % headers.length;
-        headers[nextIndex]?.focus();
+        // Disabled headers are excluded so arrow/Home/End navigation skips over them,
+        // matching the WAI-ARIA expectation that non-interactive controls aren't focus stops.
+        const headers = Array.from(host.querySelectorAll('.gog-accordion__header:not([disabled])'));
+        handleRovingFocusKeydown(event, headers);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogToggle: "gogToggle" }, host: { classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class.gog-accordion--md]=\"size() === 'md'\"\r\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n>\r\n  @if (loading()) {\r\n    @for (item of items(); track item.id) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <span class=\"gog-accordion__skeleton-line\"></span>\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div class=\"gog-accordion__item\" [class.gog-accordion__item--open]=\"isOpen(item.id)\">\r\n        <button\r\n          [id]=\"'gog-acc-btn-' + item.id\"\r\n          class=\"gog-accordion__header font-heading\"\r\n          [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n          [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n          [attr.aria-expanded]=\"isOpen(item.id)\"\r\n          [attr.aria-controls]=\"'gog-acc-body-' + item.id\"\r\n          (click)=\"toggle(item)\"\r\n          (keydown)=\"onHeaderKeydown($event, $index)\"\r\n          type=\"button\"\r\n        >\r\n          <span class=\"gog-accordion__header-content\">\r\n            @if (headerTpl(); as tpl) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item, open: isOpen(item.id) }\"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n            }\r\n          </span>\r\n          @if (showChevron()) {\r\n            <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n              @if (chevronTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item, open: isOpen(item.id) }\"\r\n                />\r\n              } @else {\r\n                <svg\r\n                  viewBox=\"0 0 24 24\"\r\n                  fill=\"none\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                >\r\n                  <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n                </svg>\r\n              }\r\n            </span>\r\n          }\r\n        </button>\r\n\r\n        <div\r\n          [id]=\"'gog-acc-body-' + item.id\"\r\n          class=\"gog-accordion__body font-body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"'gog-acc-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".gog-accordion{--gog-accordion-border-color: var(--accent-dim);--gog-accordion-text-color: var(--text-color);--gog-accordion-accent-color: var(--accent-color);--gog-accordion-hover-bg: color-mix(in srgb, var(--accent-dim) 10%, transparent);--gog-accordion-hover-ring: color-mix(in srgb, var(--accent-color) 30%, transparent);--gog-accordion-body-color: var(--text-color);--gog-accordion-skeleton-start: var(--accent-dim);--gog-accordion-skeleton-mid: color-mix(in srgb, var(--accent-dim) 50%, transparent);--gog-accordion-skeleton-end: var(--accent-dim);--gog-accordion-radius: var(--radius);--gog-accordion-body-radius: var(--radius);--gog-accordion-body-padding-y: 12px;--gog-accordion-body-padding-x: 16px;--gog-accordion-body-radius-skeleton: 2px;display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--control-border-width, 1px) var(--control-border-style, solid) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--control-border-width, 1px) var(--control-border-style, solid) var(--gog-accordion-border-color)}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px var(--gog-accordion-body-padding-x);gap:12px;background:transparent;border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;text-transform:uppercase;letter-spacing:.8px;font-size:var(--text-sm);transition:color .15s ease,background-color .15s ease}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:3px solid var(--gog-accordion-hover-ring);outline-offset:-3px}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}.gog-accordion__chevron{flex-shrink:0;width:16px;height:16px;color:var(--gog-accordion-border-color);transition:transform .2s ease,color .15s ease}.gog-accordion__chevron svg{width:100%;height:100%;display:block}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--control-border-width, 1px) var(--control-border-style, solid) var(--accent-dim);transition:grid-template-rows .2s ease,opacity .18s ease}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;padding:0 var(--gog-accordion-body-padding-x);color:var(--gog-accordion-body-color);font-size:var(--text-md);line-height:1.6;transform:translateY(-2px);transition:transform .18s ease,padding .2s ease}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-y);padding-bottom:calc(var(--gog-accordion-body-padding-y) + 4px);transform:translateY(0)}.gog-accordion--md .gog-accordion__header{padding:10px 14px;font-size:var(--text-xs)}.gog-accordion--md .gog-accordion__header-content{gap:2px}.gog-accordion--md .gog-accordion__body-inner{padding-left:14px;padding-right:14px;font-size:var(--text-sm)}.gog-accordion--md .gog-accordion__body--open .gog-accordion__body-inner{padding-top:8px;padding-bottom:12px}.gog-accordion--md .gog-accordion__chevron{width:14px;height:14px}.gog-accordion--sm .gog-accordion__header{padding:6px 10px;font-size:var(--text-xs);letter-spacing:.4px}.gog-accordion--sm .gog-accordion__header-content{gap:2px}.gog-accordion--sm .gog-accordion__body-inner{padding-left:10px;padding-right:10px;font-size:var(--text-xs);line-height:1.5}.gog-accordion--sm .gog-accordion__body--open .gog-accordion__body-inner{padding-top:6px;padding-bottom:8px}.gog-accordion--sm .gog-accordion__chevron{width:12px;height:12px}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:12px;width:55%;border-radius:var(--gog-accordion-body-radius-skeleton);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer 1.4s infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [class.gog-accordion--loading]=\"loading()\"\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\n  [class.gog-accordion--md]=\"size() === 'md'\"\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\n  class=\"gog-accordion gog-contained-layout\"\n>\n  @if (loading()) {\n    @for (item of items(); track item.id) {\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\n          <span class=\"gog-accordion__skeleton-line\"></span>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of items(); track item.id) {\n      <div\n        class=\"gog-accordion__item\"\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\n      >\n        <ng-template #headerButton>\n          <button\n            [id]=\"uid + '-btn-' + item.id\"\n            class=\"gog-accordion__header\"\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\n            [attr.aria-expanded]=\"isOpen(item.id)\"\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [disabled]=\"item.disabled || null\"\n            (click)=\"toggle(item)\"\n            (keydown)=\"onHeaderKeydown($event)\"\n            type=\"button\"\n          >\n            <span class=\"gog-accordion__header-content\">\n              @if (headerTpl(); as tpl) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tpl.templateRef;\n                    context: { $implicit: item, open: isOpen(item.id) }\n                  \"\n                />\n              } @else {\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\n              }\n            </span>\n            @if (showChevron()) {\n              <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\n                @if (chevronTpl(); as tpl) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      tpl.templateRef;\n                      context: { $implicit: item, open: isOpen(item.id) }\n                    \"\n                  />\n                } @else {\n                  <gog-icon name=\"chevron-down\" />\n                }\n              </span>\n            }\n          </button>\n        </ng-template>\n\n        @if (headingLevel(); as level) {\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\n          </div>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\n        }\n\n        <div\n          [id]=\"uid + '-body-' + item.id\"\n          class=\"gog-accordion__body\"\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\n        >\n          <div class=\"gog-accordion__body-inner\">\n            @if (contentTpl(); as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\n            }\n          </div>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:var(--gog-accordion-skeleton-height);width:var(--gog-accordion-skeleton-width);border-radius:var(--gog-accordion-skeleton-radius);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer var(--gog-accordion-skeleton-duration) infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-accordion-host',
-                    }, template: "<div\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class.gog-accordion--md]=\"size() === 'md'\"\r\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n>\r\n  @if (loading()) {\r\n    @for (item of items(); track item.id) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <span class=\"gog-accordion__skeleton-line\"></span>\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div class=\"gog-accordion__item\" [class.gog-accordion__item--open]=\"isOpen(item.id)\">\r\n        <button\r\n          [id]=\"'gog-acc-btn-' + item.id\"\r\n          class=\"gog-accordion__header font-heading\"\r\n          [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n          [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n          [attr.aria-expanded]=\"isOpen(item.id)\"\r\n          [attr.aria-controls]=\"'gog-acc-body-' + item.id\"\r\n          (click)=\"toggle(item)\"\r\n          (keydown)=\"onHeaderKeydown($event, $index)\"\r\n          type=\"button\"\r\n        >\r\n          <span class=\"gog-accordion__header-content\">\r\n            @if (headerTpl(); as tpl) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item, open: isOpen(item.id) }\"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n            }\r\n          </span>\r\n          @if (showChevron()) {\r\n            <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n              @if (chevronTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item, open: isOpen(item.id) }\"\r\n                />\r\n              } @else {\r\n                <svg\r\n                  viewBox=\"0 0 24 24\"\r\n                  fill=\"none\"\r\n                  stroke=\"currentColor\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                >\r\n                  <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n                </svg>\r\n              }\r\n            </span>\r\n          }\r\n        </button>\r\n\r\n        <div\r\n          [id]=\"'gog-acc-body-' + item.id\"\r\n          class=\"gog-accordion__body font-body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"'gog-acc-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".gog-accordion{--gog-accordion-border-color: var(--accent-dim);--gog-accordion-text-color: var(--text-color);--gog-accordion-accent-color: var(--accent-color);--gog-accordion-hover-bg: color-mix(in srgb, var(--accent-dim) 10%, transparent);--gog-accordion-hover-ring: color-mix(in srgb, var(--accent-color) 30%, transparent);--gog-accordion-body-color: var(--text-color);--gog-accordion-skeleton-start: var(--accent-dim);--gog-accordion-skeleton-mid: color-mix(in srgb, var(--accent-dim) 50%, transparent);--gog-accordion-skeleton-end: var(--accent-dim);--gog-accordion-radius: var(--radius);--gog-accordion-body-radius: var(--radius);--gog-accordion-body-padding-y: 12px;--gog-accordion-body-padding-x: 16px;--gog-accordion-body-radius-skeleton: 2px;display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--control-border-width, 1px) var(--control-border-style, solid) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--control-border-width, 1px) var(--control-border-style, solid) var(--gog-accordion-border-color)}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px var(--gog-accordion-body-padding-x);gap:12px;background:transparent;border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;text-transform:uppercase;letter-spacing:.8px;font-size:var(--text-sm);transition:color .15s ease,background-color .15s ease}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:3px solid var(--gog-accordion-hover-ring);outline-offset:-3px}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}.gog-accordion__chevron{flex-shrink:0;width:16px;height:16px;color:var(--gog-accordion-border-color);transition:transform .2s ease,color .15s ease}.gog-accordion__chevron svg{width:100%;height:100%;display:block}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--control-border-width, 1px) var(--control-border-style, solid) var(--accent-dim);transition:grid-template-rows .2s ease,opacity .18s ease}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;padding:0 var(--gog-accordion-body-padding-x);color:var(--gog-accordion-body-color);font-size:var(--text-md);line-height:1.6;transform:translateY(-2px);transition:transform .18s ease,padding .2s ease}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-y);padding-bottom:calc(var(--gog-accordion-body-padding-y) + 4px);transform:translateY(0)}.gog-accordion--md .gog-accordion__header{padding:10px 14px;font-size:var(--text-xs)}.gog-accordion--md .gog-accordion__header-content{gap:2px}.gog-accordion--md .gog-accordion__body-inner{padding-left:14px;padding-right:14px;font-size:var(--text-sm)}.gog-accordion--md .gog-accordion__body--open .gog-accordion__body-inner{padding-top:8px;padding-bottom:12px}.gog-accordion--md .gog-accordion__chevron{width:14px;height:14px}.gog-accordion--sm .gog-accordion__header{padding:6px 10px;font-size:var(--text-xs);letter-spacing:.4px}.gog-accordion--sm .gog-accordion__header-content{gap:2px}.gog-accordion--sm .gog-accordion__body-inner{padding-left:10px;padding-right:10px;font-size:var(--text-xs);line-height:1.5}.gog-accordion--sm .gog-accordion__body--open .gog-accordion__body-inner{padding-top:6px;padding-bottom:8px}.gog-accordion--sm .gog-accordion__chevron{width:12px;height:12px}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:12px;width:55%;border-radius:var(--gog-accordion-body-radius-skeleton);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer 1.4s infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
-
-class IconComponent {
-    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 */ []));
-    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 {
-      <svg
-        class="gog-icon__svg"
-        viewBox="0 0 16 16"
-        fill="none"
-        aria-hidden="true"
-        focusable="false"
-      >
-        @switch (name()) {
-          @case ('check') {
-            <path
-              d="M3 8.5L6.5 12L13 4"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          }
-          @case ('close') {
-            <path
-              d="M4 4L12 12M12 4L4 12"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-            />
-          }
-          @case ('chevron-up') {
-            <path
-              d="M4 10L8 6L12 10"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          }
-          @case ('chevron-down') {
-            <path
-              d="M4 6L8 10L12 6"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          }
-          @case ('sort-up') {
-            <path d="M8 3L4.5 6.5H11.5L8 3Z" fill="currentColor" />
-          }
-          @case ('sort-down') {
-            <path d="M8 13L11.5 9.5H4.5L8 13Z" fill="currentColor" />
-          }
-          @case ('sort') {
-            <path d="M5 5.5H11M5 8H11M5 10.5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-          }
-          @case ('success') {
-            <path
-              d="M3 8.5L6.2 11.7L13 4.9"
-              stroke="currentColor"
-              stroke-width="1.8"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          }
-          @case ('error') {
-            <path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
-          }
-          @case ('warning') {
-            <path d="M8 3L14 13H2L8 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
-            <path d="M8 6V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-            <circle cx="8" cy="11.5" r="0.75" fill="currentColor" />
-          }
-          @case ('info') {
-            <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
-            <path d="M8 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-            <circle cx="8" cy="5.25" r="0.75" fill="currentColor" />
-          }
-        }
-      </svg>
-    }
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}.gog-icon__svg{width:var(--gog-icon-size, 1em);height:var(--gog-icon-size, 1em);display:block;color:currentColor}.gog-icon__svg path,.gog-icon__svg circle{stroke-width:var(--gog-icon-stroke-width, 2)}\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 {
-      <svg
-        class="gog-icon__svg"
-        viewBox="0 0 16 16"
-        fill="none"
-        aria-hidden="true"
-        focusable="false"
-      >
-        @switch (name()) {
-          @case ('check') {
-            <path
-              d="M3 8.5L6.5 12L13 4"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          }
-          @case ('close') {
-            <path
-              d="M4 4L12 12M12 4L4 12"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-            />
-          }
-          @case ('chevron-up') {
-            <path
-              d="M4 10L8 6L12 10"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          }
-          @case ('chevron-down') {
-            <path
-              d="M4 6L8 10L12 6"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          }
-          @case ('sort-up') {
-            <path d="M8 3L4.5 6.5H11.5L8 3Z" fill="currentColor" />
-          }
-          @case ('sort-down') {
-            <path d="M8 13L11.5 9.5H4.5L8 13Z" fill="currentColor" />
-          }
-          @case ('sort') {
-            <path d="M5 5.5H11M5 8H11M5 10.5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-          }
-          @case ('success') {
-            <path
-              d="M3 8.5L6.2 11.7L13 4.9"
-              stroke="currentColor"
-              stroke-width="1.8"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          }
-          @case ('error') {
-            <path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
-          }
-          @case ('warning') {
-            <path d="M8 3L14 13H2L8 3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
-            <path d="M8 6V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-            <circle cx="8" cy="11.5" r="0.75" fill="currentColor" />
-          }
-          @case ('info') {
-            <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
-            <path d="M8 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-            <circle cx="8" cy="5.25" r="0.75" fill="currentColor" />
-          }
-        }
-      </svg>
-    }
-  `, 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}.gog-icon__svg{width:var(--gog-icon-size, 1em);height:var(--gog-icon-size, 1em);display:block;color:currentColor}.gog-icon__svg path,.gog-icon__svg circle{stroke-width:var(--gog-icon-stroke-width, 2)}\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 }] }] } });
+                    }, template: "<div\n  [class.gog-accordion--loading]=\"loading()\"\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\n  [class.gog-accordion--md]=\"size() === 'md'\"\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\n  class=\"gog-accordion gog-contained-layout\"\n>\n  @if (loading()) {\n    @for (item of items(); track item.id) {\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\n          <span class=\"gog-accordion__skeleton-line\"></span>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of items(); track item.id) {\n      <div\n        class=\"gog-accordion__item\"\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\n      >\n        <ng-template #headerButton>\n          <button\n            [id]=\"uid + '-btn-' + item.id\"\n            class=\"gog-accordion__header\"\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\n            [attr.aria-expanded]=\"isOpen(item.id)\"\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [disabled]=\"item.disabled || null\"\n            (click)=\"toggle(item)\"\n            (keydown)=\"onHeaderKeydown($event)\"\n            type=\"button\"\n          >\n            <span class=\"gog-accordion__header-content\">\n              @if (headerTpl(); as tpl) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tpl.templateRef;\n                    context: { $implicit: item, open: isOpen(item.id) }\n                  \"\n                />\n              } @else {\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\n              }\n            </span>\n            @if (showChevron()) {\n              <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\n                @if (chevronTpl(); as tpl) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      tpl.templateRef;\n                      context: { $implicit: item, open: isOpen(item.id) }\n                    \"\n                  />\n                } @else {\n                  <gog-icon name=\"chevron-down\" />\n                }\n              </span>\n            }\n          </button>\n        </ng-template>\n\n        @if (headingLevel(); as level) {\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\n          </div>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\n        }\n\n        <div\n          [id]=\"uid + '-body-' + item.id\"\n          class=\"gog-accordion__body\"\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\n        >\n          <div class=\"gog-accordion__body-inner\">\n            @if (contentTpl(); as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\n            }\n          </div>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:var(--gog-accordion-skeleton-height);width:var(--gog-accordion-skeleton-width);border-radius:var(--gog-accordion-skeleton-radius);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer var(--gog-accordion-skeleton-duration) infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], openIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIds", required: false }] }, { type: i0.Output, args: ["openIdsChange"] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
 
-const GOG_CHECKABLE_CONTROL_PADDING = 'var(--control-checkbox-padding, 6px)';
+const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 6px)';
 const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
+    xsm: {
+        boxSize: 'var(--gog-control-checkbox-box-size-xsm, 12px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-xsm, 0.6875rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-xsm, 10px)',
+    },
     sm: {
-        boxSize: 'var(--control-checkbox-box-size-sm, 18px)',
-        labelSize: 'var(--control-checkbox-label-size-sm, 0.8125rem)',
-        indicatorSize: 'var(--control-checkbox-icon-size-sm, 12px)',
+        boxSize: 'var(--gog-control-checkbox-box-size-sm, 18px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-sm, 0.8125rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-sm, 12px)',
     },
     md: {
-        boxSize: 'var(--control-checkbox-box-size-md, 24px)',
-        labelSize: 'var(--control-checkbox-label-size-md, 0.9375rem)',
-        indicatorSize: 'var(--control-checkbox-icon-size-md, 14px)',
+        boxSize: 'var(--gog-control-checkbox-box-size-md, 24px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-md, 0.9375rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-md, 14px)',
     },
     lg: {
-        boxSize: 'var(--control-checkbox-box-size-lg, 32px)',
-        labelSize: 'var(--control-checkbox-label-size-lg, 1.0625rem)',
-        indicatorSize: 'var(--control-checkbox-icon-size-lg, 18px)',
+        boxSize: 'var(--gog-control-checkbox-box-size-lg, 32px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-lg, 1.0625rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-lg, 18px)',
+    },
+    slg: {
+        boxSize: 'var(--gog-control-checkbox-box-size-slg, 40px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-slg, 1.1875rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-slg, 22px)',
     },
 };
 
@@ -361,17 +332,21 @@ class CheckboxComponent {
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     checkIconTemplate = input(null, ...(ngDevMode ? [{ debugName: "checkIconTemplate" }] : /* istanbul ignore next */ []));
-    /** Two-way bindable checked state: `[(checked)]="signal"`. */
+    /**
+     * Two-way bindable checked state: `[(checked)]="signal"`.
+     * This is the same state Angular Forms drives via `writeValue`/`registerOnChange`
+     * when the component is used with `formControlName`/`[formControl]`/`ngModel`.
+     * Don't wire both a form directive AND `[(checked)]` to the same instance —
+     * pick one, otherwise you end up with two competing sources of truth.
+     */
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     controlSize = computed(() => GOG_CHECKABLE_CONTROL_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "controlSize" }] : /* istanbul ignore next */ []));
     boxSize = computed(() => this.controlSize().boxSize, ...(ngDevMode ? [{ debugName: "boxSize" }] : /* istanbul ignore next */ []));
     checkboxPadding = GOG_CHECKABLE_CONTROL_PADDING;
     labelSize = computed(() => this.controlSize().labelSize, ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
     iconSize = computed(() => this.controlSize().indicatorSize, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
-    onCheckedChange = () => { };
-    onTouched = () => { };
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     writeValue(val) {
         this.checked.set(val ?? false);
     }
@@ -398,6 +373,8 @@ class CheckboxComponent {
             return;
         this.onTouched();
     }
+    onCheckedChange = () => { };
+    onTouched = () => { };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "gog-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkIconTemplate: { classPropertyName: "checkIconTemplate", publicName: "checkIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "style.--gog-checkbox-box-size": "boxSize()", "style.--gog-checkbox-label-size": "labelSize()", "style.--gog-checkbox-icon-size": "iconSize()", "style.--gog-checkbox-padding": "checkboxPadding" } }, providers: [
             {
@@ -405,7 +382,7 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label class=\"gog-checkbox gog-contained-layout\" [class.gog-checkbox--disabled]=\"isDisabled()\">\n  <input\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span\n    class=\"gog-checkbox__box\"\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n  >\n    @if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    } @else if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label font-body\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{--gog-checkbox-gap: 10px;--gog-checkbox-border-color: var(--accent-dim);--gog-checkbox-bg: var(--surface-color);--gog-checkbox-checked-bg: var(--accent-color);--gog-checkbox-checked-border: var(--accent-color);--gog-checkbox-icon-color: var(--primary-color);--gog-checkbox-label-color: var(--muted-text-color);--gog-checkbox-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-checkbox-disabled-opacity: .4;display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding);position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding);left:var(--gog-checkbox-padding);width:var(--gog-checkbox-box-size, 24px);height:var(--gog-checkbox-box-size, 24px);margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, 24px);height:var(--gog-checkbox-box-size, 24px);box-sizing:border-box;border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-checkbox-border-color);border-radius:var(--radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color .15s ease,background-color .15s ease}.gog-checkbox__input:checked+.gog-checkbox__box,.gog-checkbox__input:indeterminate+.gog-checkbox__box,.gog-checkbox__box--checked{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, 14px);line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, 24px) * .45);height:var(--gog-checkbox-dash-height, 2px);border-radius:var(--gog-checkbox-dash-radius, 999px);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-size:var(--gog-checkbox-label-size, .9375rem);line-height:1.3;color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:3px solid var(--gog-checkbox-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -420,7 +397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<label class=\"gog-checkbox gog-contained-layout\" [class.gog-checkbox--disabled]=\"isDisabled()\">\n  <input\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span\n    class=\"gog-checkbox__box\"\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n  >\n    @if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    } @else if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label font-body\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{--gog-checkbox-gap: 10px;--gog-checkbox-border-color: var(--accent-dim);--gog-checkbox-bg: var(--surface-color);--gog-checkbox-checked-bg: var(--accent-color);--gog-checkbox-checked-border: var(--accent-color);--gog-checkbox-icon-color: var(--primary-color);--gog-checkbox-label-color: var(--muted-text-color);--gog-checkbox-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-checkbox-disabled-opacity: .4;display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding);position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding);left:var(--gog-checkbox-padding);width:var(--gog-checkbox-box-size, 24px);height:var(--gog-checkbox-box-size, 24px);margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, 24px);height:var(--gog-checkbox-box-size, 24px);box-sizing:border-box;border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-checkbox-border-color);border-radius:var(--radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color .15s ease,background-color .15s ease}.gog-checkbox__input:checked+.gog-checkbox__box,.gog-checkbox__input:indeterminate+.gog-checkbox__box,.gog-checkbox__box--checked{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, 14px);line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, 24px) * .45);height:var(--gog-checkbox-dash-height, 2px);border-radius:var(--gog-checkbox-dash-radius, 999px);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-size:var(--gog-checkbox-label-size, .9375rem);line-height:1.3;color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:3px solid var(--gog-checkbox-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"] }]
+                    ], template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIconTemplate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
@@ -438,11 +415,11 @@ class ConfirmationDialogComponent {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{ data.cancelText }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{ data.confirmText }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:12px;min-width:320px;max-width:440px;color:var(--text-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--muted-text-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "debounce", "loading"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n      data.cancelText\n    }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n      data.confirmText\n    }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirm-gap);min-width:var(--gog-confirm-min-width);max-width:var(--gog-confirm-max-width);color:var(--gog-confirm-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirm-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirm-actions-gap);margin-top:var(--gog-confirm-actions-offset)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-confirmation-dialog', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{ data.cancelText }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{ data.confirmText }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:12px;min-width:320px;max-width:440px;color:var(--text-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--muted-text-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"] }]
+            args: [{ selector: 'gog-confirmation-dialog', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n      data.cancelText\n    }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n      data.confirmText\n    }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirm-gap);min-width:var(--gog-confirm-min-width);max-width:var(--gog-confirm-max-width);color:var(--gog-confirm-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirm-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirm-actions-gap);margin-top:var(--gog-confirm-actions-offset)}\n"] }]
         }] });
 
 class DialogService {
@@ -470,7 +447,8 @@ class DialogService {
             resolve: (result) => resolveAfterClosed(result),
         };
         if (config.modal !== false && this.modalDialogCount === 0) {
-            this.focusedBeforeOpen = this.document.activeElement instanceof HTMLElement ? this.document.activeElement : null;
+            this.focusedBeforeOpen =
+                this.document.activeElement instanceof HTMLElement ? this.document.activeElement : null;
             this.lockBodyScroll();
         }
         if (config.modal !== false) {
@@ -596,14 +574,14 @@ class DialogComponent {
         return dialog.zIndex;
     }
     onBackdropPointerDown(event, dialog) {
-        if (!dialog.config.closable)
+        if (dialog.config.closable === false)
             return;
         if (event.target === event.currentTarget) {
             this.backdropPress.add(dialog.id);
         }
     }
     onBackdropPointerUp(event, dialog) {
-        if (!dialog.config.closable)
+        if (dialog.config.closable === false)
             return;
         const shouldClose = this.backdropPress.has(dialog.id) && event.target === event.currentTarget;
         this.backdropPress.delete(dialog.id);
@@ -665,7 +643,8 @@ class DialogComponent {
         return entry.id;
     }
     isDraggable(dialog) {
-        return dialog.config.draggable !== false && (dialog.config.title !== undefined || dialog.config.closable !== false);
+        return (dialog.config.draggable !== false &&
+            (dialog.config.title !== undefined || dialog.config.closable !== false));
     }
     get dialogDocument() {
         return this.host.nativeElement.ownerDocument;
@@ -689,11 +668,11 @@ class DialogComponent {
         return rect.width > 0 && rect.height > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n  <div\n    class=\"gog-dialog__backdrop\"\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n    [style.z-index]=\"panelZ(dialog)\"\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n  >\n    <div\n      #panel\n      class=\"gog-dialog__panel\"\n      [attr.data-dialog-id]=\"dialog.id\"\n      [style.--dropdown-z]=\"panelZ(dialog) + 10\"\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n      [style.width]=\"dialog.config.width ?? 'auto'\"\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n    >\n      @if (dialog.config.title || dialog.config.closable !== false) {\n        <div\n          class=\"gog-dialog__header\"\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n          (pointerdown)=\"startDrag($event, dialog)\"\n        >\n          @if (dialog.config.title) {\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title font-heading\">\n              {{ dialog.config.title }}\n            </h2>\n          }\n          @if (dialog.config.closable !== false) {\n            <button type=\"button\" class=\"gog-dialog__close gog-inline-center\" aria-label=\"Close dialog\" (click)=\"close(dialog)\">\n              <gog-icon\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\n              />\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"gog-dialog__body\">\n        <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);animation:gog-fade-in .15s ease}.gog-dialog__backdrop--modal{background:#0a0803b8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.gog-dialog__panel{--gog-dialog-border: var(--border-color);--gog-dialog-shadow: 0 24px 48px rgba(0, 0, 0, .5);--gog-dialog-offset-x: 0px;--gog-dialog-offset-y: 0px;display:flex;flex-direction:column;background:var(--surface-color);color:var(--text-color);border:1px solid var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:90vh;animation:gog-slide-in .2s ease;min-width:320px;border-radius:var(--radius);transform:translate3d(var(--gog-dialog-offset-x),var(--gog-dialog-offset-y),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;border-bottom:1px solid var(--border-color);gap:12px;flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--text-color)}.gog-dialog__close{justify-content:center;width:2rem;height:2rem;border:1px solid transparent;background:transparent;color:var(--muted-text-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:.875rem}.gog-dialog__close gog-icon{font-size:.875rem}.gog-dialog__close:hover{color:var(--text-color);border-color:var(--border-color);background:color-mix(in srgb,var(--hover-color) 70%,transparent)}.gog-dialog__close:focus-visible{outline:3px solid var(--accent-color);outline-offset:2px}.gog-dialog__body{padding:20px;overflow-y:auto;flex:1;max-height:calc(90vh - 60px)}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n  <div\n    class=\"gog-dialog__backdrop\"\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n    [style.z-index]=\"panelZ(dialog)\"\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n  >\n    <div\n      #panel\n      class=\"gog-dialog__panel\"\n      [attr.data-dialog-id]=\"dialog.id\"\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n      [style.width]=\"dialog.config.width ?? 'auto'\"\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n    >\n      @if (dialog.config.title || dialog.config.closable !== false) {\n        <div\n          class=\"gog-dialog__header\"\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n          (pointerdown)=\"startDrag($event, dialog)\"\n        >\n          @if (dialog.config.title) {\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\n              {{ dialog.config.title }}\n            </h2>\n          }\n          @if (dialog.config.closable !== false) {\n            <button\n              type=\"button\"\n              class=\"gog-dialog__close gog-inline-center\"\n              aria-label=\"Close dialog\"\n              (click)=\"close(dialog)\"\n            >\n              <gog-icon\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\n              />\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"gog-dialog__body\">\n        <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);overflow-y:auto;flex:1;max-height:var(--gog-dialog-body-max-height)}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n  <div\n    class=\"gog-dialog__backdrop\"\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n    [style.z-index]=\"panelZ(dialog)\"\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n  >\n    <div\n      #panel\n      class=\"gog-dialog__panel\"\n      [attr.data-dialog-id]=\"dialog.id\"\n      [style.--dropdown-z]=\"panelZ(dialog) + 10\"\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n      [style.width]=\"dialog.config.width ?? 'auto'\"\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n    >\n      @if (dialog.config.title || dialog.config.closable !== false) {\n        <div\n          class=\"gog-dialog__header\"\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n          (pointerdown)=\"startDrag($event, dialog)\"\n        >\n          @if (dialog.config.title) {\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title font-heading\">\n              {{ dialog.config.title }}\n            </h2>\n          }\n          @if (dialog.config.closable !== false) {\n            <button type=\"button\" class=\"gog-dialog__close gog-inline-center\" aria-label=\"Close dialog\" (click)=\"close(dialog)\">\n              <gog-icon\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\n              />\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"gog-dialog__body\">\n        <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);animation:gog-fade-in .15s ease}.gog-dialog__backdrop--modal{background:#0a0803b8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.gog-dialog__panel{--gog-dialog-border: var(--border-color);--gog-dialog-shadow: 0 24px 48px rgba(0, 0, 0, .5);--gog-dialog-offset-x: 0px;--gog-dialog-offset-y: 0px;display:flex;flex-direction:column;background:var(--surface-color);color:var(--text-color);border:1px solid var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:90vh;animation:gog-slide-in .2s ease;min-width:320px;border-radius:var(--radius);transform:translate3d(var(--gog-dialog-offset-x),var(--gog-dialog-offset-y),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;border-bottom:1px solid var(--border-color);gap:12px;flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--text-color)}.gog-dialog__close{justify-content:center;width:2rem;height:2rem;border:1px solid transparent;background:transparent;color:var(--muted-text-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:.875rem}.gog-dialog__close gog-icon{font-size:.875rem}.gog-dialog__close:hover{color:var(--text-color);border-color:var(--border-color);background:color-mix(in srgb,var(--hover-color) 70%,transparent)}.gog-dialog__close:focus-visible{outline:3px solid var(--accent-color);outline-offset:2px}.gog-dialog__body{padding:20px;overflow-y:auto;flex:1;max-height:calc(90vh - 60px)}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n  <div\n    class=\"gog-dialog__backdrop\"\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n    [style.z-index]=\"panelZ(dialog)\"\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n  >\n    <div\n      #panel\n      class=\"gog-dialog__panel\"\n      [attr.data-dialog-id]=\"dialog.id\"\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n      [style.width]=\"dialog.config.width ?? 'auto'\"\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n    >\n      @if (dialog.config.title || dialog.config.closable !== false) {\n        <div\n          class=\"gog-dialog__header\"\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n          (pointerdown)=\"startDrag($event, dialog)\"\n        >\n          @if (dialog.config.title) {\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\n              {{ dialog.config.title }}\n            </h2>\n          }\n          @if (dialog.config.closable !== false) {\n            <button\n              type=\"button\"\n              class=\"gog-dialog__close gog-inline-center\"\n              aria-label=\"Close dialog\"\n              (click)=\"close(dialog)\"\n            >\n              <gog-icon\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\n              />\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"gog-dialog__body\">\n        <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);overflow-y:auto;flex:1;max-height:var(--gog-dialog-body-max-height)}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToastComponent {
@@ -808,10 +787,10 @@ class ToastComponent {
         }
     }
     prefersReducedMotion() {
-        return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "true" } }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"gog-toast\"\n  [class.gog-toast--paused]=\"isPaused()\"\n  [class.gog-toast--queued]=\"!isFront()\"\n  [class.gog-toast--success]=\"toast().type === 'success'\"\n  [class.gog-toast--error]=\"toast().type === 'error'\"\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\n  [class.gog-toast--info]=\"toast().type === 'info'\"\n  [class.gog-toast--visible]=\"visible()\"\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\n  (mouseenter)=\"pauseAutoDismiss()\"\n  (mouseleave)=\"resumeAutoDismiss()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  <div class=\"gog-toast__content\">\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n    </span>\n    <div class=\"gog-toast__main\">\n      <span class=\"gog-toast__message font-body\">{{ toast().message }}</span>\n      @if (hasActions()) {\n        <div class=\"gog-toast__actions\">\n          @for (action of toast().actions; track action.label) {\n            <gog-button\n              class=\"gog-toast__action\"\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (gogClick)=\"runAction(action)\"\n            >\n              @if (action.iconName || action.iconTemplate) {\n                <gog-icon [template]=\"action.iconTemplate ?? null\" [name]=\"action.iconName ?? 'check'\" />\n              }\n              {{ action.label }}\n            </gog-button>\n          }\n        </div>\n      }\n    </div>\n    <gog-button\n      class=\"gog-toast__close\"\n      variant=\"ghost\"\n      size=\"sm\"\n      type=\"button\"\n      aria-label=\"Close toast\"\n      (gogClick)=\"close()\"\n    >\n      <gog-icon name=\"close\" />\n    </gog-button>\n  </div>\n  @if (!toast().isSticky) {\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-bg: var(--surface-color);--toast-border: var(--accent-color);--toast-color: var(--text-color);--toast-icon-color: var(--accent-color);--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), 6);--gog-toast-stack-peek: 14px;--gog-toast-stack-scale-step: .06;--gog-toast-stack-expanded-gap: 84px;--gog-toast-stack-min-opacity: .4;--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)));--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * .18)) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(100 - var(--toast-stack-index, 0));display:block;padding:12px 14px;background:var(--toast-bg);border-left:4px solid var(--toast-border);color:var(--toast-color);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity .25s ease,transform .25s ease}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--toast-border: var(--success-color);--toast-icon-color: var(--success-color)}.gog-toast--error{--toast-border: var(--danger-color);--toast-icon-color: var(--danger-color)}.gog-toast--warning{--toast-border: var(--accent-bright);--toast-icon-color: var(--accent-bright)}.gog-toast--info{--toast-border: var(--accent-color);--toast-icon-color: var(--accent-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:1rem;line-height:1.4;flex-shrink:0}.gog-toast__icon gog-icon{font-size:1rem}.gog-toast__content{display:flex;align-items:flex-start;gap:10px}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0}.gog-toast__message{flex:1;font-size:var(--text-sm);line-height:1.5}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:6px}.gog-toast__action{--gog-btn-padding: .25rem .5rem;--gog-btn-font-size: .75rem}.gog-toast__action gog-icon{font-size:.75rem}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: .125rem .25rem;--gog-btn-font-size: .75rem}.gog-toast__close gog-icon{font-size:.75rem}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:3px;background:color-mix(in srgb,var(--toast-progress-color) 30%,transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "debounce", "loading"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "true" } }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"gog-toast\"\n  [class.gog-toast--paused]=\"isPaused()\"\n  [class.gog-toast--queued]=\"!isFront()\"\n  [class.gog-toast--success]=\"toast().type === 'success'\"\n  [class.gog-toast--error]=\"toast().type === 'error'\"\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\n  [class.gog-toast--info]=\"toast().type === 'info'\"\n  [class.gog-toast--visible]=\"visible()\"\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\n  (mouseenter)=\"pauseAutoDismiss()\"\n  (mouseleave)=\"resumeAutoDismiss()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  <div class=\"gog-toast__content\">\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n    </span>\n    <div class=\"gog-toast__main\">\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\n      @if (hasActions()) {\n        <div class=\"gog-toast__actions\">\n          @for (action of toast().actions; track action.label) {\n            <gog-button\n              class=\"gog-toast__action\"\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (gogClick)=\"runAction(action)\"\n            >\n              @if (action.iconName || action.iconTemplate) {\n                <gog-icon\n                  [template]=\"action.iconTemplate ?? null\"\n                  [name]=\"action.iconName ?? 'check'\"\n                />\n              }\n              {{ action.label }}\n            </gog-button>\n          }\n        </div>\n      }\n    </div>\n    <gog-button\n      class=\"gog-toast__close\"\n      variant=\"ghost\"\n      size=\"sm\"\n      type=\"button\"\n      aria-label=\"Close toast\"\n      (gogClick)=\"close()\"\n    >\n      <gog-icon name=\"close\" />\n    </gog-button>\n  </div>\n  @if (!toast().isSticky) {\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
@@ -819,7 +798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.role]': 'ariaRole()',
                         '[attr.aria-live]': 'ariaLive()',
                         '[attr.aria-atomic]': 'true',
-                    }, template: "<div\n  class=\"gog-toast\"\n  [class.gog-toast--paused]=\"isPaused()\"\n  [class.gog-toast--queued]=\"!isFront()\"\n  [class.gog-toast--success]=\"toast().type === 'success'\"\n  [class.gog-toast--error]=\"toast().type === 'error'\"\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\n  [class.gog-toast--info]=\"toast().type === 'info'\"\n  [class.gog-toast--visible]=\"visible()\"\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\n  (mouseenter)=\"pauseAutoDismiss()\"\n  (mouseleave)=\"resumeAutoDismiss()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  <div class=\"gog-toast__content\">\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n    </span>\n    <div class=\"gog-toast__main\">\n      <span class=\"gog-toast__message font-body\">{{ toast().message }}</span>\n      @if (hasActions()) {\n        <div class=\"gog-toast__actions\">\n          @for (action of toast().actions; track action.label) {\n            <gog-button\n              class=\"gog-toast__action\"\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (gogClick)=\"runAction(action)\"\n            >\n              @if (action.iconName || action.iconTemplate) {\n                <gog-icon [template]=\"action.iconTemplate ?? null\" [name]=\"action.iconName ?? 'check'\" />\n              }\n              {{ action.label }}\n            </gog-button>\n          }\n        </div>\n      }\n    </div>\n    <gog-button\n      class=\"gog-toast__close\"\n      variant=\"ghost\"\n      size=\"sm\"\n      type=\"button\"\n      aria-label=\"Close toast\"\n      (gogClick)=\"close()\"\n    >\n      <gog-icon name=\"close\" />\n    </gog-button>\n  </div>\n  @if (!toast().isSticky) {\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-bg: var(--surface-color);--toast-border: var(--accent-color);--toast-color: var(--text-color);--toast-icon-color: var(--accent-color);--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), 6);--gog-toast-stack-peek: 14px;--gog-toast-stack-scale-step: .06;--gog-toast-stack-expanded-gap: 84px;--gog-toast-stack-min-opacity: .4;--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)));--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * .18)) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(100 - var(--toast-stack-index, 0));display:block;padding:12px 14px;background:var(--toast-bg);border-left:4px solid var(--toast-border);color:var(--toast-color);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity .25s ease,transform .25s ease}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--toast-border: var(--success-color);--toast-icon-color: var(--success-color)}.gog-toast--error{--toast-border: var(--danger-color);--toast-icon-color: var(--danger-color)}.gog-toast--warning{--toast-border: var(--accent-bright);--toast-icon-color: var(--accent-bright)}.gog-toast--info{--toast-border: var(--accent-color);--toast-icon-color: var(--accent-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:1rem;line-height:1.4;flex-shrink:0}.gog-toast__icon gog-icon{font-size:1rem}.gog-toast__content{display:flex;align-items:flex-start;gap:10px}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0}.gog-toast__message{flex:1;font-size:var(--text-sm);line-height:1.5}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:6px}.gog-toast__action{--gog-btn-padding: .25rem .5rem;--gog-btn-font-size: .75rem}.gog-toast__action gog-icon{font-size:.75rem}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: .125rem .25rem;--gog-btn-font-size: .75rem}.gog-toast__close gog-icon{font-size:.75rem}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:3px;background:color-mix(in srgb,var(--toast-progress-color) 30%,transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"] }]
+                    }, template: "<div\n  class=\"gog-toast\"\n  [class.gog-toast--paused]=\"isPaused()\"\n  [class.gog-toast--queued]=\"!isFront()\"\n  [class.gog-toast--success]=\"toast().type === 'success'\"\n  [class.gog-toast--error]=\"toast().type === 'error'\"\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\n  [class.gog-toast--info]=\"toast().type === 'info'\"\n  [class.gog-toast--visible]=\"visible()\"\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\n  (mouseenter)=\"pauseAutoDismiss()\"\n  (mouseleave)=\"resumeAutoDismiss()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  <div class=\"gog-toast__content\">\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n    </span>\n    <div class=\"gog-toast__main\">\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\n      @if (hasActions()) {\n        <div class=\"gog-toast__actions\">\n          @for (action of toast().actions; track action.label) {\n            <gog-button\n              class=\"gog-toast__action\"\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (gogClick)=\"runAction(action)\"\n            >\n              @if (action.iconName || action.iconTemplate) {\n                <gog-icon\n                  [template]=\"action.iconTemplate ?? null\"\n                  [name]=\"action.iconName ?? 'check'\"\n                />\n              }\n              {{ action.label }}\n            </gog-button>\n          }\n        </div>\n      }\n    </div>\n    <gog-button\n      class=\"gog-toast__close\"\n      variant=\"ghost\"\n      size=\"sm\"\n      type=\"button\"\n      aria-label=\"Close toast\"\n      (gogClick)=\"close()\"\n    >\n      <gog-icon name=\"close\" />\n    </gog-button>\n  </div>\n  @if (!toast().isSticky) {\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], isFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFront", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], progressEl: [{ type: i0.ViewChild, args: ['progress', { isSignal: true }] }] } });
 
 const DEFAULT_DURATION = 4000;
@@ -907,8 +886,17 @@ class ToastService {
         // Actions carry closures that can't be compared by value, so only their
         // label/icon "shape" is used — this lets repeated calls with equivalent
         // actions (e.g. a fresh "Undo" callback each time) still dedupe correctly.
-        const actionsSignature = actions.map((action) => `${action.label}:${action.iconName ?? ''}`).join(',');
-        return [message, type, iconName, position, iconTemplate ? 'template' : 'default', actionsSignature].join('|');
+        const actionsSignature = actions
+            .map((action) => `${action.label}:${action.iconName ?? ''}`)
+            .join(',');
+        return [
+            message,
+            type,
+            iconName,
+            position,
+            iconTemplate ? 'template' : 'default',
+            actionsSignature,
+        ].join('|');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastService, providedIn: 'root' });
@@ -951,6 +939,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'gog-toast-container', imports: [ToastComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of groups(); track trackGroup($index, group)) {\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\n      <gog-toast\n        [toast]=\"toast\"\n        [isFront]=\"toastIndex === 0\"\n        [class.slide-left]=\"isLeft(group.position)\"\n        [style.--toast-stack-index]=\"toastIndex\"\n        (dismissed)=\"dismiss($event)\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"] }]
         }], propDecorators: { maxVisiblePerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePerPosition", required: false }] }] } });
 
+/**
+ * Shared error-visibility state for the library's form controls. A plain class rather than
+ * a base class or directive so it drops into components that can't share a base class
+ * (`gog-inputfield`, `gog-slider`) as well as ones that already do (`GogDropdownBase`).
+ * Each consumer owns its own instance and wires `check()` into its own `ngDoCheck`.
+ */
+class GogErrorState {
+    errorMessage;
+    errorDisplay;
+    ngControl;
+    controlTouched = signal(false, ...(ngDevMode ? [{ debugName: "controlTouched" }] : /* istanbul ignore next */ []));
+    controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : /* istanbul ignore next */ []));
+    constructor(errorMessage, errorDisplay, ngControl) {
+        this.errorMessage = errorMessage;
+        this.errorDisplay = errorDisplay;
+        this.ngControl = ngControl;
+    }
+    hasError = computed(() => {
+        if (this.errorDisplay() === 'auto' && this.ngControl) {
+            return this.controlTouched() && this.controlInvalid();
+        }
+        return !!this.errorMessage();
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    visibleError = computed(() => (this.hasError() ? this.errorMessage() : ''), ...(ngDevMode ? [{ debugName: "visibleError" }] : /* istanbul ignore next */ []));
+    /**
+     * `NgControl` exposes validity as plain properties, and has no change notification for
+     * `touched` at all — `statusChanges` fires only on validity transitions, never on
+     * `markAsTouched()` — while its `control` does not exist yet during construction, so
+     * subscribing early would miss it regardless. Mirroring on each check sidesteps both;
+     * re-setting a signal to its current value notifies nothing, so the common case costs two
+     * comparisons.
+     */
+    check() {
+        const control = this.ngControl?.control;
+        if (!control)
+            return;
+        this.controlTouched.set(control.touched);
+        this.controlInvalid.set(control.invalid);
+    }
+}
+
 class InputfieldComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -958,6 +987,8 @@ class InputfieldComponent {
     /** Defaults to 'current-password' for password fields, 'off' otherwise */
     autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
+    errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -978,18 +1009,46 @@ class InputfieldComponent {
     iconStartLabel = input('', ...(ngDevMode ? [{ debugName: "iconStartLabel" }] : /* istanbul ignore next */ []));
     /** aria-label for the end icon button (required when iconEndFn is set) */
     iconEndLabel = input('', ...(ngDevMode ? [{ debugName: "iconEndLabel" }] : /* istanbul ignore next */ []));
+    /** aria-label for the reveal-password button, shown when `type` is `'password'` */
+    showPasswordLabel = input('Show password', ...(ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []));
+    /** aria-label for the hide-password button, shown once the password is revealed */
+    hidePasswordLabel = input('Hide password', ...(ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []));
     /** Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`. */
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ngControl = inject(NgControl, { optional: true, self: true });
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    errorState = new GogErrorState(this.errorMessage, this.errorDisplay, this.ngControl);
+    passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isPasswordField = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordField" }] : /* istanbul ignore next */ []));
+    effectiveType = computed(() => this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
     effectiveAutocomplete = computed(() => this.autocomplete() || (this.type() === 'password' ? 'current-password' : 'off'), ...(ngDevMode ? [{ debugName: "effectiveAutocomplete" }] : /* istanbul ignore next */ []));
-    hasError = computed(() => !!this.errorMessage() && !this.value(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    hasError = this.errorState.hasError;
+    visibleError = this.errorState.visibleError;
     hasIconStart = computed(() => !!this.iconStartTemplate() || !!this.iconStart(), ...(ngDevMode ? [{ debugName: "hasIconStart" }] : /* istanbul ignore next */ []));
-    hasIconEnd = computed(() => !!this.iconEndTemplate() || !!this.iconEnd(), ...(ngDevMode ? [{ debugName: "hasIconEnd" }] : /* istanbul ignore next */ []));
     hasIconStartAction = computed(() => !!this.iconStartFn(), ...(ngDevMode ? [{ debugName: "hasIconStartAction" }] : /* istanbul ignore next */ []));
-    hasIconEndAction = computed(() => !!this.iconEndFn(), ...(ngDevMode ? [{ debugName: "hasIconEndAction" }] : /* istanbul ignore next */ []));
+    /** For password fields the trailing icon is always the built-in show/hide toggle. */
+    effectiveIconEnd = computed(() => this.isPasswordField() ? (this.passwordVisible() ? 'eye-off' : 'eye') : this.iconEnd(), ...(ngDevMode ? [{ debugName: "effectiveIconEnd" }] : /* istanbul ignore next */ []));
+    effectiveIconEndLabel = computed(() => this.isPasswordField()
+        ? this.passwordVisible()
+            ? this.hidePasswordLabel()
+            : this.showPasswordLabel()
+        : this.iconEndLabel(), ...(ngDevMode ? [{ debugName: "effectiveIconEndLabel" }] : /* istanbul ignore next */ []));
+    hasIconEnd = computed(() => !!this.iconEndTemplate() || !!this.effectiveIconEnd(), ...(ngDevMode ? [{ debugName: "hasIconEnd" }] : /* istanbul ignore next */ []));
+    hasIconEndAction = computed(() => this.isPasswordField() || !!this.iconEndFn(), ...(ngDevMode ? [{ debugName: "hasIconEndAction" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     _onTouched = () => { };
+    constructor() {
+        // Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
+        // available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
+        // injecting NgControl would be a dependency cycle.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngDoCheck() {
+        this.errorState.check();
+    }
     writeValue(val) {
         this.value.set(val ?? '');
     }
@@ -1006,6 +1065,10 @@ class InputfieldComponent {
         this.iconStartFn()?.();
     }
     onIconEndClick() {
+        if (this.isPasswordField()) {
+            this.passwordVisible.update((visible) => !visible);
+            return;
+        }
         this.iconEndFn()?.();
     }
     onInput(event) {
@@ -1017,24 +1080,12 @@ class InputfieldComponent {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InputfieldComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label font-heading\" [attr.for]=\"inputId() || null\">{{\n        label()\n      }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field font-body\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"type()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"iconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"iconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"iconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (hasError() && errorMessage()) {\n    <span\n      class=\"gog-input__error font-body\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n    >{{ errorMessage() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{--gog-input-gap: 4px;--gog-input-label-color: var(--accent-color);--gog-input-field-bg: var(--surface-color);--gog-input-field-border: var(--accent-dim);--gog-input-field-color: var(--text-color);--gog-input-placeholder-color: var(--muted-text-color);--gog-input-focus-border: var(--accent-color);--gog-input-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-input-error-color: var(--danger-color);--gog-input-icon-color: var(--muted-text-color);--gog-input-icon-hover-color: var(--accent-color);display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-size:var(--text-sm);color:var(--gog-input-label-color);text-transform:uppercase;letter-spacing:1px}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{--gog-input-padding-y: var(--control-padding-y, 10px);--gog-input-pl: var(--control-padding-x, 14px);--gog-input-pr: var(--control-padding-x, 14px);--gog-input-font: var(--text-md);width:100%;padding:var(--gog-input-padding-y) var(--gog-input-pr) var(--gog-input-padding-y) var(--gog-input-pl);font-size:var(--gog-input-font);color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-input-field-border);border-radius:var(--radius);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.gog-input-wrapper--sm .gog-input__field{--gog-input-padding-y: 6px;--gog-input-pl: 10px;--gog-input-pr: 10px;--gog-input-font: var(--text-sm)}.gog-input-wrapper--lg .gog-input__field{--gog-input-padding-y: 14px;--gog-input-pl: 18px;--gog-input-pr: 18px;--gog-input-font: var(--text-lg)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 36px}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 36px}.gog-input-wrapper--sm.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 30px}.gog-input-wrapper--sm.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 30px}.gog-input-wrapper--lg.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 44px}.gog-input-wrapper--lg.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 44px}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:0 0 8px var(--gog-input-focus-ring)}.gog-input__field:focus-visible{outline:3px solid var(--gog-input-focus-border);outline-offset:2px}.gog-input__field:disabled{opacity:.4;cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--text-md);pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius, 4px);color:var(--gog-input-icon-color);transition:color .15s ease}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:2px solid var(--gog-input-icon-hover-color);outline-offset:2px}.gog-input__icon--start{left:var(--control-icon-offset, 10px)}.gog-input__icon--end{right:var(--control-icon-offset, 10px)}.gog-input-wrapper--sm .gog-input__icon{font-size:var(--text-sm)}.gog-input-wrapper--sm .gog-input__icon--start{left:8px}.gog-input-wrapper--sm .gog-input__icon--end{right:8px}.gog-input-wrapper--lg .gog-input__icon{font-size:var(--text-lg)}.gog-input-wrapper--lg .gog-input__icon--start{left:14px}.gog-input-wrapper--lg .gog-input__icon--end{right:14px}.gog-input__error{font-size:var(--text-xs, 12px);color:var(--gog-input-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"effectiveType()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (visibleError()) {\n    <span\n      class=\"gog-input__error\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n      >{{ visibleError() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-inputfield', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputfieldComponent),
-                            multi: true,
-                        },
-                    ], template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label font-heading\" [attr.for]=\"inputId() || null\">{{\n        label()\n      }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field font-body\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"type()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"iconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"iconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"iconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (hasError() && errorMessage()) {\n    <span\n      class=\"gog-input__error font-body\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n    >{{ errorMessage() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{--gog-input-gap: 4px;--gog-input-label-color: var(--accent-color);--gog-input-field-bg: var(--surface-color);--gog-input-field-border: var(--accent-dim);--gog-input-field-color: var(--text-color);--gog-input-placeholder-color: var(--muted-text-color);--gog-input-focus-border: var(--accent-color);--gog-input-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-input-error-color: var(--danger-color);--gog-input-icon-color: var(--muted-text-color);--gog-input-icon-hover-color: var(--accent-color);display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-size:var(--text-sm);color:var(--gog-input-label-color);text-transform:uppercase;letter-spacing:1px}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{--gog-input-padding-y: var(--control-padding-y, 10px);--gog-input-pl: var(--control-padding-x, 14px);--gog-input-pr: var(--control-padding-x, 14px);--gog-input-font: var(--text-md);width:100%;padding:var(--gog-input-padding-y) var(--gog-input-pr) var(--gog-input-padding-y) var(--gog-input-pl);font-size:var(--gog-input-font);color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-input-field-border);border-radius:var(--radius);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.gog-input-wrapper--sm .gog-input__field{--gog-input-padding-y: 6px;--gog-input-pl: 10px;--gog-input-pr: 10px;--gog-input-font: var(--text-sm)}.gog-input-wrapper--lg .gog-input__field{--gog-input-padding-y: 14px;--gog-input-pl: 18px;--gog-input-pr: 18px;--gog-input-font: var(--text-lg)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 36px}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 36px}.gog-input-wrapper--sm.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 30px}.gog-input-wrapper--sm.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 30px}.gog-input-wrapper--lg.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: 44px}.gog-input-wrapper--lg.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: 44px}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:0 0 8px var(--gog-input-focus-ring)}.gog-input__field:focus-visible{outline:3px solid var(--gog-input-focus-border);outline-offset:2px}.gog-input__field:disabled{opacity:.4;cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--text-md);pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius, 4px);color:var(--gog-input-icon-color);transition:color .15s ease}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:2px solid var(--gog-input-icon-hover-color);outline-offset:2px}.gog-input__icon--start{left:var(--control-icon-offset, 10px)}.gog-input__icon--end{right:var(--control-icon-offset, 10px)}.gog-input-wrapper--sm .gog-input__icon{font-size:var(--text-sm)}.gog-input-wrapper--sm .gog-input__icon--start{left:8px}.gog-input-wrapper--sm .gog-input__icon--end{right:8px}.gog-input-wrapper--lg .gog-input__icon{font-size:var(--text-lg)}.gog-input-wrapper--lg .gog-input__icon--start{left:14px}.gog-input-wrapper--lg .gog-input__icon--end{right:14px}.gog-input__error{font-size:var(--text-xs, 12px);color:var(--gog-input-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+            args: [{ selector: 'gog-inputfield', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"effectiveType()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (visibleError()) {\n    <span\n      class=\"gog-input__error\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n      >{{ visibleError() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class ChipComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -1055,6 +1106,7 @@ class ChipComponent {
         `gog-chip--${this.shape()}`,
         this.removable() ? 'gog-chip--removable' : null,
         this.disabled() ? 'gog-chip--disabled' : 'gog-chip--interactive',
+        this.clickable() ? 'gog-chip--clickable' : null,
         this.avatarUrl() ? 'gog-chip--has-avatar' : null,
         this.iconName() ? 'gog-chip--has-icon' : null,
     ]
@@ -1076,18 +1128,16 @@ class ChipComponent {
     }
     onRemoveClick(event) {
         event.stopPropagation();
-        if (this.disabled())
-            return;
         this.gogRemove.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\n  class=\"gog-chip__surface\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.role]=\"isInteractive() ? 'button' : null\"\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n  (click)=\"onChipClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (avatarUrl()) {\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n  }\n\n  @if (iconName()) {\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n  }\n\n  <span class=\"gog-chip__content\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (removable()) {\n    <button\n      class=\"gog-chip__remove\"\n      type=\"button\"\n      [attr.aria-label]=\"removeAriaLabel()\"\n      [disabled]=\"disabled()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gog-icon name=\"close\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{--gog-chip-bg: color-mix(in srgb, var(--surface-color) 88%, var(--hover-color));--gog-chip-border: var(--border-color);--gog-chip-color: var(--text-color);--gog-chip-font-size: .875rem;--gog-chip-padding-block: .4rem;--gog-chip-padding-inline: .75rem;--gog-chip-gap: .5rem;--gog-chip-radius: max(var(--radius), 2px);--gog-chip-avatar-size: 1.25rem;--gog-chip-icon-size: .875rem;--gog-chip-remove-size: 1rem;--gog-chip-remove-color: var(--muted-text-color);display:inline-flex;align-items:center;gap:var(--gog-chip-gap);box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block) var(--gog-chip-padding-inline);border:1px solid var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-size:var(--gog-chip-font-size);font-weight:500;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:2px solid var(--gog-chip-border);outline-offset:2px}.gog-chip__surface:hover:not([aria-disabled=true]){background-color:color-mix(in srgb,var(--hover-color) 45%,var(--surface-color))}.gog-chip__surface[aria-disabled=true]{opacity:.55;pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.gog-chip__avatar{width:var(--gog-chip-avatar-size);height:var(--gog-chip-avatar-size);border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size)}.gog-chip__remove{display:inline-grid;place-items:center;width:var(--gog-chip-remove-size);height:var(--gog-chip-remove-size);padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--text-color)}.gog-chip__remove:focus-visible{outline:2px solid var(--gog-chip-border);outline-offset:2px}.gog-chip__remove:disabled{cursor:default}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-font-size: .75rem;--gog-chip-padding-block: .3rem;--gog-chip-padding-inline: .5rem;--gog-chip-gap: .375rem;--gog-chip-avatar-size: 1rem;--gog-chip-icon-size: .75rem;--gog-chip-remove-size: .875rem}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-font-size: .875rem;--gog-chip-padding-block: .45rem;--gog-chip-padding-inline: .75rem;--gog-chip-gap: .5rem;--gog-chip-avatar-size: 1.25rem;--gog-chip-icon-size: .875rem;--gog-chip-remove-size: 1rem}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-font-size: 1rem;--gog-chip-padding-block: .6rem;--gog-chip-padding-inline: .875rem;--gog-chip-gap: .625rem;--gog-chip-avatar-size: 1.5rem;--gog-chip-icon-size: 1rem;--gog-chip-remove-size: 1.125rem}:host(.gog-chip--pill) .gog-chip__surface{--gog-chip-radius: 9999px}:host(.gog-chip--rounded) .gog-chip__surface{--gog-chip-radius: max(var(--radius), 2px)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline) * .9)}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline) * .85)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\n  class=\"gog-chip__surface\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.role]=\"isInteractive() ? 'button' : null\"\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n  (click)=\"onChipClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (avatarUrl()) {\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n  }\n\n  @if (iconName()) {\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n  }\n\n  <span class=\"gog-chip__content\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (removable() && !disabled()) {\n    <button\n      class=\"gog-chip__remove\"\n      type=\"button\"\n      [attr.aria-label]=\"removeAriaLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gog-icon name=\"close\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-chip', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div\n  class=\"gog-chip__surface\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.role]=\"isInteractive() ? 'button' : null\"\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n  (click)=\"onChipClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (avatarUrl()) {\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n  }\n\n  @if (iconName()) {\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n  }\n\n  <span class=\"gog-chip__content\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (removable()) {\n    <button\n      class=\"gog-chip__remove\"\n      type=\"button\"\n      [attr.aria-label]=\"removeAriaLabel()\"\n      [disabled]=\"disabled()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gog-icon name=\"close\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{--gog-chip-bg: color-mix(in srgb, var(--surface-color) 88%, var(--hover-color));--gog-chip-border: var(--border-color);--gog-chip-color: var(--text-color);--gog-chip-font-size: .875rem;--gog-chip-padding-block: .4rem;--gog-chip-padding-inline: .75rem;--gog-chip-gap: .5rem;--gog-chip-radius: max(var(--radius), 2px);--gog-chip-avatar-size: 1.25rem;--gog-chip-icon-size: .875rem;--gog-chip-remove-size: 1rem;--gog-chip-remove-color: var(--muted-text-color);display:inline-flex;align-items:center;gap:var(--gog-chip-gap);box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block) var(--gog-chip-padding-inline);border:1px solid var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-size:var(--gog-chip-font-size);font-weight:500;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:2px solid var(--gog-chip-border);outline-offset:2px}.gog-chip__surface:hover:not([aria-disabled=true]){background-color:color-mix(in srgb,var(--hover-color) 45%,var(--surface-color))}.gog-chip__surface[aria-disabled=true]{opacity:.55;pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.gog-chip__avatar{width:var(--gog-chip-avatar-size);height:var(--gog-chip-avatar-size);border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size)}.gog-chip__remove{display:inline-grid;place-items:center;width:var(--gog-chip-remove-size);height:var(--gog-chip-remove-size);padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--text-color)}.gog-chip__remove:focus-visible{outline:2px solid var(--gog-chip-border);outline-offset:2px}.gog-chip__remove:disabled{cursor:default}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-font-size: .75rem;--gog-chip-padding-block: .3rem;--gog-chip-padding-inline: .5rem;--gog-chip-gap: .375rem;--gog-chip-avatar-size: 1rem;--gog-chip-icon-size: .75rem;--gog-chip-remove-size: .875rem}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-font-size: .875rem;--gog-chip-padding-block: .45rem;--gog-chip-padding-inline: .75rem;--gog-chip-gap: .5rem;--gog-chip-avatar-size: 1.25rem;--gog-chip-icon-size: .875rem;--gog-chip-remove-size: 1rem}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-font-size: 1rem;--gog-chip-padding-block: .6rem;--gog-chip-padding-inline: .875rem;--gog-chip-gap: .625rem;--gog-chip-avatar-size: 1.5rem;--gog-chip-icon-size: 1rem;--gog-chip-remove-size: 1.125rem}:host(.gog-chip--pill) .gog-chip__surface{--gog-chip-radius: 9999px}:host(.gog-chip--rounded) .gog-chip__surface{--gog-chip-radius: max(var(--radius), 2px)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline) * .9)}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline) * .85)}\n"] }]
+                    }, template: "<div\n  class=\"gog-chip__surface\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.role]=\"isInteractive() ? 'button' : null\"\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n  (click)=\"onChipClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (avatarUrl()) {\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n  }\n\n  @if (iconName()) {\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n  }\n\n  <span class=\"gog-chip__content\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (removable() && !disabled()) {\n    <button\n      class=\"gog-chip__remove\"\n      type=\"button\"\n      [attr.aria-label]=\"removeAriaLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gog-icon name=\"close\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
 
 class TagComponent {
@@ -1097,16 +1147,84 @@ class TagComponent {
     iconName = input(null, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
     iconTemplate = input(null, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
     hasIcon = computed(() => this.iconTemplate() !== null || this.iconName() !== null, ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => [
+        'gog-tag',
+        `gog-tag--${this.variant()}`,
+        `gog-tag--${this.size()}`,
+        `gog-tag--${this.shape()}`,
+        this.hasIcon() ? 'gog-tag--has-icon' : null,
+    ]
+        .filter((className) => className !== null)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagComponent, isStandalone: true, selector: "gog-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"gog-tag gog-tag--\" + variant() + \" gog-tag--\" + size() + \" gog-tag--\" + shape() + (hasIcon() ? \" gog-tag--has-icon\" : \"\")" } }, ngImport: i0, template: "@if (hasIcon()) {\n  <gog-icon\n    class=\"gog-tag__icon\"\n    [ariaHidden]=\"true\"\n    [name]=\"iconName() ?? 'info'\"\n    [template]=\"iconTemplate()\"\n  />\n}\n\n<span class=\"gog-tag__content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-variant-color: var(--info-color, var(--muted-text-color));--gog-tag-bg: color-mix(in srgb, var(--gog-tag-variant-color) 10%, var(--surface-color));--gog-tag-border: var(--gog-tag-variant-color);--gog-tag-color: color-mix(in srgb, var(--gog-tag-variant-color) 82%, black);--gog-tag-font-size: .875rem;--gog-tag-padding-block: .375rem;--gog-tag-padding-inline: .75rem;--gog-tag-gap: .375rem;--gog-tag-radius: max(var(--radius), 2px);--gog-tag-icon-size: .875rem;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block) var(--gog-tag-padding-inline);border:1px solid var(--gog-tag-border);border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg);box-shadow:inset 0 0 0 1px var(--gog-tag-border);color:var(--gog-tag-color);font-size:var(--gog-tag-font-size);font-weight:600;line-height:1;white-space:nowrap;gap:var(--gog-tag-gap)}:host(.gog-tag--success){--gog-tag-variant-color: var(--success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--info-color)}:host(.gog-tag--sm){--gog-tag-font-size: .75rem;--gog-tag-padding-block: .25rem;--gog-tag-padding-inline: .5rem;--gog-tag-gap: .25rem;--gog-tag-icon-size: .75rem}:host(.gog-tag--md){--gog-tag-font-size: .875rem;--gog-tag-padding-block: .375rem;--gog-tag-padding-inline: .75rem;--gog-tag-gap: .375rem;--gog-tag-icon-size: .875rem}:host(.gog-tag--lg){--gog-tag-font-size: 1rem;--gog-tag-padding-block: .5rem;--gog-tag-padding-inline: .875rem;--gog-tag-gap: .5rem;--gog-tag-icon-size: 1rem}:host(.gog-tag--rounded){--gog-tag-radius: max(var(--radius), 2px)}:host(.gog-tag--pill){--gog-tag-radius: var(--gog-tag-pill-radius, 9999px)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagComponent, isStandalone: true, selector: "gog-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (hasIcon()) {\n  <gog-icon\n    class=\"gog-tag__icon\"\n    [ariaHidden]=\"true\"\n    [name]=\"iconName() ?? 'info'\"\n    [template]=\"iconTemplate()\"\n  />\n}\n\n<span class=\"gog-tag__content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-resolved-color: var( --gog-tag-accent, var(--gog-tag-variant-color, var(--gog-tag-default-color)) );display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block, var(--gog-tag-size-padding-block, var(--gog-tag-md-padding-block))) var(--gog-tag-padding-inline, var(--gog-tag-size-padding-inline, var(--gog-tag-md-padding-inline)));border:var(--gog-tag-border-width) var(--gog-tag-border-style) var(--gog-tag-border, var(--gog-tag-resolved-color));border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-bg-mix), var(--gog-tag-bg-base)));box-shadow:inset 0 0 0 var(--gog-tag-inner-border-width) var(--gog-tag-border, var(--gog-tag-resolved-color));color:var(--gog-tag-color, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-color-mix), var(--gog-tag-color-base)));font-family:var(--gog-tag-font-family);font-size:var(--gog-tag-font-size, var(--gog-tag-size-font-size, var(--gog-tag-md-font-size)));font-weight:var(--gog-tag-font-weight);line-height:var(--gog-tag-line-height);white-space:nowrap;gap:var(--gog-tag-gap, var(--gog-tag-size-gap, var(--gog-tag-md-gap)))}:host(.gog-tag--success){--gog-tag-variant-color: var(--gog-tag-success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--gog-tag-danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--gog-tag-warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--gog-tag-info-color)}:host(.gog-tag--xsm){--gog-tag-size-font-size: var(--gog-tag-xsm-font-size);--gog-tag-size-padding-block: var(--gog-tag-xsm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-xsm-padding-inline);--gog-tag-size-gap: var(--gog-tag-xsm-gap);--gog-tag-size-icon-size: var(--gog-tag-xsm-icon-size)}:host(.gog-tag--sm){--gog-tag-size-font-size: var(--gog-tag-sm-font-size);--gog-tag-size-padding-block: var(--gog-tag-sm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-sm-padding-inline);--gog-tag-size-gap: var(--gog-tag-sm-gap);--gog-tag-size-icon-size: var(--gog-tag-sm-icon-size)}:host(.gog-tag--md){--gog-tag-size-font-size: var(--gog-tag-md-font-size);--gog-tag-size-padding-block: var(--gog-tag-md-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-md-padding-inline);--gog-tag-size-gap: var(--gog-tag-md-gap);--gog-tag-size-icon-size: var(--gog-tag-md-icon-size)}:host(.gog-tag--lg){--gog-tag-size-font-size: var(--gog-tag-lg-font-size);--gog-tag-size-padding-block: var(--gog-tag-lg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-lg-padding-inline);--gog-tag-size-gap: var(--gog-tag-lg-gap);--gog-tag-size-icon-size: var(--gog-tag-lg-icon-size)}:host(.gog-tag--slg){--gog-tag-size-font-size: var(--gog-tag-slg-font-size);--gog-tag-size-padding-block: var(--gog-tag-slg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-slg-padding-inline);--gog-tag-size-gap: var(--gog-tag-slg-gap);--gog-tag-size-icon-size: var(--gog-tag-slg-icon-size)}:host(.gog-tag--rounded){border-radius:var(--gog-tag-radius)}:host(.gog-tag--pill){border-radius:var(--gog-tag-pill-radius)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size, var(--gog-tag-size-icon-size, var(--gog-tag-md-icon-size)))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-tag', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class]': '"gog-tag gog-tag--" + variant() + " gog-tag--" + size() + " gog-tag--" + shape() + (hasIcon() ? " gog-tag--has-icon" : "")',
-                    }, template: "@if (hasIcon()) {\n  <gog-icon\n    class=\"gog-tag__icon\"\n    [ariaHidden]=\"true\"\n    [name]=\"iconName() ?? 'info'\"\n    [template]=\"iconTemplate()\"\n  />\n}\n\n<span class=\"gog-tag__content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-variant-color: var(--info-color, var(--muted-text-color));--gog-tag-bg: color-mix(in srgb, var(--gog-tag-variant-color) 10%, var(--surface-color));--gog-tag-border: var(--gog-tag-variant-color);--gog-tag-color: color-mix(in srgb, var(--gog-tag-variant-color) 82%, black);--gog-tag-font-size: .875rem;--gog-tag-padding-block: .375rem;--gog-tag-padding-inline: .75rem;--gog-tag-gap: .375rem;--gog-tag-radius: max(var(--radius), 2px);--gog-tag-icon-size: .875rem;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block) var(--gog-tag-padding-inline);border:1px solid var(--gog-tag-border);border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg);box-shadow:inset 0 0 0 1px var(--gog-tag-border);color:var(--gog-tag-color);font-size:var(--gog-tag-font-size);font-weight:600;line-height:1;white-space:nowrap;gap:var(--gog-tag-gap)}:host(.gog-tag--success){--gog-tag-variant-color: var(--success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--info-color)}:host(.gog-tag--sm){--gog-tag-font-size: .75rem;--gog-tag-padding-block: .25rem;--gog-tag-padding-inline: .5rem;--gog-tag-gap: .25rem;--gog-tag-icon-size: .75rem}:host(.gog-tag--md){--gog-tag-font-size: .875rem;--gog-tag-padding-block: .375rem;--gog-tag-padding-inline: .75rem;--gog-tag-gap: .375rem;--gog-tag-icon-size: .875rem}:host(.gog-tag--lg){--gog-tag-font-size: 1rem;--gog-tag-padding-block: .5rem;--gog-tag-padding-inline: .875rem;--gog-tag-gap: .5rem;--gog-tag-icon-size: 1rem}:host(.gog-tag--rounded){--gog-tag-radius: max(var(--radius), 2px)}:host(.gog-tag--pill){--gog-tag-radius: var(--gog-tag-pill-radius, 9999px)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size)}\n"] }]
+                        '[class]': 'hostClasses()',
+                    }, template: "@if (hasIcon()) {\n  <gog-icon\n    class=\"gog-tag__icon\"\n    [ariaHidden]=\"true\"\n    [name]=\"iconName() ?? 'info'\"\n    [template]=\"iconTemplate()\"\n  />\n}\n\n<span class=\"gog-tag__content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-resolved-color: var( --gog-tag-accent, var(--gog-tag-variant-color, var(--gog-tag-default-color)) );display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block, var(--gog-tag-size-padding-block, var(--gog-tag-md-padding-block))) var(--gog-tag-padding-inline, var(--gog-tag-size-padding-inline, var(--gog-tag-md-padding-inline)));border:var(--gog-tag-border-width) var(--gog-tag-border-style) var(--gog-tag-border, var(--gog-tag-resolved-color));border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-bg-mix), var(--gog-tag-bg-base)));box-shadow:inset 0 0 0 var(--gog-tag-inner-border-width) var(--gog-tag-border, var(--gog-tag-resolved-color));color:var(--gog-tag-color, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-color-mix), var(--gog-tag-color-base)));font-family:var(--gog-tag-font-family);font-size:var(--gog-tag-font-size, var(--gog-tag-size-font-size, var(--gog-tag-md-font-size)));font-weight:var(--gog-tag-font-weight);line-height:var(--gog-tag-line-height);white-space:nowrap;gap:var(--gog-tag-gap, var(--gog-tag-size-gap, var(--gog-tag-md-gap)))}:host(.gog-tag--success){--gog-tag-variant-color: var(--gog-tag-success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--gog-tag-danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--gog-tag-warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--gog-tag-info-color)}:host(.gog-tag--xsm){--gog-tag-size-font-size: var(--gog-tag-xsm-font-size);--gog-tag-size-padding-block: var(--gog-tag-xsm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-xsm-padding-inline);--gog-tag-size-gap: var(--gog-tag-xsm-gap);--gog-tag-size-icon-size: var(--gog-tag-xsm-icon-size)}:host(.gog-tag--sm){--gog-tag-size-font-size: var(--gog-tag-sm-font-size);--gog-tag-size-padding-block: var(--gog-tag-sm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-sm-padding-inline);--gog-tag-size-gap: var(--gog-tag-sm-gap);--gog-tag-size-icon-size: var(--gog-tag-sm-icon-size)}:host(.gog-tag--md){--gog-tag-size-font-size: var(--gog-tag-md-font-size);--gog-tag-size-padding-block: var(--gog-tag-md-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-md-padding-inline);--gog-tag-size-gap: var(--gog-tag-md-gap);--gog-tag-size-icon-size: var(--gog-tag-md-icon-size)}:host(.gog-tag--lg){--gog-tag-size-font-size: var(--gog-tag-lg-font-size);--gog-tag-size-padding-block: var(--gog-tag-lg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-lg-padding-inline);--gog-tag-size-gap: var(--gog-tag-lg-gap);--gog-tag-size-icon-size: var(--gog-tag-lg-icon-size)}:host(.gog-tag--slg){--gog-tag-size-font-size: var(--gog-tag-slg-font-size);--gog-tag-size-padding-block: var(--gog-tag-slg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-slg-padding-inline);--gog-tag-size-gap: var(--gog-tag-slg-gap);--gog-tag-size-icon-size: var(--gog-tag-slg-icon-size)}:host(.gog-tag--rounded){border-radius:var(--gog-tag-radius)}:host(.gog-tag--pill){border-radius:var(--gog-tag-pill-radius)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size, var(--gog-tag-size-icon-size, var(--gog-tag-md-icon-size)))}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }] } });
 
+/**
+ * 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
+ * its signals directly.
+ *
+ * That is the whole point of doing it this way rather than with a second, portal-only
+ * component: one `<ng-template>` can serve both the inline and the appended-to-body
+ * dropdown, so the option markup exists once and cannot drift between the two modes,
+ * and selection state needs no manual field-syncing to stay in step.
+ */
+class GogDropdownOverlay {
+    appRef;
+    document;
+    hostEl = null;
+    viewRef = null;
+    constructor(appRef, document) {
+        this.appRef = appRef;
+        this.document = document;
+    }
+    /** The `<body>` child holding the rendered panel, or null while detached. */
+    get hostElement() {
+        return this.hostEl;
+    }
+    get isAttached() {
+        return this.viewRef !== null;
+    }
+    attach(template, themeSource = null) {
+        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');
+        if (theme) {
+            this.hostEl.setAttribute('data-theme', theme);
+        }
+        this.document.body.appendChild(this.hostEl);
+        this.viewRef = template.createEmbeddedView({});
+        // Attached as its own change-detection root so signal reads inside the panel still
+        // mark it dirty even though its DOM no longer sits under the declaring component.
+        this.appRef.attachView(this.viewRef);
+        for (const node of this.viewRef.rootNodes) {
+            this.hostEl.appendChild(node);
+        }
+        this.viewRef.detectChanges();
+    }
+    detach() {
+        if (this.viewRef) {
+            this.appRef.detachView(this.viewRef);
+            this.viewRef.destroy();
+            this.viewRef = null;
+        }
+        this.hostEl?.remove();
+        this.hostEl = null;
+    }
+}
+
 const DEFAULT_GAP = 8;
 const DEFAULT_VIEWPORT_PADDING = 8;
 function resolveDropdownDirection(direction, triggerRect, panelHeight, viewportHeight, gap = DEFAULT_GAP, viewportPadding = DEFAULT_VIEWPORT_PADDING) {
@@ -1126,14 +1244,19 @@ function resolveDropdownDirection(direction, triggerRect, panelHeight, viewportH
 function resolveDropdownPlacement(direction, triggerRect, panelHeight, viewportHeight, gap = DEFAULT_GAP, viewportPadding = DEFAULT_VIEWPORT_PADDING) {
     const resolvedDirection = resolveDropdownDirection(direction, triggerRect, panelHeight, viewportHeight, gap, viewportPadding);
     if (resolvedDirection === 'up') {
-        const maxHeight = Math.max(0, triggerRect.top - gap - viewportPadding);
-        const actualHeight = Math.min(panelHeight, maxHeight || panelHeight);
+        const availableSpace = Math.max(0, triggerRect.top - gap - viewportPadding);
+        const actualHeight = Math.min(panelHeight, availableSpace || panelHeight);
         return {
             direction: resolvedDirection,
             top: Math.max(viewportPadding, triggerRect.top - gap - actualHeight),
             left: triggerRect.left,
             width: triggerRect.width,
-            maxHeight,
+            // Must match actualHeight, not availableSpace: `top` above was computed assuming
+            // the panel is actualHeight tall, so this is what goes into the panel's CSS
+            // max-height too. Returning the full availableSpace here let real content taller
+            // than actualHeight (but still under availableSpace) render past its computed
+            // top and cover the trigger it's supposed to sit above.
+            maxHeight: actualHeight,
         };
     }
     const maxHeight = Math.max(0, viewportHeight - triggerRect.bottom - gap - viewportPadding);
@@ -1145,136 +1268,181 @@ function resolveDropdownPlacement(direction, triggerRect, panelHeight, viewportH
         maxHeight,
     };
 }
-
-class GogSelectDropdownPortal {
-    top = 0;
-    left = 0;
-    width = 200;
-    maxHeight = 260;
-    zIndex = 300;
-    listboxId = '';
-    direction = 'down';
-    options = [];
-    selectedValue = null;
-    onSelect = () => { };
-    isSelected(id) {
-        return this.selectedValue === id;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogSelectDropdownPortal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogSelectDropdownPortal, isStandalone: true, selector: "gog-select-dropdown-portal", ngImport: i0, template: `
-    <div
-      [id]="listboxId"
-      class="gog-select__dropdown gog-select__dropdown--portal"
-      [style.top.px]="top"
-      [style.left.px]="left"
-      [style.width.px]="width"
-      [style.max-height.px]="maxHeight"
-      [style.z-index]="zIndex"
-      role="listbox"
-    >
-      @for (option of options; track option.id) {
-        <button
-          type="button"
-          class="gog-select__option font-body"
-          role="option"
-          [attr.aria-selected]="isSelected(option.id)"
-          [attr.aria-disabled]="option.disabled ?? false"
-          [class.gog-select__option--selected]="isSelected(option.id)"
-          [class.gog-select__option--disabled]="option.disabled ?? false"
-          (click)="onSelect(option, $event)"
-        >
-          <span class="gog-select__option-mark" aria-hidden="true">
-            @if (isSelected(option.id)) {
-              <gog-icon name="check" />
-            }
-          </span>
-          <span class="gog-select__option-label">{{ option.name }}</span>
-        </button>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block}.gog-select{--gog-select-gap: 4px;--gog-select-label-color: var(--accent-color);--gog-select-field-bg: var(--surface-color);--gog-select-field-border: var(--accent-dim);--gog-select-field-color: var(--text-color);--gog-select-focus-border: var(--accent-color);--gog-select-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-select-error-color: var(--danger-color);--gog-select-chevron-color: var(--accent-color);--gog-select-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-select-option-selected-color: var(--accent-color);--gog-select-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-size:var(--text-sm);color:var(--gog-select-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{--gog-select-control-padding-y: var(--control-padding-y, 10px);--gog-select-control-padding-x: var(--control-padding-x, 14px);width:100%;min-height:44px;padding:var(--gog-select-control-padding-y) 40px var(--gog-select-control-padding-y) var(--gog-select-control-padding-x);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-md);color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:0 0 8px var(--gog-select-focus-ring)}.gog-select__control:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:2px}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--muted-text-color)}.gog-select__chevron{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:.875rem}.gog-select__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--surface-color);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-select-control-padding-x);border:0;background:transparent;text-align:left;font:inherit;color:var(--text-color);cursor:pointer;transition:background-color .12s ease}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:.5;cursor:not-allowed}.gog-select__option:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:-3px}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}.gog-select__option-mark gog-icon{font-size:.875rem}.gog-select__error{font-size:var(--text-xs);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/**
+ * Resolves a CSS length to pixels for the placement math. Only `px`, `%` and `vh` can be
+ * resolved without laying out the DOM — `%` and `vh` are taken relative to the viewport
+ * height, which is exactly what a `position: fixed` panel's height resolves against in CSS.
+ * Any other unit (`rem`, `em`, `auto`, a bare number, …) returns null: the caller falls back
+ * to its own estimate for the up/down decision, while the original string is still written
+ * to the panel's `style.max-height` as-is — only the direction heuristic loses precision.
+ */
+function resolveCssLengthPx(value, viewportHeight) {
+    const match = /^(-?[\d.]+)(px|%|vh)$/.exec(value.trim());
+    if (!match)
+        return null;
+    const amount = Number.parseFloat(match[1]);
+    if (!Number.isFinite(amount))
+        return null;
+    return match[2] === 'px' ? amount : (amount / 100) * viewportHeight;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogSelectDropdownPortal, decorators: [{
-            type: Component,
-            args: [{ selector: 'gog-select-dropdown-portal', imports: [IconComponent], template: `
-    <div
-      [id]="listboxId"
-      class="gog-select__dropdown gog-select__dropdown--portal"
-      [style.top.px]="top"
-      [style.left.px]="left"
-      [style.width.px]="width"
-      [style.max-height.px]="maxHeight"
-      [style.z-index]="zIndex"
-      role="listbox"
-    >
-      @for (option of options; track option.id) {
-        <button
-          type="button"
-          class="gog-select__option font-body"
-          role="option"
-          [attr.aria-selected]="isSelected(option.id)"
-          [attr.aria-disabled]="option.disabled ?? false"
-          [class.gog-select__option--selected]="isSelected(option.id)"
-          [class.gog-select__option--disabled]="option.disabled ?? false"
-          (click)="onSelect(option, $event)"
-        >
-          <span class="gog-select__option-mark" aria-hidden="true">
-            @if (isSelected(option.id)) {
-              <gog-icon name="check" />
-            }
-          </span>
-          <span class="gog-select__option-label">{{ option.name }}</span>
-        </button>
-      }
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.gog-select{--gog-select-gap: 4px;--gog-select-label-color: var(--accent-color);--gog-select-field-bg: var(--surface-color);--gog-select-field-border: var(--accent-dim);--gog-select-field-color: var(--text-color);--gog-select-focus-border: var(--accent-color);--gog-select-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-select-error-color: var(--danger-color);--gog-select-chevron-color: var(--accent-color);--gog-select-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-select-option-selected-color: var(--accent-color);--gog-select-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-size:var(--text-sm);color:var(--gog-select-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{--gog-select-control-padding-y: var(--control-padding-y, 10px);--gog-select-control-padding-x: var(--control-padding-x, 14px);width:100%;min-height:44px;padding:var(--gog-select-control-padding-y) 40px var(--gog-select-control-padding-y) var(--gog-select-control-padding-x);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-md);color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:0 0 8px var(--gog-select-focus-ring)}.gog-select__control:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:2px}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--muted-text-color)}.gog-select__chevron{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:.875rem}.gog-select__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--surface-color);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-select-control-padding-x);border:0;background:transparent;text-align:left;font:inherit;color:var(--text-color);cursor:pointer;transition:background-color .12s ease}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:.5;cursor:not-allowed}.gog-select__option:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:-3px}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}.gog-select__option-mark gog-icon{font-size:.875rem}.gog-select__error{font-size:var(--text-xs);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
-        }] });
-class SelectComponent {
-    static nextId = 0;
-    generatedId = `gog-select-${++SelectComponent.nextId}`;
-    generatedListboxId = `gog-select-listbox-${SelectComponent.nextId}`;
-    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+
+/** Gap between the trigger and the panel. */
+const PANEL_GAP = 2;
+/** Smallest allowed gap between the panel and the viewport edge. */
+const VIEWPORT_PADDING = 8;
+/** Used only if a subclass's `panelMaxHeightToken` isn't declared anywhere in the cascade. */
+const FALLBACK_MAX_PANEL_HEIGHT = 260;
+/** Used only if a subclass's `optionHeightToken` isn't declared anywhere in the cascade. */
+const FALLBACK_OPTION_HEIGHT = 40;
+/** Must match the `var(--gog-dropdown-z, …)` fallback in the component stylesheets. */
+const DEFAULT_PANEL_Z_INDEX = 300;
+/**
+ * Shared behaviour for the listbox-style controls: open/close, placement, the
+ * append-to-body overlay, click-outside, keyboard navigation and `ControlValueAccessor`
+ * plumbing. Subclasses supply only what actually differs — the value type, the panel
+ * markup, and the BEM class names used to find the trigger and the options.
+ *
+ * Exported because it appears in the public type signatures of the components that
+ * extend it; it is not meant to be used or subclassed by consumers.
+ */
+class GogDropdownBase {
+    static nextUid = 0;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
+    errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     dropdownDirection = input('auto', ...(ngDevMode ? [{ debugName: "dropdownDirection" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit stacking order for the panel. Left unset the panel falls back to the
+     * stylesheet's `--gog-dropdown-z`, so the default lives in CSS where a consumer can
+     * retheme it, rather than being baked into the component.
+     */
     dropdownZIndex = input(null, ...(ngDevMode ? [{ debugName: "dropdownZIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Fixed panel width as any CSS length (`'320px'`, `'40ch'`, `'100%'`, …), applied only
+     * when `appendToBody` is set. Left unset the panel matches the trigger's width, same as
+     * the inline panel already does via CSS.
+     */
+    dropdownWidth = input(null, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Fixed panel max-height as any CSS length, applied only when `appendToBody` is set.
+     * `px`, `%` and `vh` also feed the up/down placement math (see `resolveCssLengthPx`); any
+     * other unit still renders correctly but is invisible to that heuristic, so the panel may
+     * pick the "wrong" side close to a viewport edge. Left unset the panel keeps the existing
+     * viewport-derived, auto-flipping height.
+     */
+    dropdownMaxHeight = input(null, ...(ngDevMode ? [{ debugName: "dropdownMaxHeight" }] : /* istanbul ignore next */ []));
     appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     chevronTemplate = input(null, ...(ngDevMode ? [{ debugName: "chevronTemplate" }] : /* istanbul ignore next */ []));
-    /** Two-way bindable selected value: `[(value)]="signal"`. */
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    dropdownDirectionState = signal('down', ...(ngDevMode ? [{ debugName: "dropdownDirectionState" }] : /* istanbul ignore next */ []));
+    /**
+     * Spacing tokens feeding the height estimate. Overridable so each control keeps the
+     * `--gog-<block>-*` names it already exposes to consumers for theming.
+     */
+    optionGapToken = '--gog-dropdown-option-gap';
+    optionsPaddingToken = '--gog-dropdown-options-padding';
+    /** Keep in sync with the real `max-height` on the subclass's `__dropdown` block. */
+    panelMaxHeightToken = '--gog-dropdown-panel-max-height';
+    /** Estimated row height fed into the placement math; not a real layout property. */
+    optionHeightToken = '--gog-dropdown-option-height';
+    /** Unique per-instance suffix, so several dropdowns on a page can't collide on DOM ids. */
+    uid = ++GogDropdownBase.nextUid;
     elRef = inject((ElementRef));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    document = inject(DOCUMENT);
     appRef = inject(ApplicationRef);
-    envInjector = inject(EnvironmentInjector);
     destroyRef = inject(DestroyRef);
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    triggerId = computed(() => this.inputId() || this.generatedId, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
-    listboxId = computed(() => this.inputId() ? `${this.inputId()}-listbox` : this.generatedListboxId, ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    ngControl = inject(NgControl, { optional: true, self: true });
+    overlay = new GogDropdownOverlay(this.appRef, this.document);
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    errorState = new GogErrorState(this.errorMessage, this.errorDisplay, this.ngControl);
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    selectedOption = computed(() => this.options().find((option) => String(option.id) === String(this.value())) ?? null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
-    hasError = computed(() => !!this.errorMessage() && this.value() === null, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    errorId = computed(() => (this.hasError() ? `${this.triggerId()}-error` : null), ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
-    portalHost = null;
-    portalRef = null;
-    onChange = () => { };
-    onTouched = () => { };
+    dropdownDirectionState = signal('down', ...(ngDevMode ? [{ debugName: "dropdownDirectionState" }] : /* istanbul ignore next */ []));
+    panelPlacement = signal(null, ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
+    /**
+     * Stacking order to write onto the panel, or null to leave it to the stylesheet.
+     *
+     * Only needed when appending to `<body>`: an inline panel inherits `--gog-dropdown-z` from
+     * its surroundings — which is how a dropdown inside a dialog ends up above the dialog —
+     * but an appended one sits outside that subtree and inherits nothing, so the value has
+     * to be resolved from the trigger and written out explicitly.
+     */
+    panelZIndex = signal(null, ...(ngDevMode ? [{ debugName: "panelZIndex" }] : /* istanbul ignore next */ []));
+    /** `dropdownWidth`, or the trigger-derived width from `panelPlacement`, as a CSS value. */
+    resolvedPanelWidth = computed(() => {
+        const width = this.panelPlacement()?.width;
+        return this.dropdownWidth() ?? (width != null ? `${width}px` : null);
+    }, ...(ngDevMode ? [{ debugName: "resolvedPanelWidth" }] : /* istanbul ignore next */ []));
+    /** `dropdownMaxHeight`, or the viewport-derived max-height from `panelPlacement`. */
+    resolvedPanelMaxHeight = computed(() => {
+        const maxHeight = this.panelPlacement()?.maxHeight;
+        return this.dropdownMaxHeight() ?? (maxHeight != null ? `${maxHeight}px` : null);
+    }, ...(ngDevMode ? [{ debugName: "resolvedPanelMaxHeight" }] : /* istanbul ignore next */ []));
+    hasError = this.errorState.hasError;
+    visibleError = this.errorState.visibleError;
+    /** Measured once per open rather than per scroll tick — see `refreshPanelMetrics`. */
+    optionGap = 0;
+    optionsPadding = 0;
+    maxPanelHeight = FALLBACK_MAX_PANEL_HEIGHT;
+    optionHeight = FALLBACK_OPTION_HEIGHT;
+    repositionFrame = null;
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
     constructor() {
-        this.destroyRef.onDestroy(() => this.destroyPortal());
+        // Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
+        // available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
+        // injecting NgControl would be a dependency cycle.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        this.destroyRef.onDestroy(() => this.overlay.detach());
+        this.bindWhileOpen();
+    }
+    /**
+     * Binds the click-outside and reposition listeners only for as long as the panel is
+     * open. Bound permanently — as host listeners were — every dropdown on the page runs a
+     * handler on every document click and every scroll frame, whether or not it is showing
+     * anything.
+     */
+    bindWhileOpen() {
+        effect((onCleanup) => {
+            if (!this.isOpen() || !this.isBrowser)
+                return;
+            const onDocumentClick = (event) => this.closeIfClickedOutside(event);
+            const onReflow = () => this.scheduleReposition();
+            // Capture phase: scroll does not bubble, so a bubble-phase listener on window would
+            // miss scrolling inside a nested container — which is exactly the case appendToBody
+            // exists for. Passive: these handlers never call preventDefault.
+            this.document.addEventListener('click', onDocumentClick);
+            window.addEventListener('scroll', onReflow, { passive: true, capture: true });
+            window.addEventListener('resize', onReflow, { passive: true });
+            onCleanup(() => {
+                this.document.removeEventListener('click', onDocumentClick);
+                window.removeEventListener('scroll', onReflow, { capture: true });
+                window.removeEventListener('resize', onReflow);
+                if (this.repositionFrame !== null) {
+                    cancelAnimationFrame(this.repositionFrame);
+                    this.repositionFrame = null;
+                }
+            });
+        });
+    }
+    ngDoCheck() {
+        this.errorState.check();
     }
     writeValue(val) {
-        this.value.set(val ?? null);
+        this.value.set(val ?? this.emptyValue);
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.onChangeFn = fn;
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this.onTouchedFn = fn;
     }
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
@@ -1285,516 +1453,289 @@ class SelectComponent {
     toggle() {
         if (this.isDisabled())
             return;
-        const next = !this.isOpen();
-        this.isOpen.set(next);
-        if (next) {
-            this.openDropdown();
+        if (this.isOpen()) {
+            this.close();
         }
         else {
-            this.destroyPortal();
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.refreshPanelMetrics();
+        this.updatePlacement();
+        if (this.appendToBody()) {
+            this.attachOverlay();
         }
     }
     close() {
         if (!this.isOpen())
             return;
         this.isOpen.set(false);
-        this.destroyPortal();
+        this.overlay.detach();
+        // Closing is this control's equivalent of a blur, which is when a form control is
+        // conventionally considered touched.
+        this.markTouched();
     }
-    onDocumentClick(event) {
-        if (!this.isOpen())
-            return;
+    /** Writes a new selection out to both the model and the attached form control. */
+    commitValue(next) {
+        this.value.set(next);
+        this.onChangeFn(next);
+        this.markTouched();
+    }
+    markTouched() {
+        this.onTouchedFn();
+    }
+    closeIfClickedOutside(event) {
         const target = event.target;
-        const insideTrigger = target ? this.elRef.nativeElement.contains(target) : false;
-        const insidePortal = target ? this.portalHost?.contains(target) ?? false : false;
-        if (!insideTrigger && !insidePortal) {
+        if (!target)
+            return;
+        const inside = this.elRef.nativeElement.contains(target) ||
+            (this.overlay.hostElement?.contains(target) ?? false);
+        if (!inside) {
             this.close();
         }
     }
-    onScrollOrResize() {
+    /**
+     * Coalesces bursts of scroll/resize events into one reposition per frame. Placement
+     * reads layout, so running it per event is what makes a scroll janky.
+     */
+    scheduleReposition() {
+        if (this.repositionFrame !== null)
+            return;
+        this.repositionFrame = requestAnimationFrame(() => {
+            this.repositionFrame = null;
+            if (this.isOpen()) {
+                this.updatePlacement();
+            }
+        });
+    }
+    /** Jumps from the trigger into the option list on ArrowDown/ArrowUp while open. */
+    onTriggerArrowKeydown(event) {
         if (!this.isOpen())
             return;
-        if (this.appendToBody()) {
-            this.updatePortalPosition();
+        event.preventDefault();
+        const options = this.enabledOptionElements();
+        if (options.length === 0)
             return;
-        }
-        this.updateInlineDirection();
+        const index = event.key === 'ArrowUp' ? options.length - 1 : 0;
+        options[index]?.focus();
     }
-    selectOption(option, event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (option.disabled) {
+    onOptionKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            this.focusTrigger();
             return;
         }
-        this.value.set(option.id);
-        this.onChange(option.id);
-        this.onTouched();
-        this.close();
-    }
-    openDropdown() {
-        this.onTouched();
-        if (this.appendToBody()) {
-            this.openPortal();
+        if (event.key === 'Tab') {
+            // Deliberately not prevented: closing and handing focus back to the trigger lets
+            // the browser's own Tab handling continue from there, so focus lands on whatever
+            // follows the control. Without this, tabbing out of an appended panel would jump
+            // to the end of the document, since that is where the panel's DOM lives.
+            this.close();
+            this.focusTrigger();
             return;
         }
-        this.updateInlineDirection();
+        handleRovingFocusKeydown(event, this.enabledOptionElements());
     }
-    estimatePanelHeight() {
-        return Math.min(Math.max(this.options().length, 1) * 40, 260);
+    focusTrigger() {
+        this.elRef.nativeElement
+            .querySelector(`.${this.triggerClass}`)
+            ?.focus();
     }
-    updateInlineDirection() {
-        if (!this.isBrowser)
-            return;
-        const placement = resolveDropdownPlacement(this.dropdownDirection(), this.elRef.nativeElement.getBoundingClientRect(), this.estimatePanelHeight(), window.innerHeight, 2, 8);
-        this.dropdownDirectionState.set(placement.direction);
+    /** Extra chrome stacked above the options (e.g. a select-all row), in px. */
+    extraPanelHeight() {
+        return 0;
     }
-    openPortal() {
+    enabledOptionElements() {
+        const scope = this.overlay.hostElement ?? this.elRef.nativeElement;
+        return Array.from(scope.querySelectorAll(`.${this.optionClass}:not([aria-disabled="true"])`));
+    }
+    attachOverlay() {
         if (!this.isBrowser)
             return;
-        this.destroyPortal();
-        this.portalHost = document.createElement('div');
-        document.body.appendChild(this.portalHost);
-        this.portalRef = createComponent(GogSelectDropdownPortal, {
-            environmentInjector: this.envInjector,
-            hostElement: this.portalHost,
-        });
-        const inst = this.portalRef.instance;
-        inst.options = this.options();
-        inst.selectedValue = this.value();
-        inst.listboxId = this.listboxId();
-        inst.zIndex = this.dropdownZIndex() ?? 300;
-        inst.onSelect = (option, event) => this.selectOption(option, event);
-        this.updatePortalPosition();
-        this.appRef.attachView(this.portalRef.hostView);
-        this.portalRef.changeDetectorRef.detectChanges();
-    }
-    updatePortalPosition() {
-        if (!this.portalRef || !this.isBrowser)
+        const template = this.panelTemplate();
+        if (!template)
+            return;
+        this.overlay.attach(template, this.elRef.nativeElement);
+    }
+    /**
+     * Reads the spacing tokens that feed the height estimate. Done once per open instead of
+     * on every scroll tick, because `getComputedStyle` forces a style recalculation and the
+     * tokens cannot change while the panel is on screen.
+     */
+    refreshPanelMetrics() {
+        if (!this.isBrowser) {
+            this.optionGap = 0;
+            this.optionsPadding = 0;
+            this.maxPanelHeight = FALLBACK_MAX_PANEL_HEIGHT;
+            this.optionHeight = FALLBACK_OPTION_HEIGHT;
+            this.panelZIndex.set(null);
             return;
-        const placement = resolveDropdownPlacement(this.dropdownDirection(), this.elRef.nativeElement.getBoundingClientRect(), this.estimatePanelHeight(), window.innerHeight, 2, 8);
-        const inst = this.portalRef.instance;
-        inst.direction = placement.direction;
-        inst.top = placement.top;
-        inst.left = placement.left;
-        inst.width = placement.width;
-        inst.maxHeight = placement.maxHeight;
-        inst.zIndex = this.dropdownZIndex() ?? 300;
-        this.portalRef.changeDetectorRef.detectChanges();
-    }
-    destroyPortal() {
-        if (this.portalRef) {
-            this.appRef.detachView(this.portalRef.hostView);
-            this.portalRef.destroy();
-            this.portalRef = null;
         }
-        if (this.portalHost) {
-            this.portalHost.remove();
-            this.portalHost = null;
+        const styles = getComputedStyle(this.elRef.nativeElement);
+        this.optionGap = readPx(styles.getPropertyValue(this.optionGapToken), 0);
+        this.optionsPadding = readPx(styles.getPropertyValue(this.optionsPaddingToken), 0);
+        this.maxPanelHeight = readPx(styles.getPropertyValue(this.panelMaxHeightToken), FALLBACK_MAX_PANEL_HEIGHT);
+        this.optionHeight = readPx(styles.getPropertyValue(this.optionHeightToken), FALLBACK_OPTION_HEIGHT);
+        this.panelZIndex.set(this.appendToBody() ? this.resolvePanelZIndex(styles) : null);
+    }
+    /**
+     * Rough height, used only to choose up/down and to cap `max-height` before the panel
+     * has been laid out. Deliberately an estimate: measuring would require rendering the
+     * panel first, which is what we are trying to position. A resolvable `dropdownMaxHeight`
+     * replaces the row-count guess outright, since it is exact rather than estimated.
+     */
+    estimatePanelHeight() {
+        const custom = this.dropdownMaxHeight();
+        if (custom) {
+            const resolved = resolveCssLengthPx(custom, window.innerHeight);
+            if (resolved !== null)
+                return resolved;
         }
+        const count = Math.max(this.options().length, 1);
+        const rows = count * this.optionHeight + Math.max(count - 1, 0) * this.optionGap;
+        return Math.min(rows + this.optionsPadding * 2 + this.extraPanelHeight(), this.maxPanelHeight);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevronTemplate: { classPropertyName: "chevronTemplate", publicName: "chevronTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onScrollOrResize()", "window:resize": "onScrollOrResize()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SelectComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div\r\n  class=\"gog-select gog-contained-layout\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-select__label font-heading\" [attr.for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control font-body\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedOption()?.name || placeholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    @if (isOpen() && !appendToBody()) {\r\n      <div\r\n        [id]=\"listboxId()\"\r\n        class=\"gog-select__dropdown\"\r\n        [class.gog-select__dropdown--up]=\"dropdownDirectionState() === 'up'\"\r\n        [style.z-index]=\"dropdownZIndex() ?? null\"\r\n        role=\"listbox\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        @for (option of options(); track option.id) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-select__option font-body\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"selectedOption()?.id === option.id\"\r\n            [attr.aria-disabled]=\"option.disabled ?? false\"\r\n            [class.gog-select__option--selected]=\"selectedOption()?.id === option.id\"\r\n            [class.gog-select__option--disabled]=\"option.disabled ?? false\"\r\n            (click)=\"selectOption(option, $event)\"\r\n          >\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (selectedOption()?.id === option.id) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ option.name }}</span>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error font-body\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ errorMessage() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.gog-select{--gog-select-gap: 4px;--gog-select-label-color: var(--accent-color);--gog-select-field-bg: var(--surface-color);--gog-select-field-border: var(--accent-dim);--gog-select-field-color: var(--text-color);--gog-select-focus-border: var(--accent-color);--gog-select-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-select-error-color: var(--danger-color);--gog-select-chevron-color: var(--accent-color);--gog-select-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-select-option-selected-color: var(--accent-color);--gog-select-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-size:var(--text-sm);color:var(--gog-select-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{--gog-select-control-padding-y: var(--control-padding-y, 10px);--gog-select-control-padding-x: var(--control-padding-x, 14px);width:100%;min-height:44px;padding:var(--gog-select-control-padding-y) 40px var(--gog-select-control-padding-y) var(--gog-select-control-padding-x);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-md);color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:0 0 8px var(--gog-select-focus-ring)}.gog-select__control:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:2px}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--muted-text-color)}.gog-select__chevron{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:.875rem}.gog-select__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--surface-color);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-select-control-padding-x);border:0;background:transparent;text-align:left;font:inherit;color:var(--text-color);cursor:pointer;transition:background-color .12s ease}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:.5;cursor:not-allowed}.gog-select__option:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:-3px}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}.gog-select__option-mark gog-icon{font-size:.875rem}.gog-select__error{font-size:var(--text-xs);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /**
+     * The trigger's own rect, not the whole component's — a label above it or an error
+     * message below it sit in normal document flow and are not part of what the panel needs
+     * to clear. This also keeps `appendToBody` placement consistent with the inline panel,
+     * which is already positioned purely relative to the trigger via CSS.
+     */
+    triggerRect() {
+        const host = this.elRef.nativeElement;
+        const trigger = host.querySelector(`.${this.triggerClass}`) ?? host;
+        return trigger.getBoundingClientRect();
+    }
+    /** The stacking order the panel would have had if it were still inside the subtree. */
+    resolvePanelZIndex(triggerStyles) {
+        const inherited = triggerStyles.getPropertyValue('--gog-dropdown-z').trim();
+        if (inherited) {
+            return readPx(inherited, DEFAULT_PANEL_Z_INDEX);
+        }
+        // Not every DOM implementation resolves inherited custom properties through
+        // getComputedStyle (jsdom does not), so also look for an inline declaration up the
+        // tree — which is exactly how gog-dialog hands its stacking order to nested dropdowns.
+        for (let el = this.elRef.nativeElement; el; el = el.parentElement) {
+            const declared = el.style.getPropertyValue('--gog-dropdown-z').trim();
+            if (declared) {
+                return readPx(declared, DEFAULT_PANEL_Z_INDEX);
+            }
+        }
+        return DEFAULT_PANEL_Z_INDEX;
+    }
+    updatePlacement() {
+        if (!this.isBrowser)
+            return;
+        const placement = resolveDropdownPlacement(this.dropdownDirection(), this.triggerRect(), this.estimatePanelHeight(), window.innerHeight, PANEL_GAP, VIEWPORT_PADDING);
+        this.dropdownDirectionState.set(placement.direction);
+        this.panelPlacement.set(placement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogDropdownBase, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevronTemplate: { classPropertyName: "chevronTemplate", publicName: "chevronTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], dropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMaxHeight", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronTemplate", required: false }] }] } });
+function readPx(raw, fallback) {
+    const parsed = Number.parseFloat(raw.trim());
+    return Number.isFinite(parsed) ? parsed : fallback;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gog-select', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '(document:click)': 'onDocumentClick($event)',
-                        '(window:scroll)': 'onScrollOrResize()',
-                        '(window:resize)': 'onScrollOrResize()',
-                    }, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SelectComponent),
-                            multi: true,
-                        },
-                    ], template: "<div\r\n  class=\"gog-select gog-contained-layout\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-select__label font-heading\" [attr.for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control font-body\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedOption()?.name || placeholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    @if (isOpen() && !appendToBody()) {\r\n      <div\r\n        [id]=\"listboxId()\"\r\n        class=\"gog-select__dropdown\"\r\n        [class.gog-select__dropdown--up]=\"dropdownDirectionState() === 'up'\"\r\n        [style.z-index]=\"dropdownZIndex() ?? null\"\r\n        role=\"listbox\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        @for (option of options(); track option.id) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-select__option font-body\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"selectedOption()?.id === option.id\"\r\n            [attr.aria-disabled]=\"option.disabled ?? false\"\r\n            [class.gog-select__option--selected]=\"selectedOption()?.id === option.id\"\r\n            [class.gog-select__option--disabled]=\"option.disabled ?? false\"\r\n            (click)=\"selectOption(option, $event)\"\r\n          >\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (selectedOption()?.id === option.id) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ option.name }}</span>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error font-body\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ errorMessage() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.gog-select{--gog-select-gap: 4px;--gog-select-label-color: var(--accent-color);--gog-select-field-bg: var(--surface-color);--gog-select-field-border: var(--accent-dim);--gog-select-field-color: var(--text-color);--gog-select-focus-border: var(--accent-color);--gog-select-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-select-error-color: var(--danger-color);--gog-select-chevron-color: var(--accent-color);--gog-select-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-select-option-selected-color: var(--accent-color);--gog-select-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-size:var(--text-sm);color:var(--gog-select-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{--gog-select-control-padding-y: var(--control-padding-y, 10px);--gog-select-control-padding-x: var(--control-padding-x, 14px);width:100%;min-height:44px;padding:var(--gog-select-control-padding-y) 40px var(--gog-select-control-padding-y) var(--gog-select-control-padding-x);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-md);color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:0 0 8px var(--gog-select-focus-ring)}.gog-select__control:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:2px}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--muted-text-color)}.gog-select__chevron{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:.875rem}.gog-select__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--surface-color);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-select-field-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-select-control-padding-x);border:0;background:transparent;text-align:left;font:inherit;color:var(--text-color);cursor:pointer;transition:background-color .12s ease}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:.5;cursor:not-allowed}.gog-select__option:focus-visible{outline:3px solid var(--gog-select-focus-border);outline-offset:-3px}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0}.gog-select__option-mark gog-icon{font-size:.875rem}.gog-select__error{font-size:var(--text-xs);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
-class GogMultiselectDropdownPortal {
-    top = 0;
-    left = 0;
-    width = 200;
-    maxHeight = 260;
-    zIndex = 9999;
-    listboxId = '';
-    direction = 'down';
-    options = [];
-    selectedIds = [];
-    showControls = false;
-    onToggle = () => { };
-    onSelectAll = () => { };
-    onClearAll = () => { };
+class SelectComponent extends GogDropdownBase {
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable selected value: `[(value)]="signal"`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    panelTemplate = viewChild('panelTpl', ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
+    emptyValue = null;
+    optionClass = 'gog-select__option';
+    triggerClass = 'gog-select__control';
+    optionGapToken = '--gog-select-option-gap';
+    panelMaxHeightToken = '--gog-select-panel-max-height';
+    optionHeightToken = '--gog-select-option-height';
+    triggerId = computed(() => this.inputId() || `gog-select-${this.uid}`, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    listboxId = computed(() => `${this.triggerId()}-listbox`, ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => `${this.triggerId()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.hasError() ? `${this.triggerId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    selectedOption = computed(() => this.options().find((option) => String(option.id) === String(this.value())) ?? null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
     isSelected(id) {
-        return this.selectedIds.includes(id);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogMultiselectDropdownPortal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogMultiselectDropdownPortal, isStandalone: true, selector: "gog-multiselect-dropdown-portal", ngImport: i0, template: `
-    <div
-      [id]="listboxId"
-      class="gog-ms__dropdown gog-ms__dropdown--portal"
-      [style.top.px]="top"
-      [style.left.px]="left"
-      [style.width.px]="width"
-      [style.max-height.px]="maxHeight"
-      [style.z-index]="zIndex"
-      role="listbox"
-      aria-multiselectable="true"
-    >
-      @if (showControls) {
-        <div class="gog-ms__controls">
-          <gog-button variant="ghost" size="sm" (click)="onSelectAll($event)">Select all</gog-button>
-          <gog-button variant="ghost" size="sm" (click)="onClearAll($event)">Clear</gog-button>
-        </div>
-      }
-      <div class="gog-ms__options">
-        @for (option of options; track option.id) {
-          <button
-            type="button"
-            class="gog-ms__option font-body"
-            role="option"
-            [attr.aria-selected]="isSelected(option.id)"
-            [class.gog-ms__option--selected]="isSelected(option.id)"
-            (click)="onToggle(option, $event)"
-          >
-          <span class="gog-ms__option-mark" aria-hidden="true">
-            <svg viewBox="0 0 16 16" fill="none" focusable="false" aria-hidden="true">
-              <rect
-                x="2.5"
-                y="2.5"
-                width="11"
-                height="11"
-                rx="2"
-                [attr.fill]="isSelected(option.id) ? 'currentColor' : 'none'"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              @if (isSelected(option.id)) {
-                <path
-                  d="M4 8L6.75 10.75L12 5.5"
-                  stroke="var(--gog-ms-checkbox-checked-color)"
-                  stroke-width="1.75"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              }
-            </svg>
-          </span>
-            {{ option.name }}
-          </button>
-        }
-      </div>
-    </div>
-  `, isInline: true, styles: [".gog-ms-wrapper{--gog-ms-gap: 4px;--gog-ms-option-gap: 4px;--gog-ms-options-padding: 4px;--gog-ms-label-color: var(--accent-color);--gog-ms-field-bg: var(--surface-color);--gog-ms-field-border: var(--accent-dim);--gog-ms-field-color: var(--text-color);--gog-ms-value-color: var(--text-color);--gog-ms-placeholder-color: var(--muted-text-color);--gog-ms-focus-border: var(--accent-color);--gog-ms-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-ms-error-color: var(--danger-color);--gog-ms-border-color: var(--accent-color);--gog-ms-panel-bg: var(--surface-color);--gog-ms-panel-border: var(--accent-color);--gog-ms-panel-shadow: 0 8px 24px rgba(0, 0, 0, .3);--gog-ms-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-ms-checkbox-border: var(--accent-dim);--gog-ms-checkbox-bg: var(--background-color);--gog-ms-checkbox-checked-bg: var(--accent-color);--gog-ms-checkbox-checked-color: var(--primary-color);--gog-ms-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms__label{font-size:var(--text-sm);color:var(--gog-ms-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-ms{--gog-ms-padding-y: var(--control-padding-y, 10px);--gog-ms-padding-x: var(--control-padding-x, 14px);display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y) var(--gog-ms-padding-x);background-color:var(--gog-ms-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border);border-radius:var(--radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:0 0 8px var(--gog-ms-focus-ring)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-size:var(--text-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.gog-ms__clear{width:1rem;height:1rem;padding:0;border:0;border-radius:var(--gog-ms-clear-radius, 2px);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color .15s ease}.gog-ms__clear gog-icon{font-size:.7rem}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem}.gog-ms__arrow gog-icon{font-size:.875rem}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--gog-ms-panel-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-panel-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{display:flex;gap:4px;padding:6px 10px;border-bottom:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-ms-padding-x);border:0;background:transparent;text-align:left;font:inherit;font-size:var(--text-md);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:background-color .12s ease;color:var(--text-color)}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:-3px}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__option-mark svg{width:18px;height:18px}.gog-ms__error{font-size:var(--text-xs);color:var(--gog-ms-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "debounce", "loading"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        return this.selectedOption()?.id === id;
+    }
+    selectOption(option, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (option.disabled)
+            return;
+        this.commitValue(option.id);
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\n      <!--\n        tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n        focus is moved between options with the arrow keys, not by tabbing through every\n        one of them. Programmatic .focus() still works on a negative tabindex.\n      -->\n      <button\n        type=\"button\"\n        class=\"gog-select__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        [attr.aria-selected]=\"isSelected(option.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogMultiselectDropdownPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-multiselect-dropdown-portal', imports: [ButtonComponent], template: `
-    <div
-      [id]="listboxId"
-      class="gog-ms__dropdown gog-ms__dropdown--portal"
-      [style.top.px]="top"
-      [style.left.px]="left"
-      [style.width.px]="width"
-      [style.max-height.px]="maxHeight"
-      [style.z-index]="zIndex"
-      role="listbox"
-      aria-multiselectable="true"
-    >
-      @if (showControls) {
-        <div class="gog-ms__controls">
-          <gog-button variant="ghost" size="sm" (click)="onSelectAll($event)">Select all</gog-button>
-          <gog-button variant="ghost" size="sm" (click)="onClearAll($event)">Clear</gog-button>
-        </div>
-      }
-      <div class="gog-ms__options">
-        @for (option of options; track option.id) {
-          <button
-            type="button"
-            class="gog-ms__option font-body"
-            role="option"
-            [attr.aria-selected]="isSelected(option.id)"
-            [class.gog-ms__option--selected]="isSelected(option.id)"
-            (click)="onToggle(option, $event)"
-          >
-          <span class="gog-ms__option-mark" aria-hidden="true">
-            <svg viewBox="0 0 16 16" fill="none" focusable="false" aria-hidden="true">
-              <rect
-                x="2.5"
-                y="2.5"
-                width="11"
-                height="11"
-                rx="2"
-                [attr.fill]="isSelected(option.id) ? 'currentColor' : 'none'"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              @if (isSelected(option.id)) {
-                <path
-                  d="M4 8L6.75 10.75L12 5.5"
-                  stroke="var(--gog-ms-checkbox-checked-color)"
-                  stroke-width="1.75"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              }
-            </svg>
-          </span>
-            {{ option.name }}
-          </button>
-        }
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".gog-ms-wrapper{--gog-ms-gap: 4px;--gog-ms-option-gap: 4px;--gog-ms-options-padding: 4px;--gog-ms-label-color: var(--accent-color);--gog-ms-field-bg: var(--surface-color);--gog-ms-field-border: var(--accent-dim);--gog-ms-field-color: var(--text-color);--gog-ms-value-color: var(--text-color);--gog-ms-placeholder-color: var(--muted-text-color);--gog-ms-focus-border: var(--accent-color);--gog-ms-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-ms-error-color: var(--danger-color);--gog-ms-border-color: var(--accent-color);--gog-ms-panel-bg: var(--surface-color);--gog-ms-panel-border: var(--accent-color);--gog-ms-panel-shadow: 0 8px 24px rgba(0, 0, 0, .3);--gog-ms-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-ms-checkbox-border: var(--accent-dim);--gog-ms-checkbox-bg: var(--background-color);--gog-ms-checkbox-checked-bg: var(--accent-color);--gog-ms-checkbox-checked-color: var(--primary-color);--gog-ms-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms__label{font-size:var(--text-sm);color:var(--gog-ms-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-ms{--gog-ms-padding-y: var(--control-padding-y, 10px);--gog-ms-padding-x: var(--control-padding-x, 14px);display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y) var(--gog-ms-padding-x);background-color:var(--gog-ms-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border);border-radius:var(--radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:0 0 8px var(--gog-ms-focus-ring)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-size:var(--text-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.gog-ms__clear{width:1rem;height:1rem;padding:0;border:0;border-radius:var(--gog-ms-clear-radius, 2px);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color .15s ease}.gog-ms__clear gog-icon{font-size:.7rem}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem}.gog-ms__arrow gog-icon{font-size:.875rem}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--gog-ms-panel-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-panel-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{display:flex;gap:4px;padding:6px 10px;border-bottom:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-ms-padding-x);border:0;background:transparent;text-align:left;font:inherit;font-size:var(--text-md);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:background-color .12s ease;color:var(--text-color)}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:-3px}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__option-mark svg{width:18px;height:18px}.gog-ms__error{font-size:var(--text-xs);color:var(--gog-ms-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
-        }] });
-class MultiselectComponent {
-    static nextId = 0;
-    instanceId = ++MultiselectComponent.nextId;
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+            args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\n      <!--\n        tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n        focus is moved between options with the arrow keys, not by tabbing through every\n        one of them. Programmatic .focus() still works on a negative tabindex.\n      -->\n      <button\n        type=\"button\"\n        class=\"gog-select__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        [attr.aria-selected]=\"isSelected(option.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
+
+/** Height of the select-all/clear row, included in the panel height estimate. */
+const CONTROLS_ROW_HEIGHT = 38;
+class MultiselectComponent extends GogDropdownBase {
     showControls = input(false, ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
-    dropdownDirection = input('auto', ...(ngDevMode ? [{ debugName: "dropdownDirection" }] : /* istanbul ignore next */ []));
-    dropdownZIndex = input(null, ...(ngDevMode ? [{ debugName: "dropdownZIndex" }] : /* istanbul ignore next */ []));
-    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    chevronTemplate = input(null, ...(ngDevMode ? [{ debugName: "chevronTemplate" }] : /* istanbul ignore next */ []));
+    /** Where the "select all"/"clear" row sits relative to the option list. Sticky either way. */
+    controlsPosition = input('top', ...(ngDevMode ? [{ debugName: "controlsPosition" }] : /* istanbul ignore next */ []));
     clearIconTemplate = input(null, ...(ngDevMode ? [{ debugName: "clearIconTemplate" }] : /* istanbul ignore next */ []));
     /** Two-way bindable selected ids: `[(value)]="signal"`. */
     value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    dropdownDirectionState = signal('down', ...(ngDevMode ? [{ debugName: "dropdownDirectionState" }] : /* istanbul ignore next */ []));
-    elRef = inject((ElementRef));
-    appRef = inject(ApplicationRef);
-    envInjector = inject(EnvironmentInjector);
-    destroyRef = inject(DestroyRef);
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    ngControl = inject(NgControl, { optional: true, self: true });
-    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
-    formStatus = this.ngControl?.statusChanges
-        ? toSignal(this.ngControl.statusChanges, { initialValue: this.ngControl.status ?? 'VALID' })
-        : signal('VALID');
-    hasError = computed(() => {
-        if (this.ngControl) {
-            return this._touched() && this.formStatus() === 'INVALID';
-        }
-        return !!this.errorMessage() && this.value().length === 0;
-    }, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    visibleError = computed(() => (this.hasError() ? this.errorMessage() : ''), ...(ngDevMode ? [{ debugName: "visibleError" }] : /* istanbul ignore next */ []));
-    portalHost = null;
-    portalRef = null;
+    panelTemplate = viewChild('panelTpl', ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
+    emptyValue = [];
+    optionClass = 'gog-ms__option';
+    triggerClass = 'gog-ms';
+    optionGapToken = '--gog-ms-option-gap';
+    optionsPaddingToken = '--gog-ms-options-padding';
+    panelMaxHeightToken = '--gog-ms-panel-max-height';
+    optionHeightToken = '--gog-ms-option-height';
+    listboxId = computed(() => `gog-ms-listbox-${this.uid}`, ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    labelId = computed(() => `gog-ms-label-${this.uid}`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
     selectedNames = computed(() => this.value()
-        .map((id) => this.options().find((o) => o.id === id)?.name)
+        .map((id) => this.options().find((option) => option.id === id)?.name)
         .filter(Boolean)
         .join(', '), ...(ngDevMode ? [{ debugName: "selectedNames" }] : /* istanbul ignore next */ []));
-    _onChange = () => { };
-    _onTouched = () => { };
-    constructor() {
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-        this.destroyRef.onDestroy(() => this.destroyPortal());
-    }
-    onDocumentClick(e) {
-        const inside = this.elRef.nativeElement.contains(e.target) ||
-            (this.portalHost?.contains(e.target) ?? false);
-        if (!inside) {
-            this.isOpen.set(false);
-            if (this.appendToBody())
-                this.destroyPortal();
-        }
-    }
-    onScrollOrResize() {
-        if (!this.isOpen())
-            return;
-        if (this.appendToBody()) {
-            this.updatePortalPosition();
-            return;
-        }
-        this.updateInlineDirection();
-    }
-    writeValue(val) {
-        this.value.set(val ?? []);
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.cvaDisabled.set(isDisabled);
-    }
     isSelected(id) {
         return this.value().includes(id);
     }
-    toggle() {
-        if (this.isDisabled())
+    toggleOption(option, event) {
+        event.stopPropagation();
+        if (option.disabled)
             return;
-        const next = !this.isOpen();
-        this.isOpen.set(next);
-        if (this.appendToBody()) {
-            if (next)
-                this.openPortal();
-            else
-                this.destroyPortal();
-        }
-        else if (next) {
-            this.updateInlineDirection();
-        }
-    }
-    toggleOption(option, e) {
-        e.stopPropagation();
-        this.applyToggle(option.id);
-        if (this.appendToBody() && this.portalRef) {
-            this.portalRef.instance.selectedIds = [...this.value()];
-            this.portalRef.changeDetectorRef.detectChanges();
-        }
-    }
-    applyToggle(id) {
         const current = this.value();
-        const next = this.isSelected(id) ? current.filter((x) => x !== id) : [...current, id];
-        this.value.set(next);
-        this._onChange(next);
-        this._onTouched();
-        this._touched.set(true);
+        this.commitValue(this.isSelected(option.id)
+            ? current.filter((id) => id !== option.id)
+            : [...current, option.id]);
     }
-    selectAll(e) {
-        e.stopPropagation();
-        const all = this.options().map((o) => o.id);
-        this.value.set(all);
-        this._onChange(all);
-        this._onTouched();
-        this._touched.set(true);
-        if (this.appendToBody() && this.portalRef) {
-            this.portalRef.instance.selectedIds = [...all];
-            this.portalRef.changeDetectorRef.detectChanges();
-        }
-    }
-    clearAll(e) {
-        e.stopPropagation();
-        this.value.set([]);
-        this._onChange([]);
-        this._onTouched();
-        this._touched.set(true);
-        if (this.appendToBody() && this.portalRef) {
-            this.portalRef.instance.selectedIds = [];
-            this.portalRef.changeDetectorRef.detectChanges();
-        }
-    }
-    clearTrigger(e) {
-        e.stopPropagation();
-        this.value.set([]);
-        this._onChange([]);
-        this._onTouched();
-        this._touched.set(true);
-    }
-    close() {
-        if (!this.isOpen())
-            return;
-        this.isOpen.set(false);
-        if (this.appendToBody())
-            this.destroyPortal();
-    }
-    estimatePanelHeight() {
-        const controlsHeight = this.showControls() ? 38 : 0;
-        const optionsCount = Math.max(this.options().length, 1);
-        const optionsPadding = this.getOptionPadding() * 2;
-        const optionGap = this.getOptionGap();
-        const optionsHeight = optionsCount * 40 + Math.max(optionsCount - 1, 0) * optionGap + optionsPadding;
-        return Math.min(optionsHeight + controlsHeight, 260);
-    }
-    getOptionGap() {
-        if (!this.isBrowser) {
-            return 4;
-        }
-        const gap = getComputedStyle(this.elRef.nativeElement).getPropertyValue('--gog-ms-option-gap').trim();
-        const parsedGap = Number.parseFloat(gap);
-        return Number.isFinite(parsedGap) ? parsedGap : 4;
-    }
-    getOptionPadding() {
-        if (!this.isBrowser) {
-            return 4;
-        }
-        const padding = getComputedStyle(this.elRef.nativeElement)
-            .getPropertyValue('--gog-ms-options-padding')
-            .trim();
-        const parsedPadding = Number.parseFloat(padding);
-        return Number.isFinite(parsedPadding) ? parsedPadding : 4;
-    }
-    updateInlineDirection() {
-        if (!this.isBrowser)
-            return;
-        const placement = resolveDropdownPlacement(this.dropdownDirection(), this.elRef.nativeElement.getBoundingClientRect(), this.estimatePanelHeight(), window.innerHeight, 2, 8);
-        this.dropdownDirectionState.set(placement.direction);
+    selectAll(event) {
+        event.stopPropagation();
+        this.commitValue(this.options()
+            .filter((option) => !option.disabled)
+            .map((option) => option.id));
     }
-    openPortal() {
-        if (!this.isBrowser)
-            return;
-        this.destroyPortal();
-        this.portalHost = document.createElement('div');
-        document.body.appendChild(this.portalHost);
-        this.portalRef = createComponent(GogMultiselectDropdownPortal, {
-            environmentInjector: this.envInjector,
-            hostElement: this.portalHost,
-        });
-        const inst = this.portalRef.instance;
-        inst.options = this.options();
-        inst.selectedIds = [...this.value()];
-        inst.showControls = this.showControls();
-        inst.listboxId = `gog-ms-listbox-${this.instanceId}`;
-        inst.zIndex = this.dropdownZIndex() ?? 9999;
-        inst.direction = this.dropdownDirectionState();
-        inst.maxHeight = this.estimatePanelHeight();
-        inst.onToggle = (o, e) => this.toggleOption(o, e);
-        inst.onSelectAll = (e) => this.selectAll(e);
-        inst.onClearAll = (e) => this.clearAll(e);
-        this.updatePortalPosition();
-        this.appRef.attachView(this.portalRef.hostView);
-        this.portalRef.changeDetectorRef.detectChanges();
-    }
-    updatePortalPosition() {
-        if (!this.portalRef || !this.isBrowser)
-            return;
-        const placement = resolveDropdownPlacement(this.dropdownDirection(), this.elRef.nativeElement.getBoundingClientRect(), this.estimatePanelHeight(), window.innerHeight, 2, 8);
-        this.portalRef.instance.direction = placement.direction;
-        this.portalRef.instance.top = placement.top;
-        this.portalRef.instance.left = placement.left;
-        this.portalRef.instance.width = placement.width;
-        this.portalRef.instance.maxHeight = placement.maxHeight;
-        this.dropdownDirectionState.set(placement.direction);
-        this.portalRef.changeDetectorRef.detectChanges();
+    clearAll(event) {
+        event.stopPropagation();
+        this.commitValue([]);
     }
-    destroyPortal() {
-        if (this.portalRef) {
-            this.appRef.detachView(this.portalRef.hostView);
-            this.portalRef.destroy();
-            this.portalRef = null;
-        }
-        if (this.portalHost) {
-            this.portalHost.remove();
-            this.portalHost = null;
-        }
+    extraPanelHeight() {
+        return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevronTemplate: { classPropertyName: "chevronTemplate", publicName: "chevronTemplate", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onScrollOrResize()", "window:resize": "onScrollOrResize()" } }, ngImport: i0, template: "<div class=\"gog-ms-wrapper gog-contained-layout\">\n  @if (label()) {\n    <label class=\"gog-ms__label font-heading\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"'gog-ms-listbox-' + instanceId\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n  >\n    <span class=\"gog-ms__value font-body\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearTrigger($event)\"\n          aria-label=\"Clear selection\"\n        >\n        <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n    <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n      <gog-icon [template]=\"chevronTemplate()\" [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n    </span>\n    </span>\n  </div>\n\n  @if (isOpen()) {\n    <div\n      [id]=\"'gog-ms-listbox-' + instanceId\"\n      class=\"gog-ms__dropdown\"\n      [class.gog-ms__dropdown--up]=\"dropdownDirectionState() === 'up'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [style.z-index]=\"dropdownZIndex() ?? null\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (showControls()) {\n        <div class=\"gog-ms__controls\">\n          <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n          <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n        </div>\n      }\n      <div class=\"gog-ms__options\">\n        @for (option of options(); track option.id) {\n          <button\n            type=\"button\"\n            class=\"gog-ms__option font-body\"\n            role=\"option\"\n            [attr.aria-selected]=\"isSelected(option.id)\"\n            [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n            (click)=\"toggleOption(option, $event)\"\n          >\n            <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" focusable=\"false\" aria-hidden=\"true\">\n                <rect\n                  x=\"2.5\"\n                  y=\"2.5\"\n                  width=\"11\"\n                  height=\"11\"\n                  rx=\"2\"\n                  [attr.fill]=\"isSelected(option.id) ? 'currentColor' : 'none'\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                />\n                @if (isSelected(option.id)) {\n                  <path\n                    d=\"M4 8L6.75 10.75L12 5.5\"\n                    stroke=\"var(--gog-ms-checkbox-checked-color)\"\n                    stroke-width=\"1.75\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                }\n              </svg>\n            </span>\n            {{ option.name }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error font-body\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n", styles: [".gog-ms-wrapper{--gog-ms-gap: 4px;--gog-ms-option-gap: 4px;--gog-ms-options-padding: 4px;--gog-ms-label-color: var(--accent-color);--gog-ms-field-bg: var(--surface-color);--gog-ms-field-border: var(--accent-dim);--gog-ms-field-color: var(--text-color);--gog-ms-value-color: var(--text-color);--gog-ms-placeholder-color: var(--muted-text-color);--gog-ms-focus-border: var(--accent-color);--gog-ms-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-ms-error-color: var(--danger-color);--gog-ms-border-color: var(--accent-color);--gog-ms-panel-bg: var(--surface-color);--gog-ms-panel-border: var(--accent-color);--gog-ms-panel-shadow: 0 8px 24px rgba(0, 0, 0, .3);--gog-ms-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-ms-checkbox-border: var(--accent-dim);--gog-ms-checkbox-bg: var(--background-color);--gog-ms-checkbox-checked-bg: var(--accent-color);--gog-ms-checkbox-checked-color: var(--primary-color);--gog-ms-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms__label{font-size:var(--text-sm);color:var(--gog-ms-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-ms{--gog-ms-padding-y: var(--control-padding-y, 10px);--gog-ms-padding-x: var(--control-padding-x, 14px);display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y) var(--gog-ms-padding-x);background-color:var(--gog-ms-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border);border-radius:var(--radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:0 0 8px var(--gog-ms-focus-ring)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-size:var(--text-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.gog-ms__clear{width:1rem;height:1rem;padding:0;border:0;border-radius:var(--gog-ms-clear-radius, 2px);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color .15s ease}.gog-ms__clear gog-icon{font-size:.7rem}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem}.gog-ms__arrow gog-icon{font-size:.875rem}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--gog-ms-panel-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-panel-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{display:flex;gap:4px;padding:6px 10px;border-bottom:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-ms-padding-x);border:0;background:transparent;text-align:left;font:inherit;font-size:var(--text-md);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:background-color .12s ease;color:var(--text-color)}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:-3px}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__option-mark svg{width:18px;height:18px}.gog-ms__error{font-size:var(--text-xs);color:var(--gog-ms-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "debounce", "loading"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n          expects: focus moves between options with the arrow keys, not by tabbing\n          through every one. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-ms__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '(document:click)': 'onDocumentClick($event)',
-                        '(window:scroll)': 'onScrollOrResize()',
-                        '(window:resize)': 'onScrollOrResize()',
-                    }, template: "<div class=\"gog-ms-wrapper gog-contained-layout\">\n  @if (label()) {\n    <label class=\"gog-ms__label font-heading\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"'gog-ms-listbox-' + instanceId\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n  >\n    <span class=\"gog-ms__value font-body\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearTrigger($event)\"\n          aria-label=\"Clear selection\"\n        >\n        <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n    <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n      <gog-icon [template]=\"chevronTemplate()\" [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n    </span>\n    </span>\n  </div>\n\n  @if (isOpen()) {\n    <div\n      [id]=\"'gog-ms-listbox-' + instanceId\"\n      class=\"gog-ms__dropdown\"\n      [class.gog-ms__dropdown--up]=\"dropdownDirectionState() === 'up'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [style.z-index]=\"dropdownZIndex() ?? null\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (showControls()) {\n        <div class=\"gog-ms__controls\">\n          <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n          <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n        </div>\n      }\n      <div class=\"gog-ms__options\">\n        @for (option of options(); track option.id) {\n          <button\n            type=\"button\"\n            class=\"gog-ms__option font-body\"\n            role=\"option\"\n            [attr.aria-selected]=\"isSelected(option.id)\"\n            [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n            (click)=\"toggleOption(option, $event)\"\n          >\n            <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" focusable=\"false\" aria-hidden=\"true\">\n                <rect\n                  x=\"2.5\"\n                  y=\"2.5\"\n                  width=\"11\"\n                  height=\"11\"\n                  rx=\"2\"\n                  [attr.fill]=\"isSelected(option.id) ? 'currentColor' : 'none'\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                />\n                @if (isSelected(option.id)) {\n                  <path\n                    d=\"M4 8L6.75 10.75L12 5.5\"\n                    stroke=\"var(--gog-ms-checkbox-checked-color)\"\n                    stroke-width=\"1.75\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                }\n              </svg>\n            </span>\n            {{ option.name }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error font-body\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n", styles: [".gog-ms-wrapper{--gog-ms-gap: 4px;--gog-ms-option-gap: 4px;--gog-ms-options-padding: 4px;--gog-ms-label-color: var(--accent-color);--gog-ms-field-bg: var(--surface-color);--gog-ms-field-border: var(--accent-dim);--gog-ms-field-color: var(--text-color);--gog-ms-value-color: var(--text-color);--gog-ms-placeholder-color: var(--muted-text-color);--gog-ms-focus-border: var(--accent-color);--gog-ms-focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);--gog-ms-error-color: var(--danger-color);--gog-ms-border-color: var(--accent-color);--gog-ms-panel-bg: var(--surface-color);--gog-ms-panel-border: var(--accent-color);--gog-ms-panel-shadow: 0 8px 24px rgba(0, 0, 0, .3);--gog-ms-option-hover-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);--gog-ms-checkbox-border: var(--accent-dim);--gog-ms-checkbox-bg: var(--background-color);--gog-ms-checkbox-checked-bg: var(--accent-color);--gog-ms-checkbox-checked-color: var(--primary-color);--gog-ms-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms__label{font-size:var(--text-sm);color:var(--gog-ms-label-color);text-transform:uppercase;letter-spacing:1px;cursor:pointer}.gog-ms{--gog-ms-padding-y: var(--control-padding-y, 10px);--gog-ms-padding-x: var(--control-padding-x, 14px);display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y) var(--gog-ms-padding-x);background-color:var(--gog-ms-field-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border);border-radius:var(--radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:44px}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:0 0 8px var(--gog-ms-focus-ring)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-size:var(--text-md);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.gog-ms__clear{width:1rem;height:1rem;padding:0;border:0;border-radius:var(--gog-ms-clear-radius, 2px);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color .15s ease}.gog-ms__clear gog-icon{font-size:.7rem}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:2px}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform .2s ease;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem}.gog-ms__arrow gog-icon{font-size:.875rem}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:var(--dropdown-z, 300);background-color:var(--gog-ms-panel-bg);border:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-panel-border);border-radius:var(--radius);max-height:260px;overflow-y:auto;box-shadow:var(--panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + 2px)}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{display:flex;gap:4px;padding:6px 10px;border-bottom:var(--control-border-width, 2px) var(--control-border-style, solid) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:10px;padding:var(--control-padding-y, 10px) var(--gog-ms-padding-x);border:0;background:transparent;text-align:left;font:inherit;font-size:var(--text-md);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:background-color .12s ease;color:var(--text-color)}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:3px solid var(--gog-ms-focus-ring);outline-offset:-3px}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__option-mark svg{width:18px;height:18px}.gog-ms__error{font-size:var(--text-xs);color:var(--gog-ms-error-color);margin-top:2px}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronTemplate", required: false }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+            args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n          expects: focus moves between options with the arrow keys, not by tabbing\n          through every one. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-ms__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
+        }], propDecorators: { showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 class SliderComponent {
     static nextId = 0;
@@ -1806,11 +1747,15 @@ class SliderComponent {
     showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
     showThumb = input(true, ...(ngDevMode ? [{ debugName: "showThumb" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
+    errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Two-way bindable value: `[(value)]="signal"`. */
     value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ngControl = inject(NgControl, { optional: true, self: true });
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    errorState = new GogErrorState(this.errorMessage, this.errorDisplay, this.ngControl);
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     clampedValue = computed(() => {
         const value = this.value();
@@ -1824,9 +1769,22 @@ class SliderComponent {
     }, ...(ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []));
     thumbPos = computed(() => `${this.fillPercent()}%`, ...(ngDevMode ? [{ debugName: "thumbPos" }] : /* istanbul ignore next */ []));
     fillScale = computed(() => this.fillPercent() / 100, ...(ngDevMode ? [{ debugName: "fillScale" }] : /* istanbul ignore next */ []));
-    errorId = computed(() => (this.errorMessage() ? `${this.inputId}-error` : null), ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    hasError = this.errorState.hasError;
+    visibleError = this.errorState.visibleError;
+    errorId = computed(() => (this.hasError() ? `${this.inputId}-error` : null), ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
+    constructor() {
+        // Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
+        // available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
+        // injecting NgControl would be a dependency cycle.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngDoCheck() {
+        this.errorState.check();
+    }
     writeValue(val) {
         const next = val ?? this.min();
         this.value.set(Math.min(this.max(), Math.max(this.min(), next)));
@@ -1851,44 +1809,203 @@ class SliderComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SliderComponent, isStandalone: true, selector: "gog-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showThumb: { classPropertyName: "showThumb", publicName: "showThumb", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SliderComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div\n  class=\"gog-slider gog-contained-layout\"\n  [class.gog-slider--disabled]=\"isDisabled()\"\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n  <div class=\"gog-slider__header\">\n    @if (label()) {\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label font-heading\">{{ label() }}</label>\n    }\n\n    @if (showValue()) {\n      <span class=\"gog-slider__value font-mono\">{{ clampedValue() }}</span>\n    }\n  </div>\n\n  <div class=\"gog-slider__track-container\">\n    <div class=\"gog-slider__track\">\n      <div class=\"gog-slider__fill\"></div>\n    </div>\n\n    @if (showThumb()) {\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n    }\n\n    <input\n      [id]=\"inputId\"\n      class=\"gog-slider__input\"\n      type=\"range\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"clampedValue()\"\n      [attr.aria-invalid]=\"!!errorMessage()\"\n      [attr.aria-describedby]=\"errorId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"clampedValue()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  <div class=\"gog-slider__range-labels font-mono\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n\n  @if (errorMessage()) {\n    <span class=\"gog-slider__error font-body\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ errorMessage() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}.gog-slider{--gog-slider-gap: 6px;--gog-slider-label-color: var(--accent-color);--gog-slider-value-color: var(--accent-color);--gog-slider-track-bg: var(--accent-dim);--gog-slider-fill-bg: var(--accent-color);--gog-slider-thumb-bg: var(--accent-color);--gog-slider-thumb-border: var(--background-color);--gog-slider-thumb-shadow: color-mix(in srgb, var(--accent-bright) 40%, transparent);--gog-slider-focus-ring: color-mix(in srgb, var(--accent-color) 30%, transparent);--gog-slider-range-color: var(--muted-text-color);--gog-slider-error-color: var(--danger-color);--gog-slider-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-size:var(--text-sm);color:var(--gog-slider-label-color);text-transform:uppercase;letter-spacing:1px}.gog-slider__value{min-width:40px;font-size:var(--text-sm);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:20px}.gog-slider__track{position:absolute;inset-inline:0;height:4px;overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:16px;height:16px;border:2px solid var(--gog-slider-thumb-border);border-radius:50%;background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 6px var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 3px var(--gog-slider-focus-ring),0 0 6px var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--gog-slider-range-color)}.gog-slider__error{font-size:var(--text-xs);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SliderComponent, isStandalone: true, selector: "gog-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showThumb: { classPropertyName: "showThumb", publicName: "showThumb", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()" } }, ngImport: i0, template: "<div\n  class=\"gog-slider gog-contained-layout\"\n  [class.gog-slider--disabled]=\"isDisabled()\"\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n  <div class=\"gog-slider__header\">\n    @if (label()) {\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\n    }\n\n    @if (showValue()) {\n      <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\n    }\n  </div>\n\n  <div class=\"gog-slider__track-container\">\n    <div class=\"gog-slider__track\">\n      <div class=\"gog-slider__fill\"></div>\n    </div>\n\n    @if (showThumb()) {\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n    }\n\n    <input\n      [id]=\"inputId\"\n      class=\"gog-slider__input\"\n      type=\"range\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"clampedValue()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"clampedValue()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  <div class=\"gog-slider__range-labels\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SliderComponent),
-                            multi: true,
-                        },
-                    ], host: {
+            args: [{ selector: 'gog-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--thumb-pos]': 'thumbPos()',
                         '[style.--fill-scale]': 'fillScale()',
-                    }, template: "<div\n  class=\"gog-slider gog-contained-layout\"\n  [class.gog-slider--disabled]=\"isDisabled()\"\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n  <div class=\"gog-slider__header\">\n    @if (label()) {\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label font-heading\">{{ label() }}</label>\n    }\n\n    @if (showValue()) {\n      <span class=\"gog-slider__value font-mono\">{{ clampedValue() }}</span>\n    }\n  </div>\n\n  <div class=\"gog-slider__track-container\">\n    <div class=\"gog-slider__track\">\n      <div class=\"gog-slider__fill\"></div>\n    </div>\n\n    @if (showThumb()) {\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n    }\n\n    <input\n      [id]=\"inputId\"\n      class=\"gog-slider__input\"\n      type=\"range\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"clampedValue()\"\n      [attr.aria-invalid]=\"!!errorMessage()\"\n      [attr.aria-describedby]=\"errorId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"clampedValue()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  <div class=\"gog-slider__range-labels font-mono\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n\n  @if (errorMessage()) {\n    <span class=\"gog-slider__error font-body\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ errorMessage() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}.gog-slider{--gog-slider-gap: 6px;--gog-slider-label-color: var(--accent-color);--gog-slider-value-color: var(--accent-color);--gog-slider-track-bg: var(--accent-dim);--gog-slider-fill-bg: var(--accent-color);--gog-slider-thumb-bg: var(--accent-color);--gog-slider-thumb-border: var(--background-color);--gog-slider-thumb-shadow: color-mix(in srgb, var(--accent-bright) 40%, transparent);--gog-slider-focus-ring: color-mix(in srgb, var(--accent-color) 30%, transparent);--gog-slider-range-color: var(--muted-text-color);--gog-slider-error-color: var(--danger-color);--gog-slider-disabled-opacity: .4;display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-size:var(--text-sm);color:var(--gog-slider-label-color);text-transform:uppercase;letter-spacing:1px}.gog-slider__value{min-width:40px;font-size:var(--text-sm);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:20px}.gog-slider__track{position:absolute;inset-inline:0;height:4px;overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:16px;height:16px;border:2px solid var(--gog-slider-thumb-border);border-radius:50%;background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 6px var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 3px var(--gog-slider-focus-ring),0 0 6px var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--gog-slider-range-color)}.gog-slider__error{font-size:var(--text-xs);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"] }]
-        }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, template: "<div\n  class=\"gog-slider gog-contained-layout\"\n  [class.gog-slider--disabled]=\"isDisabled()\"\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n  <div class=\"gog-slider__header\">\n    @if (label()) {\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\n    }\n\n    @if (showValue()) {\n      <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\n    }\n  </div>\n\n  <div class=\"gog-slider__track-container\">\n    <div class=\"gog-slider__track\">\n      <div class=\"gog-slider__fill\"></div>\n    </div>\n\n    @if (showThumb()) {\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n    }\n\n    <input\n      [id]=\"inputId\"\n      class=\"gog-slider__input\"\n      type=\"range\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"clampedValue()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"clampedValue()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  <div class=\"gog-slider__range-labels\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"] }]
+        }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class SkeletonComponent {
+    shape = input('text', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    animation = input('pulse', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
+    /** CSS width, e.g. '240px' or '60%'. Falls back to a shape/size default when unset. */
+    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** CSS height override. Ignored for `text`, whose lines size from `size` instead. */
+    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Number of stacked lines when `shape="text"`. The last line renders shorter. */
+    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    lineList = computed(() => {
+        const count = Math.max(1, this.lines());
+        return Array.from({ length: count }, (_, index) => count > 1 && index === count - 1);
+    }, ...(ngDevMode ? [{ debugName: "lineList" }] : /* istanbul ignore next */ []));
+    // Keeps a width-only override circular instead of an oval, since `circle` has no
+    // independent height concept of its own.
+    resolvedHeight = computed(() => {
+        if (this.shape() === 'text') {
+            return null;
+        }
+        if (this.shape() === 'circle') {
+            return this.height() ?? this.width();
+        }
+        return this.height();
+    }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => [
+        'gog-skeleton',
+        `gog-skeleton--${this.shape()}`,
+        `gog-skeleton--${this.size()}`,
+        `gog-skeleton--${this.animation()}`,
+        this.rounded() ? null : 'gog-skeleton--square',
+    ]
+        .filter((className) => className !== null)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SkeletonComponent, isStandalone: true, selector: "gog-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.width": "width()", "style.height": "resolvedHeight()", "attr.role": "ariaLabel() ? \"status\" : null", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaLabel() ? null : \"true\"" } }, ngImport: i0, template: "@switch (shape()) {\n  @case ('text') {\n    @for (isShort of lineList(); track $index) {\n      <span\n        class=\"gog-skeleton__bone gog-skeleton__line\"\n        [class.gog-skeleton__line--short]=\"isShort\"\n      ></span>\n    }\n  }\n  @default {\n    <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.width]': 'width()',
+                        '[style.height]': 'resolvedHeight()',
+                        // Decorative by default — a page can carry dozens of these while loading, and a
+                        // role="status" on every single bone would flood assistive tech with announcements.
+                        // Pass `ariaLabel` on the one instance that should actually speak for the loading state.
+                        '[attr.role]': 'ariaLabel() ? "status" : null',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-hidden]': 'ariaLabel() ? null : "true"',
+                    }, template: "@switch (shape()) {\n  @case ('text') {\n    @for (isShort of lineList(); track $index) {\n      <span\n        class=\"gog-skeleton__bone gog-skeleton__line\"\n        [class.gog-skeleton__line--short]=\"isShort\"\n      ></span>\n    }\n  }\n  @default {\n    <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"] }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class PaginatorComponent {
+    /** 1-based current page. Two-way bindable: `[(page)]="myPageSignal"`. */
+    page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    totalPages = input(1, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* 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
+     * unless `showFirstPage`/`showLastPage` ask for them.
+     * `ellipsis`: the original behavior — first and last page are always pinned, and
+     * `siblingCount` pages are kept around the current one, with a "…" filling the gap. Kept
+     * around as an opt-in for consumers (like `gog-table`) already built around that look.
+     */
+    rangeMode = input('window', ...(ngDevMode ? [{ debugName: "rangeMode" }] : /* istanbul ignore next */ []));
+    /** `rangeMode="window"` only: how many page number buttons stay visible at once. */
+    visiblePages = input(5, ...(ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []));
+    /** `rangeMode="window"` only: always keep page 1 reachable, with a "…" if it's not adjacent. */
+    showFirstPage = input(false, ...(ngDevMode ? [{ debugName: "showFirstPage" }] : /* istanbul ignore next */ []));
+    /** `rangeMode="window"` only: always keep the last page reachable, with a "…" if it's not adjacent. */
+    showLastPage = input(false, ...(ngDevMode ? [{ debugName: "showLastPage" }] : /* istanbul ignore next */ []));
+    /** `rangeMode="ellipsis"` only: how many page numbers to keep on each side of the current page. */
+    siblingCount = input(2, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
+    size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    pageNumbers = computed(() => {
+        const total = Math.max(1, this.totalPages());
+        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
+        // 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 current = this.page();
+            if (current > total) {
+                this.page.set(total);
+            }
+            else if (current < 1) {
+                this.page.set(1);
+            }
+        });
+    }
+    windowRange(total, current) {
+        const windowSize = Math.min(Math.max(1, this.visiblePages()), total);
+        const start = Math.max(1, Math.min(current - Math.floor((windowSize - 1) / 2), total - windowSize + 1));
+        const end = start + windowSize - 1;
+        const range = [];
+        if (this.showFirstPage() && start > 1) {
+            range.push(1);
+            if (start > 2)
+                range.push('...');
+        }
+        for (let i = start; i <= end; i++)
+            range.push(i);
+        if (this.showLastPage() && end < total) {
+            if (end < total - 1)
+                range.push('...');
+            range.push(total);
+        }
+        return range;
+    }
+    ellipsisRange(total, current) {
+        const delta = Math.max(0, this.siblingCount());
+        const range = [];
+        for (let i = 1; i <= total; i++) {
+            if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
+                range.push(i);
+            }
+            else if (range[range.length - 1] !== '...') {
+                range.push('...');
+            }
+        }
+        return range;
+    }
+    isNumber(value) {
+        return typeof value === 'number';
+    }
+    goTo(target) {
+        if (this.disabled() || target < 1 || target > this.totalPages())
+            return;
+        this.page.set(target);
+    }
+    prev() {
+        this.goTo(this.page() - 1);
+    }
+    next() {
+        this.goTo(this.page() + 1);
+    }
+    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 }, 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": "ariaLabel()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}.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 });
+}
+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: {
+                        class: 'gog-paginator',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    }, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}.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"] }], 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 }] }] } });
 
 class SpinnerOverlayComponent {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    variant = input('runic', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SpinnerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerOverlayComponent, isStandalone: true, selector: "gog-spinner-overlay", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-spinner-overlay-host" }, ngImport: i0, template: "<div class=\"gog-spinner-overlay\">\r\n  <div class=\"gog-spinner-overlay__content\">\r\n    <ng-content />\r\n  </div>\r\n\r\n  @if (loading()) {\r\n    <div class=\"gog-spinner-overlay__scrim\">\r\n      <gog-spinner [size]=\"size()\" [ariaLabel]=\"ariaLabel()\" />\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.gog-spinner-overlay{position:relative}.gog-spinner-overlay__content{min-height:inherit}.gog-spinner-overlay__scrim{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--gog-spinner-overlay-bg, rgba(10, 8, 3, .65));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:gog-spinner-overlay-fade-in .2s ease}@keyframes gog-spinner-overlay-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner-overlay__scrim{animation:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SpinnerOverlayComponent, isStandalone: true, selector: "gog-spinner-overlay", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-spinner-overlay-host" }, ngImport: i0, template: "<div class=\"gog-spinner-overlay\">\n  <div class=\"gog-spinner-overlay__content\">\n    <ng-content />\n  </div>\n\n  @if (loading()) {\n    <div class=\"gog-spinner-overlay__scrim\">\n      <gog-spinner [size]=\"size()\" [ariaLabel]=\"ariaLabel()\" [variant]=\"variant()\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.gog-spinner-overlay{position:relative}.gog-spinner-overlay__content{min-height:inherit}.gog-spinner-overlay__scrim{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-overlay-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}@keyframes gog-spinner-overlay-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner-overlay__scrim{animation:none}}\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: SpinnerOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-spinner-overlay', imports: [SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-spinner-overlay-host',
                         '[attr.aria-busy]': 'loading() ? "true" : null',
-                    }, template: "<div class=\"gog-spinner-overlay\">\r\n  <div class=\"gog-spinner-overlay__content\">\r\n    <ng-content />\r\n  </div>\r\n\r\n  @if (loading()) {\r\n    <div class=\"gog-spinner-overlay__scrim\">\r\n      <gog-spinner [size]=\"size()\" [ariaLabel]=\"ariaLabel()\" />\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.gog-spinner-overlay{position:relative}.gog-spinner-overlay__content{min-height:inherit}.gog-spinner-overlay__scrim{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--gog-spinner-overlay-bg, rgba(10, 8, 3, .65));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:gog-spinner-overlay-fade-in .2s ease}@keyframes gog-spinner-overlay-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner-overlay__scrim{animation:none}}\n"] }]
-        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+                    }, template: "<div class=\"gog-spinner-overlay\">\n  <div class=\"gog-spinner-overlay__content\">\n    <ng-content />\n  </div>\n\n  @if (loading()) {\n    <div class=\"gog-spinner-overlay__scrim\">\n      <gog-spinner [size]=\"size()\" [ariaLabel]=\"ariaLabel()\" [variant]=\"variant()\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.gog-spinner-overlay{position:relative}.gog-spinner-overlay__content{min-height:inherit}.gog-spinner-overlay__scrim{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-overlay-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}@keyframes gog-spinner-overlay-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner-overlay__scrim{animation:none}}\n"] }]
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
+/** Case-insensitive, numeric-aware (`"item2" < "item10"`) — the sensible default for text. */
+const defaultCollator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+/** Default comparator: locale-aware for strings via `Intl.Collator`, `<`/`>` otherwise. */
+function defaultCompare(a, b) {
+    if (typeof a === 'string' && typeof b === 'string') {
+        return defaultCollator.compare(a, b);
+    }
+    if (a === b)
+        return 0;
+    return a < b ? -1 : 1;
+}
 class Column {
+    /** Field name, or a dot-path into a nested property (e.g. `"address.city"`). */
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     header = input('', ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
     sortable = input(false, ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
@@ -1898,8 +2015,10 @@ class Column {
     minWidth = input('', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
     /** Max width, e.g. "300px" */
     maxWidth = input('', ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /** Custom sort comparator for this column. Defaults to `defaultCompare`. */
+    comparator = input(null, ...(ngDevMode ? [{ debugName: "comparator" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Column, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: Column, isStandalone: true, selector: "column", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: Column, isStandalone: true, selector: "column", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, comparator: { classPropertyName: "comparator", publicName: "comparator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Column, decorators: [{
             type: Directive,
@@ -1907,7 +2026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'column',
                 }]
-        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], comparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparator", required: false }] }] } });
 
 /**
  * Marks a <ng-template> inside <gog-table> with a field name and optional type.
@@ -1920,7 +2039,9 @@ class TemplateDirective {
     template = input.required(...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
     type = input('body', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     templateRef = inject((TemplateRef));
-    static ngTemplateContextGuard(_dir, ctx) {
+    static ngTemplateContextGuard(_dir, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- only used as a type guard
+    ctx) {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -1929,10 +2050,23 @@ class TemplateDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TemplateDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[template]',
                 }]
         }], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
+/** Resolves `field` against `row`, following dot-paths (e.g. `"address.city"`). */
+function getByPath(row, field) {
+    if (!field.includes('.'))
+        return row?.[field];
+    let value = row;
+    for (const key of field.split('.')) {
+        if (value == null)
+            return undefined;
+        value = value[key];
+    }
+    return value;
+}
 class TableComponent {
     value = input([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** 0 = no pagination */
@@ -1954,34 +2088,25 @@ class TableComponent {
     size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     columns = contentChildren(Column, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     templates = contentChildren(TemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     sortState = signal({ field: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            this.value();
-            this.pageSize();
-            this.currentPage();
-            const total = this.totalPages();
-            if (this.currentPage() > total) {
-                this.currentPage.set(total);
-            }
-        });
-    }
     sortedData = computed(() => {
         const { field, direction } = this.sortState();
         const rows = [...this.value()];
         if (!field || !direction)
             return rows;
+        const compare = this.columns()
+            .find((col) => col.field() === field)
+            ?.comparator() ?? defaultCompare;
         return rows.sort((a, b) => {
-            const av = a[field];
-            const bv = b[field];
+            const av = getByPath(a, field);
+            const bv = getByPath(b, field);
             if (av == null && bv == null)
                 return 0;
             if (av == null)
                 return 1;
             if (bv == null)
                 return -1;
-            const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+            const cmp = compare(av, bv);
             return direction === 'asc' ? cmp : -cmp;
         });
     }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
@@ -1991,6 +2116,19 @@ class TableComponent {
             return 1;
         return Math.max(1, Math.ceil(this.sortedData().length / size));
     }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    /**
+     * Resets to page 1 whenever the sort changes (a new sort re-orders the whole data set,
+     * so whatever page the user was on no longer means anything) and clamps down to
+     * `totalPages` whenever the data set or page size shrinks — but otherwise preserves
+     * 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() }),
+        computation: (src, previous) => {
+            if (!previous || previous.source.sortState !== src.sortState)
+                return 1;
+            return Math.min(Math.max(1, previous.value), src.total);
+        } });
     visibleRows = computed(() => {
         const size = this.pageSize();
         if (!size)
@@ -1999,21 +2137,6 @@ class TableComponent {
         const start = (page - 1) * size;
         return this.sortedData().slice(start, start + size);
     }, ...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
-    pageNumbers = computed(() => {
-        const total = this.totalPages();
-        const current = this.currentPage();
-        const delta = 2;
-        const range = [];
-        for (let i = 1; i <= total; i++) {
-            if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
-                range.push(i);
-            }
-            else if (range[range.length - 1] !== '...') {
-                range.push('...');
-            }
-        }
-        return range;
-    }, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : /* 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 */ []));
     getBodyTemplate(field) {
@@ -2036,7 +2159,6 @@ class TableComponent {
         else {
             this.sortState.set({ field: '', direction: null });
         }
-        this.currentPage.set(1);
     }
     getSortDirection(field) {
         const s = this.sortState();
@@ -2050,26 +2172,12 @@ class TableComponent {
             return 'descending';
         return null;
     }
-    goTo(page) {
-        if (page < 1 || page > this.totalPages())
-            return;
-        this.currentPage.set(page);
-    }
-    prev() {
-        this.goTo(this.currentPage() - 1);
-    }
-    next() {
-        this.goTo(this.currentPage() + 1);
-    }
     handleSortClick(col) {
         if (!this.loading())
             this.toggleSort(col);
     }
-    isNumber(val) {
-        return typeof val === 'number';
-    }
     getCellValue(row, field) {
-        return row[field];
+        return getByPath(row, field);
     }
     formatCellValue(row, field) {
         const value = this.getCellValue(row, field);
@@ -2108,16 +2216,16 @@ 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 }, 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": "\"100%\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n  <div class=\"gog-table-scroll\">\n    <table\n      class=\"gog-table font-body\"\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\n      [class.gog-table--loading]=\"loading()\"\n      [class.gog-table--md]=\"size() === 'md'\"\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\n      [class.gog-table--sm]=\"size() === 'sm'\"\n    >\n      <colgroup>\n        @if (showRowNumbers()) {\n          <col class=\"gog-table__col--num\" />\n        }\n        @for (col of columns(); track col.field()) {\n          <col\n            [style.width]=\"col.width() || null\"\n            [style.min-width]=\"col.minWidth() || null\"\n            [style.max-width]=\"col.maxWidth() || null\"\n          />\n        }\n      </colgroup>\n      <thead>\n        <tr>\n        @if (showRowNumbers()) {\n          <th class=\"gog-table__th gog-table__th--num font-heading\" scope=\"col\">#</th>\n        }\n        @for (col of columns(); track col.field()) {\n          <th\n            class=\"gog-table__th font-heading\"\n            scope=\"col\"\n            [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n            [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n            [attr.aria-sort]=\"getAriaSort(col.field())\"\n            [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n            (click)=\"handleSortClick(col)\"\n            (keydown.enter)=\"handleSortClick(col)\"\n            (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n          >\n            @if (getHeaderTemplate(col.field()); as headerTpl) {\n              <ng-container *ngTemplateOutlet=\"headerTpl\" />\n            } @else {\n              <span class=\"gog-table__th-inner\">\n                {{ col.header() || col.field() }}\n                @if (col.sortable() && !loading()) {\n                  <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n                    @if (getSortDirection(col.field()) === 'asc') {\n                      <gog-icon name=\"sort-up\" />\n                    } @else if (getSortDirection(col.field()) === 'desc') {\n                      <gog-icon name=\"sort-down\" />\n                    } @else {\n                      <gog-icon name=\"sort\" />\n                    }\n                  </span>\n                }\n              </span>\n            }\n          </th>\n        }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n              <gog-spinner size=\"md\" />\n            </td>\n          </tr>\n        } @else if (visibleRows().length === 0) {\n          <tr>\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n          </tr>\n        } @else {\n          @for (row of visibleRows(); track $index; let i = $index) {\n            <tr class=\"gog-table__row\">\n              @if (showRowNumbers()) {\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n              }\n              @for (col of columns(); track col.field()) {\n                <td class=\"gog-table__td\">\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n                    />\n                  } @else {\n                    {{ formatCellValue(row, col.field()) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (hasPagination() || showTotal()) {\n    <div class=\"gog-table__footer\">\n      @if (showTotal()) {\n        <span class=\"gog-table__total font-body\" [style.grid-area]=\"totalGridArea()\">\n          Total: {{ value().length }}\n        </span>\n      }\n\n      @if (hasPagination()) {\n        <nav\n          class=\"gog-table__pagination\"\n          [style.grid-area]=\"paginatorGridArea()\"\n          aria-label=\"Table pagination\"\n        >\n          <gog-button variant=\"ghost\" size=\"sm\" [disabled]=\"currentPage() === 1\" (gogClick)=\"prev()\"\n            >\u2039</gog-button\n          >\n          @for (page of pageNumbers(); track $index) {\n            @if (isNumber(page)) {\n              <gog-button\n                size=\"sm\"\n                [variant]=\"page === currentPage() ? 'primary' : 'ghost'\"\n                (gogClick)=\"goTo(page)\"\n                >{{ page }}</gog-button\n              >\n            } @else {\n              <span class=\"gog-table__pagination-ellipsis\">\u2026</span>\n            }\n          }\n          <gog-button\n            variant=\"ghost\"\n            size=\"sm\"\n            [disabled]=\"currentPage() === totalPages()\"\n            (gogClick)=\"next()\"\n          >\u203A</gog-button\n          >\n        </nav>\n      }\n    </div>\n  }\n</div>\n", styles: [".gog-table-wrapper{--gog-table-border-color: var(--accent-dim);--gog-table-surface: var(--surface-color);--gog-table-text-color: var(--text-color);--gog-table-accent-color: var(--accent-color);--gog-table-accent-bright: var(--accent-bright);--gog-table-hover-bg: var(--accent-pale);--gog-table-muted-color: var(--muted-text-color);--gog-table-focus-ring: var(--accent-color);--gog-table-pagination-gap: 4px;--gog-table-footer-gap: 8px;--gog-table-loading-opacity: .5;--gog-table-scroll-shadow: 0 8px 24px rgba(0, 0, 0, .3);display:flex;flex-direction:column;gap:12px;width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:2px solid var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);table-layout:fixed;--tbl-th-padding-v: 10px;--tbl-td-padding-v: 10px;--tbl-padding-h: 14px;--tbl-th-font-size: var(--text-sm);--tbl-td-font-size: var(--text-md)}.gog-table--md{--tbl-th-padding-v: 6px;--tbl-td-padding-v: 6px;--tbl-th-font-size: var(--text-xs);--tbl-td-font-size: var(--text-sm)}.gog-table--sm{--tbl-th-padding-v: 3px;--tbl-td-padding-v: 3px;--tbl-th-font-size: var(--text-xs);--tbl-td-font-size: var(--text-xs)}.gog-table__col--num{width:48px}.gog-table__th{padding:var(--tbl-th-padding-v) var(--tbl-padding-h);text-align:left;font-size:var(--tbl-th-font-size);text-transform:uppercase;letter-spacing:1px;color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:2px solid 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:48px;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:3px solid var(--gog-table-focus-ring);outline-offset:-3px}.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:6px;width:100%}.gog-table__sort-icon{display:inline-block;width:1em;text-align:center;font-size:.8rem;opacity:.6;flex-shrink:0}.gog-table__sort-icon gog-icon{font-size:.8rem}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--tbl-td-padding-v) var(--tbl-padding-h);font-size:var(--tbl-td-font-size);border-bottom:1px solid 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(--text-xs);font-family:var(--font-mono);width:48px}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color .12s ease}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:24px 14px;text-align:center;color:var(--gog-table-muted-color);font-size:var(--text-md)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:32px 14px;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:1px solid 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:32px;gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--text-xs);color:var(--gog-table-muted-color);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination{display:flex;align-items:center;gap:var(--gog-table-pagination-gap);flex-wrap:wrap}.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}.gog-table__pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:32px;color:var(--gog-table-muted-color);font-size:var(--text-sm);-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel"] }, { kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "debounce", "loading"], outputs: ["gogClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, 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": "\"100%\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n  <div class=\"gog-table-scroll\">\n    <table\n      class=\"gog-table\"\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\n      [class.gog-table--loading]=\"loading()\"\n      [class.gog-table--slg]=\"size() === 'slg'\"\n      [class.gog-table--md]=\"size() === 'md'\"\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\n      [class.gog-table--sm]=\"size() === 'sm'\"\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\n    >\n      <colgroup>\n        @if (showRowNumbers()) {\n          <col class=\"gog-table__col--num\" />\n        }\n        @for (col of columns(); track col.field()) {\n          <col\n            [style.width]=\"col.width() || null\"\n            [style.min-width]=\"col.minWidth() || null\"\n            [style.max-width]=\"col.maxWidth() || null\"\n          />\n        }\n      </colgroup>\n      <thead>\n        <tr>\n          @if (showRowNumbers()) {\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\n          }\n          @for (col of columns(); track col.field()) {\n            <th\n              class=\"gog-table__th\"\n              scope=\"col\"\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n              (click)=\"handleSortClick(col)\"\n              (keydown.enter)=\"handleSortClick(col)\"\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n            >\n              @if (getHeaderTemplate(col.field()); as headerTpl) {\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\n              } @else {\n                <span class=\"gog-table__th-inner\">\n                  {{ col.header() || col.field() }}\n                  @if (col.sortable() && !loading()) {\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n                      @if (getSortDirection(col.field()) === 'asc') {\n                        <gog-icon name=\"sort-up\" />\n                      } @else if (getSortDirection(col.field()) === 'desc') {\n                        <gog-icon name=\"sort-down\" />\n                      } @else {\n                        <gog-icon name=\"sort\" />\n                      }\n                    </span>\n                  }\n                </span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n              <gog-spinner size=\"md\" />\n            </td>\n          </tr>\n        } @else if (visibleRows().length === 0) {\n          <tr>\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n          </tr>\n        } @else {\n          @for (row of visibleRows(); track $index; let i = $index) {\n            <tr class=\"gog-table__row\">\n              @if (showRowNumbers()) {\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n              }\n              @for (col of columns(); track col.field()) {\n                <td class=\"gog-table__td\">\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n                    />\n                  } @else {\n                    {{ formatCellValue(row, col.field()) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (hasPagination() || showTotal()) {\n    <div class=\"gog-table__footer\">\n      @if (showTotal()) {\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\n          Total: {{ value().length }}\n        </span>\n      }\n\n      @if (hasPagination()) {\n        <gog-paginator\n          class=\"gog-table__pagination\"\n          [style.grid-area]=\"paginatorGridArea()\"\n          [(page)]=\"currentPage\"\n          [totalPages]=\"totalPages()\"\n          rangeMode=\"ellipsis\"\n          size=\"sm\"\n          ariaLabel=\"Table pagination\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-table', imports: [SpinnerComponent, ButtonComponent, NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-table', imports: [SpinnerComponent, PaginatorComponent, NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-table-host',
                         '[style.display]': '"block"',
                         '[style.width]': '"100%"',
-                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n  <div class=\"gog-table-scroll\">\n    <table\n      class=\"gog-table font-body\"\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\n      [class.gog-table--loading]=\"loading()\"\n      [class.gog-table--md]=\"size() === 'md'\"\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\n      [class.gog-table--sm]=\"size() === 'sm'\"\n    >\n      <colgroup>\n        @if (showRowNumbers()) {\n          <col class=\"gog-table__col--num\" />\n        }\n        @for (col of columns(); track col.field()) {\n          <col\n            [style.width]=\"col.width() || null\"\n            [style.min-width]=\"col.minWidth() || null\"\n            [style.max-width]=\"col.maxWidth() || null\"\n          />\n        }\n      </colgroup>\n      <thead>\n        <tr>\n        @if (showRowNumbers()) {\n          <th class=\"gog-table__th gog-table__th--num font-heading\" scope=\"col\">#</th>\n        }\n        @for (col of columns(); track col.field()) {\n          <th\n            class=\"gog-table__th font-heading\"\n            scope=\"col\"\n            [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n            [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n            [attr.aria-sort]=\"getAriaSort(col.field())\"\n            [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n            (click)=\"handleSortClick(col)\"\n            (keydown.enter)=\"handleSortClick(col)\"\n            (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n          >\n            @if (getHeaderTemplate(col.field()); as headerTpl) {\n              <ng-container *ngTemplateOutlet=\"headerTpl\" />\n            } @else {\n              <span class=\"gog-table__th-inner\">\n                {{ col.header() || col.field() }}\n                @if (col.sortable() && !loading()) {\n                  <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n                    @if (getSortDirection(col.field()) === 'asc') {\n                      <gog-icon name=\"sort-up\" />\n                    } @else if (getSortDirection(col.field()) === 'desc') {\n                      <gog-icon name=\"sort-down\" />\n                    } @else {\n                      <gog-icon name=\"sort\" />\n                    }\n                  </span>\n                }\n              </span>\n            }\n          </th>\n        }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n              <gog-spinner size=\"md\" />\n            </td>\n          </tr>\n        } @else if (visibleRows().length === 0) {\n          <tr>\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n          </tr>\n        } @else {\n          @for (row of visibleRows(); track $index; let i = $index) {\n            <tr class=\"gog-table__row\">\n              @if (showRowNumbers()) {\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n              }\n              @for (col of columns(); track col.field()) {\n                <td class=\"gog-table__td\">\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n                    />\n                  } @else {\n                    {{ formatCellValue(row, col.field()) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (hasPagination() || showTotal()) {\n    <div class=\"gog-table__footer\">\n      @if (showTotal()) {\n        <span class=\"gog-table__total font-body\" [style.grid-area]=\"totalGridArea()\">\n          Total: {{ value().length }}\n        </span>\n      }\n\n      @if (hasPagination()) {\n        <nav\n          class=\"gog-table__pagination\"\n          [style.grid-area]=\"paginatorGridArea()\"\n          aria-label=\"Table pagination\"\n        >\n          <gog-button variant=\"ghost\" size=\"sm\" [disabled]=\"currentPage() === 1\" (gogClick)=\"prev()\"\n            >\u2039</gog-button\n          >\n          @for (page of pageNumbers(); track $index) {\n            @if (isNumber(page)) {\n              <gog-button\n                size=\"sm\"\n                [variant]=\"page === currentPage() ? 'primary' : 'ghost'\"\n                (gogClick)=\"goTo(page)\"\n                >{{ page }}</gog-button\n              >\n            } @else {\n              <span class=\"gog-table__pagination-ellipsis\">\u2026</span>\n            }\n          }\n          <gog-button\n            variant=\"ghost\"\n            size=\"sm\"\n            [disabled]=\"currentPage() === totalPages()\"\n            (gogClick)=\"next()\"\n          >\u203A</gog-button\n          >\n        </nav>\n      }\n    </div>\n  }\n</div>\n", styles: [".gog-table-wrapper{--gog-table-border-color: var(--accent-dim);--gog-table-surface: var(--surface-color);--gog-table-text-color: var(--text-color);--gog-table-accent-color: var(--accent-color);--gog-table-accent-bright: var(--accent-bright);--gog-table-hover-bg: var(--accent-pale);--gog-table-muted-color: var(--muted-text-color);--gog-table-focus-ring: var(--accent-color);--gog-table-pagination-gap: 4px;--gog-table-footer-gap: 8px;--gog-table-loading-opacity: .5;--gog-table-scroll-shadow: 0 8px 24px rgba(0, 0, 0, .3);display:flex;flex-direction:column;gap:12px;width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:2px solid var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);table-layout:fixed;--tbl-th-padding-v: 10px;--tbl-td-padding-v: 10px;--tbl-padding-h: 14px;--tbl-th-font-size: var(--text-sm);--tbl-td-font-size: var(--text-md)}.gog-table--md{--tbl-th-padding-v: 6px;--tbl-td-padding-v: 6px;--tbl-th-font-size: var(--text-xs);--tbl-td-font-size: var(--text-sm)}.gog-table--sm{--tbl-th-padding-v: 3px;--tbl-td-padding-v: 3px;--tbl-th-font-size: var(--text-xs);--tbl-td-font-size: var(--text-xs)}.gog-table__col--num{width:48px}.gog-table__th{padding:var(--tbl-th-padding-v) var(--tbl-padding-h);text-align:left;font-size:var(--tbl-th-font-size);text-transform:uppercase;letter-spacing:1px;color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:2px solid 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:48px;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:3px solid var(--gog-table-focus-ring);outline-offset:-3px}.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:6px;width:100%}.gog-table__sort-icon{display:inline-block;width:1em;text-align:center;font-size:.8rem;opacity:.6;flex-shrink:0}.gog-table__sort-icon gog-icon{font-size:.8rem}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--tbl-td-padding-v) var(--tbl-padding-h);font-size:var(--tbl-td-font-size);border-bottom:1px solid 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(--text-xs);font-family:var(--font-mono);width:48px}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color .12s ease}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:24px 14px;text-align:center;color:var(--gog-table-muted-color);font-size:var(--text-md)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:32px 14px;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:1px solid 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:32px;gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--text-xs);color:var(--gog-table-muted-color);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination{display:flex;align-items:center;gap:var(--gog-table-pagination-gap);flex-wrap:wrap}.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}.gog-table__pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:32px;color:var(--gog-table-muted-color);font-size:var(--text-sm);-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Column), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
+                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n  <div class=\"gog-table-scroll\">\n    <table\n      class=\"gog-table\"\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\n      [class.gog-table--loading]=\"loading()\"\n      [class.gog-table--slg]=\"size() === 'slg'\"\n      [class.gog-table--md]=\"size() === 'md'\"\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\n      [class.gog-table--sm]=\"size() === 'sm'\"\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\n    >\n      <colgroup>\n        @if (showRowNumbers()) {\n          <col class=\"gog-table__col--num\" />\n        }\n        @for (col of columns(); track col.field()) {\n          <col\n            [style.width]=\"col.width() || null\"\n            [style.min-width]=\"col.minWidth() || null\"\n            [style.max-width]=\"col.maxWidth() || null\"\n          />\n        }\n      </colgroup>\n      <thead>\n        <tr>\n          @if (showRowNumbers()) {\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\n          }\n          @for (col of columns(); track col.field()) {\n            <th\n              class=\"gog-table__th\"\n              scope=\"col\"\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n              (click)=\"handleSortClick(col)\"\n              (keydown.enter)=\"handleSortClick(col)\"\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n            >\n              @if (getHeaderTemplate(col.field()); as headerTpl) {\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\n              } @else {\n                <span class=\"gog-table__th-inner\">\n                  {{ col.header() || col.field() }}\n                  @if (col.sortable() && !loading()) {\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n                      @if (getSortDirection(col.field()) === 'asc') {\n                        <gog-icon name=\"sort-up\" />\n                      } @else if (getSortDirection(col.field()) === 'desc') {\n                        <gog-icon name=\"sort-down\" />\n                      } @else {\n                        <gog-icon name=\"sort\" />\n                      }\n                    </span>\n                  }\n                </span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n              <gog-spinner size=\"md\" />\n            </td>\n          </tr>\n        } @else if (visibleRows().length === 0) {\n          <tr>\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n          </tr>\n        } @else {\n          @for (row of visibleRows(); track $index; let i = $index) {\n            <tr class=\"gog-table__row\">\n              @if (showRowNumbers()) {\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n              }\n              @for (col of columns(); track col.field()) {\n                <td class=\"gog-table__td\">\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n                    />\n                  } @else {\n                    {{ formatCellValue(row, col.field()) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (hasPagination() || showTotal()) {\n    <div class=\"gog-table__footer\">\n      @if (showTotal()) {\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\n          Total: {{ value().length }}\n        </span>\n      }\n\n      @if (hasPagination()) {\n        <gog-paginator\n          class=\"gog-table__pagination\"\n          [style.grid-area]=\"paginatorGridArea()\"\n          [(page)]=\"currentPage\"\n          [totalPages]=\"totalPages()\"\n          rangeMode=\"ellipsis\"\n          size=\"sm\"\n          ariaLabel=\"Table pagination\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Column), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
 
 class ThemeService {
     document = inject(DOCUMENT);
@@ -2155,5 +2263,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogMultiselectDropdownPortal, IconComponent, InputfieldComponent, MultiselectComponent, SelectComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, ThemeService, ToastComponent, ToastContainerComponent, ToastService };
+export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogDropdownBase, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, ThemeService, ToastComponent, ToastContainerComponent, ToastService, defaultCompare };
 //# sourceMappingURL=guildofgleks-ui.mjs.map