@guildofgleks/ui 21.5.2 → 21.6.1

package/fesm2022/guildofgleks-ui.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, ChangeDetectionStrategy, Component, output, computed, DestroyRef, booleanAttribute, Directive, isDevMode, TemplateRef, model, contentChild, ElementRef, signal, effect, untracked, PLATFORM_ID, ApplicationRef, viewChild, afterNextRender, Renderer2, viewChildren, contentChildren, forwardRef, Injectable, Injector, afterRenderEffect, ViewContainerRef, linkedSignal } from '@angular/core';
+import { InjectionToken, inject, computed, ElementRef, Renderer2, PLATFORM_ID, effect, DestroyRef, input, booleanAttribute, Directive, ChangeDetectionStrategy, Component, output, isDevMode, TemplateRef, model, contentChild, signal, untracked, ApplicationRef, viewChild, afterNextRender, viewChildren, contentChildren, forwardRef, Injectable, Injector, afterRenderEffect, ViewContainerRef, linkedSignal } from '@angular/core';
 import { Subject, timer } from 'rxjs';
 import { throttle } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgTemplateOutlet, isPlatformBrowser, DOCUMENT, NgComponentOutlet } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgControl } from '@angular/forms';
 
@@ -96,6 +96,310 @@ function resolveConfigured(instanceValue, configuredValue, fallback) {
     return instanceValue ?? configuredValue ?? fallback;
 }
 
