@guildofgleks/ui 21.2.2 → 21.2.4

package/fesm2022/guildofgleks-ui.mjs

@@ -1,11 +1,43 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, output, computed, inject, DestroyRef, TemplateRef, Directive, model, contentChild, ElementRef, signal, effect, untracked, forwardRef, InjectionToken, Injectable, Injector, viewChild, afterNextRender, PLATFORM_ID, ApplicationRef, contentChildren, linkedSignal } from '@angular/core';
+import { InjectionToken, input, ChangeDetectionStrategy, Component, output, computed, inject, DestroyRef, TemplateRef, Directive, model, contentChild, ElementRef, signal, effect, untracked, Injectable, viewChild, PLATFORM_ID, afterNextRender, Injector, ApplicationRef, contentChildren, linkedSignal } from '@angular/core';
 import { Subject, timer } from 'rxjs';
 import { throttle } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgTemplateOutlet, DOCUMENT, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser, NgComponentOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
-import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { NgControl } from '@angular/forms';
+
+/**
+ * Resolves to `{}` — every field falls through to its component's own hardcoded default —
+ * until a `provideGogConfig(...)` call overrides it somewhere in the injector tree.
+ */
+const GOG_CONFIG = new InjectionToken('GOG_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * Sets app-wide (or subtree-wide, if placed in a route's or component's own `providers`
+ * instead of the bootstrap config) defaults for every `@guildofgleks/ui` component that
+ * reads `GOG_CONFIG` — one call instead of a separate injection token per setting:
+ *
+ * ```ts
+ * // app.config.ts
+ * providers: [
+ *   provideGogConfig({
+ *     scroll: { hideDelay: 1000 },
+ *     button: { debounce: 500 },
+ *   }),
+ * ]
+ * ```
+ *
+ * Providing this again further down the injector tree (a route, a single component's own
+ * `providers`) replaces the whole object for that subtree rather than merging with the
+ * parent's — pass everything you want in effect there, not just the one field you're
+ * changing.
+ */
+function provideGogConfig(config) {
+    return { provide: GOG_CONFIG, useValue: config };
+}
 
 class SpinnerComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -27,6 +59,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "@if (overlay()) {\n  <div class=\"gog-spinner__overlay gog-flex-center\">\n    <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n      <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n    </div>\n  </div>\n} @else {\n  <div class=\"gog-spinner__wrap gog-contained-layout gog-spinner__wrap--{{ size() }}\">\n    <ng-container *ngTemplateOutlet=\"spinnerTpl\" />\n  </div>\n}\n\n<ng-template #spinnerTpl>\n  @switch (variant()) {\n    @case ('ring') {\n      <span class=\"gog-spinner__ring\" aria-hidden=\"true\"></span>\n    }\n    @case ('custom') {\n      <ng-content />\n    }\n    @default {\n      <svg class=\"gog-spinner__svg\" viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\">\n        <!-- Static dim track -->\n        <circle class=\"gog-spinner__track\" cx=\"32\" cy=\"32\" r=\"26\" stroke-width=\"1.5\" />\n\n        <!-- Outer arc \u2014 rotates clockwise, long segment -->\n        <circle\n          class=\"gog-spinner__arc-outer\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"26\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Inner arc \u2014 rotates counter-clockwise, short segment -->\n        <circle\n          class=\"gog-spinner__arc-inner\"\n          cx=\"32\"\n          cy=\"32\"\n          r=\"18\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"butt\"\n        />\n\n        <!-- Rotating diamond ticks group \u2014 single transform on <g> works correctly -->\n        <g class=\"gog-spinner__ticks\">\n          <polygon points=\"32,3  34,6  32,9  30,6\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"32,55 34,58 32,61 30,58\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"3,32  6,30  9,32  6,34\" class=\"gog-spinner__diamond\" />\n          <polygon points=\"55,32 58,30 61,32 58,34\" class=\"gog-spinner__diamond\" />\n        </g>\n\n        <!-- Inner rune \u2014 glow pulse only, no transform -->\n        <text\n          class=\"gog-spinner__rune-wrap gog-spinner__rune\"\n          x=\"32\"\n          y=\"32\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n        >\n          \u2726\n        </text>\n      </svg>\n    }\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-spinner__overlay{position:fixed;inset:0;z-index:var(--gog-spinner-overlay-z);background:var(--gog-spinner-overlay-bg);-webkit-backdrop-filter:blur(var(--gog-spinner-overlay-blur));backdrop-filter:blur(var(--gog-spinner-overlay-blur));animation:gog-spinner-fade-in var(--gog-spinner-overlay-fade-duration) var(--gog-easing)}.gog-spinner__wrap{flex-shrink:0}.gog-spinner__wrap--xsm{width:var(--gog-spinner-size-xsm);height:var(--gog-spinner-size-xsm)}.gog-spinner__wrap--sm{width:var(--gog-spinner-size-sm);height:var(--gog-spinner-size-sm)}.gog-spinner__wrap--md{width:var(--gog-spinner-size-md);height:var(--gog-spinner-size-md)}.gog-spinner__wrap--lg{width:var(--gog-spinner-size-lg);height:var(--gog-spinner-size-lg)}.gog-spinner__wrap--slg{width:var(--gog-spinner-size-slg);height:var(--gog-spinner-size-slg)}.gog-spinner__svg{width:100%;height:100%;overflow:visible}.gog-spinner__track{stroke:var(--gog-spinner-color, var(--gog-spinner-track-color));opacity:var(--gog-spinner-track-opacity)}.gog-spinner__arc-outer{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));stroke-dasharray:var(--gog-spinner-arc-outer-dash);transform-origin:32px 32px;animation:gog-spin-cw var(--gog-spinner-spin-duration) linear infinite,gog-arc-outer-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-outer-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__arc-inner{stroke:var(--gog-spinner-color, var(--gog-spinner-arc-inner-color));stroke-dasharray:var(--gog-spinner-arc-inner-dash);transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-spin-slow-duration) linear infinite,gog-arc-inner-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-arc-inner-glow) var(--gog-spinner-color, var(--gog-spinner-arc-inner-color)));opacity:var(--gog-spinner-arc-inner-opacity)}.gog-spinner__ticks{transform-origin:32px 32px;animation:gog-spin-ccw var(--gog-spinner-ticks-duration) linear infinite}.gog-spinner__diamond{fill:var(--gog-spinner-color, var(--gog-spinner-diamond-color));opacity:var(--gog-spinner-diamond-opacity);filter:drop-shadow(0 0 var(--gog-spinner-diamond-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune-wrap{animation:gog-rune-pulse var(--gog-spinner-pulse-duration) ease-in-out infinite;filter:drop-shadow(0 0 var(--gog-spinner-rune-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)))}.gog-spinner__rune{font-family:var(--gog-spinner-rune-font-family);fill:var(--gog-spinner-color, var(--gog-spinner-rune-color));font-size:var(--gog-spinner-rune-size)}.gog-spinner__wrap--xsm .gog-spinner__arc-inner,.gog-spinner__wrap--sm .gog-spinner__arc-inner{stroke-width:var(--gog-spinner-arc-inner-stroke-compact)}.gog-spinner__ring{display:block;box-sizing:border-box;width:100%;height:100%;padding:var(--gog-spinner-ring-padding);border-radius:50%;background:var(--gog-spinner-color, var(--gog-spinner-arc-outer-color));-webkit-mask:var(--gog-spinner-ring-mask);mask:var(--gog-spinner-ring-mask);-webkit-mask-composite:source-out;mask-composite:subtract;animation:gog-spin-cw var(--gog-spinner-ring-duration) infinite linear;filter:drop-shadow(0 0 var(--gog-spinner-ring-glow) var(--gog-spinner-color, var(--gog-spinner-glow-color)));--gog-spinner-ring-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box}@keyframes gog-spin-cw{to{transform:rotate(360deg)}}@keyframes gog-spin-ccw{to{transform:rotate(-360deg)}}@keyframes gog-arc-outer-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-arc-outer-pulse-opacity)}}@keyframes gog-arc-inner-pulse{0%,to{opacity:var(--gog-spinner-arc-inner-opacity)}50%{opacity:var(--gog-spinner-arc-inner-pulse-opacity)}}@keyframes gog-rune-pulse{0%,to{opacity:1}50%{opacity:var(--gog-spinner-rune-pulse-opacity)}}@keyframes gog-spinner-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.gog-spinner__arc-outer,.gog-spinner__arc-inner,.gog-spinner__ticks,.gog-spinner__rune-wrap,.gog-spinner__ring{animation:none}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