+/**
+ * Off, so the ripple is purely additive: adding it to the library changed the appearance of
+ * nothing until an app asks for it. Flipping this default would change how every button in every
+ * consuming app looks, which is a release of its own, not a line in a feature commit.
+ */
+const DEFAULT_RIPPLE = false;
+/**
+ * Shared "does this control ripple" state, resolved the usual way — instance input, then
+ * `GOG_CONFIG.ripple.enabled`, then off.
+ *
+ * A plain function rather than a class (`GogClearableState`'s shape) because there is exactly one
+ * derived value and nothing to hold: every component that ripples writes the same two lines, and
+ * this is what keeps the precedence identical across all nine of them instead of nine separate
+ * `??` chains that can drift.
+ *
+ * The component then binds the *negation* onto its own inner element:
+ *
+ * ```html
+ * <button class="gog-btn" gogRipple [rippleDisabled]="!rippleEnabled()">
+ * ```
+ *
+ * `[gogRipple]` is always applied rather than toggled, because a directive cannot be added and
+ * removed by a binding — and it costs nothing while disabled: `GogRippleDirective` attaches no
+ * event listeners at all until `rippleDisabled` goes false.
+ */
+function resolveRipple(rippleInput, config) {
+    return computed(() => resolveConfigured(rippleInput(), config.ripple?.enabled, DEFAULT_RIPPLE));
+}
+
+/**
+ * The ripple itself, as a plain class rather than as part of the directive.
+ *
+ * It is split out because **two kinds of caller need it**. `[gogRipple]` is the one a consumer
+ * writes on their own element; the other is the library's own directives that already own a
+ * consumer's element — `[gogButton]`, `gogMenuItem`, `gogCollapsibleTrigger` — which cannot use
+ * `hostDirectives` here. `hostDirectives` can forward an input but cannot *compute* one, and what
+ * those directives need is the negation of a value resolved through `GOG_CONFIG`. Owning a
+ * controller is three lines; the alternative was either a ripple those elements could not turn
+ * off or one that ignored the app-wide setting.
+ *
+ * ## What it does not do to its host
+ *
+ * The obvious ripple gives the host `overflow: hidden` and paints inside it, which clips
+ * `gogBadge` — the badge sits outside the host's box on purpose. So the host only ever gets
+ * `position: relative` (via `.gog-ripple-host`, and only while enabled), and the wash lives in a
+ * layer that clips *itself* and takes the host's corner radius with `border-radius: inherit`.
+ * See `styles/ripple.css`.
+ *
+ * ## Cost when disabled
+ *
+ * Nothing but the instance. `setEnabled(false)` detaches both trigger listeners and drops the
+ * host class, so a component that wires a ripple in behind an input that is off pays for no
+ * listeners, no class and no DOM. That is what makes `GOG_CONFIG.ripple.enabled` worth having as
+ * a config key rather than as a `--gog-ripple-opacity: 0` token.
+ */
+class GogRippleController {
+    host;
+    renderer;
+    document;
+    isBrowser;
+    centred;
+    layer = null;
+    active = new Set();
+    /** Set while a key is held, so auto-repeat does not stack a ripple per repeat event. */
+    keyHeld = false;
+    /** `renderer.listen` teardowns: the two on the host, and the three on the document. */
+    triggerListeners = [];
+    releaseListeners = [];
+    constructor(host, renderer, document, isBrowser, 
+    /** Start every ripple from the middle, ignoring where the pointer landed. */
+    centred) {
+        this.host = host;
+        this.renderer = renderer;
+        this.document = document;
+        this.isBrowser = isBrowser;
+        this.centred = centred;
+    }
+    setEnabled(enabled) {
+        if (!this.isBrowser)
+            return;
+        if (enabled)
+            this.attachTriggers();
+        else
+            this.detachTriggers();
+    }
+    destroy() {
+        this.detachTriggers();
+        this.stopListeningForRelease();
+        for (const instance of [...this.active])
+            this.remove(instance);
+        if (this.layer?.parentNode) {
+            this.renderer.removeChild(this.layer.parentNode, this.layer);
+        }
+        this.layer = null;
+    }
+    attachTriggers() {
+        if (this.triggerListeners.length > 0)
+            return;
+        // The layer is positioned against the host, so it has to be a containing block. A class
+        // rather than an inline style, so a host that is itself absolutely positioned can say so.
+        this.renderer.addClass(this.host, 'gog-ripple-host');
+        this.triggerListeners = [
+            this.renderer.listen(this.host, 'pointerdown', (event) => this.onPointerDown(event)),
+            this.renderer.listen(this.host, 'keydown', (event) => this.onKeyDown(event)),
+        ];
+    }
+    detachTriggers() {
+        for (const unlisten of this.triggerListeners)
+            unlisten();
+        this.triggerListeners = [];
+        this.renderer.removeClass(this.host, 'gog-ripple-host');
+        // Switched off mid-press: the wave has nothing left to answer to, so it goes at once rather
+        // than hanging until a release that is no longer being listened for.
+        this.release();
+    }
+    onPointerDown(event) {
+        // Secondary buttons open context menus and never produce a click, so they get no feedback.
+        if (event.button !== undefined && event.button !== 0)
+            return;
+        this.launch(event.clientX, event.clientY);
+    }
+    onKeyDown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar')
+            return;
+        if (event.repeat || this.keyHeld)
+            return;
+        this.keyHeld = true;
+        this.launch();
+    }
+    /**
+     * Starts one ripple. Coordinates are viewport-relative (`clientX`/`clientY`); omitted, or with
+     * `centred`, it starts from the middle of the host.
+     */
+    launch(clientX, clientY) {
+        if (this.suppressed())
+            return;
+        const rect = this.host.getBoundingClientRect();
+        const centred = this.centred() || clientX === undefined || clientY === undefined;
+        const x = centred ? rect.width / 2 : clientX - rect.left;
+        const y = centred ? rect.height / 2 : clientY - rect.top;
+        // The circle has to reach the farthest corner, or a press near one edge leaves the opposite
+        // corner untouched — which reads as a bug rather than as a deliberate partial wash.
+        const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
+        const node = this.renderer.createElement('span');
+        this.renderer.setAttribute(node, 'class', 'gog-ripple gog-ripple--entering');
+        this.renderer.setStyle(node, 'left', `${x - radius}px`);
+        this.renderer.setStyle(node, 'top', `${y - radius}px`);
+        this.renderer.setStyle(node, 'width', `${radius * 2}px`);
+        this.renderer.setStyle(node, 'height', `${radius * 2}px`);
+        const instance = { node, entered: false, released: false };
+        this.active.add(instance);
+        // One listener for both phases. Which animation just ended is read from the instance's own
+        // state rather than from `event.animationName`, so renaming a keyframe in the stylesheet
+        // cannot silently strand a node in the DOM.
+        this.renderer.listen(node, 'animationend', () => this.onAnimationEnd(instance));
+        this.renderer.appendChild(this.ensureLayer(), node);
+        this.listenForRelease();
+    }
+    /**
+     * The release listeners live on the **document**, and only while something is in flight.
+     *
+     * On the host they would be three more permanent listeners per rippling element — the cost
+     * that matters on a panel rendering a thousand options — and they would still miss the
+     * ordinary case of pressing a button and letting go somewhere else on the page, which fires no
+     * `pointerup` on the host at all.
+     */
+    listenForRelease() {
+        if (this.releaseListeners.length > 0)
+            return;
+        this.releaseListeners = [
+            // `pointercancel` is also what the browser sends when it takes a touch gesture over for
+            // scrolling, so a drag-to-scroll inside a `gog-scroll` fades the ripple instead of
+            // stranding it.
+            this.renderer.listen(this.document, 'pointerup', () => this.release()),
+            this.renderer.listen(this.document, 'pointercancel', () => this.release()),
+            this.renderer.listen(this.document, 'keyup', () => this.release()),
+        ];
+    }
+    stopListeningForRelease() {
+        for (const unlisten of this.releaseListeners)
+            unlisten();
+        this.releaseListeners = [];
+    }
+    /** The pointer or key was let go: every live ripple may now fade out. */
+    release() {
+        this.keyHeld = false;
+        this.stopListeningForRelease();
+        for (const instance of this.active) {
+            instance.released = true;
+            if (instance.entered)
+                this.beginExit(instance);
+        }
+    }
+    onAnimationEnd(instance) {
+        if (!instance.entered) {
+            instance.entered = true;
+            // Released mid-expansion: the fade was owed and is paid now the wave has finished growing.
+            if (instance.released)
+                this.beginExit(instance);
+            return;
+        }
+        this.remove(instance);
+    }
+    beginExit(instance) {
+        this.renderer.setAttribute(instance.node, 'class', 'gog-ripple gog-ripple--leaving');
+    }
+    remove(instance) {
+        if (instance.node.parentNode) {
+            this.renderer.removeChild(instance.node.parentNode, instance.node);
+        }
+        this.active.delete(instance);
+    }
+    ensureLayer() {
+        if (this.layer)
+            return this.layer;
+        const layer = this.renderer.createElement('span');
+        this.renderer.setAttribute(layer, 'class', 'gog-ripple-layer');
+        // Decoration, and nothing an assistive technology should meet.
+        this.renderer.setAttribute(layer, 'aria-hidden', 'true');
+        this.renderer.appendChild(this.host, layer);
+        this.layer = layer;
+        return layer;
+    }
+    suppressed() {
+        // A host the user cannot act on must not answer as though they had. `disabled` covers the
+        // native controls; `aria-disabled` covers the ones this library keeps focusable on purpose.
+        if (this.host.hasAttribute('disabled'))
+            return true;
+        if (this.host.getAttribute('aria-disabled') === 'true')
+            return true;
+        return this.prefersReducedMotion();
+    }
+    prefersReducedMotion() {
+        return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
+}
+/**
+ * Wires a ripple onto the current injection context's own host element, driven by `enabled`.
+ *
+ * One line in any directive or component that already owns the element it wants to ripple:
+ *
+ * ```ts
+ * private readonly rippleControl = bindRipple(this.rippleEnabled);
+ * ```
+ *
+ * Must be called from an injection context (a field initialiser or a constructor).
+ */
+function bindRipple(enabled, centred = () => false) {
+    const controller = new GogRippleController(inject(ElementRef).nativeElement, inject(Renderer2), inject(DOCUMENT), isPlatformBrowser(inject(PLATFORM_ID)), () => centred());
+    effect(() => controller.setEnabled(enabled()));
+    inject(DestroyRef).onDestroy(() => controller.destroy());
+    return controller;
+}
+
+/**
+ * A pointer-position ripple for any element — a `gog-*` component's host tag or a plain native
+ * one: `<button gogRipple>`, `<div gogRipple rippleCentred>`.
+ *
+ * Built from scratch. There is no `@angular/cdk` in this tree and there will not be, so
+ * Material's `MatRipple` is a reference for behaviour only.
+ *
+ * **Put it on the element that paints the surface.** The wash lives in its own layer that clips
+ * itself — the host is never given `overflow: hidden`, so a `gogBadge` on the same element keeps
+ * its badge — and that layer takes the host's corner radius with `border-radius: inherit`. On a
+ * wrapper whose *child* paints the rounded background, the layer inherits the wrapper's radius,
+ * usually `0`, and the wash squares off at the corners. `GogRippleController` and
+ * `styles/ripple.css` carry the rest of the reasoning.
+ *
+ * ## What suppresses it
+ *
+ * `rippleDisabled`, a host that is `disabled` or `aria-disabled="true"`, and
+ * `prefers-reduced-motion: reduce` — the last one suppressed outright rather than shortened,
+ * because a ripple is the single most obviously decorative motion in the library.
+ *
+ * ## Why `GOG_CONFIG.ripple.enabled` does not reach this directive
+ *
+ * That setting is the default for the **components'** `ripple` input, and this is not a
+ * component's input: writing `gogRipple` on your own element is already the per-element
+ * decision, the same way `[filter]="true"` on one `gog-select` beats the app-wide default.
+ * `rippleDisabled` is how you take it back, per instance or bound to whatever you like.
+ */
+class GogRippleDirective {
+    /**
+     * Suppresses the effect without removing the directive — and suppresses its listeners and its
+     * host class with it, so this is a real disable rather than a hidden ripple.
+     */
+    rippleDisabled = input(false, { ...(ngDevMode ? { debugName: "rippleDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Always start from the centre of the host, ignoring where the pointer landed. Keyboard
+     * activation is centred regardless — `Enter` and `Space` carry no coordinates.
+     */
+    rippleCentred = input(false, { ...(ngDevMode ? { debugName: "rippleCentred" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    enabled = computed(() => !this.rippleDisabled(), ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    rippleControl = bindRipple(this.enabled, this.rippleCentred);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogRippleDirective, isStandalone: true, selector: "[gogRipple]", inputs: { rippleDisabled: { classPropertyName: "rippleDisabled", publicName: "rippleDisabled", isSignal: true, isRequired: false, transformFunction: null }, rippleCentred: { classPropertyName: "rippleCentred", publicName: "rippleCentred", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogRippleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogRipple]',
+                }]
+        }], propDecorators: { rippleDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleDisabled", required: false }] }], rippleCentred: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleCentred", required: false }] }] } });
+
 class SpinnerComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
@@ -136,6 +440,11 @@ class ButtonComponent {
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /**
+     * Press ripple. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then to `false` — so
+     * `[ripple]="false"` is how one button opts out of an app that turned it on everywhere.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
     /**
      * Minimum time, in ms, between accepted clicks. This is a spam/double-click
      * guard, not a delay before the first click fires: the first click in a
@@ -165,6 +474,7 @@ class ButtonComponent {
         slg: 'md',
     };
     globalConfig = inject(GOG_CONFIG);
+    rippleEnabled = resolveRipple(this.ripple, this.globalConfig);
     /** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
     resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$a), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     spinnerSize = computed(() => ButtonComponent.SPINNER_SIZE_BY_BUTTON_SIZE[this.resolvedSize()], ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
@@ -187,16 +497,16 @@ class ButtonComponent {
         this.click$.next(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-button', imports: [SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-button', imports: [GogRippleDirective, SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Drives the :host(.gog-host--full-width) rules in the stylesheet — without this
                         // binding the `fullWidth` input has no visible effect.
                         '[class.gog-host--full-width]': 'fullWidth()',
-                    }, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
+                    }, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
 
 /** Built-in default, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SIZE$9 = 'md';
@@ -247,8 +557,15 @@ class GogButtonDirective {
      * Stretches the element to its container's width. A bare attribute is enough:
      * `<a gogButton fullWidth>`.
      */
+    /**
+     * Press ripple. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then to `false` — so
+     * `[ripple]="false"` opts one instance out of an app that turned it on everywhere.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     globalConfig = inject(GOG_CONFIG);
+    rippleEnabled = resolveRipple(this.ripple, this.globalConfig);
+    rippleControl = bindRipple(this.rippleEnabled);
     resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$9), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     variantClass = computed(() => `gog-btn--${this.variant()}`, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
     /**
@@ -259,7 +576,7 @@ class GogButtonDirective {
      */
     sizeClass = computed(() => `gog-btn--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogButtonDirective, isStandalone: true, selector: "a[gogButton], button[gogButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variantClass() + \" \" + sizeClass()", "class.gog-btn--full-width": "fullWidth()" }, classAttribute: "gog-btn gog-inline-center gog-contained-layout" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogButtonDirective, isStandalone: true, selector: "a[gogButton], button[gogButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variantClass() + \" \" + sizeClass()", "class.gog-btn--full-width": "fullWidth()" }, classAttribute: "gog-btn gog-inline-center gog-contained-layout" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogButtonDirective, decorators: [{
             type: Directive,
@@ -274,7 +591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[class.gog-btn--full-width]': 'fullWidth()',
                     },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
 
 const VERTICAL_ARROWS = ['ArrowDown', 'ArrowUp'];
 const HORIZONTAL_ARROWS = ['ArrowRight', 'ArrowLeft'];
@@ -606,6 +923,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, 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 }] }] } });
 
+/** Cycled by `skeletonWidth()` — see there for why these are fixed rather than random. */
+const SKELETON_WIDTHS = ['62%', '45%', '71%', '53%'];
 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 });
@@ -649,6 +968,13 @@ class AccordionComponent {
      */
     sizeClass = computed(() => this.size() === 'lg' ? '' : `gog-accordion--${this.size()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
     size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Press ripple. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then to `false` — so
+     * `[ripple]="false"` opts one instance out of an app that turned it on everywhere.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
+    /** Declared after the input it reads: field initialisers run in source order. */
+    rippleEnabled = resolveRipple(this.ripple, inject(GOG_CONFIG));
     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 */ []));
@@ -698,6 +1024,17 @@ class AccordionComponent {
         const count = this.items().length || this.skeletonCount();
         return Array.from({ length: count }, (_, index) => index);
     }, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder title widths, cycled by row index.
+     *
+     * Every bar used to be 55%, which reads as a repeating progress artifact rather than as text
+     * that has not arrived — real titles are not all the same length. Cycled rather than random:
+     * a random width would differ between the server-rendered pass and hydration, and would make
+     * every snapshot of this component unstable.
+     */
+    skeletonWidth(index) {
+        return SKELETON_WIDTHS[index % SKELETON_WIDTHS.length];
+    }
     constructor() {
         effect(() => {
             const items = this.items();
@@ -737,14 +1074,21 @@ 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 }, 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 gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"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:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n          <!--\r\n            The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n            Without it the right-hand side is empty while loading and the chevron appears out of\r\n            nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n          -->\r\n          @if (showChevron()) {\r\n            <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n              <!--\r\n                `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n                height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n                the row. A circle takes its diameter from `width` and keeps itself round, so\r\n                filling the chevron's own box is what matches it.\r\n              -->\r\n              <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n            </span>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet, IconComponent, SkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-accordion', imports: [GogRippleDirective, NgTemplateOutlet, IconComponent, SkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-accordion-host',
-                    }, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"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:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@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 }] }] } });
+                        /*
+                         * The skeleton rows are `aria-hidden`, and the real headers are not rendered while loading —
+                         * so without this the whole component is simply *empty* to a screen reader, which reads as
+                         * "there is nothing here" rather than "this is coming". `gog-button` and `gog-spinner-overlay`
+                         * already do this; see the loading-state rule in `api-design.instructions.md`.
+                         */
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                    }, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n          <!--\r\n            The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n            Without it the right-hand side is empty while loading and the chevron appears out of\r\n            nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n          -->\r\n          @if (showChevron()) {\r\n            <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n              <!--\r\n                `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n                height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n                the row. A circle takes its diameter from `width` and keeps itself round, so\r\n                filling the chevron's own box is what matches it.\r\n              -->\r\n              <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n            </span>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], openIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIds", required: false }] }, { type: i0.Output, args: ["openIdsChange"] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
 
 /**
  * Headless expand/collapse primitive — a trigger toggles a content region open and
@@ -820,7 +1164,14 @@ const NATIVELY_OPERABLE = ['button', 'input', 'select', 'textarea', 'summary'];
  * directive's call.
  */
 class GogCollapsibleTriggerDirective {
+    /**
+     * Press ripple. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then to `false` — so
+     * `[ripple]="false"` opts one instance out of an app that turned it on everywhere.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
     collapsible = inject(CollapsibleComponent);
+    rippleEnabled = resolveRipple(this.ripple, inject(GOG_CONFIG));
+    rippleControl = bindRipple(this.rippleEnabled);
     elementRef = inject(ElementRef);
     /**
      * Whether this host needs the button role wired on. Read once: an element does not change
@@ -858,7 +1209,7 @@ class GogCollapsibleTriggerDirective {
         return true;
     }
     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()", "keydown": "onKeydown($event)" }, 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", "attr.role": "needsButtonSemantics ? \"button\" : declaredRole", "attr.tabindex": "needsButtonSemantics ? (collapsible.disabled() ? -1 : 0) : declaredTabIndex" }, classAttribute: "gog-collapsible__trigger" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogCollapsibleTriggerDirective, isStandalone: true, selector: "[gogCollapsibleTrigger]", inputs: { ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "collapsible.toggle()", "keydown": "onKeydown($event)" }, 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", "attr.role": "needsButtonSemantics ? \"button\" : declaredRole", "attr.tabindex": "needsButtonSemantics ? (collapsible.disabled() ? -1 : 0) : declaredTabIndex" }, classAttribute: "gog-collapsible__trigger" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCollapsibleTriggerDirective, decorators: [{
             type: Directive,
@@ -876,7 +1227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '(keydown)': 'onKeydown($event)',
                     },
                 }]
-        }] });
+        }], propDecorators: { ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }] } });
 
 /**
  * Marks the element that a `gog-collapsible` shows and hides. Applies the open/closed
@@ -1442,6 +1793,11 @@ class GogDropdownBase {
     floatLabel = input(undefined, ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.floatLabel.showPlaceholder`, then to `false`. */
     floatLabelShowPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "floatLabelShowPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Press ripple on the panel's options. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then
+     * to `false`. The trigger itself never ripples — it is a field, not a button.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     /** Projected `gogDropdownOption` template, if the consumer supplied one. */
     optionSlot = contentChild(GogDropdownOptionDirective, ...(ngDevMode ? [{ debugName: "optionSlot" }] : /* istanbul ignore next */ []));
@@ -1505,6 +1861,7 @@ class GogDropdownBase {
     isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
     /** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
     resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$8), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    rippleEnabled = resolveRipple(this.ripple, this.globalConfig);
     resolvedErrorDisplay = computed(() => resolveConfigured(this.errorDisplay(), this.globalConfig.control?.errorDisplay, DEFAULT_ERROR_DISPLAY$5), ...(ngDevMode ? [{ debugName: "resolvedErrorDisplay" }] : /* istanbul ignore next */ []));
     resolvedAppendToBody = computed(() => resolveConfigured(this.appendToBody(), this.globalConfig.dropdown?.appendToBody, DEFAULT_APPEND_TO_BODY$1), ...(ngDevMode ? [{ debugName: "resolvedAppendToBody" }] : /* istanbul ignore next */ []));
     resolvedDropdownDirection = computed(() => resolveConfigured(this.dropdownDirection(), this.globalConfig.dropdown?.direction, DEFAULT_DROPDOWN_DIRECTION), ...(ngDevMode ? [{ debugName: "resolvedDropdownDirection" }] : /* istanbul ignore next */ []));
@@ -1861,7 +2218,7 @@ 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.2.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 }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterPosition: { classPropertyName: "filterPosition", publicName: "filterPosition", isSignal: true, isRequired: false, transformFunction: null }, filterEmptyMessage: { classPropertyName: "filterEmptyMessage", publicName: "filterEmptyMessage", isSignal: true, isRequired: false, transformFunction: null }, filterMatch: { classPropertyName: "filterMatch", publicName: "filterMatch", 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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, queries: [{ propertyName: "chevronSlot", first: true, predicate: GogDropdownChevronDirective, descendants: true, isSignal: true }, { propertyName: "optionSlot", first: true, predicate: GogDropdownOptionDirective, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.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 }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterPosition: { classPropertyName: "filterPosition", publicName: "filterPosition", isSignal: true, isRequired: false, transformFunction: null }, filterEmptyMessage: { classPropertyName: "filterEmptyMessage", publicName: "filterEmptyMessage", isSignal: true, isRequired: false, transformFunction: null }, filterMatch: { classPropertyName: "filterMatch", publicName: "filterMatch", 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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, queries: [{ propertyName: "chevronSlot", first: true, predicate: GogDropdownChevronDirective, descendants: true, isSignal: true }, { propertyName: "optionSlot", first: true, predicate: GogDropdownOptionDirective, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, decorators: [{
             type: Directive,
@@ -1874,7 +2231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[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 }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filterPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPosition", required: false }] }], filterEmptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterEmptyMessage", required: false }] }], filterMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatch", 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 }] }], chevronSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogDropdownChevronDirective), { isSignal: true }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], optionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogDropdownOptionDirective), { isSignal: true }] }] } });
+        }], 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 }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filterPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPosition", required: false }] }], filterEmptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterEmptyMessage", required: false }] }], filterMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatch", 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 }] }], chevronSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogDropdownChevronDirective), { isSignal: true }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], optionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogDropdownOptionDirective), { isSignal: true }] }] } });
 function readPx$1(raw, fallback) {
     const parsed = Number.parseFloat(raw.trim());
     return Number.isFinite(parsed) ? parsed : fallback;
@@ -2388,15 +2745,29 @@ class AutocompleteComponent extends GogDropdownBase {
         return index >= 0 && index < this.visibleOptions().length ? this.optionId(index) : null;
     }, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
     searchTimer = null;
+    /**
+     * True from the first keystroke until the edit is resolved — by blur, Escape, picking an
+     * option, or the clear button. Deliberately a plain field, not a signal: the sync effect below
+     * must not re-run when it changes, only consult it.
+     *
+     * It exists because the effect used to use `!isOpen()` to mean "the user is not mid-edit", and
+     * the panel closes for reasons that are not that. Backspacing the last character takes the text
+     * under `minLength`, which closes the panel — so the effect fired and wrote the selected label
+     * straight back into the field. Nine backspaces on "Amsterdam" left "Amsterdam": the field
+     * could not be cleared at all while a selection was held.
+     */
+    editing = false;
     constructor() {
         super();
         this.ownDestroyRef.onDestroy(() => this.cancelPendingSearch());
         // Keep the field showing the selection whenever the user is not mid-edit. Covers a value
         // written by a form, a `[(value)]` set from outside, and the options arriving after the
-        // value did — which is the normal order for a server-backed control.
+        // value did — which is the normal order for a server-backed control. All three change
+        // `selectedLabel()`, which is the only signal this reads, so it runs when the *value* moves
+        // and never merely because the panel opened or closed.
         effect(() => {
             const label = this.selectedLabel();
-            if (!this.isOpen() && label !== '') {
+            if (label !== '' && !this.editing) {
                 this.query.set(label);
             }
         });
@@ -2406,6 +2777,7 @@ class AutocompleteComponent extends GogDropdownBase {
     }
     onInput(event) {
         const text = event.target.value;
+        this.editing = true;
         this.browsingAll.set(false);
         this.query.set(text);
         this.activeIndex.set(-1);
@@ -2468,6 +2840,7 @@ class AutocompleteComponent extends GogDropdownBase {
                     return;
                 event.preventDefault();
                 this.close();
+                this.editing = false;
                 this.restoreSelectedText();
                 return;
             }
@@ -2500,6 +2873,7 @@ class AutocompleteComponent extends GogDropdownBase {
     onInputBlur() {
         this.onFocusOut();
         this.close();
+        this.editing = false;
         if (this.forceSelection()) {
             this.restoreSelectedText();
         }
@@ -2512,6 +2886,7 @@ class AutocompleteComponent extends GogDropdownBase {
     /** Clearing has to empty the *text* as well; the base only knows about the value. */
     clearValue(event) {
         super.clearValue(event);
+        this.editing = false;
         this.query.set('');
         this.cancelPendingSearch();
         this.gogSearch.emit('');
@@ -2519,6 +2894,7 @@ class AutocompleteComponent extends GogDropdownBase {
     pick(option) {
         if (this.isOptionDisabled(option))
             return;
+        this.editing = false;
         this.commitValue(this.valueOf(option));
         this.query.set(this.labelOf(option));
         this.close();
@@ -2577,14 +2953,21 @@ class AutocompleteComponent extends GogDropdownBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AutocompleteComponent, isStandalone: true, selector: "gog-autocomplete", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterLocal: { classPropertyName: "filterLocal", publicName: "filterLocal", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogSearch: "gogSearch", gogLoadMore: "gogLoadMore" }, host: { properties: { "style.--gog-autocomplete-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"clearValue($event)\"\r\n        >\r\n          <gog-icon name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AutocompleteComponent, isStandalone: true, selector: "gog-autocomplete", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterLocal: { classPropertyName: "filterLocal", publicName: "filterLocal", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogSearch: "gogSearch", gogLoadMore: "gogLoadMore" }, host: { properties: { "style.--gog-autocomplete-min-width": "minWidth()", "attr.aria-busy": "loading() ? \"true\" : null" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"clearValue($event)\"\r\n        >\r\n          <gog-icon name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-autocomplete', imports: [IconComponent, NgTemplateOutlet, ScrollComponent, SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-autocomplete', imports: [GogRippleDirective, IconComponent, NgTemplateOutlet, ScrollComponent, SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-autocomplete-min-width]': 'minWidth()',
-                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"clearValue($event)\"\r\n        >\r\n          <gog-icon name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"] }]
+                        /*
+                         * The spinner in the actions slot is `aria-hidden`, so a field fetching its suggestions
+                         * looked idle to a screen reader — the one case where the wait is not the user's own doing
+                         * and they have no way to tell. Required of every `loading` input; see the loading-state
+                         * rule in `api-design.instructions.md`.
+                         */
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"clearValue($event)\"\r\n        >\r\n          <gog-icon name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filterLocal: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocal", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], gogSearch: [{ type: i0.Output, args: ["gogSearch"] }], gogLoadMore: [{ type: i0.Output, args: ["gogLoadMore"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 /** Beyond this count the badge renders `N+` rather than growing without limit. */
@@ -2784,6 +3167,11 @@ class ButtonToggleGroupComponent {
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     appearance = input('joined', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Press ripple. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then to `false` — so
+     * `[ripple]="false"` opts one instance out of an app that turned it on everywhere.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -2799,6 +3187,7 @@ class ButtonToggleGroupComponent {
     ngControl = inject(NgControl, { optional: true, self: true });
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     globalConfig = inject(GOG_CONFIG);
+    rippleEnabled = resolveRipple(this.ripple, this.globalConfig);
     /** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
     resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$6), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
@@ -2925,18 +3314,18 @@ class ButtonToggleGroupComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonToggleGroupComponent, isStandalone: true, selector: "gog-button-toggle-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, optionIcon: { classPropertyName: "optionIcon", publicName: "optionIcon", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "multiple() ? \"group\" : \"radiogroup\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-orientation": "orientation()", "attr.aria-disabled": "isDisabled() ? \"true\" : null" } }, queries: [{ propertyName: "optionSlot", first: true, predicate: GogButtonToggleOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonRefs", predicate: ["toggleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (option of options(); track $index) {\n  <button\n    #toggleButton\n    type=\"button\"\n    class=\"gog-button-toggle__button\"\n    [class.gog-button-toggle__button--selected]=\"isSelected(option)\"\n    [attr.role]=\"multiple() ? null : 'radio'\"\n    [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n    [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n    [attr.aria-disabled]=\"isOptionDisabled(option) ? 'true' : null\"\n    [disabled]=\"isOptionDisabled(option)\"\n    [tabindex]=\"$index === tabStopIndex() ? 0 : -1\"\n    (click)=\"onOptionClick(option)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  >\n    @if (optionSlot(); as slot) {\n      <ng-container\n        [ngTemplateOutlet]=\"slot.templateRef\"\n        [ngTemplateOutletContext]=\"optionContext(option)\"\n      />\n    } @else {\n      @if (iconOf(option); as icon) {\n        <gog-icon class=\"gog-button-toggle__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\n      }\n      <span class=\"gog-button-toggle__label\">{{ labelOf(option) }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;max-width:100%}.gog-button-toggle__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-button-toggle-gap);padding:var(--gog-button-toggle-padding, var(--gog-button-toggle-size-padding, var(--gog-button-md-padding)));border:var(--gog-button-toggle-border-width) var(--gog-button-toggle-border-style) var(--gog-button-toggle-border-color);background-color:var(--gog-button-toggle-bg, var(--gog-button-toggle-rest-bg));color:var(--gog-button-toggle-color, var(--gog-button-toggle-rest-color));font-family:var(--gog-button-toggle-font-family);font-size:var(--gog-button-toggle-font-size, var(--gog-button-toggle-size-font-size, var(--gog-button-md-font-size)));font-weight:var(--gog-button-toggle-font-weight);letter-spacing:var(--gog-button-toggle-letter-spacing);line-height:var(--gog-button-toggle-line-height);text-transform:var(--gog-button-toggle-text-transform);cursor:pointer;white-space:nowrap;transition:background-color var(--gog-button-toggle-transition-duration) var(--gog-easing),border-color var(--gog-button-toggle-transition-duration) var(--gog-easing),color var(--gog-button-toggle-transition-duration) var(--gog-easing)}.gog-button-toggle__button:hover:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-hover-bg);color:var(--gog-button-toggle-hover-color)}.gog-button-toggle__button--selected{border-color:var(--gog-button-toggle-selected-border-color);background-color:var(--gog-button-toggle-selected-bg);color:var(--gog-button-toggle-selected-color)}.gog-button-toggle__button:disabled{opacity:var(--gog-button-toggle-disabled-opacity);cursor:not-allowed}.gog-button-toggle__button:focus-visible{outline:var(--gog-button-toggle-focus-ring-width) solid var(--gog-button-toggle-focus-ring-color);outline-offset:var(--gog-button-toggle-focus-ring-offset);z-index:1}.gog-button-toggle__icon{flex-shrink:0;font-size:var(--gog-button-toggle-icon-size)}.gog-button-toggle__label{min-width:0;overflow:hidden;text-overflow:ellipsis}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:not(:first-of-type){margin-inline-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-end-start-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:last-of-type{border-start-end-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:not(:first-of-type){margin-block-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-start-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:last-of-type{border-end-start-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined) .gog-button-toggle__button--selected{z-index:1}:host(.gog-button-toggle--separated){gap:var(--gog-button-toggle-separated-gap)}:host(.gog-button-toggle--separated) .gog-button-toggle__button{border-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--horizontal){flex-direction:row}:host(.gog-button-toggle--vertical){flex-direction:column}:host(.gog-button-toggle--xsm){--gog-button-toggle-size-padding: var(--gog-button-xsm-padding);--gog-button-toggle-size-font-size: var(--gog-button-xsm-font-size)}:host(.gog-button-toggle--sm){--gog-button-toggle-size-padding: var(--gog-button-sm-padding);--gog-button-toggle-size-font-size: var(--gog-button-sm-font-size)}:host(.gog-button-toggle--md){--gog-button-toggle-size-padding: var(--gog-button-md-padding);--gog-button-toggle-size-font-size: var(--gog-button-md-font-size)}:host(.gog-button-toggle--lg){--gog-button-toggle-size-padding: var(--gog-button-lg-padding);--gog-button-toggle-size-font-size: var(--gog-button-lg-font-size)}:host(.gog-button-toggle--slg){--gog-button-toggle-size-padding: var(--gog-button-slg-padding);--gog-button-toggle-size-font-size: var(--gog-button-slg-font-size)}:host(.gog-host--full-width){display:flex;width:100%}:host(.gog-host--full-width) .gog-button-toggle__button{flex:1 1 0}@media(prefers-reduced-motion:reduce){.gog-button-toggle__button{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonToggleGroupComponent, isStandalone: true, selector: "gog-button-toggle-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, optionIcon: { classPropertyName: "optionIcon", publicName: "optionIcon", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "multiple() ? \"group\" : \"radiogroup\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-orientation": "orientation()", "attr.aria-disabled": "isDisabled() ? \"true\" : null" } }, queries: [{ propertyName: "optionSlot", first: true, predicate: GogButtonToggleOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "buttonRefs", predicate: ["toggleButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (option of options(); track $index) {\r\n  <button\r\n    #toggleButton\r\n    type=\"button\"\r\n    class=\"gog-button-toggle__button\"\r\n    [class.gog-button-toggle__button--selected]=\"isSelected(option)\"\r\n    [attr.role]=\"multiple() ? null : 'radio'\"\r\n    [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\r\n    [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\r\n    [attr.aria-disabled]=\"isOptionDisabled(option) ? 'true' : null\"\r\n    [disabled]=\"isOptionDisabled(option)\"\r\n    [tabindex]=\"$index === tabStopIndex() ? 0 : -1\"\r\n    (click)=\"onOptionClick(option)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"onBlur()\"\r\n    gogRipple\r\n    [rippleDisabled]=\"!rippleEnabled()\"\r\n  >\r\n    @if (optionSlot(); as slot) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"slot.templateRef\"\r\n        [ngTemplateOutletContext]=\"optionContext(option)\"\r\n      />\r\n    } @else {\r\n      @if (iconOf(option); as icon) {\r\n        <gog-icon class=\"gog-button-toggle__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n      }\r\n      <span class=\"gog-button-toggle__label\">{{ labelOf(option) }}</span>\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;max-width:100%}.gog-button-toggle__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-button-toggle-gap);padding:var(--gog-button-toggle-padding, var(--gog-button-toggle-size-padding, var(--gog-button-md-padding)));border:var(--gog-button-toggle-border-width) var(--gog-button-toggle-border-style) var(--gog-button-toggle-border-color);background-color:var(--gog-button-toggle-bg, var(--gog-button-toggle-rest-bg));color:var(--gog-button-toggle-color, var(--gog-button-toggle-rest-color));font-family:var(--gog-button-toggle-font-family);font-size:var(--gog-button-toggle-font-size, var(--gog-button-toggle-size-font-size, var(--gog-button-md-font-size)));font-weight:var(--gog-button-toggle-font-weight);letter-spacing:var(--gog-button-toggle-letter-spacing);line-height:var(--gog-button-toggle-line-height);text-transform:var(--gog-button-toggle-text-transform);cursor:pointer;white-space:nowrap;transition:background-color var(--gog-button-toggle-transition-duration) var(--gog-easing),border-color var(--gog-button-toggle-transition-duration) var(--gog-easing),color var(--gog-button-toggle-transition-duration) var(--gog-easing)}.gog-button-toggle__button:hover:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-hover-bg);color:var(--gog-button-toggle-hover-color)}.gog-button-toggle__button--selected{border-color:var(--gog-button-toggle-selected-border-color);background-color:var(--gog-button-toggle-selected-bg);color:var(--gog-button-toggle-selected-color)}.gog-button-toggle__button:disabled{opacity:var(--gog-button-toggle-disabled-opacity);cursor:not-allowed}.gog-button-toggle__button:focus-visible{outline:var(--gog-button-toggle-focus-ring-width) solid var(--gog-button-toggle-focus-ring-color);outline-offset:var(--gog-button-toggle-focus-ring-offset);z-index:1}.gog-button-toggle__icon{flex-shrink:0;font-size:var(--gog-button-toggle-icon-size)}.gog-button-toggle__label{min-width:0;overflow:hidden;text-overflow:ellipsis}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:not(:first-of-type){margin-inline-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-end-start-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:last-of-type{border-start-end-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:not(:first-of-type){margin-block-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-start-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:last-of-type{border-end-start-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined) .gog-button-toggle__button--selected{z-index:1}:host(.gog-button-toggle--separated){gap:var(--gog-button-toggle-separated-gap)}:host(.gog-button-toggle--separated) .gog-button-toggle__button{border-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--horizontal){flex-direction:row}:host(.gog-button-toggle--vertical){flex-direction:column}:host(.gog-button-toggle--xsm){--gog-button-toggle-size-padding: var(--gog-button-xsm-padding);--gog-button-toggle-size-font-size: var(--gog-button-xsm-font-size)}:host(.gog-button-toggle--sm){--gog-button-toggle-size-padding: var(--gog-button-sm-padding);--gog-button-toggle-size-font-size: var(--gog-button-sm-font-size)}:host(.gog-button-toggle--md){--gog-button-toggle-size-padding: var(--gog-button-md-padding);--gog-button-toggle-size-font-size: var(--gog-button-md-font-size)}:host(.gog-button-toggle--lg){--gog-button-toggle-size-padding: var(--gog-button-lg-padding);--gog-button-toggle-size-font-size: var(--gog-button-lg-font-size)}:host(.gog-button-toggle--slg){--gog-button-toggle-size-padding: var(--gog-button-slg-padding);--gog-button-toggle-size-font-size: var(--gog-button-slg-font-size)}:host(.gog-host--full-width){display:flex;width:100%}:host(.gog-host--full-width) .gog-button-toggle__button{flex:1 1 0}@media(prefers-reduced-motion:reduce){.gog-button-toggle__button{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonToggleGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-button-toggle-group', imports: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-button-toggle-group', imports: [GogRippleDirective, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
                         '[attr.role]': 'multiple() ? "group" : "radiogroup"',
                         '[attr.aria-label]': 'ariaLabel() || null',
                         '[attr.aria-orientation]': 'orientation()',
                         '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
-                    }, template: "@for (option of options(); track $index) {\n  <button\n    #toggleButton\n    type=\"button\"\n    class=\"gog-button-toggle__button\"\n    [class.gog-button-toggle__button--selected]=\"isSelected(option)\"\n    [attr.role]=\"multiple() ? null : 'radio'\"\n    [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n    [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n    [attr.aria-disabled]=\"isOptionDisabled(option) ? 'true' : null\"\n    [disabled]=\"isOptionDisabled(option)\"\n    [tabindex]=\"$index === tabStopIndex() ? 0 : -1\"\n    (click)=\"onOptionClick(option)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  >\n    @if (optionSlot(); as slot) {\n      <ng-container\n        [ngTemplateOutlet]=\"slot.templateRef\"\n        [ngTemplateOutletContext]=\"optionContext(option)\"\n      />\n    } @else {\n      @if (iconOf(option); as icon) {\n        <gog-icon class=\"gog-button-toggle__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\n      }\n      <span class=\"gog-button-toggle__label\">{{ labelOf(option) }}</span>\n    }\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;max-width:100%}.gog-button-toggle__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-button-toggle-gap);padding:var(--gog-button-toggle-padding, var(--gog-button-toggle-size-padding, var(--gog-button-md-padding)));border:var(--gog-button-toggle-border-width) var(--gog-button-toggle-border-style) var(--gog-button-toggle-border-color);background-color:var(--gog-button-toggle-bg, var(--gog-button-toggle-rest-bg));color:var(--gog-button-toggle-color, var(--gog-button-toggle-rest-color));font-family:var(--gog-button-toggle-font-family);font-size:var(--gog-button-toggle-font-size, var(--gog-button-toggle-size-font-size, var(--gog-button-md-font-size)));font-weight:var(--gog-button-toggle-font-weight);letter-spacing:var(--gog-button-toggle-letter-spacing);line-height:var(--gog-button-toggle-line-height);text-transform:var(--gog-button-toggle-text-transform);cursor:pointer;white-space:nowrap;transition:background-color var(--gog-button-toggle-transition-duration) var(--gog-easing),border-color var(--gog-button-toggle-transition-duration) var(--gog-easing),color var(--gog-button-toggle-transition-duration) var(--gog-easing)}.gog-button-toggle__button:hover:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-hover-bg);color:var(--gog-button-toggle-hover-color)}.gog-button-toggle__button--selected{border-color:var(--gog-button-toggle-selected-border-color);background-color:var(--gog-button-toggle-selected-bg);color:var(--gog-button-toggle-selected-color)}.gog-button-toggle__button:disabled{opacity:var(--gog-button-toggle-disabled-opacity);cursor:not-allowed}.gog-button-toggle__button:focus-visible{outline:var(--gog-button-toggle-focus-ring-width) solid var(--gog-button-toggle-focus-ring-color);outline-offset:var(--gog-button-toggle-focus-ring-offset);z-index:1}.gog-button-toggle__icon{flex-shrink:0;font-size:var(--gog-button-toggle-icon-size)}.gog-button-toggle__label{min-width:0;overflow:hidden;text-overflow:ellipsis}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:not(:first-of-type){margin-inline-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-end-start-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:last-of-type{border-start-end-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:not(:first-of-type){margin-block-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-start-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:last-of-type{border-end-start-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined) .gog-button-toggle__button--selected{z-index:1}:host(.gog-button-toggle--separated){gap:var(--gog-button-toggle-separated-gap)}:host(.gog-button-toggle--separated) .gog-button-toggle__button{border-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--horizontal){flex-direction:row}:host(.gog-button-toggle--vertical){flex-direction:column}:host(.gog-button-toggle--xsm){--gog-button-toggle-size-padding: var(--gog-button-xsm-padding);--gog-button-toggle-size-font-size: var(--gog-button-xsm-font-size)}:host(.gog-button-toggle--sm){--gog-button-toggle-size-padding: var(--gog-button-sm-padding);--gog-button-toggle-size-font-size: var(--gog-button-sm-font-size)}:host(.gog-button-toggle--md){--gog-button-toggle-size-padding: var(--gog-button-md-padding);--gog-button-toggle-size-font-size: var(--gog-button-md-font-size)}:host(.gog-button-toggle--lg){--gog-button-toggle-size-padding: var(--gog-button-lg-padding);--gog-button-toggle-size-font-size: var(--gog-button-lg-font-size)}:host(.gog-button-toggle--slg){--gog-button-toggle-size-padding: var(--gog-button-slg-padding);--gog-button-toggle-size-font-size: var(--gog-button-slg-font-size)}:host(.gog-host--full-width){display:flex;width:100%}:host(.gog-host--full-width) .gog-button-toggle__button{flex:1 1 0}@media(prefers-reduced-motion:reduce){.gog-button-toggle__button{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], optionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIcon", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], optionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogButtonToggleOptionDirective), { isSignal: true }] }], buttonRefs: [{ type: i0.ViewChildren, args: ['toggleButton', { isSignal: true }] }] } });
+                    }, template: "@for (option of options(); track $index) {\r\n  <button\r\n    #toggleButton\r\n    type=\"button\"\r\n    class=\"gog-button-toggle__button\"\r\n    [class.gog-button-toggle__button--selected]=\"isSelected(option)\"\r\n    [attr.role]=\"multiple() ? null : 'radio'\"\r\n    [attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\r\n    [attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\r\n    [attr.aria-disabled]=\"isOptionDisabled(option) ? 'true' : null\"\r\n    [disabled]=\"isOptionDisabled(option)\"\r\n    [tabindex]=\"$index === tabStopIndex() ? 0 : -1\"\r\n    (click)=\"onOptionClick(option)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"onBlur()\"\r\n    gogRipple\r\n    [rippleDisabled]=\"!rippleEnabled()\"\r\n  >\r\n    @if (optionSlot(); as slot) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"slot.templateRef\"\r\n        [ngTemplateOutletContext]=\"optionContext(option)\"\r\n      />\r\n    } @else {\r\n      @if (iconOf(option); as icon) {\r\n        <gog-icon class=\"gog-button-toggle__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n      }\r\n      <span class=\"gog-button-toggle__label\">{{ labelOf(option) }}</span>\r\n    }\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;max-width:100%}.gog-button-toggle__button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-button-toggle-gap);padding:var(--gog-button-toggle-padding, var(--gog-button-toggle-size-padding, var(--gog-button-md-padding)));border:var(--gog-button-toggle-border-width) var(--gog-button-toggle-border-style) var(--gog-button-toggle-border-color);background-color:var(--gog-button-toggle-bg, var(--gog-button-toggle-rest-bg));color:var(--gog-button-toggle-color, var(--gog-button-toggle-rest-color));font-family:var(--gog-button-toggle-font-family);font-size:var(--gog-button-toggle-font-size, var(--gog-button-toggle-size-font-size, var(--gog-button-md-font-size)));font-weight:var(--gog-button-toggle-font-weight);letter-spacing:var(--gog-button-toggle-letter-spacing);line-height:var(--gog-button-toggle-line-height);text-transform:var(--gog-button-toggle-text-transform);cursor:pointer;white-space:nowrap;transition:background-color var(--gog-button-toggle-transition-duration) var(--gog-easing),border-color var(--gog-button-toggle-transition-duration) var(--gog-easing),color var(--gog-button-toggle-transition-duration) var(--gog-easing)}.gog-button-toggle__button:hover:not(:disabled):not(.gog-button-toggle__button--selected){background-color:var(--gog-button-toggle-hover-bg);color:var(--gog-button-toggle-hover-color)}.gog-button-toggle__button--selected{border-color:var(--gog-button-toggle-selected-border-color);background-color:var(--gog-button-toggle-selected-bg);color:var(--gog-button-toggle-selected-color)}.gog-button-toggle__button:disabled{opacity:var(--gog-button-toggle-disabled-opacity);cursor:not-allowed}.gog-button-toggle__button:focus-visible{outline:var(--gog-button-toggle-focus-ring-width) solid var(--gog-button-toggle-focus-ring-color);outline-offset:var(--gog-button-toggle-focus-ring-offset);z-index:1}.gog-button-toggle__icon{flex-shrink:0;font-size:var(--gog-button-toggle-icon-size)}.gog-button-toggle__label{min-width:0;overflow:hidden;text-overflow:ellipsis}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:not(:first-of-type){margin-inline-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-end-start-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--horizontal) .gog-button-toggle__button:last-of-type{border-start-end-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button{border-radius:0}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:not(:first-of-type){margin-block-start:calc(-1 * var(--gog-button-toggle-border-width))}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:first-of-type{border-start-start-radius:var(--gog-button-toggle-radius);border-start-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined.gog-button-toggle--vertical) .gog-button-toggle__button:last-of-type{border-end-start-radius:var(--gog-button-toggle-radius);border-end-end-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--joined) .gog-button-toggle__button--selected{z-index:1}:host(.gog-button-toggle--separated){gap:var(--gog-button-toggle-separated-gap)}:host(.gog-button-toggle--separated) .gog-button-toggle__button{border-radius:var(--gog-button-toggle-radius)}:host(.gog-button-toggle--horizontal){flex-direction:row}:host(.gog-button-toggle--vertical){flex-direction:column}:host(.gog-button-toggle--xsm){--gog-button-toggle-size-padding: var(--gog-button-xsm-padding);--gog-button-toggle-size-font-size: var(--gog-button-xsm-font-size)}:host(.gog-button-toggle--sm){--gog-button-toggle-size-padding: var(--gog-button-sm-padding);--gog-button-toggle-size-font-size: var(--gog-button-sm-font-size)}:host(.gog-button-toggle--md){--gog-button-toggle-size-padding: var(--gog-button-md-padding);--gog-button-toggle-size-font-size: var(--gog-button-md-font-size)}:host(.gog-button-toggle--lg){--gog-button-toggle-size-padding: var(--gog-button-lg-padding);--gog-button-toggle-size-font-size: var(--gog-button-lg-font-size)}:host(.gog-button-toggle--slg){--gog-button-toggle-size-padding: var(--gog-button-slg-padding);--gog-button-toggle-size-font-size: var(--gog-button-slg-font-size)}:host(.gog-host--full-width){display:flex;width:100%}:host(.gog-host--full-width) .gog-button-toggle__button{flex:1 1 0}@media(prefers-reduced-motion:reduce){.gog-button-toggle__button{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], optionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIcon", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], optionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogButtonToggleOptionDirective), { isSignal: true }] }], buttonRefs: [{ type: i0.ViewChildren, args: ['toggleButton', { isSignal: true }] }] } });
 
 const GOG_TABS_STATE = new InjectionToken('GOG_TABS_STATE');
 
@@ -3074,6 +3463,13 @@ class TabsComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Press ripple. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then to `false` — so
+     * `[ripple]="false"` opts one instance out of an app that turned it on everywhere.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
+    /** Declared after the input it reads: field initialisers run in source order. */
+    rippleEnabled = resolveRipple(this.ripple, inject(GOG_CONFIG));
     /**
      * Whether selecting a tab scrolls the (possibly overflowing) header row so the active tab
      * stays in view — centered where there's room, so its neighbours on both sides stay visible
@@ -3195,20 +3591,357 @@ class TabsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabsComponent, isStandalone: true, selector: "gog-tabs", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollActiveIntoView: { classPropertyName: "scrollActiveIntoView", publicName: "scrollActiveIntoView", isSignal: true, isRequired: false, transformFunction: null }, showScrollTrack: { classPropertyName: "showScrollTrack", publicName: "showScrollTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", gogTabChange: "gogTabChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabsComponent, isStandalone: true, selector: "gog-tabs", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, scrollActiveIntoView: { classPropertyName: "scrollActiveIntoView", publicName: "scrollActiveIntoView", isSignal: true, isRequired: false, transformFunction: null }, showScrollTrack: { classPropertyName: "showScrollTrack", publicName: "showScrollTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", gogTabChange: "gogTabChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
             // forwardRef because the class is not yet defined when this decorator is evaluated.
             { provide: GOG_TABS_STATE, useExisting: forwardRef(() => TabsComponent) },
-        ], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "headerSlot", first: true, predicate: GogTabHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerRefs", predicate: ["tabHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "headerSlot", first: true, predicate: GogTabHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerRefs", predicate: ["tabHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-tabs', imports: [IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'gog-tabs', imports: [GogRippleDirective, IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         // forwardRef because the class is not yet defined when this decorator is evaluated.
                         { provide: GOG_TABS_STATE, useExisting: forwardRef(() => TabsComponent) },
                     ], host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollActiveIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollActiveIntoView", required: false }] }], showScrollTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollTrack", required: false }] }], gogTabChange: [{ type: i0.Output, args: ["gogTabChange"] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogTabHeaderDirective), { isSignal: true }] }], headerRefs: [{ type: i0.ViewChildren, args: ['tabHeader', { isSignal: true }] }] } });
+                    }, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], scrollActiveIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollActiveIntoView", required: false }] }], showScrollTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollTrack", required: false }] }], gogTabChange: [{ type: i0.Output, args: ["gogTabChange"] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogTabHeaderDirective), { isSignal: true }] }], headerRefs: [{ type: i0.ViewChildren, args: ['tabHeader', { isSignal: true }] }] } });
+
+/**
+ * Per-prefix counter behind every auto-generated DOM id in the library.
+ *
+ * A form control needs a real `id` whether or not the consumer supplied one: without it a
+ * `<label for>` cannot point at the field (so clicking the label does not focus it, and
+ * assistive tech gets no accessible name), and `aria-describedby` cannot point at the error
+ * message. Making the consumer pass `inputId` for that is a trap — the field looks fine and is
+ * quietly inaccessible.
+ *
+ * Counters are keyed by prefix rather than shared, so ids stay stable per component type
+ * (`gog-input-1`, `gog-slider-1`) instead of depending on how many *other* controls happened to
+ * be constructed first. That also keeps them predictable in tests and diffs.
+ *
+ * SSR/hydration-safe by construction: the server and the client walk the same component tree in
+ * the same order, so both arrive at the same ids. Do not seed this with randomness for that
+ * reason.
+ */
+const counters = new Map();
+/** Returns the next id for `prefix`, e.g. `nextGogControlId('gog-input')` → `'gog-input-3'`. */
+function nextGogControlId(prefix) {
+    const next = (counters.get(prefix) ?? 0) + 1;
+    counters.set(prefix, next);
+    return `${prefix}-${next}`;
+}
+
+/** Placeholder lines rendered under the title bar while `loading` is on. */
+const DEFAULT_SKELETON_LINES$1 = 2;
+/**
+ * The card's heading. Put it on the consumer's own `<h2>`…`<h6>` — the heading level belongs to
+ * the page, not to the component — and the card names itself with it: it takes the element's id
+ * (generating one when it has none) and points its own `aria-labelledby` at it.
+ */
+class GogCardHeaderDirective {
+    element = inject(ElementRef);
+    /** The id the card labels itself with. A consumer-supplied `id` is kept as-is. */
+    headerId;
+    constructor() {
+        const host = this.element.nativeElement;
+        if (!host.id) {
+            host.id = nextGogControlId('gog-card-header');
+        }
+        this.headerId = host.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogCardHeaderDirective, isStandalone: true, selector: "[gogCardHeader]", host: { classAttribute: "gog-card__header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCardHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogCardHeader]',
+                    host: { class: 'gog-card__header' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Full-bleed media — an `<img>`, `<video>` or `<picture>` that runs to the card's edges rather
+ * than sitting inside its padding. Place it first inside the card to get the rounded top.
+ */
+class GogCardMediaDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogCardMediaDirective, isStandalone: true, selector: "[gogCardMedia]", host: { classAttribute: "gog-card__media" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCardMediaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogCardMedia]',
+                    host: { class: 'gog-card__media' },
+                }]
+        }] });
+/** The card's footer row — actions, a summary line. Separated from the body by a rule. */
+class GogCardFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogCardFooterDirective, isStandalone: true, selector: "[gogCardFooter]", host: { classAttribute: "gog-card__footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCardFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogCardFooter]',
+                    host: { class: 'gog-card__footer' },
+                }]
+        }] });
+/**
+ * A surface for one self-contained thing: a product tile, a summary, a search result.
+ *
+ * It paints a background, a border and a radius — which a CSS class could also do — and then
+ * three things a class cannot:
+ *
+ * 1. **It names itself.** A `gogCardHeader` heading becomes the card's accessible name via
+ *    `aria-labelledby`, and the card announces itself as a group, so the boundary between one
+ *    card and the next exists for a screen reader too. (`role="group"`, not `region`: a grid of
+ *    twenty cards would put twenty landmarks in the landmark list, which is worse than none.)
+ * 2. **It makes the whole surface clickable without inventing a control.** See `gogCardLink`.
+ * 3. **It folds in `loading` and `disabled`**, including `aria-busy` and taking the card's own
+ *    link out of the tab order — the wiring every consumer would otherwise repeat per card.
+ */
+class CardComponent {
+    variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Dims the card and takes its `gogCardLink` out of the tab order. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Replaces the card's content with placeholder bars shaped like a title and a few lines of
+     * text, and marks the host `aria-busy`. For a *refresh* of a card that already has content —
+     * where the shape is already on screen and should stay — project a `gog-spinner-overlay`
+     * instead; this treatment is the first-paint one.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Text lines under the title bar while `loading` is on. */
+    skeletonLines = input(DEFAULT_SKELETON_LINES$1, ...(ngDevMode ? [{ debugName: "skeletonLines" }] : /* istanbul ignore next */ []));
+    header = contentChild(GogCardHeaderDirective, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    link = contentChild(GogCardLinkDirective, { ...(ngDevMode ? { debugName: "link" } : /* istanbul ignore next */ {}), descendants: true });
+    labelledBy = computed(() => this.header()?.headerId ?? null, ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /** A card is interactive because something in it is a real link or button, never by input. */
+    interactive = computed(() => this.link() !== undefined, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /** Disabled or loading: the surface is still readable, but nothing in it can be activated. */
+    inert = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "inert" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => [
+        'gog-card',
+        `gog-card--${this.variant()}`,
+        `gog-card--${this.size()}`,
+        this.interactive() ? 'gog-card--interactive' : null,
+        this.disabled() ? 'gog-card--disabled' : null,
+        this.loading() ? 'gog-card--loading' : null,
+    ]
+        .filter((className) => className !== null)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /*
+         * The link is the *consumer's* `<a>`/`<button>`, so `disabled` has to reach it from here.
+         * `pointer-events: none` (surfaces.css) stops the pointer; only removing the tab stop stops
+         * the keyboard, and there is no attribute binding to put on an element this component does
+         * not render. A tabindex the consumer set themselves is put back rather than deleted.
+         */
+        let restoreTabIndex = null;
+        effect(() => {
+            const host = this.link()?.elementRef.nativeElement;
+            if (!host)
+                return;
+            if (this.inert()) {
+                restoreTabIndex = host.getAttribute('tabindex');
+                host.setAttribute('tabindex', '-1');
+                host.setAttribute('aria-disabled', 'true');
+                return;
+            }
+            host.removeAttribute('aria-disabled');
+            if (restoreTabIndex === null) {
+                host.removeAttribute('tabindex');
+            }
+            else {
+                host.setAttribute('tabindex', restoreTabIndex);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CardComponent, isStandalone: true, selector: "gog-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonLines: { classPropertyName: "skeletonLines", publicName: "skeletonLines", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "labelledBy() ? \"group\" : null", "attr.aria-labelledby": "labelledBy()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, queries: [{ propertyName: "header", first: true, predicate: GogCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "link", first: true, predicate: GogCardLinkDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\r\n  <!--\r\n    Shaped like the content that is coming \u2014 a title bar and a few text lines \u2014 rather than a\r\n    spinner: a card owns a region, and the point of a region's placeholder is that nothing moves\r\n    when the data lands. `aria-hidden` because the host already says `aria-busy`.\r\n  -->\r\n  <div class=\"gog-card__placeholder\" aria-hidden=\"true\">\r\n    <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"60%\" />\r\n    @if (skeletonLines() > 0) {\r\n      <gog-skeleton shape=\"text\" [size]=\"size()\" [lines]=\"skeletonLines()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<div class=\"gog-card__content\" [class.gog-card__content--hidden]=\"loading()\">\r\n  <ng-content select=\"[gogCardMedia]\" />\r\n  <ng-content select=\"[gogCardHeader]\" />\r\n\r\n  <!--\r\n    The default slot gets a wrapper of its own so the card's row gap separates media, heading,\r\n    body and footer \u2014 and nothing else. Without it every element a consumer projects would become\r\n    a flex item and be spaced by that same gap, which quietly overrides their own layout.\r\n  -->\r\n  <div class=\"gog-card__body\"><ng-content /></div>\r\n\r\n  <ng-content select=\"[gogCardFooter]\" />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:block;padding:var(--gog-card-padding-y, var(--gog-card-size-padding-y, var(--gog-card-md-padding-y))) var(--gog-card-padding-x, var(--gog-card-size-padding-x, var(--gog-card-md-padding-x)));border:var(--gog-card-border-width) var(--gog-card-border-style) var(--gog-card-border-color, var(--gog-card-variant-border-color, var(--gog-card-outlined-border-color)));border-radius:var(--gog-card-radius);background:var(--gog-card-bg, var(--gog-card-variant-bg, var(--gog-card-outlined-bg)));box-shadow:var(--gog-card-shadow, var(--gog-card-variant-shadow, var(--gog-card-outlined-shadow)));color:var(--gog-card-color);font-family:var(--gog-card-font-family);transition:border-color var(--gog-card-transition-duration) var(--gog-easing),box-shadow var(--gog-card-transition-duration) var(--gog-easing)}:host(.gog-card--outlined){--gog-card-variant-bg: var(--gog-card-outlined-bg);--gog-card-variant-border-color: var(--gog-card-outlined-border-color);--gog-card-variant-shadow: var(--gog-card-outlined-shadow)}:host(.gog-card--elevated){--gog-card-variant-bg: var(--gog-card-elevated-bg);--gog-card-variant-border-color: var(--gog-card-elevated-border-color);--gog-card-variant-shadow: var(--gog-card-elevated-shadow)}:host(.gog-card--filled){--gog-card-variant-bg: var(--gog-card-filled-bg);--gog-card-variant-border-color: var(--gog-card-filled-border-color);--gog-card-variant-shadow: var(--gog-card-filled-shadow)}:host(.gog-card--xsm){--gog-card-size-padding-y: var(--gog-card-xsm-padding-y);--gog-card-size-padding-x: var(--gog-card-xsm-padding-x);--gog-card-size-gap: var(--gog-card-xsm-gap)}:host(.gog-card--sm){--gog-card-size-padding-y: var(--gog-card-sm-padding-y);--gog-card-size-padding-x: var(--gog-card-sm-padding-x);--gog-card-size-gap: var(--gog-card-sm-gap)}:host(.gog-card--md){--gog-card-size-padding-y: var(--gog-card-md-padding-y);--gog-card-size-padding-x: var(--gog-card-md-padding-x);--gog-card-size-gap: var(--gog-card-md-gap)}:host(.gog-card--lg){--gog-card-size-padding-y: var(--gog-card-lg-padding-y);--gog-card-size-padding-x: var(--gog-card-lg-padding-x);--gog-card-size-gap: var(--gog-card-lg-gap)}:host(.gog-card--slg){--gog-card-size-padding-y: var(--gog-card-slg-padding-y);--gog-card-size-padding-x: var(--gog-card-slg-padding-x);--gog-card-size-gap: var(--gog-card-slg-gap)}:host(.gog-card--interactive){cursor:pointer}:host(.gog-card--interactive:hover){border-color:var(--gog-card-hover-border-color);box-shadow:var(--gog-card-hover-shadow)}:host(.gog-card--disabled){cursor:not-allowed;opacity:var(--gog-card-disabled-opacity)}.gog-card__content{display:flex;flex-direction:column;gap:var(--gog-card-gap, var(--gog-card-size-gap, var(--gog-card-md-gap)))}.gog-card__content--hidden{display:none}.gog-card__body{min-width:0}.gog-card__body:empty{display:none}.gog-card__placeholder{display:flex;flex-direction:column;gap:var(--gog-card-gap, var(--gog-card-size-gap, var(--gog-card-md-gap)))}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ 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: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-card', imports: [SkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        // A card with a heading is a named group; one without has nothing to be named by, and an
+                        // unnamed group is noise in the accessibility tree rather than structure.
+                        '[attr.role]': 'labelledBy() ? "group" : null',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                    }, template: "@if (loading()) {\r\n  <!--\r\n    Shaped like the content that is coming \u2014 a title bar and a few text lines \u2014 rather than a\r\n    spinner: a card owns a region, and the point of a region's placeholder is that nothing moves\r\n    when the data lands. `aria-hidden` because the host already says `aria-busy`.\r\n  -->\r\n  <div class=\"gog-card__placeholder\" aria-hidden=\"true\">\r\n    <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"60%\" />\r\n    @if (skeletonLines() > 0) {\r\n      <gog-skeleton shape=\"text\" [size]=\"size()\" [lines]=\"skeletonLines()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<div class=\"gog-card__content\" [class.gog-card__content--hidden]=\"loading()\">\r\n  <ng-content select=\"[gogCardMedia]\" />\r\n  <ng-content select=\"[gogCardHeader]\" />\r\n\r\n  <!--\r\n    The default slot gets a wrapper of its own so the card's row gap separates media, heading,\r\n    body and footer \u2014 and nothing else. Without it every element a consumer projects would become\r\n    a flex item and be spaced by that same gap, which quietly overrides their own layout.\r\n  -->\r\n  <div class=\"gog-card__body\"><ng-content /></div>\r\n\r\n  <ng-content select=\"[gogCardFooter]\" />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:block;padding:var(--gog-card-padding-y, var(--gog-card-size-padding-y, var(--gog-card-md-padding-y))) var(--gog-card-padding-x, var(--gog-card-size-padding-x, var(--gog-card-md-padding-x)));border:var(--gog-card-border-width) var(--gog-card-border-style) var(--gog-card-border-color, var(--gog-card-variant-border-color, var(--gog-card-outlined-border-color)));border-radius:var(--gog-card-radius);background:var(--gog-card-bg, var(--gog-card-variant-bg, var(--gog-card-outlined-bg)));box-shadow:var(--gog-card-shadow, var(--gog-card-variant-shadow, var(--gog-card-outlined-shadow)));color:var(--gog-card-color);font-family:var(--gog-card-font-family);transition:border-color var(--gog-card-transition-duration) var(--gog-easing),box-shadow var(--gog-card-transition-duration) var(--gog-easing)}:host(.gog-card--outlined){--gog-card-variant-bg: var(--gog-card-outlined-bg);--gog-card-variant-border-color: var(--gog-card-outlined-border-color);--gog-card-variant-shadow: var(--gog-card-outlined-shadow)}:host(.gog-card--elevated){--gog-card-variant-bg: var(--gog-card-elevated-bg);--gog-card-variant-border-color: var(--gog-card-elevated-border-color);--gog-card-variant-shadow: var(--gog-card-elevated-shadow)}:host(.gog-card--filled){--gog-card-variant-bg: var(--gog-card-filled-bg);--gog-card-variant-border-color: var(--gog-card-filled-border-color);--gog-card-variant-shadow: var(--gog-card-filled-shadow)}:host(.gog-card--xsm){--gog-card-size-padding-y: var(--gog-card-xsm-padding-y);--gog-card-size-padding-x: var(--gog-card-xsm-padding-x);--gog-card-size-gap: var(--gog-card-xsm-gap)}:host(.gog-card--sm){--gog-card-size-padding-y: var(--gog-card-sm-padding-y);--gog-card-size-padding-x: var(--gog-card-sm-padding-x);--gog-card-size-gap: var(--gog-card-sm-gap)}:host(.gog-card--md){--gog-card-size-padding-y: var(--gog-card-md-padding-y);--gog-card-size-padding-x: var(--gog-card-md-padding-x);--gog-card-size-gap: var(--gog-card-md-gap)}:host(.gog-card--lg){--gog-card-size-padding-y: var(--gog-card-lg-padding-y);--gog-card-size-padding-x: var(--gog-card-lg-padding-x);--gog-card-size-gap: var(--gog-card-lg-gap)}:host(.gog-card--slg){--gog-card-size-padding-y: var(--gog-card-slg-padding-y);--gog-card-size-padding-x: var(--gog-card-slg-padding-x);--gog-card-size-gap: var(--gog-card-slg-gap)}:host(.gog-card--interactive){cursor:pointer}:host(.gog-card--interactive:hover){border-color:var(--gog-card-hover-border-color);box-shadow:var(--gog-card-hover-shadow)}:host(.gog-card--disabled){cursor:not-allowed;opacity:var(--gog-card-disabled-opacity)}.gog-card__content{display:flex;flex-direction:column;gap:var(--gog-card-gap, var(--gog-card-size-gap, var(--gog-card-md-gap)))}.gog-card__content--hidden{display:none}.gog-card__body{min-width:0}.gog-card__body:empty{display:none}.gog-card__placeholder{display:flex;flex-direction:column;gap:var(--gog-card-gap, var(--gog-card-size-gap, var(--gog-card-md-gap)))}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonLines", required: false }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogCardHeaderDirective), { isSignal: true }] }], link: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogCardLinkDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+/**
+ * Makes the whole card activate this link — put it on the `<a>` (or `<button>`) the card is
+ * *about*, usually the one inside its heading:
+ *
+ * ```html
+ * <gog-card>
+ *   <h3 gogCardHeader><a gogCardLink routerLink="/people/ada">Ada Lovelace</a></h3>
+ *   <p>Mathematician, 1815–1852.</p>
+ * </gog-card>
+ * ```
+ *
+ * ## Why this, and not an `interactive` input
+ *
+ * The obvious API — `<gog-card interactive (gogClick)>` — has the component render a `<button>`
+ * or an `<a>` of its own, and that goes wrong in three ways this does not:
+ *
+ * - **Nothing else in the card could be interactive.** A `<button>` may not contain a button or
+ *   a link, so a card with actions in its footer would be invalid markup with a broken tab order.
+ * - **It could not navigate the way an app navigates.** `routerLink` lives on the consumer's
+ *   element; a card rendering its own `<a>` would have to broker the router's whole input
+ *   surface, which is exactly why `[gogButton]` is a directive rather than a link mode on
+ *   `gog-button`.
+ * - **The accessible name would be the card's entire text**, because that is what a button
+ *   wrapping everything announces.
+ *
+ * Here the link stays a real link — its href, its keyboard behaviour, its middle-click, its
+ * "open in new tab" — and only its *hit area* is stretched over the card, with the card's focus
+ * ring drawn around the surface when it is focused. Anything else focusable inside an
+ * interactive card sits above that hit area automatically (see `surfaces.css`).
+ *
+ * The two costs of the pattern, both inherent to it: text inside the card cannot be selected by
+ * dragging across it, and a second link in the card is reached by keyboard but not by clicking
+ * the surface around it.
+ */
+class GogCardLinkDirective {
+    elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCardLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogCardLinkDirective, isStandalone: true, selector: "a[gogCardLink], button[gogCardLink]", host: { classAttribute: "gog-card__link" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogCardLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // Restricted to the two elements that are already a control, for the same reason
+                    // `[gogButton]` is: on a `<div>` this would look clickable and be invisible to the keyboard.
+                    selector: 'a[gogCardLink], button[gogCardLink]',
+                    host: { class: 'gog-card__link' },
+                }]
+        }] });
+
+/** Accessible name for the collapse toggle of a panel that has no heading to borrow one from. */
+const DEFAULT_TOGGLE_LABEL = 'Toggle section';
+/** Placeholder lines rendered in place of the panel's body while `loading` is on. */
+const DEFAULT_SKELETON_LINES = 3;
+/**
+ * The panel's heading. Put it on the consumer's own `<h2>`…`<h6>`: the level belongs to the
+ * page's outline, and this is a *region* of a page — the one place a real heading matters most.
+ * The panel takes the element's id (generating one when it has none) and uses it twice: as its
+ * own `aria-labelledby`, and as the accessible name of the collapse toggle.
+ */
+class GogPanelHeaderDirective {
+    element = inject(ElementRef);
+    /** The id the panel labels itself and its toggle with. A consumer-supplied `id` is kept. */
+    headerId;
+    constructor() {
+        const host = this.element.nativeElement;
+        if (!host.id) {
+            host.id = nextGogControlId('gog-panel-header');
+        }
+        this.headerId = host.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogPanelHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogPanelHeaderDirective, isStandalone: true, selector: "[gogPanelHeader]", host: { classAttribute: "gog-panel__heading" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogPanelHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogPanelHeader]',
+                    host: { class: 'gog-panel__heading' },
+                }]
+        }], ctorParameters: () => [] });
+/** The panel's footer row — actions, a summary. Collapses with the body. */
+class GogPanelFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogPanelFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogPanelFooterDirective, isStandalone: true, selector: "[gogPanelFooter]", host: { classAttribute: "gog-panel__footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogPanelFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gogPanelFooter]',
+                    host: { class: 'gog-panel__footer' },
+                }]
+        }] });
+/**
+ * A titled region of a page: a settings section, a dashboard area, a form group.
+ *
+ * Where `gog-card` is one self-contained thing, often repeated in a grid, a panel is a part of
+ * *this* page — so the two differ in behaviour, not only in size:
+ *
+ * - the panel is a real landmark (`role="region"` named by its heading), because a handful of
+ *   named regions is how a screen-reader user navigates a page, whereas a landmark per card
+ *   would bury that list;
+ * - it can **collapse**, composing `gog-collapsible` rather than repeating it, so the open/close
+ *   state, the id wiring and the animation are the ones the rest of the library already uses;
+ * - a card's whole surface can be a link (`gogCardLink`); a panel's cannot. Controls live
+ *   *inside* a panel, and a region that is itself a link cannot hold them.
+ *
+ * The heading stays a heading. The toggle is a separate `<button>` labelled by it, whose hit
+ * area covers the header row — so the pointer gets "click the title to collapse" while the
+ * screen reader still gets a heading *and* a named, expandable button, instead of a heading
+ * swallowed by `role="button"`.
+ */
+class PanelComponent {
+    variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Adds the collapse toggle to the header row. The body animates open and closed. */
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Two-way bindable: `[(open)]="isOpen"`. Ignored while `collapsible` is off. */
+    open = model(true, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Replaces the panel's body with placeholder lines and marks the host `aria-busy`. The
+     * heading stays: a page section is titled before its content arrives, and blanking the title
+     * too would move the layout twice.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Placeholder lines shown in place of the body while `loading` is on. */
+    skeletonLines = input(DEFAULT_SKELETON_LINES, ...(ngDevMode ? [{ debugName: "skeletonLines" }] : /* istanbul ignore next */ []));
+    header = contentChild(GogPanelHeaderDirective, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    globalConfig = inject(GOG_CONFIG);
+    labelledBy = computed(() => this.header()?.headerId ?? null, ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /** Only used when there is no heading — otherwise the toggle is named by the heading. */
+    toggleLabel = computed(() => resolveConfigured(undefined, this.globalConfig.labels?.togglePanel, DEFAULT_TOGGLE_LABEL), ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
+    /** A panel that cannot collapse is always open, whatever `open` was last set to. */
+    effectiveOpen = computed(() => (this.collapsible() ? this.open() : true), ...(ngDevMode ? [{ debugName: "effectiveOpen" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => [
+        'gog-panel',
+        `gog-panel--${this.variant()}`,
+        `gog-panel--${this.size()}`,
+        this.collapsible() ? 'gog-panel--collapsible' : null,
+        this.collapsible() && !this.open() ? 'gog-panel--closed' : null,
+        this.disabled() ? 'gog-panel--disabled' : null,
+        this.loading() ? 'gog-panel--loading' : null,
+    ]
+        .filter((className) => className !== null)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onOpenChange(open) {
+        if (this.collapsible()) {
+            this.open.set(open);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PanelComponent, isStandalone: true, selector: "gog-panel", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonLines: { classPropertyName: "skeletonLines", publicName: "skeletonLines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "hostClasses()", "attr.role": "labelledBy() ? \"region\" : null", "attr.aria-labelledby": "labelledBy()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, queries: [{ propertyName: "header", first: true, predicate: GogPanelHeaderDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  `gog-collapsible` wraps the whole panel even when `collapsible` is off: it is `display:\r\n  contents`, so it adds no box, and keeping it unconditional is what lets the body carry\r\n  `gogCollapsibleContent` in one place instead of duplicating every `<ng-content>` across two\r\n  branches. A non-collapsible panel is simply always open, and `--static` undoes the closed-state\r\n  geometry the shared class brings with it.\r\n-->\r\n<gog-collapsible\r\n  [open]=\"effectiveOpen()\"\r\n  (openChange)=\"onOpenChange($event)\"\r\n  [disabled]=\"disabled()\"\r\n>\r\n  @if (labelledBy() || collapsible()) {\r\n    <div class=\"gog-panel__header\">\r\n      <ng-content select=\"[gogPanelHeader]\" />\r\n\r\n      @if (collapsible()) {\r\n        <!--\r\n          Named by the heading rather than wrapping it. A `<button>` may not contain an `<h2>`,\r\n          and giving the heading `role=\"button\"` instead would delete it from the heading list \u2014\r\n          so the button is its own element, and its hit area is stretched across the header row\r\n          in the stylesheet to keep \"click the title\" working for the pointer.\r\n        -->\r\n        <button\r\n          gogCollapsibleTrigger\r\n          class=\"gog-panel__toggle\"\r\n          type=\"button\"\r\n          [attr.aria-labelledby]=\"labelledBy()\"\r\n          [attr.aria-label]=\"labelledBy() ? null : toggleLabel()\"\r\n        >\r\n          <gog-icon class=\"gog-panel__chevron\" name=\"chevron-down\" />\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    gogCollapsibleContent\r\n    class=\"gog-panel__content\"\r\n    [class.gog-panel__content--static]=\"!collapsible()\"\r\n  >\r\n    @if (loading()) {\r\n      <div class=\"gog-panel__placeholder\" aria-hidden=\"true\">\r\n        <gog-skeleton shape=\"text\" [size]=\"size()\" [lines]=\"skeletonLines()\" />\r\n      </div>\r\n    }\r\n\r\n    <div class=\"gog-panel__body\" [class.gog-panel__body--hidden]=\"loading()\">\r\n      <ng-content />\r\n    </div>\r\n\r\n    <ng-content select=\"[gogPanelFooter]\" />\r\n  </div>\r\n</gog-collapsible>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;padding:var(--gog-panel-padding-y, var(--gog-panel-size-padding-y, var(--gog-panel-lg-padding-y))) var(--gog-panel-padding-x, var(--gog-panel-size-padding-x, var(--gog-panel-lg-padding-x)));border:var(--gog-panel-border-width) var(--gog-panel-border-style) var(--gog-panel-border-color, var(--gog-panel-variant-border-color, var(--gog-panel-elevated-border-color)));border-radius:var(--gog-panel-radius);background:var(--gog-panel-bg, var(--gog-panel-variant-bg, var(--gog-panel-elevated-bg)));box-shadow:var(--gog-panel-variant-shadow, var(--gog-panel-shadow));color:var(--gog-panel-color);font-family:var(--gog-panel-font-family)}:host(.gog-panel--outlined){--gog-panel-variant-bg: var(--gog-panel-outlined-bg);--gog-panel-variant-border-color: var(--gog-panel-outlined-border-color);--gog-panel-variant-shadow: var(--gog-panel-outlined-shadow)}:host(.gog-panel--elevated){--gog-panel-variant-bg: var(--gog-panel-elevated-bg);--gog-panel-variant-border-color: var(--gog-panel-elevated-border-color);--gog-panel-variant-shadow: var(--gog-panel-shadow)}:host(.gog-panel--filled){--gog-panel-variant-bg: var(--gog-panel-filled-bg);--gog-panel-variant-border-color: var(--gog-panel-filled-border-color);--gog-panel-variant-shadow: var(--gog-panel-filled-shadow)}:host(.gog-panel--xsm){--gog-panel-size-padding-y: var(--gog-panel-xsm-padding-y);--gog-panel-size-padding-x: var(--gog-panel-xsm-padding-x);--gog-panel-size-gap: var(--gog-panel-xsm-gap)}:host(.gog-panel--sm){--gog-panel-size-padding-y: var(--gog-panel-sm-padding-y);--gog-panel-size-padding-x: var(--gog-panel-sm-padding-x);--gog-panel-size-gap: var(--gog-panel-sm-gap)}:host(.gog-panel--md){--gog-panel-size-padding-y: var(--gog-panel-md-padding-y);--gog-panel-size-padding-x: var(--gog-panel-md-padding-x);--gog-panel-size-gap: var(--gog-panel-md-gap)}:host(.gog-panel--lg){--gog-panel-size-padding-y: var(--gog-panel-lg-padding-y);--gog-panel-size-padding-x: var(--gog-panel-lg-padding-x);--gog-panel-size-gap: var(--gog-panel-lg-gap)}:host(.gog-panel--slg){--gog-panel-size-padding-y: var(--gog-panel-slg-padding-y);--gog-panel-size-padding-x: var(--gog-panel-slg-padding-x);--gog-panel-size-gap: var(--gog-panel-slg-gap)}:host(.gog-panel--disabled){opacity:var(--gog-panel-disabled-opacity)}.gog-panel__header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--gog-panel-header-gap);margin-block-end:var(--gog-panel-gap, var(--gog-panel-size-gap, var(--gog-panel-lg-gap)))}:host(.gog-panel--closed) .gog-panel__header{margin-block-end:0}.gog-panel__toggle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--gog-panel-toggle-size);height:var(--gog-panel-toggle-size);padding:0;border:none;border-radius:var(--gog-panel-toggle-radius);background:none;color:var(--gog-panel-toggle-color)}.gog-panel__toggle:after{position:absolute;inset:0;content:\"\"}.gog-panel__toggle:hover{background:var(--gog-panel-toggle-hover-bg)}.gog-panel__toggle:focus-visible{outline:none}.gog-panel__toggle:focus-visible:after{border-radius:var(--gog-panel-toggle-radius);outline:var(--gog-panel-focus-ring-width) solid var(--gog-panel-focus-ring);outline-offset:var(--gog-panel-focus-ring-offset)}.gog-panel__chevron{width:var(--gog-panel-chevron-size);height:var(--gog-panel-chevron-size);transition:transform var(--gog-panel-transition-duration) var(--gog-easing)}:host(.gog-panel--closed) .gog-panel__chevron{transform:rotate(calc(var(--gog-direction-sign) * -90deg))}.gog-panel__content{display:flex;flex-direction:column;gap:var(--gog-panel-gap, var(--gog-panel-size-gap, var(--gog-panel-lg-gap)))}.gog-panel__content--static{max-height:none;overflow:visible;opacity:1;transition:none}.gog-panel__body{min-width:0}.gog-panel__body:empty{display:none}.gog-panel__body--hidden{display:none}@media(prefers-reduced-motion:reduce){.gog-panel__chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: CollapsibleComponent, selector: "gog-collapsible", inputs: ["open", "disabled", "collapseOnFocusOut"], outputs: ["openChange"] }, { kind: "directive", type: GogCollapsibleContentDirective, selector: "[gogCollapsibleContent]" }, { kind: "directive", type: GogCollapsibleTriggerDirective, selector: "[gogCollapsibleTrigger]", inputs: ["ripple"] }, { 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: PanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-panel', imports: [
+                        CollapsibleComponent,
+                        GogCollapsibleContentDirective,
+                        GogCollapsibleTriggerDirective,
+                        IconComponent,
+                        SkeletonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'labelledBy() ? "region" : null',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                    }, template: "<!--\r\n  `gog-collapsible` wraps the whole panel even when `collapsible` is off: it is `display:\r\n  contents`, so it adds no box, and keeping it unconditional is what lets the body carry\r\n  `gogCollapsibleContent` in one place instead of duplicating every `<ng-content>` across two\r\n  branches. A non-collapsible panel is simply always open, and `--static` undoes the closed-state\r\n  geometry the shared class brings with it.\r\n-->\r\n<gog-collapsible\r\n  [open]=\"effectiveOpen()\"\r\n  (openChange)=\"onOpenChange($event)\"\r\n  [disabled]=\"disabled()\"\r\n>\r\n  @if (labelledBy() || collapsible()) {\r\n    <div class=\"gog-panel__header\">\r\n      <ng-content select=\"[gogPanelHeader]\" />\r\n\r\n      @if (collapsible()) {\r\n        <!--\r\n          Named by the heading rather than wrapping it. A `<button>` may not contain an `<h2>`,\r\n          and giving the heading `role=\"button\"` instead would delete it from the heading list \u2014\r\n          so the button is its own element, and its hit area is stretched across the header row\r\n          in the stylesheet to keep \"click the title\" working for the pointer.\r\n        -->\r\n        <button\r\n          gogCollapsibleTrigger\r\n          class=\"gog-panel__toggle\"\r\n          type=\"button\"\r\n          [attr.aria-labelledby]=\"labelledBy()\"\r\n          [attr.aria-label]=\"labelledBy() ? null : toggleLabel()\"\r\n        >\r\n          <gog-icon class=\"gog-panel__chevron\" name=\"chevron-down\" />\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    gogCollapsibleContent\r\n    class=\"gog-panel__content\"\r\n    [class.gog-panel__content--static]=\"!collapsible()\"\r\n  >\r\n    @if (loading()) {\r\n      <div class=\"gog-panel__placeholder\" aria-hidden=\"true\">\r\n        <gog-skeleton shape=\"text\" [size]=\"size()\" [lines]=\"skeletonLines()\" />\r\n      </div>\r\n    }\r\n\r\n    <div class=\"gog-panel__body\" [class.gog-panel__body--hidden]=\"loading()\">\r\n      <ng-content />\r\n    </div>\r\n\r\n    <ng-content select=\"[gogPanelFooter]\" />\r\n  </div>\r\n</gog-collapsible>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;padding:var(--gog-panel-padding-y, var(--gog-panel-size-padding-y, var(--gog-panel-lg-padding-y))) var(--gog-panel-padding-x, var(--gog-panel-size-padding-x, var(--gog-panel-lg-padding-x)));border:var(--gog-panel-border-width) var(--gog-panel-border-style) var(--gog-panel-border-color, var(--gog-panel-variant-border-color, var(--gog-panel-elevated-border-color)));border-radius:var(--gog-panel-radius);background:var(--gog-panel-bg, var(--gog-panel-variant-bg, var(--gog-panel-elevated-bg)));box-shadow:var(--gog-panel-variant-shadow, var(--gog-panel-shadow));color:var(--gog-panel-color);font-family:var(--gog-panel-font-family)}:host(.gog-panel--outlined){--gog-panel-variant-bg: var(--gog-panel-outlined-bg);--gog-panel-variant-border-color: var(--gog-panel-outlined-border-color);--gog-panel-variant-shadow: var(--gog-panel-outlined-shadow)}:host(.gog-panel--elevated){--gog-panel-variant-bg: var(--gog-panel-elevated-bg);--gog-panel-variant-border-color: var(--gog-panel-elevated-border-color);--gog-panel-variant-shadow: var(--gog-panel-shadow)}:host(.gog-panel--filled){--gog-panel-variant-bg: var(--gog-panel-filled-bg);--gog-panel-variant-border-color: var(--gog-panel-filled-border-color);--gog-panel-variant-shadow: var(--gog-panel-filled-shadow)}:host(.gog-panel--xsm){--gog-panel-size-padding-y: var(--gog-panel-xsm-padding-y);--gog-panel-size-padding-x: var(--gog-panel-xsm-padding-x);--gog-panel-size-gap: var(--gog-panel-xsm-gap)}:host(.gog-panel--sm){--gog-panel-size-padding-y: var(--gog-panel-sm-padding-y);--gog-panel-size-padding-x: var(--gog-panel-sm-padding-x);--gog-panel-size-gap: var(--gog-panel-sm-gap)}:host(.gog-panel--md){--gog-panel-size-padding-y: var(--gog-panel-md-padding-y);--gog-panel-size-padding-x: var(--gog-panel-md-padding-x);--gog-panel-size-gap: var(--gog-panel-md-gap)}:host(.gog-panel--lg){--gog-panel-size-padding-y: var(--gog-panel-lg-padding-y);--gog-panel-size-padding-x: var(--gog-panel-lg-padding-x);--gog-panel-size-gap: var(--gog-panel-lg-gap)}:host(.gog-panel--slg){--gog-panel-size-padding-y: var(--gog-panel-slg-padding-y);--gog-panel-size-padding-x: var(--gog-panel-slg-padding-x);--gog-panel-size-gap: var(--gog-panel-slg-gap)}:host(.gog-panel--disabled){opacity:var(--gog-panel-disabled-opacity)}.gog-panel__header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--gog-panel-header-gap);margin-block-end:var(--gog-panel-gap, var(--gog-panel-size-gap, var(--gog-panel-lg-gap)))}:host(.gog-panel--closed) .gog-panel__header{margin-block-end:0}.gog-panel__toggle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--gog-panel-toggle-size);height:var(--gog-panel-toggle-size);padding:0;border:none;border-radius:var(--gog-panel-toggle-radius);background:none;color:var(--gog-panel-toggle-color)}.gog-panel__toggle:after{position:absolute;inset:0;content:\"\"}.gog-panel__toggle:hover{background:var(--gog-panel-toggle-hover-bg)}.gog-panel__toggle:focus-visible{outline:none}.gog-panel__toggle:focus-visible:after{border-radius:var(--gog-panel-toggle-radius);outline:var(--gog-panel-focus-ring-width) solid var(--gog-panel-focus-ring);outline-offset:var(--gog-panel-focus-ring-offset)}.gog-panel__chevron{width:var(--gog-panel-chevron-size);height:var(--gog-panel-chevron-size);transition:transform var(--gog-panel-transition-duration) var(--gog-easing)}:host(.gog-panel--closed) .gog-panel__chevron{transform:rotate(calc(var(--gog-direction-sign) * -90deg))}.gog-panel__content{display:flex;flex-direction:column;gap:var(--gog-panel-gap, var(--gog-panel-size-gap, var(--gog-panel-lg-gap)))}.gog-panel__content--static{max-height:none;overflow:visible;opacity:1;transition:none}.gog-panel__body{min-width:0}.gog-panel__body:empty{display:none}.gog-panel__body--hidden{display:none}@media(prefers-reduced-motion:reduce){.gog-panel__chevron{transition:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], 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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonLines", required: false }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogPanelHeaderDirective), { isSignal: true }] }] } });
 
 const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 6px)';
 const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
@@ -4595,31 +5328,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<label [class.gog-toggle--disabled]=\"isDisabled()\" class=\"gog-toggle gog-contained-layout\">\n  <!--\n    A real checkbox with role=\"switch\": the role changes only how it is announced, so the\n    space key, form registration and the :checked selector all keep working natively.\n  -->\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    class=\"gog-toggle__input\"\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n\n  <span [class.gog-toggle__track--on]=\"checked()\" class=\"gog-toggle__track\">\n    @if (hasTrackLabels()) {\n      <!--\n        Both labels are always in the DOM so the track's width is the wider of the two and\n        cannot jump as the switch flips; the inactive one is faded out, not removed.\n      -->\n      <span\n        [class.gog-toggle__state--active]=\"checked()\"\n        class=\"gog-toggle__state gog-toggle__state--on\"\n        aria-hidden=\"true\"\n      >\n        {{ onLabel() }}\n      </span>\n      <span\n        [class.gog-toggle__state--active]=\"!checked()\"\n        class=\"gog-toggle__state gog-toggle__state--off\"\n        aria-hidden=\"true\"\n      >\n        {{ offLabel() }}\n      </span>\n    }\n\n    <span class=\"gog-toggle__thumb\" aria-hidden=\"true\"></span>\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-toggle__label\">{{ label() }}</span>\n  }\n</label>\n", styles: ["@charset \"UTF-8\";.gog-toggle{display:inline-flex;align-items:center;position:relative;gap:var(--gog-toggle-gap);padding:var(--gog-toggle-padding, var(--gog-control-checkbox-padding));cursor:pointer;-webkit-user-select:none;user-select:none}.gog-toggle--disabled{opacity:var(--gog-toggle-disabled-opacity);cursor:not-allowed}.gog-toggle__input{position:absolute;inset-inline-start:var(--gog-toggle-padding, var(--gog-control-checkbox-padding));top:var(--gog-toggle-padding, var(--gog-control-checkbox-padding));width:var(--gog-toggle-size-track-width, var(--gog-toggle-md-track-width));height:var(--gog-toggle-size-track-height, var(--gog-toggle-md-track-height));margin:0;opacity:0;cursor:inherit}.gog-toggle__track{position:relative;display:grid;align-items:center;box-sizing:border-box;flex:0 0 auto;min-width:var(--gog-toggle-size-track-width, var(--gog-toggle-md-track-width));height:var(--gog-toggle-size-track-height, var(--gog-toggle-md-track-height));border:var(--gog-toggle-border-width) var(--gog-toggle-border-style) var(--gog-toggle-border-color);border-radius:var(--gog-toggle-radius);background-color:var(--gog-toggle-track-bg, var(--gog-toggle-track-off-bg));transition:background-color var(--gog-toggle-transition-duration) var(--gog-easing),border-color var(--gog-toggle-transition-duration) var(--gog-easing)}.gog-toggle__track--on{border-color:var(--gog-toggle-on-border-color);background-color:var(--gog-toggle-track-bg, var(--gog-toggle-track-on-bg))}.gog-toggle__thumb{position:absolute;top:50%;inset-inline-start:var(--gog-toggle-thumb-inset);width:var(--gog-toggle-size-thumb-size, var(--gog-toggle-md-thumb-size));height:var(--gog-toggle-size-thumb-size, var(--gog-toggle-md-thumb-size));border-radius:50%;background-color:var(--gog-toggle-thumb-bg, var(--gog-toggle-thumb-off-bg));box-shadow:var(--gog-toggle-thumb-shadow);transform:translateY(-50%);transition:inset-inline-start var(--gog-toggle-transition-duration) var(--gog-easing),background-color var(--gog-toggle-transition-duration) var(--gog-easing)}.gog-toggle__track--on .gog-toggle__thumb{inset-inline-start:calc(100% - var(--gog-toggle-size-thumb-size, var(--gog-toggle-md-thumb-size)) - var(--gog-toggle-thumb-inset));background-color:var(--gog-toggle-thumb-bg, var(--gog-toggle-thumb-on-bg))}.gog-toggle__state{grid-area:1/1;padding-inline:var(--gog-toggle-state-padding-inline);color:var(--gog-toggle-state-color);font-family:var(--gog-toggle-font-family);font-size:var(--gog-toggle-size-state-font-size, var(--gog-toggle-md-state-font-size));font-weight:var(--gog-toggle-state-font-weight);letter-spacing:var(--gog-toggle-state-letter-spacing);line-height:1;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity var(--gog-toggle-transition-duration) var(--gog-easing)}.gog-toggle__state--on{justify-self:start;padding-inline-start:var(--gog-toggle-state-offset)}.gog-toggle__state--off{justify-self:end;padding-inline-end:var(--gog-toggle-state-offset)}.gog-toggle__state--active{opacity:1}:host(.gog-toggle-host--track-labels) .gog-toggle__state--on{padding-inline-end:calc(var(--gog-toggle-size-thumb-size, var(--gog-toggle-md-thumb-size)) + var(--gog-toggle-state-thumb-gap))}:host(.gog-toggle-host--track-labels) .gog-toggle__state--off{padding-inline-start:calc(var(--gog-toggle-size-thumb-size, var(--gog-toggle-md-thumb-size)) + var(--gog-toggle-state-thumb-gap))}.gog-toggle__label{color:var(--gog-toggle-label-color);font-family:var(--gog-toggle-font-family);font-size:var(--gog-toggle-size-label-size, var(--gog-toggle-md-label-size));line-height:var(--gog-toggle-label-line-height)}.gog-toggle__input:focus-visible+.gog-toggle__track{outline:var(--gog-toggle-focus-ring-width) solid var(--gog-toggle-focus-ring-color);outline-offset:var(--gog-toggle-focus-ring-offset)}:host(.gog-toggle-host--label-start) .gog-toggle{flex-direction:row-reverse}:host(.gog-toggle-host--xsm){--gog-toggle-size-track-width: var(--gog-toggle-xsm-track-width);--gog-toggle-size-track-height: var(--gog-toggle-xsm-track-height);--gog-toggle-size-thumb-size: var(--gog-toggle-xsm-thumb-size);--gog-toggle-size-label-size: var(--gog-toggle-xsm-label-size);--gog-toggle-size-state-font-size: var(--gog-toggle-xsm-state-font-size)}:host(.gog-toggle-host--sm){--gog-toggle-size-track-width: var(--gog-toggle-sm-track-width);--gog-toggle-size-track-height: var(--gog-toggle-sm-track-height);--gog-toggle-size-thumb-size: var(--gog-toggle-sm-thumb-size);--gog-toggle-size-label-size: var(--gog-toggle-sm-label-size);--gog-toggle-size-state-font-size: var(--gog-toggle-sm-state-font-size)}:host(.gog-toggle-host--md){--gog-toggle-size-track-width: var(--gog-toggle-md-track-width);--gog-toggle-size-track-height: var(--gog-toggle-md-track-height);--gog-toggle-size-thumb-size: var(--gog-toggle-md-thumb-size);--gog-toggle-size-label-size: var(--gog-toggle-md-label-size);--gog-toggle-size-state-font-size: var(--gog-toggle-md-state-font-size)}:host(.gog-toggle-host--lg){--gog-toggle-size-track-width: var(--gog-toggle-lg-track-width);--gog-toggle-size-track-height: var(--gog-toggle-lg-track-height);--gog-toggle-size-thumb-size: var(--gog-toggle-lg-thumb-size);--gog-toggle-size-label-size: var(--gog-toggle-lg-label-size);--gog-toggle-size-state-font-size: var(--gog-toggle-lg-state-font-size)}:host(.gog-toggle-host--slg){--gog-toggle-size-track-width: var(--gog-toggle-slg-track-width);--gog-toggle-size-track-height: var(--gog-toggle-slg-track-height);--gog-toggle-size-thumb-size: var(--gog-toggle-slg-thumb-size);--gog-toggle-size-label-size: var(--gog-toggle-slg-label-size);--gog-toggle-size-state-font-size: var(--gog-toggle-slg-state-font-size)}:host(.gog-host--full-width){display:block;width:100%}:host(.gog-host--full-width) .gog-toggle{display:flex;width:100%;justify-content:space-between}@media(prefers-reduced-motion:reduce){.gog-toggle__track,.gog-toggle__thumb,.gog-toggle__state{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
-/**
- * Per-prefix counter behind every auto-generated DOM id in the library.
- *
- * A form control needs a real `id` whether or not the consumer supplied one: without it a
- * `<label for>` cannot point at the field (so clicking the label does not focus it, and
- * assistive tech gets no accessible name), and `aria-describedby` cannot point at the error
- * message. Making the consumer pass `inputId` for that is a trap — the field looks fine and is
- * quietly inaccessible.
- *
- * Counters are keyed by prefix rather than shared, so ids stay stable per component type
- * (`gog-input-1`, `gog-slider-1`) instead of depending on how many *other* controls happened to
- * be constructed first. That also keeps them predictable in tests and diffs.
- *
- * SSR/hydration-safe by construction: the server and the client walk the same component tree in
- * the same order, so both arrive at the same ids. Do not seed this with randomness for that
- * reason.
- */
-const counters = new Map();
-/** Returns the next id for `prefix`, e.g. `nextGogControlId('gog-input')` → `'gog-input-3'`. */
-function nextGogControlId(prefix) {
-    const next = (counters.get(prefix) ?? 0) + 1;
-    counters.set(prefix, next);
-    return `${prefix}-${next}`;
-}
-
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SIZE$2 = 'md';
 const DEFAULT_ERROR_DISPLAY$3 = 'manual';
@@ -4728,7 +5436,7 @@ class ConfirmationDialogComponent {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n      data.cancelText\n    }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n      data.confirmText\n    }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirmation-dialog-gap);min-width:var(--gog-confirmation-dialog-min-width);max-width:var(--gog-confirmation-dialog-max-width);color:var(--gog-confirmation-dialog-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirmation-dialog-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirmation-dialog-actions-gap);margin-top:var(--gog-confirmation-dialog-actions-offset)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n      data.cancelText\n    }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n      data.confirmText\n    }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirmation-dialog-gap);min-width:var(--gog-confirmation-dialog-min-width);max-width:var(--gog-confirmation-dialog-max-width);color:var(--gog-confirmation-dialog-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirmation-dialog-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirmation-dialog-actions-gap);margin-top:var(--gog-confirmation-dialog-actions-offset)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
@@ -5127,7 +5835,7 @@ class ToastComponent {
         return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-toast\"\r\n  [class.gog-toast--paused]=\"isPaused()\"\r\n  [class.gog-toast--queued]=\"!isFront()\"\r\n  [class.gog-toast--success]=\"toast().type === 'success'\"\r\n  [class.gog-toast--error]=\"toast().type === 'error'\"\r\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n  [class.gog-toast--info]=\"toast().type === 'info'\"\r\n  [class.gog-toast--visible]=\"visible()\"\r\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n  (mouseenter)=\"pauseAutoDismiss()\"\r\n  (mouseleave)=\"resumeAutoDismiss()\"\r\n  (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n  <div class=\"gog-toast__content\">\r\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n    </span>\r\n    <div class=\"gog-toast__main\">\r\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n      @if (hasActions()) {\r\n        <div class=\"gog-toast__actions\">\r\n          @for (action of toast().actions; track action.label) {\r\n            <gog-button\r\n              class=\"gog-toast__action\"\r\n              variant=\"ghost\"\r\n              size=\"sm\"\r\n              type=\"button\"\r\n              (gogClick)=\"runAction(action)\"\r\n            >\r\n              @if (action.iconName || action.iconTemplate) {\r\n                <gog-icon\r\n                  [template]=\"action.iconTemplate ?? null\"\r\n                  [name]=\"action.iconName ?? 'check'\"\r\n                />\r\n              }\r\n              {{ action.label }}\r\n            </gog-button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <gog-button\r\n      class=\"gog-toast__close\"\r\n      variant=\"ghost\"\r\n      size=\"sm\"\r\n      type=\"button\"\r\n      [ariaLabel]=\"closeLabel\"\r\n      (gogClick)=\"close()\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </gog-button>\r\n  </div>\r\n  @if (!toast().isSticky) {\r\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-inline-start:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-button-padding: var(--gog-toast-action-padding);--gog-button-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-button-padding: var(--gog-toast-close-padding);--gog-button-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-toast\"\r\n  [class.gog-toast--paused]=\"isPaused()\"\r\n  [class.gog-toast--queued]=\"!isFront()\"\r\n  [class.gog-toast--success]=\"toast().type === 'success'\"\r\n  [class.gog-toast--error]=\"toast().type === 'error'\"\r\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n  [class.gog-toast--info]=\"toast().type === 'info'\"\r\n  [class.gog-toast--visible]=\"visible()\"\r\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n  (mouseenter)=\"pauseAutoDismiss()\"\r\n  (mouseleave)=\"resumeAutoDismiss()\"\r\n  (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n  <div class=\"gog-toast__content\">\r\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n    </span>\r\n    <div class=\"gog-toast__main\">\r\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n      @if (hasActions()) {\r\n        <div class=\"gog-toast__actions\">\r\n          @for (action of toast().actions; track action.label) {\r\n            <gog-button\r\n              class=\"gog-toast__action\"\r\n              variant=\"ghost\"\r\n              size=\"sm\"\r\n              type=\"button\"\r\n              (gogClick)=\"runAction(action)\"\r\n            >\r\n              @if (action.iconName || action.iconTemplate) {\r\n                <gog-icon\r\n                  [template]=\"action.iconTemplate ?? null\"\r\n                  [name]=\"action.iconName ?? 'check'\"\r\n                />\r\n              }\r\n              {{ action.label }}\r\n            </gog-button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <gog-button\r\n      class=\"gog-toast__close\"\r\n      variant=\"ghost\"\r\n      size=\"sm\"\r\n      type=\"button\"\r\n      [ariaLabel]=\"closeLabel\"\r\n      (gogClick)=\"close()\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </gog-button>\r\n  </div>\r\n  @if (!toast().isSticky) {\r\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-inline-start:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-button-padding: var(--gog-toast-action-padding);--gog-button-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-button-padding: var(--gog-toast-close-padding);--gog-button-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
@@ -5877,6 +6585,11 @@ class ChipComponent {
     avatarUrl = input(null, ...(ngDevMode ? [{ debugName: "avatarUrl" }] : /* istanbul ignore next */ []));
     avatarAlt = input('', ...(ngDevMode ? [{ debugName: "avatarAlt" }] : /* istanbul ignore next */ []));
     iconName = input(null, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    /**
+     * Press ripple. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then to `false` — so
+     * `[ripple]="false"` opts one instance out of an app that turned it on everywhere.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
     gogClick = output();
     gogRemove = output();
     hostClasses = computed(() => [
@@ -5893,6 +6606,12 @@ class ChipComponent {
         .filter((className) => className !== null)
         .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     isInteractive = computed(() => this.clickable() && !this.disabled(), ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
+    rippleConfigured = resolveRipple(this.ripple, inject(GOG_CONFIG));
+    /**
+     * A chip that is not interactive is a label, and a label answering a press with a wave is a
+     * promise it cannot keep — so the ripple follows `isInteractive`, not just the input.
+     */
+    rippleEnabled = computed(() => this.rippleConfigured() && this.isInteractive(), ...(ngDevMode ? [{ debugName: "rippleEnabled" }] : /* istanbul ignore next */ []));
     onChipClick(event) {
         if (this.disabled())
             return;
@@ -5911,14 +6630,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 }, 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-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"], dependencies: [{ kind: "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 }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-chip__surface\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  [attr.role]=\"isInteractive() ? 'button' : null\"\r\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n  (click)=\"onChipClick($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (avatarUrl()) {\r\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n  }\r\n\r\n  @if (iconName()) {\r\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n  }\r\n\r\n  <span class=\"gog-chip__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n\r\n  @if (removable() && !disabled()) {\r\n    <button\r\n      class=\"gog-chip__remove\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"removeAriaLabel()\"\r\n      (click)=\"onRemoveClick($event)\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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: {
+            args: [{ selector: 'gog-chip', imports: [GogRippleDirective, 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-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
+                    }, template: "<div\r\n  class=\"gog-chip__surface\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  [attr.role]=\"isInteractive() ? 'button' : null\"\r\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\r\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\r\n  (click)=\"onChipClick($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (avatarUrl()) {\r\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\r\n  }\r\n\r\n  @if (iconName()) {\r\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\r\n  }\r\n\r\n  <span class=\"gog-chip__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n\r\n  @if (removable() && !disabled()) {\r\n    <button\r\n      class=\"gog-chip__remove\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"removeAriaLabel()\"\r\n      (click)=\"onRemoveClick($event)\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-inline-start:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-inline-end:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
 
 /**
  * Custom markup for the tag's leading icon:
@@ -6009,14 +6728,14 @@ class SelectComponent extends GogDropdownBase {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__clear gog-inline-center\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__clear gog-inline-center\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-select', imports: [GogRippleDirective, IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-select-min-width]': 'minWidth()',
-                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__clear gog-inline-center\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
+                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__clear gog-inline-center\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n\r\n    @if (isOpen() && !resolvedAppendToBody()) {\r\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n    }\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n          gogRipple\r\n          [rippleDisabled]=\"!rippleEnabled()\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 const DEFAULT_GAP$2 = 4;
@@ -6093,14 +6812,21 @@ function resolveMenuPlacement(triggerRect, menuSize, viewport, direction = 'ltr'
  * requires and nobody should have to remember: `role="menuitem"` and a tabindex the menu drives.
  */
 class GogMenuItemDirective {
+    /**
+     * Press ripple. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then to `false` — so
+     * `[ripple]="false"` opts one item out of an app that turned it on everywhere.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
+    rippleEnabled = resolveRipple(this.ripple, inject(GOG_CONFIG));
+    rippleControl = bindRipple(this.rippleEnabled);
     /** Native `disabled` on the host button — read so navigation can step over it. */
     get isDisabled() {
         const el = this.elementRef.nativeElement;
         return el.disabled === true || el.getAttribute('aria-disabled') === 'true';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogMenuItemDirective, isStandalone: true, selector: "[gogMenuItem]", host: { attributes: { "role": "menuitem", "tabindex": "-1", "type": "button" }, classAttribute: "gog-menu__item" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogMenuItemDirective, isStandalone: true, selector: "[gogMenuItem]", inputs: { ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1", "type": "button" }, classAttribute: "gog-menu__item" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogMenuItemDirective, decorators: [{
             type: Directive,
@@ -6113,7 +6839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         type: 'button',
                     },
                 }]
-        }] });
+        }], propDecorators: { ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }] } });
 /**
  * A command menu: a panel of `gogMenuItem` buttons, opened from a trigger the consumer owns.
  *
@@ -6469,7 +7195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *
  * Its own file rather than a member of `multiselect.component.ts`, because `public-api.ts`
  * re-exports that module wholesale — a helper exported there becomes public API nobody decided
- * to support (see docs/hardening-21.5.0.md's backlog on incidental exports). Here it stays
+ * to support (see docs/backlog.md, "Incidental public exports"). Here it stays
  * internal and still testable.
  */
 /** What the trigger shows: the labels that fit on one line, and how many did not. */
@@ -7087,14 +7813,21 @@ class MultiselectComponent extends GogDropdownBase {
         return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "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", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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, ScrollComponent, GogTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-multiselect', imports: [
+                        ButtonComponent,
+                        GogRippleDirective,
+                        IconComponent,
+                        NgTemplateOutlet,
+                        ScrollComponent,
+                        GogTooltipDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-multiselect-min-width]': 'minWidth()',
-                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"] }]
+                    }, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], clearIconSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogMultiselectClearIconDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }], valueRef: [{ type: i0.ViewChild, args: ['valueEl', { isSignal: true }] }] } });
 /** One shared 2D context; creating a canvas per measurement is what makes this approach slow. */
 let measureContext = null;
@@ -7580,7 +8313,7 @@ class PaginatorComponent {
             this.pageSize.set(size);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === resolvedTotalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n\r\n@if (resolvedShowPageSizeSelect()) {\r\n  <!--\r\n    Bound with `[(pageSize)]`'s writable half, so choosing a size writes straight back through the\r\n    model the consumer bound \u2014 there is no intermediate state to keep in sync. `fullWidth` off so\r\n    the select sizes to its content instead of stretching the paginator row.\r\n\r\n    A plain `@if`, not `@defer`, and that was measured rather than assumed: `@defer` does move\r\n    `SelectComponent` out of this component's static `dependencies` and into\r\n    `deferBlockDependencies`, but ng-packagr flattens the whole library into one FESM, so the\r\n    deferred reference compiles to `Promise.resolve().then(() => select_component)` \u2014 a binding in\r\n    the *same module*, not a dynamic `import()`. With no import boundary there is nothing for a\r\n    bundler to split on and nothing it may drop, so the consumer ships exactly the same bytes,\r\n    minus a placeholder and an SSR pop-in. Making this genuinely lazy needs secondary entry\r\n    points (`@guildofgleks/ui/select`), which is a packaging decision, not a template one.\r\n  -->\r\n  <gog-select\r\n    class=\"gog-paginator__page-size\"\r\n    [options]=\"resolvedPageSizeOptions()\"\r\n    [value]=\"pageSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [fullWidth]=\"false\"\r\n    [size]=\"size()\"\r\n    [ariaLabel]=\"resolvedRowsPerPageLabel()\"\r\n    (valueChange)=\"onPageSizeChange($event)\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}.gog-paginator__page-size{margin-inline-start:auto;min-width:var(--gog-paginator-page-size-min-width)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: SelectComponent, selector: "gog-select", inputs: ["inputId", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === resolvedTotalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n\r\n@if (resolvedShowPageSizeSelect()) {\r\n  <!--\r\n    Bound with `[(pageSize)]`'s writable half, so choosing a size writes straight back through the\r\n    model the consumer bound \u2014 there is no intermediate state to keep in sync. `fullWidth` off so\r\n    the select sizes to its content instead of stretching the paginator row.\r\n\r\n    A plain `@if`, not `@defer`, and that was measured rather than assumed: `@defer` does move\r\n    `SelectComponent` out of this component's static `dependencies` and into\r\n    `deferBlockDependencies`, but ng-packagr flattens the whole library into one FESM, so the\r\n    deferred reference compiles to `Promise.resolve().then(() => select_component)` \u2014 a binding in\r\n    the *same module*, not a dynamic `import()`. With no import boundary there is nothing for a\r\n    bundler to split on and nothing it may drop, so the consumer ships exactly the same bytes,\r\n    minus a placeholder and an SSR pop-in. Making this genuinely lazy needs secondary entry\r\n    points (`@guildofgleks/ui/select`), which is a packaging decision, not a template one.\r\n  -->\r\n  <gog-select\r\n    class=\"gog-paginator__page-size\"\r\n    [options]=\"resolvedPageSizeOptions()\"\r\n    [value]=\"pageSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [fullWidth]=\"false\"\r\n    [size]=\"size()\"\r\n    [ariaLabel]=\"resolvedRowsPerPageLabel()\"\r\n    (valueChange)=\"onPageSizeChange($event)\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}.gog-paginator__page-size{margin-inline-start:auto;min-width:var(--gog-paginator-page-size-min-width)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: SelectComponent, selector: "gog-select", inputs: ["inputId", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -7816,8 +8549,34 @@ class TableComponent {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /** Show vertical borders between columns */
     showColumnBorders = input(false, ...(ngDevMode ? [{ debugName: "showColumnBorders" }] : /* istanbul ignore next */ []));
-    /** Stick header row to the top of the viewport while scrolling */
+    /**
+     * Stick the header row to the top of the table's own scroll viewport.
+     *
+     * **Needs `maxHeight` to be reliable.** A sticky element resolves against its nearest scroll
+     * container, and the table wraps itself in a `gog-scroll`; the moment that scroller starts
+     * scrolling sideways it is a scroll container on both axes — CSS coerces `overflow-y: visible`
+     * to `auto` beside a scrolling `overflow-x`, and `clip` to `hidden`, so there is no value that
+     * scrolls one axis and stays out of the sticky chain on the other. Without `maxHeight` that
+     * viewport is exactly as tall as its content and never scrolls vertically, so a header pinned
+     * to it rides out of view along with everything else.
+     *
+     * With `maxHeight` set the viewport is the vertical scrollport, and the header pins to it.
+     */
     stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
+    /**
+     * Caps the table's own scroll viewport, in any CSS length — `'420px'`, `'60vh'`. The table then
+     * owns its vertical scrolling instead of growing to its content and letting an ancestor scroll
+     * it, which is what makes `stickyHeader` work (see above).
+     *
+     * An input rather than a `--gog-table-*` token, even though the value only ever lands in CSS:
+     * it also decides whether the internal scroller handles the vertical axis at all. A capped
+     * viewport has to scroll vertically; an uncapped one must *not* become a scroll container,
+     * because that would put every table in the sticky chain of its own descendants and take the
+     * consumer's own scrolling region out of it. That is behaviour, not appearance.
+     *
+     * `null` leaves the table exactly as it was: viewport at content height, vertical axis inert.
+     */
+    maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
     /** Row density: lg (default) / md (compact) / sm (dense) */
     size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
@@ -8092,7 +8851,7 @@ class TableComponent {
     /** CSS grid-area for the pagination block */
     paginatorGridArea = computed(() => this.paginatorPosition(), ...(ngDevMode ? [{ debugName: "paginatorGridArea" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (hasSelectionColumn()) {\r\n          <col class=\"gog-table__col--select\" />\r\n        }\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (hasSelectionColumn()) {\r\n            <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n              <!--\r\n                Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n                all of, and a checkbox that can only ever check one row is a lie.\r\n              -->\r\n              @if (selectionMode() === 'multiple') {\r\n                <gog-checkbox\r\n                  [checked]=\"allPageRowsSelected()\"\r\n                  [indeterminate]=\"somePageRowsSelected()\"\r\n                  [disabled]=\"loading() || visibleRows().length === 0\"\r\n                  [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n                  (checkedChange)=\"toggleAllOnPage($event)\"\r\n                />\r\n              }\r\n            </th>\r\n          }\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n            <tr\r\n              class=\"gog-table__row\"\r\n              [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n              [class.gog-table__row--selected]=\"isSelected(row)\"\r\n              [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n              [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n              (click)=\"emitRowClick(row, i, $event)\"\r\n              (keydown)=\"onRowKeydown(row, i, $event)\"\r\n            >\r\n              @if (hasSelectionColumn()) {\r\n                <td class=\"gog-table__td gog-table__td--select\">\r\n                  <!--\r\n                    `$event.stopPropagation()` so ticking the box does not also count as a row\r\n                    click: with `interactiveRows` those are two different intents, and firing both\r\n                    from one gesture is how a \"select\" ends up navigating away.\r\n                  -->\r\n                  <gog-checkbox\r\n                    [checked]=\"isSelected(row)\"\r\n                    [ariaLabel]=\"resolvedLabels().selectRow\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          {{ resolvedLabels().total }}: {{ rowCount() }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <!--\r\n          `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n          writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n          intermediate signal, in either direction.\r\n        -->\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [(pageSize)]=\"pageSize\"\r\n          [totalPages]=\"totalPages()\"\r\n          [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n          [pageSizeOptions]=\"pageSizeOptions()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          [ariaLabel]=\"resolvedLabels().pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:start;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row--interactive{cursor:pointer}.gog-table__row--interactive:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-inline-end:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:end}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <!--\r\n    The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n    table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n    in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n    out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n  -->\r\n  <gog-scroll\r\n    [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n    [style.max-height]=\"maxHeight()\"\r\n    class=\"gog-table-scroll\"\r\n  >\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (hasSelectionColumn()) {\r\n          <col class=\"gog-table__col--select\" />\r\n        }\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (hasSelectionColumn()) {\r\n            <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n              <!--\r\n                Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n                all of, and a checkbox that can only ever check one row is a lie.\r\n              -->\r\n              @if (selectionMode() === 'multiple') {\r\n                <gog-checkbox\r\n                  [checked]=\"allPageRowsSelected()\"\r\n                  [indeterminate]=\"somePageRowsSelected()\"\r\n                  [disabled]=\"loading() || visibleRows().length === 0\"\r\n                  [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n                  (checkedChange)=\"toggleAllOnPage($event)\"\r\n                />\r\n              }\r\n            </th>\r\n          }\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n            <tr\r\n              class=\"gog-table__row\"\r\n              [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n              [class.gog-table__row--selected]=\"isSelected(row)\"\r\n              [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n              [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n              (click)=\"emitRowClick(row, i, $event)\"\r\n              (keydown)=\"onRowKeydown(row, i, $event)\"\r\n            >\r\n              @if (hasSelectionColumn()) {\r\n                <td class=\"gog-table__td gog-table__td--select\">\r\n                  <!--\r\n                    `$event.stopPropagation()` so ticking the box does not also count as a row\r\n                    click: with `interactiveRows` those are two different intents, and firing both\r\n                    from one gesture is how a \"select\" ends up navigating away.\r\n                  -->\r\n                  <gog-checkbox\r\n                    [checked]=\"isSelected(row)\"\r\n                    [ariaLabel]=\"resolvedLabels().selectRow\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          {{ resolvedLabels().total }}: {{ rowCount() }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <!--\r\n          `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n          writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n          intermediate signal, in either direction.\r\n        -->\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [(pageSize)]=\"pageSize\"\r\n          [totalPages]=\"totalPages()\"\r\n          [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n          [pageSizeOptions]=\"pageSizeOptions()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          [ariaLabel]=\"resolvedLabels().pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--auto-layout{table-layout:auto}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:start;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row--interactive{cursor:pointer}.gog-table__row--interactive:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-inline-end:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:end}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -8107,8 +8866,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         class: 'gog-table-host',
                         '[style.display]': '"block"',
                         '[style.width]': 'fullWidth() ? "100%" : "fit-content"',
-                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (hasSelectionColumn()) {\r\n          <col class=\"gog-table__col--select\" />\r\n        }\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (hasSelectionColumn()) {\r\n            <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n              <!--\r\n                Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n                all of, and a checkbox that can only ever check one row is a lie.\r\n              -->\r\n              @if (selectionMode() === 'multiple') {\r\n                <gog-checkbox\r\n                  [checked]=\"allPageRowsSelected()\"\r\n                  [indeterminate]=\"somePageRowsSelected()\"\r\n                  [disabled]=\"loading() || visibleRows().length === 0\"\r\n                  [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n                  (checkedChange)=\"toggleAllOnPage($event)\"\r\n                />\r\n              }\r\n            </th>\r\n          }\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n            <tr\r\n              class=\"gog-table__row\"\r\n              [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n              [class.gog-table__row--selected]=\"isSelected(row)\"\r\n              [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n              [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n              (click)=\"emitRowClick(row, i, $event)\"\r\n              (keydown)=\"onRowKeydown(row, i, $event)\"\r\n            >\r\n              @if (hasSelectionColumn()) {\r\n                <td class=\"gog-table__td gog-table__td--select\">\r\n                  <!--\r\n                    `$event.stopPropagation()` so ticking the box does not also count as a row\r\n                    click: with `interactiveRows` those are two different intents, and firing both\r\n                    from one gesture is how a \"select\" ends up navigating away.\r\n                  -->\r\n                  <gog-checkbox\r\n                    [checked]=\"isSelected(row)\"\r\n                    [ariaLabel]=\"resolvedLabels().selectRow\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          {{ resolvedLabels().total }}: {{ rowCount() }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <!--\r\n          `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n          writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n          intermediate signal, in either direction.\r\n        -->\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [(pageSize)]=\"pageSize\"\r\n          [totalPages]=\"totalPages()\"\r\n          [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n          [pageSizeOptions]=\"pageSizeOptions()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          [ariaLabel]=\"resolvedLabels().pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:start;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row--interactive{cursor:pointer}.gog-table__row--interactive:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-inline-end:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:end}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], showPageSizeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelect", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], interactiveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveRows", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], showSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionColumn", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gogSortChange: [{ type: i0.Output, args: ["gogSortChange"] }], gogPageChange: [{ type: i0.Output, args: ["gogPageChange"] }], gogRowClick: [{ type: i0.Output, args: ["gogRowClick"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GogColumn), { isSignal: true }] }] } });
+                        /*
+                         * While loading, the body is a single cell holding a spinner and the header is dimmed and
+                         * inert — so the table has no rows to announce and nothing saying more are coming. Required
+                         * of every `loading` input; see the loading-state rule in `api-design.instructions.md`.
+                         */
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <!--\r\n    The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n    table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n    in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n    out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n  -->\r\n  <gog-scroll\r\n    [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n    [style.max-height]=\"maxHeight()\"\r\n    class=\"gog-table-scroll\"\r\n  >\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (hasSelectionColumn()) {\r\n          <col class=\"gog-table__col--select\" />\r\n        }\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (hasSelectionColumn()) {\r\n            <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n              <!--\r\n                Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n                all of, and a checkbox that can only ever check one row is a lie.\r\n              -->\r\n              @if (selectionMode() === 'multiple') {\r\n                <gog-checkbox\r\n                  [checked]=\"allPageRowsSelected()\"\r\n                  [indeterminate]=\"somePageRowsSelected()\"\r\n                  [disabled]=\"loading() || visibleRows().length === 0\"\r\n                  [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n                  (checkedChange)=\"toggleAllOnPage($event)\"\r\n                />\r\n              }\r\n            </th>\r\n          }\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track rowKey(row); let i = $index) {\r\n            <tr\r\n              class=\"gog-table__row\"\r\n              [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n              [class.gog-table__row--selected]=\"isSelected(row)\"\r\n              [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n              [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n              (click)=\"emitRowClick(row, i, $event)\"\r\n              (keydown)=\"onRowKeydown(row, i, $event)\"\r\n            >\r\n              @if (hasSelectionColumn()) {\r\n                <td class=\"gog-table__td gog-table__td--select\">\r\n                  <!--\r\n                    `$event.stopPropagation()` so ticking the box does not also count as a row\r\n                    click: with `interactiveRows` those are two different intents, and firing both\r\n                    from one gesture is how a \"select\" ends up navigating away.\r\n                  -->\r\n                  <gog-checkbox\r\n                    [checked]=\"isSelected(row)\"\r\n                    [ariaLabel]=\"resolvedLabels().selectRow\"\r\n                    (click)=\"$event.stopPropagation()\"\r\n                    (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n                  />\r\n                </td>\r\n              }\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          {{ resolvedLabels().total }}: {{ rowCount() }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <!--\r\n          `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n          writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n          intermediate signal, in either direction.\r\n        -->\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [(pageSize)]=\"pageSize\"\r\n          [totalPages]=\"totalPages()\"\r\n          [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n          [pageSizeOptions]=\"pageSizeOptions()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          [ariaLabel]=\"resolvedLabels().pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--auto-layout{table-layout:auto}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:start;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row--interactive{cursor:pointer}.gog-table__row--interactive:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-inline-end:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:end}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], showPageSizeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelect", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], interactiveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveRows", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], showSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionColumn", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gogSortChange: [{ type: i0.Output, args: ["gogSortChange"] }], gogPageChange: [{ type: i0.Output, args: ["gogPageChange"] }], gogRowClick: [{ type: i0.Output, args: ["gogRowClick"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GogColumn), { isSignal: true }] }] } });
 
 /** Built-in defaults, used when `GOG_CONFIG.theme` doesn't supply one. */
 const DEFAULT_THEME = 'light';