+const DEFAULT_DEBOUNCE = 300;
 class ButtonComponent {
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -39,8 +72,9 @@ class ButtonComponent {
      * guard, not a delay before the first click fires: the first click in a
      * window is emitted immediately (leading edge), and any further clicks
      * within `debounce` ms are silently dropped until the window elapses.
+     * Unset, falls back to `GOG_CONFIG.button.debounce`, then to `300`.
      */
-    debounce = input(300, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
+    debounce = input(undefined, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
     /**
      * Accessible name for the button, forwarded to the native <button>.
      * Setting `aria-label` directly on <gog-button> in a template does NOT
@@ -59,14 +93,16 @@ class ButtonComponent {
         sm: 'sm',
         md: 'sm',
         lg: 'md',
-        slg: 'lg',
+        slg: 'md',
     };
     spinnerSize = computed(() => ButtonComponent.SPINNER_SIZE_BY_BUTTON_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
+    globalConfig = inject(GOG_CONFIG);
+    resolvedDebounce = computed(() => this.debounce() ?? this.globalConfig.button?.debounce ?? DEFAULT_DEBOUNCE, ...(ngDevMode ? [{ debugName: "resolvedDebounce" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     click$ = new Subject();
     constructor() {
         this.click$
-            .pipe(throttle(() => timer(this.debounce()), { leading: true, trailing: false }), takeUntilDestroyed(this.destroyRef))
+            .pipe(throttle(() => timer(this.resolvedDebounce()), { leading: true, trailing: false }), takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => this.gogClick.emit(event));
     }
     onClick(event) {
@@ -174,6 +210,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, 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 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 GogAccordionContentDirective {
     templateRef = inject(TemplateRef);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -214,6 +304,14 @@ class AccordionComponent {
     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 */ []));
+    /**
+     * How many skeleton rows to render while `loading` is true and `items` is still
+     * empty — the common case of "the list itself hasn't arrived yet," where there's
+     * no item count to derive a row count from. Ignored once `items` has entries:
+     * then one skeleton row is rendered per item instead, so the placeholder matches
+     * the eventual shape.
+     */
+    skeletonCount = input(3, ...(ngDevMode ? [{ debugName: "skeletonCount" }] : /* 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`,
@@ -248,6 +346,10 @@ class AccordionComponent {
      * with a new array reference after the user closed everything by hand.
      */
     autoExpanded = signal(false, ...(ngDevMode ? [{ debugName: "autoExpanded" }] : /* istanbul ignore next */ []));
+    skeletonRows = computed(() => {
+        const count = this.items().length || this.skeletonCount();
+        return Array.from({ length: count }, (_, index) => index);
+    }, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const items = this.items();
@@ -287,14 +389,93 @@ class AccordionComponent {
         handleRovingFocusKeydown(event, headers);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, 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 });
+    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 }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\r\n  [class.gog-accordion--md]=\"size() === 'md'\"\r\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"55%\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet, IconComponent, SkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-accordion-host',
-                    }, 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 }] }] } });
+                    }, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\r\n  [class.gog-accordion--md]=\"size() === 'md'\"\r\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"55%\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], openIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIds", required: false }] }, { type: i0.Output, args: ["openIdsChange"] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
+
+/**
+ * Headless expand/collapse primitive — a trigger toggles a content region open and
+ * closed, in place (no portal/overlay, unlike `gog-select`/`gog-multiselect`). Unopinionated
+ * about markup: project any element as the trigger via `gogCollapsibleTrigger` and any
+ * element as the content via `gogCollapsibleContent`; this component only holds the shared
+ * `open` state and generates the id pair linking them for ARIA.
+ */
+class CollapsibleComponent {
+    static nextUid = 0;
+    /** Two-way bindable open state: `[(open)]="signal"`. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    uid = `gog-collapsible-${CollapsibleComponent.nextUid++}`;
+    contentId = computed(() => `${this.uid}-content`, ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled())
+            return;
+        this.open.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: CollapsibleComponent, isStandalone: true, selector: "gog-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class.gog-collapsible-host--disabled": "disabled()" }, classAttribute: "gog-collapsible-host" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CollapsibleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-collapsible', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'gog-collapsible-host',
+                        '[class.gog-collapsible-host--disabled]': 'disabled()',
+                    }, styles: ["@charset \"UTF-8\";:host{display:contents}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Marks the element that toggles a `gog-collapsible`. Works on any clickable element
+ * (`<button>`, `<a>`, ...) — this only wires the click handler and the ARIA attributes
+ * pointing at the matching `gogCollapsibleContent`; it owns no markup of its own.
+ */
+class GogCollapsibleTriggerDirective {
+    collapsible = inject(CollapsibleComponent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogCollapsibleTriggerDirective, isStandalone: true, selector: "[gogCollapsibleTrigger]", host: { listeners: { "click": "collapsible.toggle()" }, properties: { "class.gog-collapsible__trigger--open": "collapsible.open()", "attr.aria-expanded": "collapsible.open()", "attr.aria-controls": "collapsible.contentId()", "attr.aria-disabled": "collapsible.disabled() ? \"true\" : null" }, classAttribute: "gog-collapsible__trigger" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogCollapsibleTrigger]',
+                    host: {
+                        class: 'gog-collapsible__trigger',
+                        '[class.gog-collapsible__trigger--open]': 'collapsible.open()',
+                        '[attr.aria-expanded]': 'collapsible.open()',
+                        '[attr.aria-controls]': 'collapsible.contentId()',
+                        '[attr.aria-disabled]': 'collapsible.disabled() ? "true" : null',
+                        '(click)': 'collapsible.toggle()',
+                    },
+                }]
+        }] });
+
+/**
+ * Marks the element that a `gog-collapsible` shows and hides. Applies the open/closed
+ * CSS state and the ARIA wiring (`id`, `aria-hidden`, `inert`) to whatever element this is
+ * placed on — that element owns its own content and layout.
+ */
+class GogCollapsibleContentDirective {
+    collapsible = inject(CollapsibleComponent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogCollapsibleContentDirective, isStandalone: true, selector: "[gogCollapsibleContent]", host: { properties: { "class.gog-collapsible__content--open": "collapsible.open()", "id": "collapsible.contentId()", "attr.aria-hidden": "!collapsible.open()", "attr.inert": "!collapsible.open() ? \"\" : null" }, classAttribute: "gog-collapsible__content" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogCollapsibleContent]',
+                    host: {
+                        class: 'gog-collapsible__content',
+                        '[class.gog-collapsible__content--open]': 'collapsible.open()',
+                        '[id]': 'collapsible.contentId()',
+                        '[attr.aria-hidden]': '!collapsible.open()',
+                        '[attr.inert]': '!collapsible.open() ? "" : null',
+                    },
+                }]
+        }] });
 
 const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 6px)';
 const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