@@ -9926,6 +10691,56 @@ const GOG_TOKEN_GROUPS = [
             '--gog-calendar-xsm-font-size',
         ],
     },
+    {
+        section: 'Card',
+        layer: 'component',
+        tokens: [
+            '--gog-card-border-style',
+            '--gog-card-border-width',
+            '--gog-card-color',
+            '--gog-card-disabled-opacity',
+            '--gog-card-elevated-bg',
+            '--gog-card-elevated-border-color',
+            '--gog-card-elevated-shadow',
+            '--gog-card-filled-bg',
+            '--gog-card-filled-border-color',
+            '--gog-card-filled-shadow',
+            '--gog-card-focus-ring',
+            '--gog-card-focus-ring-offset',
+            '--gog-card-focus-ring-width',
+            '--gog-card-font-family',
+            '--gog-card-footer-border-color',
+            '--gog-card-footer-gap',
+            '--gog-card-footer-padding-top',
+            '--gog-card-heading-color',
+            '--gog-card-heading-font-family',
+            '--gog-card-heading-font-size',
+            '--gog-card-heading-font-weight',
+            '--gog-card-heading-line-height',
+            '--gog-card-hover-border-color',
+            '--gog-card-hover-shadow',
+            '--gog-card-lg-gap',
+            '--gog-card-lg-padding-x',
+            '--gog-card-lg-padding-y',
+            '--gog-card-md-gap',
+            '--gog-card-md-padding-x',
+            '--gog-card-md-padding-y',
+            '--gog-card-outlined-bg',
+            '--gog-card-outlined-border-color',
+            '--gog-card-outlined-shadow',
+            '--gog-card-radius',
+            '--gog-card-slg-gap',
+            '--gog-card-slg-padding-x',
+            '--gog-card-slg-padding-y',
+            '--gog-card-sm-gap',
+            '--gog-card-sm-padding-x',
+            '--gog-card-sm-padding-y',
+            '--gog-card-transition-duration',
+            '--gog-card-xsm-gap',
+            '--gog-card-xsm-padding-x',
+            '--gog-card-xsm-padding-y',
+        ],
+    },
     {
         section: 'Checkbox',
         layer: 'component',
@@ -10434,6 +11249,56 @@ const GOG_TOKEN_GROUPS = [
             '--gog-paginator-page-size-min-width',
         ],
     },
+    {
+        section: 'Panel',
+        layer: 'component',
+        tokens: [
+            '--gog-panel-chevron-size',
+            '--gog-panel-color',
+            '--gog-panel-disabled-opacity',
+            '--gog-panel-elevated-bg',
+            '--gog-panel-elevated-border-color',
+            '--gog-panel-filled-bg',
+            '--gog-panel-filled-border-color',
+            '--gog-panel-filled-shadow',
+            '--gog-panel-focus-ring',
+            '--gog-panel-focus-ring-offset',
+            '--gog-panel-focus-ring-width',
+            '--gog-panel-font-family',
+            '--gog-panel-footer-border-color',
+            '--gog-panel-footer-gap',
+            '--gog-panel-footer-padding-top',
+            '--gog-panel-header-gap',
+            '--gog-panel-heading-color',
+            '--gog-panel-heading-font-family',
+            '--gog-panel-heading-font-size',
+            '--gog-panel-heading-font-weight',
+            '--gog-panel-heading-line-height',
+            '--gog-panel-lg-gap',
+            '--gog-panel-lg-padding-x',
+            '--gog-panel-lg-padding-y',
+            '--gog-panel-md-gap',
+            '--gog-panel-md-padding-x',
+            '--gog-panel-md-padding-y',
+            '--gog-panel-outlined-bg',
+            '--gog-panel-outlined-border-color',
+            '--gog-panel-outlined-shadow',
+            '--gog-panel-slg-gap',
+            '--gog-panel-slg-padding-x',
+            '--gog-panel-slg-padding-y',
+            '--gog-panel-sm-gap',
+            '--gog-panel-sm-padding-x',
+            '--gog-panel-sm-padding-y',
+            '--gog-panel-toggle-color',
+            '--gog-panel-toggle-hover-bg',
+            '--gog-panel-toggle-radius',
+            '--gog-panel-toggle-size',
+            '--gog-panel-transition-duration',
+            '--gog-panel-xsm-gap',
+            '--gog-panel-xsm-padding-x',
+            '--gog-panel-xsm-padding-y',
+        ],
+    },
     {
         section: 'Progressbar',
         layer: 'component',
@@ -10467,6 +11332,17 @@ const GOG_TOKEN_GROUPS = [
             '--gog-progressbar-xsm-height',
         ],
     },