@@ -331,11 +512,12 @@ class CheckboxComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     checkIconTemplate = input(null, ...(ngDevMode ? [{ debugName: "checkIconTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Two-way bindable checked state: `[(checked)]="signal"`.
      * This is the same state Angular Forms drives via `writeValue`/`registerOnChange`
-     * when the component is used with `formControlName`/`[formControl]`/`ngModel`.
+     * when the component is used with `formControlName`/`[formControl]`.
      * Don't wire both a form directive AND `[(checked)]` to the same instance —
      * pick one, otherwise you end up with two competing sources of truth.
      */
@@ -345,8 +527,17 @@ class CheckboxComponent {
     checkboxPadding = GOG_CHECKABLE_CONTROL_PADDING;
     labelSize = computed(() => this.controlSize().labelSize, ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
     iconSize = computed(() => this.controlSize().indicatorSize, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    ngControl = inject(NgControl, { optional: true, self: true });
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Registering through NgControl instead of NG_VALUE_ACCESSOR matches the pattern used
+        // by every other form control in the library — providing NG_VALUE_ACCESSOR on the
+        // component while also injecting NgControl would be a dependency cycle.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
     writeValue(val) {
         this.checked.set(val ?? false);
     }
@@ -376,13 +567,7 @@ class CheckboxComponent {
     onCheckedChange = () => { };
     onTouched = () => { };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "gog-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, 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: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CheckboxComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "gog-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, checkIconTemplate: { classPropertyName: "checkIconTemplate", publicName: "checkIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "style.--gog-checkbox-box-size": "boxSize()", "style.--gog-checkbox-label-size": "labelSize()", "style.--gog-checkbox-icon-size": "iconSize()", "style.--gog-checkbox-padding": "checkboxPadding", "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-checkbox{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -391,14 +576,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[style.--gog-checkbox-label-size]': 'labelSize()',
                         '[style.--gog-checkbox-icon-size]': 'iconSize()',
                         '[style.--gog-checkbox-padding]': 'checkboxPadding',
-                    }, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CheckboxComponent),
-                            multi: true,
-                        },
-                    ], template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\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"] }] } });
+                        // 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: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-checkbox{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], checkIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIconTemplate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
 const DIALOG_REF = new InjectionToken('DIALOG_REF');
@@ -513,6 +695,351 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/** A sub-pixel overflow reading is rounding noise, not real scrollable content. */
+const OVERFLOW_EPSILON = 1;
+/** Portion of the viewport paged per track click, leaving visual continuity with the old view. */
+const TRACK_CLICK_PAGE_RATIO = 0.9;
+/** Built-in fallbacks — the bottom of each input's GOG_CONFIG.scroll ?? this chain. */
+const DEFAULT_SIZE = 'normal';
+const DEFAULT_AUTO_HIDE = true;
+const DEFAULT_HIDE_DELAY = 800;
+const DEFAULT_OVERSCROLL_BEHAVIOR = 'auto';
+function readPx$1(raw, fallback) {
+    const parsed = Number.parseFloat(raw.trim());
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+/**
+ * Drop-in replacement for a native `overflow: auto` region: the content still scrolls
+ * natively (wheel, touch, keyboard, focus-into-view all keep working unmodified), only the
+ * browser's own scrollbar chrome is hidden and replaced with a themeable, draggable
+ * overlay thumb built from plain pointer events + `ResizeObserver` — no CDK involved, to
+ * stay consistent with the rest of this library's hand-rolled overlay/positioning code.
+ */
+class ScrollComponent {
+    /** Which axes get an overlay thumb. Native scrolling on the other axis is unaffected. */
+    axis = input('vertical', ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.scroll.size`, then to `'normal'`. */
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Fades the thumb out after `hideDelay` ms of inactivity; false keeps it always visible.
+     * Unset, falls back to `GOG_CONFIG.scroll.autoHide`, then to `true`.
+     */
+    autoHide = input(undefined, ...(ngDevMode ? [{ debugName: "autoHide" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.scroll.hideDelay`, then to `800`. */
+    hideDelay = input(undefined, ...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
+    /** Pixel distance from an edge that still counts as "reached" for gogReachStart/End. */
+    reachThreshold = input(0, ...(ngDevMode ? [{ debugName: "reachThreshold" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the viewport as its own tab stop (`tabindex="0"`, `role="region"`) per the
+     * WAI-ARIA scrollable-region pattern. Turn off when nesting inside a component that
+     * already owns focus/keyboard handling (a listbox panel, a dialog body) so this doesn't
+     * add a redundant stop — the descendants' own focus still auto-scrolls into view either way.
+     */
+    focusable = input(true, ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the viewport when `focusable` is true and there is no visible label. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * What happens when a scroll gesture reaches this instance's edge. Unset, falls back to
+     * `GOG_CONFIG.scroll.overscrollBehavior`, then to `'auto'`. See `GogScrollOverscrollBehavior`
+     * for what each value does.
+     */
+    overscrollBehavior = input(undefined, ...(ngDevMode ? [{ debugName: "overscrollBehavior" }] : /* istanbul ignore next */ []));
+    gogScroll = output();
+    gogReachStart = output();
+    gogReachEnd = output();
+    viewportRef = viewChild.required('viewport');
+    contentRef = viewChild.required('content');
+    showTrackV = signal(false, ...(ngDevMode ? [{ debugName: "showTrackV" }] : /* istanbul ignore next */ []));
+    showTrackH = signal(false, ...(ngDevMode ? [{ debugName: "showTrackH" }] : /* istanbul ignore next */ []));
+    /**
+     * Flips true once the first real measurement has run. Before that (SSR, or the client
+     * frame before hydration/afterNextRender fires), an allowed axis defaults to `auto` — the
+     * same safe, always-clips behavior this component had before viewportOverflowY/X existed —
+     * rather than guessing `visible` from a `showTrackV`/`H` that just hasn't been measured yet.
+     */
+    measured = signal(false, ...(ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []));
+    /**
+     * `overflow-y`/`overflow-x` on the viewport, driven by measured overflow rather than a
+     * static `axis`-only class. Any axis that isn't *currently, actually* scrolling — because
+     * it's disabled by `axis`, or because it's allowed but the content doesn't overflow it —
+     * gets `visible`, never `hidden`/`auto`. A non-`visible` overflow value makes the viewport
+     * a "scroll container" per spec regardless of whether it has anything to scroll, which
+     * becomes the containing block for `position: sticky` descendants (e.g. gog-table's sticky
+     * header) and a scroll-chaining boundary for wheel input. Left non-visible on a disabled or
+     * unneeded axis, an instance nested inside another scroller — axis="horizontal" wrapping a
+     * table that fits, itself inside a taller outer gog-scroll — would silently swallow the
+     * outer axis's wheel scroll and break its sticky headers, even though this instance itself
+     * never visibly scrolls that axis. `visible` whenever the axis is inert avoids both.
+     */
+    viewportOverflowY = computed(() => {
+        if (this.axis() === 'horizontal')
+            return 'visible';
+        if (!this.measured())
+            return 'auto';
+        return this.showTrackV() ? 'auto' : 'visible';
+    }, ...(ngDevMode ? [{ debugName: "viewportOverflowY" }] : /* istanbul ignore next */ []));
+    viewportOverflowX = computed(() => {
+        if (this.axis() === 'vertical')
+            return 'visible';
+        if (!this.measured())
+            return 'auto';
+        return this.showTrackH() ? 'auto' : 'visible';
+    }, ...(ngDevMode ? [{ debugName: "viewportOverflowX" }] : /* istanbul ignore next */ []));
+    /** App/subtree-wide fallbacks for the inputs above that don't set their own value. */
+    globalConfig = inject(GOG_CONFIG);
+    resolvedSize = computed(() => this.size() ?? this.globalConfig.scroll?.size ?? DEFAULT_SIZE, ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedAutoHide = computed(() => this.autoHide() ?? this.globalConfig.scroll?.autoHide ?? DEFAULT_AUTO_HIDE, ...(ngDevMode ? [{ debugName: "resolvedAutoHide" }] : /* istanbul ignore next */ []));
+    resolvedHideDelay = computed(() => this.hideDelay() ?? this.globalConfig.scroll?.hideDelay ?? DEFAULT_HIDE_DELAY, ...(ngDevMode ? [{ debugName: "resolvedHideDelay" }] : /* istanbul ignore next */ []));
+    resolvedOverscrollBehavior = computed(() => this.overscrollBehavior() ??
+        this.globalConfig.scroll?.overscrollBehavior ??
+        DEFAULT_OVERSCROLL_BEHAVIOR, ...(ngDevMode ? [{ debugName: "resolvedOverscrollBehavior" }] : /* istanbul ignore next */ []));
+    /**
+     * Only applies `resolvedOverscrollBehavior` on an axis that's actually acting as a scroll
+     * container — on an axis that's `visible` (see viewportOverflowY/X above) there is no
+     * scroll boundary on it to contain in the first place.
+     */
+    viewportOverscrollY = computed(() => this.showTrackV() ? this.resolvedOverscrollBehavior() : 'auto', ...(ngDevMode ? [{ debugName: "viewportOverscrollY" }] : /* istanbul ignore next */ []));
+    viewportOverscrollX = computed(() => this.showTrackH() ? this.resolvedOverscrollBehavior() : 'auto', ...(ngDevMode ? [{ debugName: "viewportOverscrollX" }] : /* istanbul ignore next */ []));
+    thumbSizeV = signal(100, ...(ngDevMode ? [{ debugName: "thumbSizeV" }] : /* istanbul ignore next */ []));
+    thumbPosV = signal(0, ...(ngDevMode ? [{ debugName: "thumbPosV" }] : /* istanbul ignore next */ []));
+    thumbSizeH = signal(100, ...(ngDevMode ? [{ debugName: "thumbSizeH" }] : /* istanbul ignore next */ []));
+    thumbPosH = signal(0, ...(ngDevMode ? [{ debugName: "thumbPosH" }] : /* istanbul ignore next */ []));
+    interacting = signal(false, ...(ngDevMode ? [{ debugName: "interacting" }] : /* istanbul ignore next */ []));
+    dragAxis = signal(null, ...(ngDevMode ? [{ debugName: "dragAxis" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    destroyRef = inject(DestroyRef);
+    resizeObserver = null;
+    updateFrame = null;
+    hideTimer = null;
+    /** Read once per token change instead of per drag/scroll tick — see refreshTokens(). */
+    thumbMinSizePx = 32;
+    dragStartPointer = 0;
+    dragStartScroll = 0;
+    dragTrackLength = 0;
+    dragThumbSizePct = 100;
+    reachState = {
+        vertical: { start: true, end: false },
+        horizontal: { start: true, end: false },
+    };
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => {
+            const viewportEl = this.viewportRef().nativeElement;
+            const contentEl = this.contentRef().nativeElement;
+            this.refreshTokens();
+            // Not implemented by jsdom (so: absent in unit tests) and by very old browsers —
+            // degrades to a single initial measurement instead of tracking live resizes.
+            if (typeof ResizeObserver !== 'undefined') {
+                const observer = new ResizeObserver(() => this.scheduleMeasure());
+                observer.observe(viewportEl);
+                observer.observe(contentEl);
+                this.resizeObserver = observer;
+            }
+            this.scheduleMeasure();
+        });
+        // Re-measures on axis/size changes; guarded because this also fires once before
+        // afterNextRender has run, when there is nothing yet to measure.
+        effect(() => {
+            this.axis();
+            this.resolvedSize();
+            if (!this.resizeObserver)
+                return;
+            this.refreshTokens();
+            this.scheduleMeasure();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+            if (this.updateFrame !== null)
+                cancelAnimationFrame(this.updateFrame);
+            if (this.hideTimer !== null)
+                clearTimeout(this.hideTimer);
+        });
+    }
+    /** Scrolls the viewport exactly like `Element.scrollTo` — this simply forwards to it. */
+    scrollTo(options) {
+        this.viewportRef().nativeElement.scrollTo(options);
+    }
+    scrollToTop(behavior = 'smooth') {
+        this.viewportRef().nativeElement.scrollTo({ top: 0, behavior });
+    }
+    scrollToBottom(behavior = 'smooth') {
+        const el = this.viewportRef().nativeElement;
+        el.scrollTo({ top: el.scrollHeight, behavior });
+    }
+    scrollToLeft(behavior = 'smooth') {
+        this.viewportRef().nativeElement.scrollTo({ left: 0, behavior });
+    }
+    scrollToRight(behavior = 'smooth') {
+        const el = this.viewportRef().nativeElement;
+        el.scrollTo({ left: el.scrollWidth, behavior });
+    }
+    onScroll() {
+        this.interacting.set(true);
+        this.restartHideTimer();
+        this.scheduleMeasure();
+    }
+    onActivity() {
+        this.interacting.set(true);
+        this.restartHideTimer();
+    }
+    onTrackPointerDown(event, axis) {
+        // Only the empty track background pages the view; a click that landed on the thumb
+        // itself already got a dedicated handler and stopped propagation before reaching here.
+        if (event.target !== event.currentTarget)
+            return;
+        event.preventDefault();
+        const track = event.currentTarget;
+        const rect = track.getBoundingClientRect();
+        const viewportEl = this.viewportRef().nativeElement;
+        if (axis === 'vertical') {
+            const clickRatio = (event.clientY - rect.top) / rect.height;
+            const thumbCenter = this.thumbPosV() / 100 + this.thumbSizeV() / 200;
+            const direction = clickRatio < thumbCenter ? -1 : 1;
+            viewportEl.scrollBy({
+                top: direction * viewportEl.clientHeight * TRACK_CLICK_PAGE_RATIO,
+                behavior: 'smooth',
+            });
+        }
+        else {
+            const clickRatio = (event.clientX - rect.left) / rect.width;
+            const thumbCenter = this.thumbPosH() / 100 + this.thumbSizeH() / 200;
+            const direction = clickRatio < thumbCenter ? -1 : 1;
+            viewportEl.scrollBy({
+                left: direction * viewportEl.clientWidth * TRACK_CLICK_PAGE_RATIO,
+                behavior: 'smooth',
+            });
+        }
+        this.interacting.set(true);
+        this.restartHideTimer();
+    }
+    onThumbPointerDown(event, axis) {
+        event.preventDefault();
+        event.stopPropagation();
+        const thumb = event.currentTarget;
+        thumb.setPointerCapture(event.pointerId);
+        const track = thumb.parentElement;
+        const viewportEl = this.viewportRef().nativeElement;
+        this.dragAxis.set(axis);
+        this.dragStartPointer = axis === 'vertical' ? event.clientY : event.clientX;
+        this.dragStartScroll = axis === 'vertical' ? viewportEl.scrollTop : viewportEl.scrollLeft;
+        this.dragTrackLength = axis === 'vertical' ? track.clientHeight : track.clientWidth;
+        this.dragThumbSizePct = axis === 'vertical' ? this.thumbSizeV() : this.thumbSizeH();
+    }
+    onThumbPointerMove(event, axis) {
+        if (this.dragAxis() !== axis)
+            return;
+        const viewportEl = this.viewportRef().nativeElement;
+        const pointer = axis === 'vertical' ? event.clientY : event.clientX;
+        const delta = pointer - this.dragStartPointer;
+        // Only the track length left over once the thumb's own size is subtracted actually
+        // maps to travel distance — a thumb spanning the whole track has nowhere to move.
+        const freeTrackLength = this.dragTrackLength * (1 - this.dragThumbSizePct / 100);
+        if (freeTrackLength <= 0)
+            return;
+        const scrollable = axis === 'vertical'
+            ? viewportEl.scrollHeight - viewportEl.clientHeight
+            : viewportEl.scrollWidth - viewportEl.clientWidth;
+        const nextScroll = this.dragStartScroll + (delta / freeTrackLength) * scrollable;
+        if (axis === 'vertical') {
+            viewportEl.scrollTop = nextScroll;
+        }
+        else {
+            viewportEl.scrollLeft = nextScroll;
+        }
+    }
+    onThumbPointerUp(event) {
+        const thumb = event.currentTarget;
+        if (thumb.hasPointerCapture(event.pointerId)) {
+            thumb.releasePointerCapture(event.pointerId);
+        }
+        this.dragAxis.set(null);
+        this.restartHideTimer();
+    }
+    restartHideTimer() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+        if (!this.resolvedAutoHide())
+            return;
+        this.hideTimer = setTimeout(() => {
+            if (this.dragAxis() === null)
+                this.interacting.set(false);
+        }, this.resolvedHideDelay());
+    }
+    /** Reads the tokens that feed thumb-size math. Cheap, but still only once per change. */
+    refreshTokens() {
+        const styles = getComputedStyle(this.viewportRef().nativeElement);
+        this.thumbMinSizePx = readPx$1(styles.getPropertyValue('--gog-scroll-thumb-min-size'), 32);
+    }
+    /** Coalesces scroll/resize bursts into one measurement per frame. */
+    scheduleMeasure() {
+        if (this.updateFrame !== null)
+            return;
+        this.updateFrame = requestAnimationFrame(() => {
+            this.updateFrame = null;
+            this.measure();
+        });
+    }
+    measure() {
+        const el = this.viewportRef().nativeElement;
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
+        const axis = this.axis();
+        const canV = axis !== 'horizontal';
+        const canH = axis !== 'vertical';
+        const overflowV = canV && scrollHeight - clientHeight > OVERFLOW_EPSILON;
+        const overflowH = canH && scrollWidth - clientWidth > OVERFLOW_EPSILON;
+        this.showTrackV.set(overflowV);
+        this.showTrackH.set(overflowH);
+        this.measured.set(true);
+        if (overflowV) {
+            const minPct = clientHeight > 0 ? (this.thumbMinSizePx / clientHeight) * 100 : 0;
+            const sizePct = clamp((clientHeight / scrollHeight) * 100, minPct, 100);
+            const scrollableV = scrollHeight - clientHeight;
+            const ratioV = scrollableV > 0 ? scrollTop / scrollableV : 0;
+            this.thumbSizeV.set(sizePct);
+            this.thumbPosV.set(ratioV * (100 - sizePct));
+        }
+        if (overflowH) {
+            const minPct = clientWidth > 0 ? (this.thumbMinSizePx / clientWidth) * 100 : 0;
+            const sizePct = clamp((clientWidth / scrollWidth) * 100, minPct, 100);
+            const scrollableH = scrollWidth - clientWidth;
+            const ratioH = scrollableH > 0 ? scrollLeft / scrollableH : 0;
+            this.thumbSizeH.set(sizePct);
+            this.thumbPosH.set(ratioH * (100 - sizePct));
+        }
+        this.gogScroll.emit({ scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth });
+        // Only for axes this instance actually scrolls — otherwise the disabled axis is
+        // trivially "at both ends" on the very first measurement and fires once for free.
+        if (canV)
+            this.checkReach('vertical', scrollTop, scrollHeight, clientHeight, overflowV);
+        if (canH)
+            this.checkReach('horizontal', scrollLeft, scrollWidth, clientWidth, overflowH);
+    }
+    checkReach(axis, position, scrollSize, clientSize, overflow) {
+        const threshold = this.reachThreshold();
+        const atStart = !overflow || position <= threshold;
+        const atEnd = !overflow || position + clientSize >= scrollSize - threshold;
+        const state = this.reachState[axis];
+        if (atStart && !state.start)
+            this.gogReachStart.emit(axis);
+        if (atEnd && !state.end)
+            this.gogReachEnd.emit(axis);
+        state.start = atStart;
+        state.end = atEnd;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScrollComponent, isStandalone: true, selector: "gog-scroll", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, reachThreshold: { classPropertyName: "reachThreshold", publicName: "reachThreshold", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, overscrollBehavior: { classPropertyName: "overscrollBehavior", publicName: "overscrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogScroll: "gogScroll", gogReachStart: "gogReachStart", gogReachEnd: "gogReachEnd" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"!resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"!resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScrollComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-scroll', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"!resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"!resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], reachThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "reachThreshold", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], overscrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscrollBehavior", required: false }] }], gogScroll: [{ type: i0.Output, args: ["gogScroll"] }], gogReachStart: [{ type: i0.Output, args: ["gogReachStart"] }], gogReachEnd: [{ type: i0.Output, args: ["gogReachEnd"] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+
 class DialogComponent {
     dialogService = inject(DialogService);
     parentInjector = inject(Injector);
@@ -668,11 +1195,11 @@ class DialogComponent {
         return rect.width > 0 && rect.height > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n  <div\n    class=\"gog-dialog__backdrop\"\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n    [style.z-index]=\"panelZ(dialog)\"\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n  >\n    <div\n      #panel\n      class=\"gog-dialog__panel\"\n      [attr.data-dialog-id]=\"dialog.id\"\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n      [style.width]=\"dialog.config.width ?? 'auto'\"\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n    >\n      @if (dialog.config.title || dialog.config.closable !== false) {\n        <div\n          class=\"gog-dialog__header\"\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n          (pointerdown)=\"startDrag($event, dialog)\"\n        >\n          @if (dialog.config.title) {\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\n              {{ dialog.config.title }}\n            </h2>\n          }\n          @if (dialog.config.closable !== false) {\n            <button\n              type=\"button\"\n              class=\"gog-dialog__close gog-inline-center\"\n              aria-label=\"Close dialog\"\n              (click)=\"close(dialog)\"\n            >\n              <gog-icon\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\n              />\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"gog-dialog__body\">\n        <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);overflow-y:auto;flex:1;max-height:var(--gog-dialog-body-max-height)}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              aria-label=\"Close dialog\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-dialog__scroll\">\r\n          <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\n  <div\n    class=\"gog-dialog__backdrop\"\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\n    [style.z-index]=\"panelZ(dialog)\"\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\n  >\n    <div\n      #panel\n      class=\"gog-dialog__panel\"\n      [attr.data-dialog-id]=\"dialog.id\"\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\n      [style.width]=\"dialog.config.width ?? 'auto'\"\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\n    >\n      @if (dialog.config.title || dialog.config.closable !== false) {\n        <div\n          class=\"gog-dialog__header\"\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\n          (pointerdown)=\"startDrag($event, dialog)\"\n        >\n          @if (dialog.config.title) {\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\n              {{ dialog.config.title }}\n            </h2>\n          }\n          @if (dialog.config.closable !== false) {\n            <button\n              type=\"button\"\n              class=\"gog-dialog__close gog-inline-center\"\n              aria-label=\"Close dialog\"\n              (click)=\"close(dialog)\"\n            >\n              <gog-icon\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\n              />\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"gog-dialog__body\">\n        <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);overflow-y:auto;flex:1;max-height:var(--gog-dialog-body-max-height)}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              aria-label=\"Close dialog\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-dialog__scroll\">\r\n          <ng-container *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\" />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToastComponent {
@@ -986,6 +1513,12 @@ class InputfieldComponent {
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /** Defaults to 'current-password' for password fields, 'off' otherwise */
     autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Only applied when `type="number"`. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Only applied when `type="number"`. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Only applied when `type="number"`. */
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     /** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
     errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
@@ -993,6 +1526,11 @@ class InputfieldComponent {
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default, matching every other field-style control.
+     * Set to `false` to shrink the field to fit its content instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     /** Default icon name for the leading icon. */
     iconStart = input('', ...(ngDevMode ? [{ debugName: "iconStart" }] : /* istanbul ignore next */ []));
     /** Default icon name for the trailing icon. */
@@ -1013,7 +1551,12 @@ class InputfieldComponent {
     showPasswordLabel = input('Show password', ...(ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []));
     /** aria-label for the hide-password button, shown once the password is revealed */
     hidePasswordLabel = input('Hide password', ...(ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []));
-    /** Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`. */
+    /**
+     * Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`.
+     * Always a string, including for `type="number"` — that field's `formControl`/
+     * `formControlName` value is a `number` (or `null` when empty); the string here is only
+     * the raw text shown in the native input.
+     */
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     ngControl = inject(NgControl, { optional: true, self: true });
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
@@ -1021,6 +1564,7 @@ class InputfieldComponent {
     passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     isPasswordField = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordField" }] : /* istanbul ignore next */ []));
+    isNumberField = computed(() => this.type() === 'number', ...(ngDevMode ? [{ debugName: "isNumberField" }] : /* istanbul ignore next */ []));
     effectiveType = computed(() => this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
     effectiveAutocomplete = computed(() => this.autocomplete() || (this.type() === 'password' ? 'current-password' : 'off'), ...(ngDevMode ? [{ debugName: "effectiveAutocomplete" }] : /* istanbul ignore next */ []));
     hasError = this.errorState.hasError;
@@ -1036,6 +1580,7 @@ class InputfieldComponent {
         : this.iconEndLabel(), ...(ngDevMode ? [{ debugName: "effectiveIconEndLabel" }] : /* istanbul ignore next */ []));
     hasIconEnd = computed(() => !!this.iconEndTemplate() || !!this.effectiveIconEnd(), ...(ngDevMode ? [{ debugName: "hasIconEnd" }] : /* istanbul ignore next */ []));
     hasIconEndAction = computed(() => this.isPasswordField() || !!this.iconEndFn(), ...(ngDevMode ? [{ debugName: "hasIconEndAction" }] : /* istanbul ignore next */ []));
+    /** `number` for a `type="number"` field (`null` when empty), `string` otherwise. */
     _onChange = () => { };
     _onTouched = () => { };
     constructor() {
@@ -1050,7 +1595,7 @@ class InputfieldComponent {
         this.errorState.check();
     }
     writeValue(val) {
-        this.value.set(val ?? '');
+        this.value.set(val === null || val === undefined ? '' : String(val));
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -1074,18 +1619,100 @@ class InputfieldComponent {
     onInput(event) {
         const input = event.target;
         this.value.set(input.value);
+        if (this.isNumberField()) {
+            this._onChange(input.value === '' ? null : input.valueAsNumber);
+            return;
+        }
         this._onChange(input.value);
     }
     onBlur() {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"placeholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n          (click)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, decorators: [{
             type: Component,
-            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"] }] } });
+            args: [{ selector: 'gog-inputfield', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
+                        // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
+                        // full-width class: this field is full width by default, so the class only appears
+                        // once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"placeholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n          (click)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class TextareaComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
+    errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Native `rows` attribute, controlling the field's initial height. */
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default, matching every other field-style control.
+     * Set to `false` to shrink the field to fit its content instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`. */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ngControl = inject(NgControl, { optional: true, self: true });
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    errorState = new GogErrorState(this.errorMessage, this.errorDisplay, this.ngControl);
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hasError = this.errorState.hasError;
+    visibleError = this.errorState.visibleError;
+    _onChange = () => { };
+    _onTouched = () => { };
+    constructor() {
+        // Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
+        // available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
+        // injecting NgControl would be a dependency cycle.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngDoCheck() {
+        this.errorState.check();
+    }
+    writeValue(val) {
+        this.value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const textarea = event.target;
+        this.value.set(textarea.value);
+        this._onChange(textarea.value);
+    }
+    onBlur() {
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "gog-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <textarea\r\n    class=\"gog-input__field gog-textarea__field\"\r\n    [class.gog-input__field--error]=\"hasError()\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [attr.name]=\"name() || null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [value]=\"value()\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError()\"\r\n    [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n  ></textarea>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"inputId() ? inputId() + '-error' : null\" role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: [".gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__field{resize:vertical;min-height:2.5em;line-height:1.5}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size)}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-textarea', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
+                        // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
+                        // full-width class: this field is full width by default, so the class only appears
+                        // once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\r\n>\r\n  @if (label()) {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <textarea\r\n    class=\"gog-input__field gog-textarea__field\"\r\n    [class.gog-input__field--error]=\"hasError()\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [attr.name]=\"name() || null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [value]=\"value()\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError()\"\r\n    [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n  ></textarea>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"inputId() ? inputId() + '-error' : null\" role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: [".gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__field{resize:vertical;min-height:2.5em;line-height:1.5}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size)}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class ChipComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -1093,6 +1720,7 @@ class ChipComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
     removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     removeAriaLabel = input('Remove chip', ...(ngDevMode ? [{ debugName: "removeAriaLabel" }] : /* istanbul ignore next */ []));
     avatarUrl = input(null, ...(ngDevMode ? [{ debugName: "avatarUrl" }] : /* istanbul ignore next */ []));
@@ -1109,6 +1737,7 @@ class ChipComponent {
         this.clickable() ? 'gog-chip--clickable' : null,
         this.avatarUrl() ? 'gog-chip--has-avatar' : null,
         this.iconName() ? 'gog-chip--has-icon' : null,
+        this.fullWidth() ? 'gog-host--full-width' : null,
     ]
         .filter((className) => className !== null)
         .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
@@ -1131,14 +1760,14 @@ class ChipComponent {
         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() && !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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, 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))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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() && !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"] }] } });
+                    }, 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))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
 
 class TagComponent {
     variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -1146,6 +1775,7 @@ class TagComponent {
     shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     iconName = input(null, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
     iconTemplate = input(null, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     hasIcon = computed(() => this.iconTemplate() !== null || this.iconName() !== null, ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => [
         'gog-tag',
@@ -1153,18 +1783,19 @@ class TagComponent {
         `gog-tag--${this.size()}`,
         `gog-tag--${this.shape()}`,
         this.hasIcon() ? 'gog-tag--has-icon' : null,
+        this.fullWidth() ? 'gog-host--full-width' : 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": "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 });
+    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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", 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)))}:host(.gog-host--full-width){display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-tag', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[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 }] }] } });
+                    }, 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)))}:host(.gog-host--full-width){display:flex;width:100%}\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 }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
 
 /**
  * Renders a template into `document.body` while keeping it wired to the declaring
@@ -1339,6 +1970,11 @@ class GogDropdownBase {
     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 */ []));
+    /**
+     * Full width of the container by default, matching every other field-style control.
+     * Set to `false` to shrink the trigger to fit its selected label instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     /**
      * Spacing tokens feeding the height estimate. Overridable so each control keeps the
@@ -1636,11 +2272,20 @@ class GogDropdownBase {
         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 });
+    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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, 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 }] }] } });
+            type: Directive,
+            args: [{
+                    host: {
+                        // Drives the :host(.gog-host--auto-width) rules in each subclass's stylesheet —
+                        // without this binding the `fullWidth` input has no visible effect. Inverted from
+                        // gog-button's full-width class: these controls are full width by default, so the
+                        // class only appears once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    },
+                }]
+        }], 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 }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
 function readPx(raw, fallback) {
     const parsed = Number.parseFloat(raw.trim());
     return Number.isFinite(parsed) ? parsed : fallback;
@@ -1674,11 +2319,11 @@ class SelectComponent extends GogDropdownBase {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\n      <!--\n        tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n        focus is moved between options with the arrow keys, not by tabbing through every\n        one of them. Programmatic .focus() still works on a negative tabindex.\n      -->\n      <button\n        type=\"button\"\n        class=\"gog-select__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        [attr.aria-selected]=\"isSelected(option.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-select--sm]=\"size() === 'sm'\"\r\n  [class.gog-select--lg]=\"size() === 'lg'\"\r\n  [class.gog-select--slg]=\"size() === 'slg'\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label()) {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedOption()?.name || placeholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    @if (isOpen() && !appendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\r\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\r\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\r\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\r\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\r\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-select__scroll\">\r\n      @for (option of options(); track option.id) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option.id)\"\r\n          [attr.aria-disabled]=\"option.disabled ?? false\"\r\n          [class.gog-select__option--selected]=\"isSelected(option.id)\"\r\n          [class.gog-select__option--disabled]=\"option.disabled ?? false\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n            @if (isSelected(option.id)) {\r\n              <gog-icon name=\"check\" />\r\n            }\r\n          </span>\r\n          <span class=\"gog-select__option-label\">{{ option.name }}</span>\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\n      <!--\n        tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n        focus is moved between options with the arrow keys, not by tabbing through every\n        one of them. Programmatic .focus() still works on a negative tabindex.\n      -->\n      <button\n        type=\"button\"\n        class=\"gog-select__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        [attr.aria-selected]=\"isSelected(option.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
+            args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-select--sm]=\"size() === 'sm'\"\r\n  [class.gog-select--lg]=\"size() === 'lg'\"\r\n  [class.gog-select--slg]=\"size() === 'slg'\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label()) {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedOption()?.name || placeholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    @if (isOpen() && !appendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\r\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\r\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\r\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\r\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\r\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-select__scroll\">\r\n      @for (option of options(); track option.id) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option.id)\"\r\n          [attr.aria-disabled]=\"option.disabled ?? false\"\r\n          [class.gog-select__option--selected]=\"isSelected(option.id)\"\r\n          [class.gog-select__option--disabled]=\"option.disabled ?? false\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n            @if (isSelected(option.id)) {\r\n              <gog-icon name=\"check\" />\r\n            }\r\n          </span>\r\n          <span class=\"gog-select__option-label\">{{ option.name }}</span>\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 /** Height of the select-all/clear row, included in the panel height estimate. */
@@ -1730,11 +2375,11 @@ class MultiselectComponent extends GogDropdownBase {
         return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n          expects: focus moves between options with the arrow keys, not by tabbing\n          through every one. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-ms__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label()) {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ selectedNames() || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      @if (selectedNames()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearAll($event)\"\r\n          aria-label=\"Clear selection\"\r\n        >\r\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\r\n        </button>\r\n      }\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronTemplate()\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !appendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\r\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\r\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\r\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\r\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\r\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @for (option of options(); track option.id) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option.id)\"\r\n            [attr.aria-disabled]=\"option.disabled ?? false\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option.id)\"\r\n            [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n          >\r\n            <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n              <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\r\n            </span>\r\n            {{ option.name }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow:hidden;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n          expects: focus moves between options with the arrow keys, not by tabbing\n          through every one. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-ms__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
+            args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\r\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\r\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\r\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label()) {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ selectedNames() || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      @if (selectedNames()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearAll($event)\"\r\n          aria-label=\"Clear selection\"\r\n        >\r\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\r\n        </button>\r\n      }\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronTemplate()\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !appendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\r\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\r\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\r\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\r\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\r\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @for (option of options(); track option.id) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option.id)\"\r\n            [attr.aria-disabled]=\"option.disabled ?? false\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option.id)\"\r\n            [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n          >\r\n            <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n              <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\r\n            </span>\r\n            {{ option.name }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow:hidden;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
         }], propDecorators: { showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 class SliderComponent {
@@ -1751,6 +2396,13 @@ class SliderComponent {
     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 */ []));
+    /**
+     * Full width of the container by default. Set to `false` to size the track to
+     * `--gog-slider-auto-width` instead — a slider's track has no content of its own to
+     * shrink-wrap to, so unlike the other field controls this needs an explicit fallback
+     * width rather than `fit-content`.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* 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 });
@@ -1809,73 +2461,29 @@ 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 }, 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 });
+    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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()", "class.gog-host--auto-width": "!fullWidth()" } }, 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}:host(.gog-host--auto-width){width:var(--gog-slider-auto-width)}.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, 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\">{{ 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 }] }] } });
+                        // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
+                        // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
+                        // full-width class: this control is full width by default, so the class only
+                        // appears once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    }, template: "<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}:host(.gog-host--auto-width){width:var(--gog-slider-auto-width)}.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 }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class PaginatorComponent {
     /** 1-based current page. Two-way bindable: `[(page)]="myPageSignal"`. */
     page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default. Set to `false` to shrink to fit the page
+     * buttons instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* 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
@@ -1966,7 +2574,7 @@ class PaginatorComponent {
         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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, 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}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -1974,8 +2582,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         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 }] }] } });
+                        // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
+                        // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
+                        // full-width class: this control is full width by default, so the class only
+                        // appears once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    }, template: "<gog-button\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}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }], showFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstPage", required: false }] }], showLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastPage", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class SpinnerOverlayComponent {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
@@ -2069,6 +2682,11 @@ function getByPath(row, field) {
 }
 class TableComponent {
     value = input([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default. Set to `false` to shrink the table to fit
+     * its columns' content instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     /** 0 = no pagination */
     pageSize = input(0, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     showRowNumbers = input(true, ...(ngDevMode ? [{ debugName: "showRowNumbers" }] : /* istanbul ignore next */ []));
@@ -2216,16 +2834,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\"\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--slg]=\"size() === 'slg'\"\r\n      [class.gog-table--md]=\"size() === 'md'\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--sm]=\"size() === 'sm'\"\r\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col.field()); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\r\n                    />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-table', imports: [SpinnerComponent, PaginatorComponent, NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-table', imports: [SpinnerComponent, PaginatorComponent, NgTemplateOutlet, IconComponent, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-table-host',
                         '[style.display]': '"block"',
-                        '[style.width]': '"100%"',
-                    }, 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 }] }] } });
+                        '[style.width]': 'fullWidth() ? "100%" : "fit-content"',
+                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--slg]=\"size() === 'slg'\"\r\n      [class.gog-table--md]=\"size() === 'md'\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--sm]=\"size() === 'sm'\"\r\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col.field()); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\r\n                    />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Column), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
 
 class ThemeService {
     document = inject(DOCUMENT);
@@ -2263,5 +2881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogDropdownBase, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, ThemeService, ToastComponent, ToastContainerComponent, ToastService, defaultCompare };
+export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GOG_CONFIG, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogDropdownBase, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, defaultCompare, provideGogConfig };
 //# sourceMappingURL=guildofgleks-ui.mjs.map