+    {
+        section: 'Ripple (the `gogRipple` directive; its classes live in ripple.css)',
+        layer: 'component',
+        tokens: [
+            '--gog-ripple-color',
+            '--gog-ripple-easing',
+            '--gog-ripple-enter-duration',
+            '--gog-ripple-exit-duration',
+            '--gog-ripple-opacity',
+        ],
+    },
     {
         section: 'Scroll',
         layer: 'component',
@@ -10979,6 +11855,12 @@ const GOG_TOKEN_GROUPS = [
             '--gog-calendar-day-bg',
             '--gog-calendar-day-color',
             '--gog-calendar-day-size',
+            '--gog-card-bg',
+            '--gog-card-border-color',
+            '--gog-card-gap',
+            '--gog-card-padding-x',
+            '--gog-card-padding-y',
+            '--gog-card-shadow',
             '--gog-checkbox-box-size',
             '--gog-checkbox-icon-size',
             '--gog-checkbox-label-size',
@@ -11010,6 +11892,11 @@ const GOG_TOKEN_GROUPS = [
             '--gog-multiselect-font-size',
             '--gog-multiselect-padding-x',
             '--gog-multiselect-padding-y',
+            '--gog-panel-bg',
+            '--gog-panel-border-color',
+            '--gog-panel-gap',
+            '--gog-panel-padding-x',
+            '--gog-panel-padding-y',
             '--gog-progressbar-buffer-bg',
             '--gog-progressbar-fill-bg',
             '--gog-progressbar-height',
@@ -11054,5 +11941,5 @@ const GOG_TOKEN_GROUPS = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AutocompleteComponent, ButtonComponent, ButtonToggleGroupComponent, CalendarComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DialogComponent, DialogService, DividerComponent, GOG_CONFIG, GOG_DEPRECATIONS, GOG_ICONS, GOG_TABS_STATE, GOG_TOKEN_GROUPS, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogBadgeDirective, GogButtonDirective, GogButtonToggleOptionDirective, GogCheckboxIconDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogColumn, GogColumnBodyDirective, GogColumnHeaderDirective, GogDropdownBase, GogDropdownChevronDirective, GogDropdownOptionDirective, GogFloatLabelState, GogInputAddonEndDirective, GogInputAddonStartDirective, GogMenuItemDirective, GogMenuTriggerDirective, GogMultiselectClearIconDirective, GogTabContentDirective, GogTabHeaderDirective, GogTagIconDirective, GogTooltipDirective, ICON_DEFS, IconComponent, InputfieldComponent, MenuComponent, MultiselectComponent, PaginatorComponent, ProgressbarComponent, RadioGroupComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, ToggleComponent, addDays, addMonths, addYears, buildMonthGrid, clampDate, copyTimeOnto, daysInMonth, defaultCompare, formatDate, getByPath, isAfterDay, isBeforeDay, isInRange, isSameDay, isSameMonth, isSameOptionValue, isWithinBounds, localeFirstDayOfWeek, monthNames, parseDate, provideGogConfig, provideGogIcons, readOption, resolveConfigured, startOfDay, weekdayNames, withTime };
+export { AccordionComponent, AutocompleteComponent, ButtonComponent, ButtonToggleGroupComponent, CalendarComponent, CardComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DialogComponent, DialogService, DividerComponent, GOG_CONFIG, GOG_DEPRECATIONS, GOG_ICONS, GOG_TABS_STATE, GOG_TOKEN_GROUPS, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogBadgeDirective, GogButtonDirective, GogButtonToggleOptionDirective, GogCardFooterDirective, GogCardHeaderDirective, GogCardLinkDirective, GogCardMediaDirective, GogCheckboxIconDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogColumn, GogColumnBodyDirective, GogColumnHeaderDirective, GogDropdownBase, GogDropdownChevronDirective, GogDropdownOptionDirective, GogFloatLabelState, GogInputAddonEndDirective, GogInputAddonStartDirective, GogMenuItemDirective, GogMenuTriggerDirective, GogMultiselectClearIconDirective, GogPanelFooterDirective, GogPanelHeaderDirective, GogRippleDirective, GogTabContentDirective, GogTabHeaderDirective, GogTagIconDirective, GogTooltipDirective, ICON_DEFS, IconComponent, InputfieldComponent, MenuComponent, MultiselectComponent, PaginatorComponent, PanelComponent, ProgressbarComponent, RadioGroupComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, ToggleComponent, addDays, addMonths, addYears, buildMonthGrid, clampDate, copyTimeOnto, daysInMonth, defaultCompare, formatDate, getByPath, isAfterDay, isBeforeDay, isInRange, isSameDay, isSameMonth, isSameOptionValue, isWithinBounds, localeFirstDayOfWeek, monthNames, parseDate, provideGogConfig, provideGogIcons, readOption, resolveConfigured, startOfDay, weekdayNames, withTime };
 //# sourceMappingURL=guildofgleks-ui.mjs.map