@guildofgleks/ui 21.3.0 → 21.3.2

package/fesm2022/guildofgleks-ui.mjs

@@ -293,6 +293,7 @@ const ICON_DEFS = {
     'checkbox-checked': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
     eye: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`,
     'eye-off': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`,
+    copy: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
 };
 
 class IconComponent {
@@ -304,22 +305,22 @@ class IconComponent {
     ariaLabel = computed(() => this.ariaHidden() ? null : this.title() || this.name(), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     iconSvg = computed(() => this.sanitizer.bypassSecurityTrustHtml(ICON_DEFS[this.name()]), ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconComponent, isStandalone: true, selector: "gog-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "ariaHidden() ? \"true\" : null", "attr.aria-label": "ariaHidden() ? null : ariaLabel()" }, classAttribute: "gog-icon" }, ngImport: i0, template: `
-    @if (template(); as iconTpl) {
-      <ng-container *ngTemplateOutlet="iconTpl" />
-    } @else {
-      <span [innerHTML]="iconSvg()"></span>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconComponent, isStandalone: true, selector: "gog-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "ariaHidden() ? \"true\" : null", "attr.aria-label": "ariaHidden() ? null : ariaLabel()" }, classAttribute: "gog-icon" }, ngImport: i0, template: `
+    @if (template(); as iconTpl) {
+      <ng-container *ngTemplateOutlet="iconTpl" />
+    } @else {
+      <span [innerHTML]="iconSvg()"></span>
+    }
   `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect{stroke-width:var(--gog-icon-stroke-width)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-icon', imports: [NgTemplateOutlet], template: `
-    @if (template(); as iconTpl) {
-      <ng-container *ngTemplateOutlet="iconTpl" />
-    } @else {
-      <span [innerHTML]="iconSvg()"></span>
-    }
+            args: [{ selector: 'gog-icon', imports: [NgTemplateOutlet], template: `
+    @if (template(); as iconTpl) {
+      <ng-container *ngTemplateOutlet="iconTpl" />
+    } @else {
+      <span [innerHTML]="iconSvg()"></span>
+    }
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-icon',
                         '[attr.aria-hidden]': 'ariaHidden() ? "true" : null',
@@ -754,23 +755,25 @@ function resolveCssLengthPx(value, viewportHeight) {
 class GogClearableState {
     clearableInput;
     hasValue;
-    isDisabled;
+    isNotEditable;
     config;
     fallback;
     /**
      * @param clearableInput the control's own `clearable` input (`undefined` when unset)
      * @param hasValue whether there is anything to clear
-     * @param isDisabled whether the control is disabled — a disabled field offers no clear button
+     * @param isNotEditable whether the control currently refuses edits — disabled, or (for the
+     *   text controls) read-only. Either way it offers no clear button: the affordance would
+     *   promise a change the control won't accept.
      * @param config the injected `GOG_CONFIG`
      * @param fallback the control's own default, read lazily — `GogDropdownBase` constructs this
      *   in a field initializer, before its subclass has assigned `clearableByDefault`. `false`
      *   everywhere except `gog-multiselect`, which shipped a clear button before this input
      *   existed and keeps it.
      */
-    constructor(clearableInput, hasValue, isDisabled, config, fallback) {
+    constructor(clearableInput, hasValue, isNotEditable, config, fallback) {
         this.clearableInput = clearableInput;
         this.hasValue = hasValue;
-        this.isDisabled = isDisabled;
+        this.isNotEditable = isNotEditable;
         this.config = config;
         this.fallback = fallback;
     }
@@ -781,7 +784,7 @@ class GogClearableState {
      * shows nothing to clear until there is something to clear, so the affordance appears with the
      * content rather than sitting there permanently as dead chrome.
      */
-    isVisible = computed(() => this.enabled() && this.hasValue() && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    isVisible = computed(() => this.enabled() && this.hasValue() && !this.isNotEditable(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
 }
 
 /**
@@ -981,6 +984,7 @@ const DEFAULT_APPEND_TO_BODY$1 = false;
 const DEFAULT_DROPDOWN_DIRECTION = 'auto';
 const DEFAULT_FILTER = false;
 const DEFAULT_FILTER_POSITION = 'top';
+const DEFAULT_CLEAR_SELECTION_LABEL = 'Clear selection';
 /**
  * Shared behaviour for the listbox-style controls: open/close, placement, the
  * append-to-body overlay, click-outside, keyboard navigation and `ControlValueAccessor`
@@ -1016,8 +1020,13 @@ class GogDropdownBase {
      * `GOG_CONFIG.control.clearable`, then to the control's own default.
      */
     clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the clear button. */
-    clearAriaLabel = input('Clear selection', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the clear button. Unset, falls back to
+     * `GOG_CONFIG.labels.clearSelection`, then to `'Clear selection'`.
+     */
+    clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
+    resolvedClearLabel = computed(() => resolveConfigured(this.clearAriaLabel(), this.globalConfig.labels?.clearSelection, DEFAULT_CLEAR_SELECTION_LABEL), ...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
     /**
      * Smallest width the trigger may shrink to, as any CSS length. Only meaningful with
      * `[fullWidth]="false"`, where the trigger otherwise sizes to whatever is currently selected
@@ -1136,7 +1145,13 @@ class GogDropdownBase {
     panelMaxHeightToken = '--gog-dropdown-panel-max-height';
     /** Estimated row height fed into the placement math; not a real layout property. */
     optionHeightToken = '--gog-dropdown-option-height';
-    /** Unique per-instance suffix, so several dropdowns on a page can't collide on DOM ids. */
+    /**
+     * Unique per-instance suffix, so several dropdowns on a page can't collide on DOM ids.
+     *
+     * Deliberately a bare number rather than `nextGogControlId()` (which the single-element
+     * controls use): each subclass derives *several* ids from this one instance — trigger,
+     * listbox, label, error — so what it needs is the instance number, not one finished id.
+     */
     uid = ++GogDropdownBase.nextUid;
     elRef = inject((ElementRef));
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
@@ -1144,6 +1159,7 @@ class GogDropdownBase {
     appRef = inject(ApplicationRef);
     destroyRef = inject(DestroyRef);
     ngControl = inject(NgControl, { optional: true, self: true });
+    /** `protected` so subclasses can resolve their own inputs against the same config object. */
     globalConfig = inject(GOG_CONFIG);
     overlay = new GogDropdownOverlay(this.appRef, this.document);
     /** Set from `(focus)`/`(blur)` on the trigger — see `onFocusIn`/`onFocusOut`. */
@@ -1534,6 +1550,7 @@ const DEFAULT_SIZE$7 = 'normal';
 const DEFAULT_AUTO_HIDE = true;
 const DEFAULT_HIDE_DELAY$1 = 800;
 const DEFAULT_OVERSCROLL_BEHAVIOR = 'auto';
+const DEFAULT_SHOW_TRACK = true;
 function readPx(raw, fallback) {
     const parsed = Number.parseFloat(raw.trim());
     return Number.isFinite(parsed) ? parsed : fallback;
@@ -1577,6 +1594,17 @@ class ScrollComponent {
      * for what each value does.
      */
     overscrollBehavior = input(undefined, ...(ngDevMode ? [{ debugName: "overscrollBehavior" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the overlay thumb/track ever renders. Native scrolling — wheel, touch, keyboard,
+     * focus-into-view, and any programmatic `scrollTo`/`scrollIntoView` — keeps working exactly
+     * the same either way; this only controls the visual affordance, not `overflow` or scroll
+     * containment (see `viewportOverflowY`/`X`). Off suits a viewport whose *position* is already
+     * driven some other way — `gog-tabs`' `scrollActiveIntoView` is the case this exists for,
+     * where a second, independent scroll indicator next to the active-tab underline reads as two
+     * conflicting signals for the same thing. Unset, falls back to `GOG_CONFIG.scroll.showTrack`,
+     * then to `true`.
+     */
+    showTrack = input(undefined, ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
     gogScroll = output();
     gogReachStart = output();
     gogReachEnd = output();
@@ -1626,6 +1654,7 @@ class ScrollComponent {
     resolvedOverscrollBehavior = computed(() => this.overscrollBehavior() ??
         this.globalConfig.scroll?.overscrollBehavior ??
         DEFAULT_OVERSCROLL_BEHAVIOR, ...(ngDevMode ? [{ debugName: "resolvedOverscrollBehavior" }] : /* istanbul ignore next */ []));
+    resolvedShowTrack = computed(() => this.showTrack() ?? this.globalConfig.scroll?.showTrack ?? DEFAULT_SHOW_TRACK, ...(ngDevMode ? [{ debugName: "resolvedShowTrack" }] : /* istanbul ignore next */ []));
     /**
      * Only applies `resolvedOverscrollBehavior` on an axis that's actually acting as a scroll
      * container — on an axis that's `visible` (see viewportOverflowY/X above) there is no
@@ -1870,16 +1899,17 @@ class ScrollComponent {
         state.end = atEnd;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScrollComponent, isStandalone: true, selector: "gog-scroll", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, reachThreshold: { classPropertyName: "reachThreshold", publicName: "reachThreshold", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, overscrollBehavior: { classPropertyName: "overscrollBehavior", publicName: "overscrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogScroll: "gogScroll", gogReachStart: "gogReachStart", gogReachEnd: "gogReachEnd" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScrollComponent, isStandalone: true, selector: "gog-scroll", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, reachThreshold: { classPropertyName: "reachThreshold", publicName: "reachThreshold", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, overscrollBehavior: { classPropertyName: "overscrollBehavior", publicName: "overscrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogScroll: "gogScroll", gogReachStart: "gogReachStart", gogReachEnd: "gogReachEnd" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (resolvedShowTrack() && showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-normal-thumb-hit-padding)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-thin-thumb-hit-padding)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb:before{content:\"\";position:absolute;inset:calc(-1 * var(--gog-scroll-thumb-hit-padding))}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScrollComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-scroll', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], reachThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "reachThreshold", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], overscrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscrollBehavior", required: false }] }], gogScroll: [{ type: i0.Output, args: ["gogScroll"] }], gogReachStart: [{ type: i0.Output, args: ["gogReachStart"] }], gogReachEnd: [{ type: i0.Output, args: ["gogReachEnd"] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+            args: [{ selector: 'gog-scroll', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (resolvedShowTrack() && showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-normal-thumb-hit-padding)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-thin-thumb-hit-padding)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb:before{content:\"\";position:absolute;inset:calc(-1 * var(--gog-scroll-thumb-hit-padding))}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], reachThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "reachThreshold", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], overscrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscrollBehavior", required: false }] }], showTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrack", required: false }] }], gogScroll: [{ type: i0.Output, args: ["gogScroll"] }], gogReachStart: [{ type: i0.Output, args: ["gogReachStart"] }], gogReachEnd: [{ type: i0.Output, args: ["gogReachEnd"] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SEARCH_DEBOUNCE = 300;
 const DEFAULT_MIN_LENGTH = 1;
+const DEFAULT_OPEN_ON_FOCUS = true;
 /**
  * A text field that suggests options as you type.
  *
@@ -1919,6 +1949,13 @@ class AutocompleteComponent extends GogDropdownBase {
     filterLocal = input(true, ...(ngDevMode ? [{ debugName: "filterLocal" }] : /* istanbul ignore next */ []));
     /** How many characters before the panel opens at all. */
     minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether focusing the field opens the panel immediately, showing the full option list —
+     * before `minLength` would otherwise have let anything through. Off, the field behaves as
+     * before: nothing opens until enough has been typed. Unset, falls back to
+     * `GOG_CONFIG.autocomplete.openOnFocus`, then to `true`.
+     */
+    openOnFocus = input(undefined, ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
     /** Milliseconds of quiet before `gogSearch` fires. `0` emits on every keystroke. */
     searchDebounce = input(undefined, ...(ngDevMode ? [{ debugName: "searchDebounce" }] : /* istanbul ignore next */ []));
     /** Shows a spinner in the trailing slot — for a server-backed source that is still loading. */
@@ -1939,6 +1976,12 @@ class AutocompleteComponent extends GogDropdownBase {
     forceSelection = input(true, ...(ngDevMode ? [{ debugName: "forceSelection" }] : /* istanbul ignore next */ []));
     /** The current query, debounced. Wire a server-side lookup to this. */
     gogSearch = output();
+    /**
+     * Fires when the panel is scrolled to the end of the option list — the signal to fetch and
+     * append another page of a large or server-backed source, rather than handing the whole
+     * thing over up front. Forwarded from the panel's own `gog-scroll`.
+     */
+    gogLoadMore = output();
     panelTemplate = viewChild('panelTpl', ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
     /** A cleared autocomplete is `null`, whatever `TValue` the consumer bound. */
     emptyValue = null;
@@ -1962,8 +2005,17 @@ class AutocompleteComponent extends GogDropdownBase {
     }
     resolvedMinLength = computed(() => resolveConfigured(this.minLength(), this.config.autocomplete?.minLength, DEFAULT_MIN_LENGTH), ...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
     resolvedDebounce = computed(() => resolveConfigured(this.searchDebounce(), this.config.autocomplete?.searchDebounce, DEFAULT_SEARCH_DEBOUNCE), ...(ngDevMode ? [{ debugName: "resolvedDebounce" }] : /* istanbul ignore next */ []));
+    resolvedOpenOnFocus = computed(() => resolveConfigured(this.openOnFocus(), this.config.autocomplete?.openOnFocus, DEFAULT_OPEN_ON_FOCUS), ...(ngDevMode ? [{ debugName: "resolvedOpenOnFocus" }] : /* istanbul ignore next */ []));
     /** What is actually in the `<input>`. Not the same thing as the committed `value`. */
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /**
+     * True right after `openOnFocus` opens the panel, until the user actually types. The field
+     * may already be showing a previously-selected label at that point — this keeps the panel's
+     * list unfiltered by it, so focusing shows every option rather than just the one that
+     * happens to match the current text. Cleared on the first keystroke, so filtering resumes
+     * exactly as before.
+     */
+    browsingAll = signal(false, ...(ngDevMode ? [{ debugName: "browsingAll" }] : /* istanbul ignore next */ []));
     /**
      * Which option the arrows have highlighted. `-1` means none — Enter then does nothing rather
      * than committing whichever row happened to be first, which is what stops a fast typist from
@@ -1983,7 +2035,7 @@ class AutocompleteComponent extends GogDropdownBase {
      * estimate all reading the same set.
      */
     visibleOptions = computed(() => {
-        const query = this.query().trim();
+        const query = this.browsingAll() ? '' : this.query().trim();
         if (!this.filterLocal() || query === '')
             return this.options();
         const match = this.filterMatch();
@@ -2015,6 +2067,7 @@ class AutocompleteComponent extends GogDropdownBase {
     }
     onInput(event) {
         const text = event.target.value;
+        this.browsingAll.set(false);
         this.query.set(text);
         this.activeIndex.set(-1);
         // Whether editing over a selection drops it depends on which mode this is in.
@@ -2100,6 +2153,10 @@ class AutocompleteComponent extends GogDropdownBase {
     }
     onInputFocus() {
         this.onFocusIn();
+        if (this.resolvedOpenOnFocus() && !this.isOpen()) {
+            this.browsingAll.set(true);
+            this.open();
+        }
     }
     onInputBlur() {
         this.onFocusOut();
@@ -2111,6 +2168,7 @@ class AutocompleteComponent extends GogDropdownBase {
     close() {
         super.close();
         this.activeIndex.set(-1);
+        this.browsingAll.set(false);
     }
     /** Clearing has to empty the *text* as well; the base only knows about the value. */
     clearValue(event) {
@@ -2180,15 +2238,15 @@ 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 }, 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" }, host: { properties: { "style.--gog-autocomplete-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-autocomplete\"\n  [class]=\"sizeClass()\"\n  [class.gog-autocomplete--clearable]=\"showClear()\"\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\n  [class.gog-autocomplete--open]=\"isOpen()\"\n  [class.gog-autocomplete--loading]=\"loading()\"\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\n>\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-autocomplete__field\">\n    @if (label() && isFloatLabelActive()) {\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\n        label()\n      }}</label>\n    }\n\n    <!--\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\n      trigger is a button and focus moves onto the option itself.\n    -->\n    <input\n      type=\"text\"\n      class=\"gog-autocomplete__control\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"query()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n\n    <span class=\"gog-autocomplete__actions\">\n      @if (loading()) {\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\n      }\n\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"gog-autocomplete__clear gog-inline-center\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"clearValue($event)\"\n        >\n          <gog-icon name=\"close\" />\n        </button>\n      }\n    </span>\n\n    @if (isOpen() && !resolvedAppendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\n  applied conditionally.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-autocomplete__dropdown\"\n    [class.gog-autocomplete__dropdown--up]=\"\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\n    \"\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-scroll\n      size=\"thin\"\n      [focusable]=\"false\"\n      overscrollBehavior=\"contain\"\n      class=\"gog-autocomplete__scroll\"\n    >\n      @if (visibleOptions().length === 0) {\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\n      }\n\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\n        <!--\n          A div, not a button: focus stays in the input, so these rows are never focused and a\n          button would only add tab stops and a second Enter handler. The highlight is pointed\n          at with aria-activedescendant instead.\n\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\n          would close the panel and, under forceSelection, wipe the text before the click lands.\n        -->\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. -->\n        <div\n          class=\"gog-autocomplete__option\"\n          role=\"option\"\n          [id]=\"optionId(i)\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"onOptionClick(option, $event)\"\n        >\n          @if (optionSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\n            />\n          } @else {\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\n          }\n        </div>\n      }\n    </gog-scroll>\n  </div>\n</ng-template>\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:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-actions-reserve) var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));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;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)}.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{display:block;max-height:var(--gog-autocomplete-panel-max-height)}.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;left: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;left: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"], 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()" } }, 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:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-actions-reserve) var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));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;left: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;left: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 });
 }
 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: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-autocomplete-min-width]': 'minWidth()',
-                    }, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-autocomplete\"\n  [class]=\"sizeClass()\"\n  [class.gog-autocomplete--clearable]=\"showClear()\"\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\n  [class.gog-autocomplete--open]=\"isOpen()\"\n  [class.gog-autocomplete--loading]=\"loading()\"\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\n>\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-autocomplete__field\">\n    @if (label() && isFloatLabelActive()) {\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\n        label()\n      }}</label>\n    }\n\n    <!--\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\n      trigger is a button and focus moves onto the option itself.\n    -->\n    <input\n      type=\"text\"\n      class=\"gog-autocomplete__control\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"query()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n\n    <span class=\"gog-autocomplete__actions\">\n      @if (loading()) {\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\n      }\n\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"gog-autocomplete__clear gog-inline-center\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"clearValue($event)\"\n        >\n          <gog-icon name=\"close\" />\n        </button>\n      }\n    </span>\n\n    @if (isOpen() && !resolvedAppendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\n  applied conditionally.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-autocomplete__dropdown\"\n    [class.gog-autocomplete__dropdown--up]=\"\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\n    \"\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-scroll\n      size=\"thin\"\n      [focusable]=\"false\"\n      overscrollBehavior=\"contain\"\n      class=\"gog-autocomplete__scroll\"\n    >\n      @if (visibleOptions().length === 0) {\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\n      }\n\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\n        <!--\n          A div, not a button: focus stays in the input, so these rows are never focused and a\n          button would only add tab stops and a second Enter handler. The highlight is pointed\n          at with aria-activedescendant instead.\n\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\n          would close the panel and, under forceSelection, wipe the text before the click lands.\n        -->\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. -->\n        <div\n          class=\"gog-autocomplete__option\"\n          role=\"option\"\n          [id]=\"optionId(i)\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"onOptionClick(option, $event)\"\n        >\n          @if (optionSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\n            />\n          } @else {\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\n          }\n        </div>\n      }\n    </gog-scroll>\n  </div>\n</ng-template>\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:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-actions-reserve) var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));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;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)}.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{display:block;max-height:var(--gog-autocomplete-panel-max-height)}.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;left: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;left: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 }] }], 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"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
+                    }, 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:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-actions-reserve) var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));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;left: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;left: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. */
 const DEFAULT_MAX = 99;
@@ -2677,6 +2735,26 @@ 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 */ []));
+    /**
+     * 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
+     * too, the same "always show what's around the current position" idea `gog-paginator` uses
+     * for pages. Reacts to `activeIndex` however it changes: a click, the arrow keys, or a
+     * consumer setting it directly. On by default; turn it off for a header that never actually
+     * overflows, or to own the scroll position yourself.
+     */
+    scrollActiveIntoView = input(true, ...(ngDevMode ? [{ debugName: "scrollActiveIntoView" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the header row shows its own draggable scroll thumb/track. Native scrolling
+     * (wheel, touch, keyboard) works the same regardless; this is purely the visual affordance.
+     *
+     * Unset, it follows `scrollActiveIntoView`: hidden while that's on, since a second scroll
+     * indicator sitting right next to the active-tab underline reads as two conflicting signals
+     * for the same thing once selecting a tab already moves the row on its own; shown while it's
+     * off, since the track is then the only way to reach an off-screen tab without a keyboard.
+     * Set explicitly to pin it either way regardless of `scrollActiveIntoView`.
+     */
+    showScrollTrack = input(undefined, ...(ngDevMode ? [{ debugName: "showScrollTrack" }] : /* istanbul ignore next */ []));
     /** Emits the newly active index whenever it changes, including via keyboard. */
     gogTabChange = output();
     headerSlot = contentChild(GogTabHeaderDirective, ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
@@ -2702,6 +2780,32 @@ class TabsComponent {
         const index = this.resolvedIndex();
         return index === -1 ? null : (this.tabs()[index] ?? null);
     }, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /** See `showScrollTrack`'s doc for why this defaults off precisely when the other is on. */
+    resolvedShowScrollTrack = computed(() => this.showScrollTrack() ?? !this.scrollActiveIntoView(), ...(ngDevMode ? [{ debugName: "resolvedShowScrollTrack" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Instant for the first scroll (page load shouldn't animate into place), smooth after. */
+    hasScrolledOnce = false;
+    constructor() {
+        effect(() => {
+            const index = this.resolvedIndex();
+            const header = this.headerRefs()[index]?.nativeElement;
+            if (!this.isBrowser || !this.scrollActiveIntoView() || !header)
+                return;
+            // Feature-detected: absent in jsdom (so: in unit tests) and in very old browsers, which
+            // then simply keep whatever scroll position they already had.
+            if (typeof header.scrollIntoView !== 'function')
+                return;
+            header.scrollIntoView({
+                inline: 'center',
+                block: 'nearest',
+                behavior: this.hasScrolledOnce && !this.prefersReducedMotion() ? 'smooth' : 'auto',
+            });
+            this.hasScrolledOnce = true;
+        });
+    }
+    prefersReducedMotion() {
+        return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
     hostClasses = computed(() => [
         'gog-tabs',
         `gog-tabs--${this.orientation()}`,
@@ -2746,10 +2850,10 @@ 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 } }, 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 }, 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\">\n  <!--\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\n    would be the one un-themeable strip inside an otherwise fully themeable component.\n    focusable=false because the tablist already owns the keyboard here.\n  -->\n  <gog-scroll\n    class=\"gog-tabs__scroll\"\n    axis=\"horizontal\"\n    size=\"thin\"\n    [focusable]=\"false\"\n    overscrollBehavior=\"contain\"\n  >\n    <div\n      class=\"gog-tabs__list\"\n      role=\"tablist\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-orientation]=\"orientation()\"\n    >\n      @for (tab of tabs(); track tab; let i = $index) {\n        <button\n          #tabHeader\n          type=\"button\"\n          role=\"tab\"\n          class=\"gog-tabs__tab\"\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\n          [id]=\"tab.headerId\"\n          [attr.aria-selected]=\"i === resolvedIndex()\"\n          [attr.aria-controls]=\"tab.panelId\"\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\n          [disabled]=\"tab.disabled()\"\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\n          (click)=\"selectIndex(i)\"\n          (keydown)=\"onHeaderKeydown($event)\"\n        >\n          @if (headerSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\n            />\n          } @else {\n            @if (tab.iconName(); as icon) {\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\n            }\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\n          }\n        </button>\n      }\n    </div>\n  </gog-scroll>\n</div>\n\n<div class=\"gog-tabs__panels\">\n  <ng-content></ng-content>\n</div>\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"], 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        >\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
@@ -2758,8 +2862,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         { provide: GOG_TABS_STATE, useExisting: forwardRef(() => TabsComponent) },
                     ], host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div class=\"gog-tabs__header\">\n  <!--\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\n    would be the one un-themeable strip inside an otherwise fully themeable component.\n    focusable=false because the tablist already owns the keyboard here.\n  -->\n  <gog-scroll\n    class=\"gog-tabs__scroll\"\n    axis=\"horizontal\"\n    size=\"thin\"\n    [focusable]=\"false\"\n    overscrollBehavior=\"contain\"\n  >\n    <div\n      class=\"gog-tabs__list\"\n      role=\"tablist\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-orientation]=\"orientation()\"\n    >\n      @for (tab of tabs(); track tab; let i = $index) {\n        <button\n          #tabHeader\n          type=\"button\"\n          role=\"tab\"\n          class=\"gog-tabs__tab\"\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\n          [id]=\"tab.headerId\"\n          [attr.aria-selected]=\"i === resolvedIndex()\"\n          [attr.aria-controls]=\"tab.panelId\"\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\n          [disabled]=\"tab.disabled()\"\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\n          (click)=\"selectIndex(i)\"\n          (keydown)=\"onHeaderKeydown($event)\"\n        >\n          @if (headerSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\n            />\n          } @else {\n            @if (tab.iconName(); as icon) {\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\n            }\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\n          }\n        </button>\n      }\n    </div>\n  </gog-scroll>\n</div>\n\n<div class=\"gog-tabs__panels\">\n  <ng-content></ng-content>\n</div>\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"] }]
-        }], 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 }] }], 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        >\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 }] }] } });
 
 const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 6px)';
 const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
@@ -3135,6 +3239,22 @@ function parseDate(text, pattern) {
 }
 
 const DEFAULT_LOCALE$1 = 'en-US';
+/**
+ * Built-in defaults for every fixed string the grid renders, used when neither the matching
+ * input nor `GOG_CONFIG.labels` supplies one. Kept as one object so `resolvedLabels` stays a
+ * single `computed` instead of nine, and so the set is obvious at a glance.
+ */
+const DEFAULT_LABELS$2 = {
+    today: 'Today',
+    thisMonth: 'This month',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    previousYear: 'Previous year',
+    nextYear: 'Next year',
+    hours: 'Hours',
+    minutes: 'Minutes',
+    seconds: 'Seconds',
+};
 /**
  * The month grid behind `gog-datepicker`, usable on its own for an always-visible calendar.
  *
@@ -3158,10 +3278,16 @@ class CalendarComponent {
      * or "public holidays" without the consumer materialising every date in range first.
      */
     disabledDates = input(null, ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
-    /** BCP-47 tag driving the month and weekday names. */
-    locale = input(DEFAULT_LOCALE$1, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-    /** 0 = Sunday … 6 = Saturday. Unset, it comes from the locale. */
-    firstDayOfWeek = input(null, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /**
+     * BCP-47 tag driving the month and weekday names. Unset, falls back to
+     * `GOG_CONFIG.datepicker.locale`, then to `'en-US'`.
+     */
+    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * 0 = Sunday … 6 = Saturday. Unset, falls back to `GOG_CONFIG.datepicker.firstDayOfWeek`,
+     * then to the locale's own first day.
+     */
+    firstDayOfWeek = input(undefined, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
     /** Which month to open on when there is no selection yet. */
     defaultMonth = input(null, ...(ngDevMode ? [{ debugName: "defaultMonth" }] : /* istanbul ignore next */ []));
     /** How many months to show side by side. Two is what makes a range picker usable. */
@@ -3186,15 +3312,43 @@ class CalendarComponent {
      */
     showThisMonthButton = input(false, ...(ngDevMode ? [{ debugName: "showThisMonthButton" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    todayLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
-    thisMonthLabel = input('This month', ...(ngDevMode ? [{ debugName: "thisMonthLabel" }] : /* istanbul ignore next */ []));
-    previousMonthLabel = input('Previous month', ...(ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []));
-    nextMonthLabel = input('Next month', ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
-    previousYearLabel = input('Previous year', ...(ngDevMode ? [{ debugName: "previousYearLabel" }] : /* istanbul ignore next */ []));
-    nextYearLabel = input('Next year', ...(ngDevMode ? [{ debugName: "nextYearLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Navigation, shortcut and time-section labels. Each falls back to the matching
+     * `GOG_CONFIG.labels` field when unset, then to the built-in English default — an app
+     * translating the calendar sets them once rather than on every field.
+     */
+    todayLabel = input(undefined, ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    thisMonthLabel = input(undefined, ...(ngDevMode ? [{ debugName: "thisMonthLabel" }] : /* istanbul ignore next */ []));
+    previousMonthLabel = input(undefined, ...(ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []));
+    nextMonthLabel = input(undefined, ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
+    previousYearLabel = input(undefined, ...(ngDevMode ? [{ debugName: "previousYearLabel" }] : /* istanbul ignore next */ []));
+    nextYearLabel = input(undefined, ...(ngDevMode ? [{ debugName: "nextYearLabel" }] : /* istanbul ignore next */ []));
+    hoursLabel = input(undefined, ...(ngDevMode ? [{ debugName: "hoursLabel" }] : /* istanbul ignore next */ []));
+    minutesLabel = input(undefined, ...(ngDevMode ? [{ debugName: "minutesLabel" }] : /* istanbul ignore next */ []));
+    secondsLabel = input(undefined, ...(ngDevMode ? [{ debugName: "secondsLabel" }] : /* istanbul ignore next */ []));
     /** Emitted when a selection is *complete* — a day in single mode, both ends of a range. */
     gogDateSelect = output();
     elRef = inject(ElementRef);
+    globalConfig = inject(GOG_CONFIG);
+    /**
+     * Every rendered string, resolved instance input → `GOG_CONFIG.labels` → built-in default.
+     * `gog-datepicker` forwards its own `todayLabel`/`thisMonthLabel` as `undefined` when unset
+     * precisely so this resolution happens here, once, rather than being pre-empted upstream.
+     */
+    resolvedLabels = computed(() => {
+        const configured = this.globalConfig.labels ?? {};
+        return {
+            today: resolveConfigured(this.todayLabel(), configured.today, DEFAULT_LABELS$2.today),
+            thisMonth: resolveConfigured(this.thisMonthLabel(), configured.thisMonth, DEFAULT_LABELS$2.thisMonth),
+            previousMonth: resolveConfigured(this.previousMonthLabel(), configured.previousMonth, DEFAULT_LABELS$2.previousMonth),
+            nextMonth: resolveConfigured(this.nextMonthLabel(), configured.nextMonth, DEFAULT_LABELS$2.nextMonth),
+            previousYear: resolveConfigured(this.previousYearLabel(), configured.previousYear, DEFAULT_LABELS$2.previousYear),
+            nextYear: resolveConfigured(this.nextYearLabel(), configured.nextYear, DEFAULT_LABELS$2.nextYear),
+            hours: resolveConfigured(this.hoursLabel(), configured.hours, DEFAULT_LABELS$2.hours),
+            minutes: resolveConfigured(this.minutesLabel(), configured.minutes, DEFAULT_LABELS$2.minutes),
+            seconds: resolveConfigured(this.secondsLabel(), configured.seconds, DEFAULT_LABELS$2.seconds),
+        };
+    }, ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
     /** First of the leftmost visible month. */
     viewMonth = signal(startOfDay(new Date()), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
     /** The cell the keyboard is on, and the only one carrying `tabindex="0"`. */
@@ -3203,9 +3357,21 @@ class CalendarComponent {
     hoverDate = signal(null, ...(ngDevMode ? [{ debugName: "hoverDate" }] : /* istanbul ignore next */ []));
     /** Whether a focus move should also pull the DOM focus over — only after a keypress. */
     pendingFocus = false;
-    resolvedFirstDayOfWeek = computed(() => this.firstDayOfWeek() ?? localeFirstDayOfWeek(this.locale()), ...(ngDevMode ? [{ debugName: "resolvedFirstDayOfWeek" }] : /* istanbul ignore next */ []));
-    weekdays = computed(() => weekdayNames(this.locale(), this.resolvedFirstDayOfWeek()), ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
-    months = computed(() => monthNames(this.locale()), ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    /**
+     * Instance input → `GOG_CONFIG.datepicker` → the built-in default.
+     *
+     * `gog-calendar` resolves these itself rather than relying on `gog-datepicker` to pass them
+     * down: it is exported and usable standalone, and `GOG_CONFIG.datepicker` has always been
+     * documented as applying to both. When it *is* rendered by `gog-datepicker`, that component
+     * passes its own already-resolved values, which win here — and resolve to the same thing,
+     * since both read the same config.
+     */
+    resolvedLocale = computed(() => resolveConfigured(this.locale(), this.globalConfig.datepicker?.locale, DEFAULT_LOCALE$1), ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    resolvedFirstDayOfWeek = computed(() => this.firstDayOfWeek() ??
+        this.globalConfig.datepicker?.firstDayOfWeek ??
+        localeFirstDayOfWeek(this.resolvedLocale()), ...(ngDevMode ? [{ debugName: "resolvedFirstDayOfWeek" }] : /* istanbul ignore next */ []));
+    weekdays = computed(() => weekdayNames(this.resolvedLocale(), this.resolvedFirstDayOfWeek()), ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    months = computed(() => monthNames(this.resolvedLocale()), ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
     range = computed(() => {
         const current = this.value();
         if (this.selectionMode() !== 'range' || current === null || current instanceof Date) {
@@ -3482,14 +3648,14 @@ class CalendarComponent {
         return isSameDay(date, this.focusedDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CalendarComponent, isStandalone: true, selector: "gog-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousYearLabel: { classPropertyName: "previousYearLabel", publicName: "previousYearLabel", isSignal: true, isRequired: false, transformFunction: null }, nextYearLabel: { classPropertyName: "nextYearLabel", publicName: "nextYearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogDateSelect: "gogDateSelect" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"gog-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"previousYearLabel()\"\n    (click)=\"shiftViewYears(-1)\"\n  >\n    <gog-icon name=\"chevron-left\" />\n    <gog-icon name=\"chevron-left\" />\n  </button>\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"previousMonthLabel()\"\n    (click)=\"shiftView(-1)\"\n  >\n    <gog-icon name=\"chevron-left\" />\n  </button>\n\n  <div class=\"gog-calendar__titles\">\n    @for (month of monthViews(); track $index) {\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"nextMonthLabel()\"\n    (click)=\"shiftView(1)\"\n  >\n    <gog-icon name=\"chevron-right\" />\n  </button>\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"nextYearLabel()\"\n    (click)=\"shiftViewYears(1)\"\n  >\n    <gog-icon name=\"chevron-right\" />\n    <gog-icon name=\"chevron-right\" />\n  </button>\n</div>\n\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\n  @for (month of monthViews(); track $index) {\n    <!--\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\n    <table\n      class=\"gog-calendar__grid\"\n      role=\"grid\"\n      [attr.aria-label]=\"month.label\"\n      (keydown)=\"onGridKeydown($event)\"\n    >\n      <thead>\n        <tr class=\"gog-calendar__weekdays\">\n          @for (weekday of weekdays(); track $index) {\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (week of month.weeks; track $index) {\n          <tr class=\"gog-calendar__week\">\n            @for (day of week; track day.date.getTime()) {\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\n                <!--\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\n                  move it. Tabbing through every day of the month instead would put 42 stops\n                  between the field and whatever follows it.\n                -->\n                <button\n                  type=\"button\"\n                  class=\"gog-calendar__day\"\n                  [class.gog-calendar__day--outside]=\"day.outside\"\n                  [class.gog-calendar__day--today]=\"day.today\"\n                  [class.gog-calendar__day--selected]=\"day.selected\"\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\n                  [disabled]=\"day.disabled\"\n                  [attr.aria-disabled]=\"day.disabled\"\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\n                  (click)=\"onDayClick(day)\"\n                  (mouseenter)=\"onDayHover(day)\"\n                >\n                  {{ day.label }}\n                </button>\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n\n@if (showTime()) {\n  <div class=\"gog-calendar__time\">\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\n\n    <input\n      type=\"number\"\n      class=\"gog-calendar__time-input\"\n      [min]=\"minHour()\"\n      [max]=\"maxHour()\"\n      [value]=\"hours()\"\n      aria-label=\"Hours\"\n      (input)=\"onHourInput($event)\"\n    />\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\n    <input\n      type=\"number\"\n      class=\"gog-calendar__time-input\"\n      min=\"0\"\n      max=\"59\"\n      [step]=\"minuteStep()\"\n      [value]=\"minutes()\"\n      aria-label=\"Minutes\"\n      (input)=\"onMinuteInput($event)\"\n    />\n\n    @if (showSeconds()) {\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\n      <input\n        type=\"number\"\n        class=\"gog-calendar__time-input\"\n        min=\"0\"\n        max=\"59\"\n        [value]=\"seconds()\"\n        aria-label=\"Seconds\"\n        (input)=\"onSecondInput($event)\"\n      />\n    }\n\n    @if (hourFormat() === '12') {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__meridiem\"\n        [attr.aria-pressed]=\"isPm()\"\n        (click)=\"toggleMeridiem()\"\n      >\n        {{ isPm() ? 'PM' : 'AM' }}\n      </button>\n    }\n  </div>\n}\n\n@if (showTodayButton() || showThisMonthButton()) {\n  <!--\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\n  -->\n  <div class=\"gog-calendar__footer\">\n    @if (showThisMonthButton()) {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\n        (click)=\"goToThisMonth()\"\n      >\n        {{ thisMonthLabel() }}\n      </button>\n    }\n\n    @if (showTodayButton()) {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__action gog-calendar__today\"\n        [disabled]=\"!isTodaySelectable()\"\n        (click)=\"selectToday()\"\n      >\n        {{ todayLabel() }}\n      </button>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CalendarComponent, isStandalone: true, selector: "gog-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousYearLabel: { classPropertyName: "previousYearLabel", publicName: "previousYearLabel", isSignal: true, isRequired: false, transformFunction: null }, nextYearLabel: { classPropertyName: "nextYearLabel", publicName: "nextYearLabel", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsLabel: { classPropertyName: "secondsLabel", publicName: "secondsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogDateSelect: "gogDateSelect" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"gog-calendar__header\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousYear\"\r\n    (click)=\"shiftViewYears(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousMonth\"\r\n    (click)=\"shiftView(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n\r\n  <div class=\"gog-calendar__titles\">\r\n    @for (month of monthViews(); track $index) {\r\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextMonth\"\r\n    (click)=\"shiftView(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextYear\"\r\n    (click)=\"shiftViewYears(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n</div>\r\n\r\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\r\n  @for (month of monthViews(); track $index) {\r\n    <!--\r\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\r\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\r\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\r\n    -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\r\n    <table\r\n      class=\"gog-calendar__grid\"\r\n      role=\"grid\"\r\n      [attr.aria-label]=\"month.label\"\r\n      (keydown)=\"onGridKeydown($event)\"\r\n    >\r\n      <thead>\r\n        <tr class=\"gog-calendar__weekdays\">\r\n          @for (weekday of weekdays(); track $index) {\r\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (week of month.weeks; track $index) {\r\n          <tr class=\"gog-calendar__week\">\r\n            @for (day of week; track day.date.getTime()) {\r\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\r\n                <!--\r\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\r\n                  move it. Tabbing through every day of the month instead would put 42 stops\r\n                  between the field and whatever follows it.\r\n                -->\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"gog-calendar__day\"\r\n                  [class.gog-calendar__day--outside]=\"day.outside\"\r\n                  [class.gog-calendar__day--today]=\"day.today\"\r\n                  [class.gog-calendar__day--selected]=\"day.selected\"\r\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\r\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\r\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\r\n                  [disabled]=\"day.disabled\"\r\n                  [attr.aria-disabled]=\"day.disabled\"\r\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\r\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\r\n                  (click)=\"onDayClick(day)\"\r\n                  (mouseenter)=\"onDayHover(day)\"\r\n                >\r\n                  {{ day.label }}\r\n                </button>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n@if (showTime()) {\r\n  <div class=\"gog-calendar__time\">\r\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      [min]=\"minHour()\"\r\n      [max]=\"maxHour()\"\r\n      [value]=\"hours()\"\r\n      [attr.aria-label]=\"resolvedLabels().hours\"\r\n      (input)=\"onHourInput($event)\"\r\n    />\r\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      min=\"0\"\r\n      max=\"59\"\r\n      [step]=\"minuteStep()\"\r\n      [value]=\"minutes()\"\r\n      [attr.aria-label]=\"resolvedLabels().minutes\"\r\n      (input)=\"onMinuteInput($event)\"\r\n    />\r\n\r\n    @if (showSeconds()) {\r\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n      <input\r\n        type=\"number\"\r\n        class=\"gog-calendar__time-input\"\r\n        min=\"0\"\r\n        max=\"59\"\r\n        [value]=\"seconds()\"\r\n        [attr.aria-label]=\"resolvedLabels().seconds\"\r\n        (input)=\"onSecondInput($event)\"\r\n      />\r\n    }\r\n\r\n    @if (hourFormat() === '12') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__meridiem\"\r\n        [attr.aria-pressed]=\"isPm()\"\r\n        (click)=\"toggleMeridiem()\"\r\n      >\r\n        {{ isPm() ? 'PM' : 'AM' }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (showTodayButton() || showThisMonthButton()) {\r\n  <!--\r\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\r\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\r\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\r\n  -->\r\n  <div class=\"gog-calendar__footer\">\r\n    @if (showThisMonthButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\r\n        (click)=\"goToThisMonth()\"\r\n      >\r\n        {{ resolvedLabels().thisMonth }}\r\n      </button>\r\n    }\r\n\r\n    @if (showTodayButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__today\"\r\n        [disabled]=\"!isTodaySelectable()\"\r\n        (click)=\"selectToday()\"\r\n      >\r\n        {{ resolvedLabels().today }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-calendar', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div class=\"gog-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"previousYearLabel()\"\n    (click)=\"shiftViewYears(-1)\"\n  >\n    <gog-icon name=\"chevron-left\" />\n    <gog-icon name=\"chevron-left\" />\n  </button>\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"previousMonthLabel()\"\n    (click)=\"shiftView(-1)\"\n  >\n    <gog-icon name=\"chevron-left\" />\n  </button>\n\n  <div class=\"gog-calendar__titles\">\n    @for (month of monthViews(); track $index) {\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"nextMonthLabel()\"\n    (click)=\"shiftView(1)\"\n  >\n    <gog-icon name=\"chevron-right\" />\n  </button>\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"nextYearLabel()\"\n    (click)=\"shiftViewYears(1)\"\n  >\n    <gog-icon name=\"chevron-right\" />\n    <gog-icon name=\"chevron-right\" />\n  </button>\n</div>\n\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\n  @for (month of monthViews(); track $index) {\n    <!--\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\n    <table\n      class=\"gog-calendar__grid\"\n      role=\"grid\"\n      [attr.aria-label]=\"month.label\"\n      (keydown)=\"onGridKeydown($event)\"\n    >\n      <thead>\n        <tr class=\"gog-calendar__weekdays\">\n          @for (weekday of weekdays(); track $index) {\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (week of month.weeks; track $index) {\n          <tr class=\"gog-calendar__week\">\n            @for (day of week; track day.date.getTime()) {\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\n                <!--\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\n                  move it. Tabbing through every day of the month instead would put 42 stops\n                  between the field and whatever follows it.\n                -->\n                <button\n                  type=\"button\"\n                  class=\"gog-calendar__day\"\n                  [class.gog-calendar__day--outside]=\"day.outside\"\n                  [class.gog-calendar__day--today]=\"day.today\"\n                  [class.gog-calendar__day--selected]=\"day.selected\"\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\n                  [disabled]=\"day.disabled\"\n                  [attr.aria-disabled]=\"day.disabled\"\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\n                  (click)=\"onDayClick(day)\"\n                  (mouseenter)=\"onDayHover(day)\"\n                >\n                  {{ day.label }}\n                </button>\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n\n@if (showTime()) {\n  <div class=\"gog-calendar__time\">\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\n\n    <input\n      type=\"number\"\n      class=\"gog-calendar__time-input\"\n      [min]=\"minHour()\"\n      [max]=\"maxHour()\"\n      [value]=\"hours()\"\n      aria-label=\"Hours\"\n      (input)=\"onHourInput($event)\"\n    />\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\n    <input\n      type=\"number\"\n      class=\"gog-calendar__time-input\"\n      min=\"0\"\n      max=\"59\"\n      [step]=\"minuteStep()\"\n      [value]=\"minutes()\"\n      aria-label=\"Minutes\"\n      (input)=\"onMinuteInput($event)\"\n    />\n\n    @if (showSeconds()) {\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\n      <input\n        type=\"number\"\n        class=\"gog-calendar__time-input\"\n        min=\"0\"\n        max=\"59\"\n        [value]=\"seconds()\"\n        aria-label=\"Seconds\"\n        (input)=\"onSecondInput($event)\"\n      />\n    }\n\n    @if (hourFormat() === '12') {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__meridiem\"\n        [attr.aria-pressed]=\"isPm()\"\n        (click)=\"toggleMeridiem()\"\n      >\n        {{ isPm() ? 'PM' : 'AM' }}\n      </button>\n    }\n  </div>\n}\n\n@if (showTodayButton() || showThisMonthButton()) {\n  <!--\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\n  -->\n  <div class=\"gog-calendar__footer\">\n    @if (showThisMonthButton()) {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\n        (click)=\"goToThisMonth()\"\n      >\n        {{ thisMonthLabel() }}\n      </button>\n    }\n\n    @if (showTodayButton()) {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__action gog-calendar__today\"\n        [disabled]=\"!isTodaySelectable()\"\n        (click)=\"selectToday()\"\n      >\n        {{ todayLabel() }}\n      </button>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], defaultMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMonth", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showThisMonthButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThisMonthButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], thisMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thisMonthLabel", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], previousYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousYearLabel", required: false }] }], nextYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextYearLabel", required: false }] }], gogDateSelect: [{ type: i0.Output, args: ["gogDateSelect"] }] } });
+                    }, template: "<div class=\"gog-calendar__header\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousYear\"\r\n    (click)=\"shiftViewYears(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousMonth\"\r\n    (click)=\"shiftView(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n\r\n  <div class=\"gog-calendar__titles\">\r\n    @for (month of monthViews(); track $index) {\r\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextMonth\"\r\n    (click)=\"shiftView(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextYear\"\r\n    (click)=\"shiftViewYears(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n</div>\r\n\r\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\r\n  @for (month of monthViews(); track $index) {\r\n    <!--\r\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\r\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\r\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\r\n    -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\r\n    <table\r\n      class=\"gog-calendar__grid\"\r\n      role=\"grid\"\r\n      [attr.aria-label]=\"month.label\"\r\n      (keydown)=\"onGridKeydown($event)\"\r\n    >\r\n      <thead>\r\n        <tr class=\"gog-calendar__weekdays\">\r\n          @for (weekday of weekdays(); track $index) {\r\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (week of month.weeks; track $index) {\r\n          <tr class=\"gog-calendar__week\">\r\n            @for (day of week; track day.date.getTime()) {\r\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\r\n                <!--\r\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\r\n                  move it. Tabbing through every day of the month instead would put 42 stops\r\n                  between the field and whatever follows it.\r\n                -->\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"gog-calendar__day\"\r\n                  [class.gog-calendar__day--outside]=\"day.outside\"\r\n                  [class.gog-calendar__day--today]=\"day.today\"\r\n                  [class.gog-calendar__day--selected]=\"day.selected\"\r\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\r\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\r\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\r\n                  [disabled]=\"day.disabled\"\r\n                  [attr.aria-disabled]=\"day.disabled\"\r\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\r\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\r\n                  (click)=\"onDayClick(day)\"\r\n                  (mouseenter)=\"onDayHover(day)\"\r\n                >\r\n                  {{ day.label }}\r\n                </button>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n@if (showTime()) {\r\n  <div class=\"gog-calendar__time\">\r\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      [min]=\"minHour()\"\r\n      [max]=\"maxHour()\"\r\n      [value]=\"hours()\"\r\n      [attr.aria-label]=\"resolvedLabels().hours\"\r\n      (input)=\"onHourInput($event)\"\r\n    />\r\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      min=\"0\"\r\n      max=\"59\"\r\n      [step]=\"minuteStep()\"\r\n      [value]=\"minutes()\"\r\n      [attr.aria-label]=\"resolvedLabels().minutes\"\r\n      (input)=\"onMinuteInput($event)\"\r\n    />\r\n\r\n    @if (showSeconds()) {\r\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n      <input\r\n        type=\"number\"\r\n        class=\"gog-calendar__time-input\"\r\n        min=\"0\"\r\n        max=\"59\"\r\n        [value]=\"seconds()\"\r\n        [attr.aria-label]=\"resolvedLabels().seconds\"\r\n        (input)=\"onSecondInput($event)\"\r\n      />\r\n    }\r\n\r\n    @if (hourFormat() === '12') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__meridiem\"\r\n        [attr.aria-pressed]=\"isPm()\"\r\n        (click)=\"toggleMeridiem()\"\r\n      >\r\n        {{ isPm() ? 'PM' : 'AM' }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (showTodayButton() || showThisMonthButton()) {\r\n  <!--\r\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\r\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\r\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\r\n  -->\r\n  <div class=\"gog-calendar__footer\">\r\n    @if (showThisMonthButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\r\n        (click)=\"goToThisMonth()\"\r\n      >\r\n        {{ resolvedLabels().thisMonth }}\r\n      </button>\r\n    }\r\n\r\n    @if (showTodayButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__today\"\r\n        [disabled]=\"!isTodaySelectable()\"\r\n        (click)=\"selectToday()\"\r\n      >\r\n        {{ resolvedLabels().today }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], defaultMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMonth", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showThisMonthButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThisMonthButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], thisMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thisMonthLabel", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], previousYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousYearLabel", required: false }] }], nextYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextYearLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], secondsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsLabel", required: false }] }], gogDateSelect: [{ type: i0.Output, args: ["gogDateSelect"] }] } });
 /** How far into the week `date` sits, given which weekday the week starts on. */
 function weekdayOffset(date, firstDayOfWeek) {
     return (date.getDay() - firstDayOfWeek + 7) % 7;
@@ -3516,6 +3682,8 @@ const DEFAULT_DIRECTION = 'auto';
 const DEFAULT_LOCALE = 'en-US';
 const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 const DEFAULT_TIME_FORMAT = 'HH:mm';
+const DEFAULT_CLEAR_DATE_LABEL = 'Clear date';
+const DEFAULT_OPEN_CALENDAR_LABEL = 'Open calendar';
 /** Rough panel height fed into the up/down placement math before it is on screen. */
 const ESTIMATED_PANEL_HEIGHT = 330;
 /**
@@ -3560,8 +3728,13 @@ class DatepickerComponent {
      * selection alone. Off by default; see `gog-calendar` for why the two are separate controls.
      */
     showThisMonthButton = input(false, ...(ngDevMode ? [{ debugName: "showThisMonthButton" }] : /* istanbul ignore next */ []));
-    todayLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
-    thisMonthLabel = input('This month', ...(ngDevMode ? [{ debugName: "thisMonthLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `gog-calendar`. Left unset they stay `undefined` all the way down, so the
+     * calendar resolves them against `GOG_CONFIG.labels` itself rather than receiving an English
+     * default from here that would shadow the app's own.
+     */
+    todayLabel = input(undefined, ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
+    thisMonthLabel = input(undefined, ...(ngDevMode ? [{ debugName: "thisMonthLabel" }] : /* istanbul ignore next */ []));
     /**
      * Display and parse pattern (`dd.MM.yyyy`, `yyyy-MM-dd`, …). Left unset it is derived from
      * `showTime`, so switching the time section on does not also require restating the format.
@@ -3582,7 +3755,8 @@ class DatepickerComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
-    clearAriaLabel = input('Clear date', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.labels.clearDate`, then to `'Clear date'`. */
+    clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     errorDisplay = input(undefined, ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -3591,7 +3765,8 @@ class DatepickerComponent {
     appendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
     dropdownDirection = input(undefined, ...(ngDevMode ? [{ debugName: "dropdownDirection" }] : /* istanbul ignore next */ []));
     dropdownZIndex = input(null, ...(ngDevMode ? [{ debugName: "dropdownZIndex" }] : /* istanbul ignore next */ []));
-    openCalendarLabel = input('Open calendar', ...(ngDevMode ? [{ debugName: "openCalendarLabel" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.labels.openCalendar`, then to `'Open calendar'`. */
+    openCalendarLabel = input(undefined, ...(ngDevMode ? [{ debugName: "openCalendarLabel" }] : /* istanbul ignore next */ []));
     /** Two-way bindable value: a `Date` in `'single'` mode, a `GogDateRange` in `'range'`. */
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
@@ -3618,6 +3793,9 @@ class DatepickerComponent {
      */
     isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
+    resolvedClearLabel = computed(() => resolveConfigured(this.clearAriaLabel(), this.globalConfig.labels?.clearDate, DEFAULT_CLEAR_DATE_LABEL), ...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
+    resolvedOpenCalendarLabel = computed(() => resolveConfigured(this.openCalendarLabel(), this.globalConfig.labels?.openCalendar, DEFAULT_OPEN_CALENDAR_LABEL), ...(ngDevMode ? [{ debugName: "resolvedOpenCalendarLabel" }] : /* istanbul ignore next */ []));
     resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE$4), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     resolvedErrorDisplay = computed(() => resolveConfigured(this.errorDisplay(), this.globalConfig.control?.errorDisplay, DEFAULT_ERROR_DISPLAY$4), ...(ngDevMode ? [{ debugName: "resolvedErrorDisplay" }] : /* istanbul ignore next */ []));
     resolvedAppendToBody = computed(() => resolveConfigured(this.appendToBody(), this.globalConfig.dropdown?.appendToBody, DEFAULT_APPEND_TO_BODY), ...(ngDevMode ? [{ debugName: "resolvedAppendToBody" }] : /* istanbul ignore next */ []));
@@ -3857,13 +4035,13 @@ class DatepickerComponent {
         this.directionState.set(placement.direction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatepickerComponent, isStandalone: true, selector: "gog-datepicker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, allowTextInput: { classPropertyName: "allowTextInput", publicName: "allowTextInput", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", 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 }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", 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 }, openCalendarLabel: { classPropertyName: "openCalendarLabel", publicName: "openCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inline()) {\n  <!--\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\n    the calendar is its own component rather than markup buried in this one.\n  -->\n  <gog-calendar\n    class=\"gog-datepicker__inline\"\n    [value]=\"value()\"\n    [selectionMode]=\"selectionMode()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [disabledDates]=\"disabledDates()\"\n    [locale]=\"resolvedLocale()\"\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\n    [defaultMonth]=\"defaultMonth()\"\n    [numberOfMonths]=\"numberOfMonths()\"\n    [showTime]=\"showTime()\"\n    [hourFormat]=\"hourFormat()\"\n    [minuteStep]=\"minuteStep()\"\n    [showSeconds]=\"showSeconds()\"\n    [showTodayButton]=\"showTodayButton()\"\n    [showThisMonthButton]=\"showThisMonthButton()\"\n    [todayLabel]=\"todayLabel()\"\n    [thisMonthLabel]=\"thisMonthLabel()\"\n    [size]=\"resolvedSize()\"\n    (valueChange)=\"onCalendarValue($event)\"\n    (gogDateSelect)=\"onCalendarSelect($event)\"\n  />\n} @else {\n  <!--\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n    context, which traps the panel's z-index inside it.\n  -->\n  <div\n    class=\"gog-datepicker\"\n    [class]=\"sizeClass()\"\n    [class.gog-datepicker--clearable]=\"showClear()\"\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\n    [class.gog-datepicker--open]=\"isOpen()\"\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\n  >\n    @if (label() && resolvedFloatLabel() === 'none') {\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\n    }\n\n    <div class=\"gog-datepicker__field\">\n      @if (label() && isFloatLabelActive()) {\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\n          label()\n        }}</label>\n      }\n\n      <input\n        type=\"text\"\n        class=\"gog-datepicker__control\"\n        autocomplete=\"off\"\n        [id]=\"triggerId()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\n        [value]=\"text()\"\n        [placeholder]=\"effectivePlaceholder()\"\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"panelId()\"\n        [attr.aria-invalid]=\"hasError()\"\n        [attr.aria-describedby]=\"errorId()\"\n        (input)=\"onTextInput($event)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      />\n\n      <span class=\"gog-datepicker__actions\">\n        <button\n          type=\"button\"\n          class=\"gog-datepicker__toggle gog-inline-center\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"openCalendarLabel()\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"panelId()\"\n          (click)=\"toggle()\"\n        >\n          <gog-icon name=\"calendar\" />\n        </button>\n\n        @if (showClear()) {\n          <button\n            type=\"button\"\n            class=\"gog-datepicker__clear gog-inline-center\"\n            [attr.aria-label]=\"clearAriaLabel()\"\n            (click)=\"clearValue($event)\"\n          >\n            <gog-icon name=\"close\" />\n          </button>\n        }\n      </span>\n\n      @if (isOpen() && !resolvedAppendToBody()) {\n        <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n      }\n    </div>\n\n    @if (hasError()) {\n      <span class=\"gog-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\n        {{ visibleError() }}\n      </span>\n    }\n  </div>\n}\n\n<!--\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- (click) here is housekeeping stopPropagation, not an interactive handler; the focusable, keyboard-operable elements are the calendar's own grid and buttons -->\n  <div\n    [id]=\"panelId()\"\n    class=\"gog-datepicker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label() || ariaLabel() || openCalendarLabel()\"\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.z-index]=\"dropdownZIndex()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-calendar\n      [value]=\"value()\"\n      [selectionMode]=\"selectionMode()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [disabledDates]=\"disabledDates()\"\n      [locale]=\"resolvedLocale()\"\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\n      [defaultMonth]=\"defaultMonth()\"\n      [numberOfMonths]=\"numberOfMonths()\"\n      [showTime]=\"showTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [minuteStep]=\"minuteStep()\"\n      [showSeconds]=\"showSeconds()\"\n      [showTodayButton]=\"showTodayButton()\"\n      [showThisMonthButton]=\"showThisMonthButton()\"\n      [todayLabel]=\"todayLabel()\"\n      [thisMonthLabel]=\"thisMonthLabel()\"\n      [size]=\"resolvedSize()\"\n      (valueChange)=\"onCalendarValue($event)\"\n      (gogDateSelect)=\"onCalendarSelect($event)\"\n    />\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "gog-calendar", inputs: ["value", "selectionMode", "min", "max", "disabledDates", "locale", "firstDayOfWeek", "defaultMonth", "numberOfMonths", "showTime", "hourFormat", "minuteStep", "showSeconds", "showTodayButton", "showThisMonthButton", "size", "todayLabel", "thisMonthLabel", "previousMonthLabel", "nextMonthLabel", "previousYearLabel", "nextYearLabel"], outputs: ["valueChange", "gogDateSelect"] }, { 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: DatepickerComponent, isStandalone: true, selector: "gog-datepicker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, allowTextInput: { classPropertyName: "allowTextInput", publicName: "allowTextInput", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", 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 }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", 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 }, openCalendarLabel: { classPropertyName: "openCalendarLabel", publicName: "openCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inline()) {\r\n  <!--\r\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\r\n    the calendar is its own component rather than markup buried in this one.\r\n  -->\r\n  <gog-calendar\r\n    class=\"gog-datepicker__inline\"\r\n    [value]=\"value()\"\r\n    [selectionMode]=\"selectionMode()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [disabledDates]=\"disabledDates()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n    [defaultMonth]=\"defaultMonth()\"\r\n    [numberOfMonths]=\"numberOfMonths()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [minuteStep]=\"minuteStep()\"\r\n    [showSeconds]=\"showSeconds()\"\r\n    [showTodayButton]=\"showTodayButton()\"\r\n    [showThisMonthButton]=\"showThisMonthButton()\"\r\n    [todayLabel]=\"todayLabel()\"\r\n    [thisMonthLabel]=\"thisMonthLabel()\"\r\n    [size]=\"resolvedSize()\"\r\n    (valueChange)=\"onCalendarValue($event)\"\r\n    (gogDateSelect)=\"onCalendarSelect($event)\"\r\n  />\r\n} @else {\r\n  <!--\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.\r\n  -->\r\n  <div\r\n    class=\"gog-datepicker\"\r\n    [class]=\"sizeClass()\"\r\n    [class.gog-datepicker--clearable]=\"showClear()\"\r\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\r\n    [class.gog-datepicker--open]=\"isOpen()\"\r\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\r\n  >\r\n    @if (label() && resolvedFloatLabel() === 'none') {\r\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n    }\r\n\r\n    <div class=\"gog-datepicker__field\">\r\n      @if (label() && isFloatLabelActive()) {\r\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\r\n          label()\r\n        }}</label>\r\n      }\r\n\r\n      <input\r\n        type=\"text\"\r\n        class=\"gog-datepicker__control\"\r\n        autocomplete=\"off\"\r\n        [id]=\"triggerId()\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\r\n        [value]=\"text()\"\r\n        [placeholder]=\"effectivePlaceholder()\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n        [attr.aria-haspopup]=\"'dialog'\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-controls]=\"panelId()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        (input)=\"onTextInput($event)\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n\r\n      <span class=\"gog-datepicker__actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-datepicker__toggle gog-inline-center\"\r\n          [disabled]=\"isDisabled()\"\r\n          [attr.aria-label]=\"resolvedOpenCalendarLabel()\"\r\n          [attr.aria-expanded]=\"isOpen()\"\r\n          [attr.aria-controls]=\"panelId()\"\r\n          (click)=\"toggle()\"\r\n        >\r\n          <gog-icon name=\"calendar\" />\r\n        </button>\r\n\r\n        @if (showClear()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-datepicker__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      </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-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n        {{ visibleError() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\r\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- (click) here is housekeeping stopPropagation, not an interactive handler; the focusable, keyboard-operable elements are the calendar's own grid and buttons -->\r\n  <div\r\n    [id]=\"panelId()\"\r\n    class=\"gog-datepicker__panel\"\r\n    role=\"dialog\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || resolvedOpenCalendarLabel()\"\r\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\r\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.z-index]=\"dropdownZIndex()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-calendar\r\n      [value]=\"value()\"\r\n      [selectionMode]=\"selectionMode()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [disabledDates]=\"disabledDates()\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n      [defaultMonth]=\"defaultMonth()\"\r\n      [numberOfMonths]=\"numberOfMonths()\"\r\n      [showTime]=\"showTime()\"\r\n      [hourFormat]=\"hourFormat()\"\r\n      [minuteStep]=\"minuteStep()\"\r\n      [showSeconds]=\"showSeconds()\"\r\n      [showTodayButton]=\"showTodayButton()\"\r\n      [showThisMonthButton]=\"showThisMonthButton()\"\r\n      [todayLabel]=\"todayLabel()\"\r\n      [thisMonthLabel]=\"thisMonthLabel()\"\r\n      [size]=\"resolvedSize()\"\r\n      (valueChange)=\"onCalendarValue($event)\"\r\n      (gogDateSelect)=\"onCalendarSelect($event)\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "gog-calendar", inputs: ["value", "selectionMode", "min", "max", "disabledDates", "locale", "firstDayOfWeek", "defaultMonth", "numberOfMonths", "showTime", "hourFormat", "minuteStep", "showSeconds", "showTodayButton", "showThisMonthButton", "size", "todayLabel", "thisMonthLabel", "previousMonthLabel", "nextMonthLabel", "previousYearLabel", "nextYearLabel", "hoursLabel", "minutesLabel", "secondsLabel"], outputs: ["valueChange", "gogDateSelect"] }, { 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: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-datepicker', imports: [CalendarComponent, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "@if (inline()) {\n  <!--\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\n    the calendar is its own component rather than markup buried in this one.\n  -->\n  <gog-calendar\n    class=\"gog-datepicker__inline\"\n    [value]=\"value()\"\n    [selectionMode]=\"selectionMode()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [disabledDates]=\"disabledDates()\"\n    [locale]=\"resolvedLocale()\"\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\n    [defaultMonth]=\"defaultMonth()\"\n    [numberOfMonths]=\"numberOfMonths()\"\n    [showTime]=\"showTime()\"\n    [hourFormat]=\"hourFormat()\"\n    [minuteStep]=\"minuteStep()\"\n    [showSeconds]=\"showSeconds()\"\n    [showTodayButton]=\"showTodayButton()\"\n    [showThisMonthButton]=\"showThisMonthButton()\"\n    [todayLabel]=\"todayLabel()\"\n    [thisMonthLabel]=\"thisMonthLabel()\"\n    [size]=\"resolvedSize()\"\n    (valueChange)=\"onCalendarValue($event)\"\n    (gogDateSelect)=\"onCalendarSelect($event)\"\n  />\n} @else {\n  <!--\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n    context, which traps the panel's z-index inside it.\n  -->\n  <div\n    class=\"gog-datepicker\"\n    [class]=\"sizeClass()\"\n    [class.gog-datepicker--clearable]=\"showClear()\"\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\n    [class.gog-datepicker--open]=\"isOpen()\"\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\n  >\n    @if (label() && resolvedFloatLabel() === 'none') {\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\n    }\n\n    <div class=\"gog-datepicker__field\">\n      @if (label() && isFloatLabelActive()) {\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\n          label()\n        }}</label>\n      }\n\n      <input\n        type=\"text\"\n        class=\"gog-datepicker__control\"\n        autocomplete=\"off\"\n        [id]=\"triggerId()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\n        [value]=\"text()\"\n        [placeholder]=\"effectivePlaceholder()\"\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"panelId()\"\n        [attr.aria-invalid]=\"hasError()\"\n        [attr.aria-describedby]=\"errorId()\"\n        (input)=\"onTextInput($event)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      />\n\n      <span class=\"gog-datepicker__actions\">\n        <button\n          type=\"button\"\n          class=\"gog-datepicker__toggle gog-inline-center\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"openCalendarLabel()\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"panelId()\"\n          (click)=\"toggle()\"\n        >\n          <gog-icon name=\"calendar\" />\n        </button>\n\n        @if (showClear()) {\n          <button\n            type=\"button\"\n            class=\"gog-datepicker__clear gog-inline-center\"\n            [attr.aria-label]=\"clearAriaLabel()\"\n            (click)=\"clearValue($event)\"\n          >\n            <gog-icon name=\"close\" />\n          </button>\n        }\n      </span>\n\n      @if (isOpen() && !resolvedAppendToBody()) {\n        <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n      }\n    </div>\n\n    @if (hasError()) {\n      <span class=\"gog-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\n        {{ visibleError() }}\n      </span>\n    }\n  </div>\n}\n\n<!--\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- (click) here is housekeeping stopPropagation, not an interactive handler; the focusable, keyboard-operable elements are the calendar's own grid and buttons -->\n  <div\n    [id]=\"panelId()\"\n    class=\"gog-datepicker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label() || ariaLabel() || openCalendarLabel()\"\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.z-index]=\"dropdownZIndex()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-calendar\n      [value]=\"value()\"\n      [selectionMode]=\"selectionMode()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [disabledDates]=\"disabledDates()\"\n      [locale]=\"resolvedLocale()\"\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\n      [defaultMonth]=\"defaultMonth()\"\n      [numberOfMonths]=\"numberOfMonths()\"\n      [showTime]=\"showTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [minuteStep]=\"minuteStep()\"\n      [showSeconds]=\"showSeconds()\"\n      [showTodayButton]=\"showTodayButton()\"\n      [showThisMonthButton]=\"showThisMonthButton()\"\n      [todayLabel]=\"todayLabel()\"\n      [thisMonthLabel]=\"thisMonthLabel()\"\n      [size]=\"resolvedSize()\"\n      (valueChange)=\"onCalendarValue($event)\"\n      (gogDateSelect)=\"onCalendarSelect($event)\"\n    />\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"] }]
+                    }, template: "@if (inline()) {\r\n  <!--\r\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\r\n    the calendar is its own component rather than markup buried in this one.\r\n  -->\r\n  <gog-calendar\r\n    class=\"gog-datepicker__inline\"\r\n    [value]=\"value()\"\r\n    [selectionMode]=\"selectionMode()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [disabledDates]=\"disabledDates()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n    [defaultMonth]=\"defaultMonth()\"\r\n    [numberOfMonths]=\"numberOfMonths()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [minuteStep]=\"minuteStep()\"\r\n    [showSeconds]=\"showSeconds()\"\r\n    [showTodayButton]=\"showTodayButton()\"\r\n    [showThisMonthButton]=\"showThisMonthButton()\"\r\n    [todayLabel]=\"todayLabel()\"\r\n    [thisMonthLabel]=\"thisMonthLabel()\"\r\n    [size]=\"resolvedSize()\"\r\n    (valueChange)=\"onCalendarValue($event)\"\r\n    (gogDateSelect)=\"onCalendarSelect($event)\"\r\n  />\r\n} @else {\r\n  <!--\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.\r\n  -->\r\n  <div\r\n    class=\"gog-datepicker\"\r\n    [class]=\"sizeClass()\"\r\n    [class.gog-datepicker--clearable]=\"showClear()\"\r\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\r\n    [class.gog-datepicker--open]=\"isOpen()\"\r\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\r\n  >\r\n    @if (label() && resolvedFloatLabel() === 'none') {\r\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n    }\r\n\r\n    <div class=\"gog-datepicker__field\">\r\n      @if (label() && isFloatLabelActive()) {\r\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\r\n          label()\r\n        }}</label>\r\n      }\r\n\r\n      <input\r\n        type=\"text\"\r\n        class=\"gog-datepicker__control\"\r\n        autocomplete=\"off\"\r\n        [id]=\"triggerId()\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\r\n        [value]=\"text()\"\r\n        [placeholder]=\"effectivePlaceholder()\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n        [attr.aria-haspopup]=\"'dialog'\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-controls]=\"panelId()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        (input)=\"onTextInput($event)\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n\r\n      <span class=\"gog-datepicker__actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-datepicker__toggle gog-inline-center\"\r\n          [disabled]=\"isDisabled()\"\r\n          [attr.aria-label]=\"resolvedOpenCalendarLabel()\"\r\n          [attr.aria-expanded]=\"isOpen()\"\r\n          [attr.aria-controls]=\"panelId()\"\r\n          (click)=\"toggle()\"\r\n        >\r\n          <gog-icon name=\"calendar\" />\r\n        </button>\r\n\r\n        @if (showClear()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-datepicker__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      </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-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n        {{ visibleError() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\r\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- (click) here is housekeeping stopPropagation, not an interactive handler; the focusable, keyboard-operable elements are the calendar's own grid and buttons -->\r\n  <div\r\n    [id]=\"panelId()\"\r\n    class=\"gog-datepicker__panel\"\r\n    role=\"dialog\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || resolvedOpenCalendarLabel()\"\r\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\r\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.z-index]=\"dropdownZIndex()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-calendar\r\n      [value]=\"value()\"\r\n      [selectionMode]=\"selectionMode()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [disabledDates]=\"disabledDates()\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n      [defaultMonth]=\"defaultMonth()\"\r\n      [numberOfMonths]=\"numberOfMonths()\"\r\n      [showTime]=\"showTime()\"\r\n      [hourFormat]=\"hourFormat()\"\r\n      [minuteStep]=\"minuteStep()\"\r\n      [showSeconds]=\"showSeconds()\"\r\n      [showTodayButton]=\"showTodayButton()\"\r\n      [showThisMonthButton]=\"showThisMonthButton()\"\r\n      [todayLabel]=\"todayLabel()\"\r\n      [thisMonthLabel]=\"thisMonthLabel()\"\r\n      [size]=\"resolvedSize()\"\r\n      (valueChange)=\"onCalendarValue($event)\"\r\n      (gogDateSelect)=\"onCalendarSelect($event)\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], defaultMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMonth", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showThisMonthButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThisMonthButton", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], thisMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thisMonthLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], allowTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowTextInput", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", 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 }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", 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 }] }] } });
 
 /**
@@ -4076,12 +4254,36 @@ 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';
 class RadioGroupComponent {
-    static nextUid = 0;
-    uid = `gog-radio-group-${++RadioGroupComponent.nextUid}`;
+    uid = nextGogControlId('gog-radio-group');
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -4283,8 +4485,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/** Built-in default, used when neither `DialogConfig` nor `GOG_CONFIG.labels` supplies one. */
+const DEFAULT_CLOSE_LABEL$1 = 'Close dialog';
 class DialogComponent {
     dialogService = inject(DialogService);
+    globalConfig = inject(GOG_CONFIG);
     parentInjector = inject(Injector);
     host = inject((ElementRef));
     injectorCache = new WeakMap();
@@ -4329,6 +4534,10 @@ class DialogComponent {
         }
         return this.injectorCache.get(dialog);
     }
+    /** Per-dialog config → `GOG_CONFIG.labels` → the built-in English default. */
+    closeLabel(dialog) {
+        return resolveConfigured(dialog.config.closeAriaLabel, this.globalConfig.labels?.closeDialog, DEFAULT_CLOSE_LABEL$1);
+    }
     getTitleId(dialog) {
         return `gog-dialog-title-${dialog.id}`;
     }
@@ -4438,13 +4647,15 @@ class DialogComponent {
         return rect.width > 0 && rect.height > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-tooltip-z]=\"panelZ(dialog) + 20\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              aria-label=\"Close dialog\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll\r\n          size=\"thin\"\r\n          [focusable]=\"false\"\r\n          overscrollBehavior=\"contain\"\r\n          class=\"gog-dialog__scroll\"\r\n        >\r\n          <ng-container\r\n            *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\"\r\n          />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-tooltip-z]=\"panelZ(dialog) + 20\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              [attr.aria-label]=\"closeLabel(dialog)\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll\r\n          size=\"thin\"\r\n          [focusable]=\"false\"\r\n          overscrollBehavior=\"contain\"\r\n          class=\"gog-dialog__scroll\"\r\n        >\r\n          <ng-container\r\n            *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\"\r\n          />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-tooltip-z]=\"panelZ(dialog) + 20\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              aria-label=\"Close dialog\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll\r\n          size=\"thin\"\r\n          [focusable]=\"false\"\r\n          overscrollBehavior=\"contain\"\r\n          class=\"gog-dialog__scroll\"\r\n        >\r\n          <ng-container\r\n            *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\"\r\n          />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'gog-dialog', imports: [NgComponentOutlet, IconComponent, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-tooltip-z]=\"panelZ(dialog) + 20\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              [attr.aria-label]=\"closeLabel(dialog)\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll\r\n          size=\"thin\"\r\n          [focusable]=\"false\"\r\n          overscrollBehavior=\"contain\"\r\n          class=\"gog-dialog__scroll\"\r\n        >\r\n          <ng-container\r\n            *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\"\r\n          />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"] }]
         }], ctorParameters: () => [] });
 
+/** Built-in default, used when `GOG_CONFIG.labels.closeToast` is unset. */
+const DEFAULT_CLOSE_LABEL = 'Close toast';
 class ToastComponent {
     toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
     /** Whether this toast is the active, front-of-queue toast — only the front toast counts down. */
@@ -4457,9 +4668,13 @@ class ToastComponent {
     remainingMs = 0;
     isClosing = signal(false, ...(ngDevMode ? [{ debugName: "isClosing" }] : /* istanbul ignore next */ []));
     progressEl = viewChild('progress', ...(ngDevMode ? [{ debugName: "progressEl" }] : /* istanbul ignore next */ []));
+    globalConfig = inject(GOG_CONFIG);
+    /**
+     * `GOG_CONFIG.labels` → the built-in English default. No per-instance input: a toast is
+     * created through `ToastService`, and its close button says the same thing every time.
+     */
+    closeLabel = resolveConfigured(undefined, this.globalConfig.labels?.closeToast, DEFAULT_CLOSE_LABEL);
     hasActions = computed(() => this.toast().actions.length > 0, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
-    ariaRole = computed(() => ['error', 'warning'].includes(this.toast().type) ? 'alert' : 'status', ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
-    ariaLive = computed(() => ['error', 'warning'].includes(this.toast().type) ? 'assertive' : 'polite', ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => this.visible.set(true));
         effect((onCleanup) => {
@@ -4560,15 +4775,11 @@ 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" }, host: { properties: { "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "true" } }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"gog-toast\"\n  [class.gog-toast--paused]=\"isPaused()\"\n  [class.gog-toast--queued]=\"!isFront()\"\n  [class.gog-toast--success]=\"toast().type === 'success'\"\n  [class.gog-toast--error]=\"toast().type === 'error'\"\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\n  [class.gog-toast--info]=\"toast().type === 'info'\"\n  [class.gog-toast--visible]=\"visible()\"\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\n  (mouseenter)=\"pauseAutoDismiss()\"\n  (mouseleave)=\"resumeAutoDismiss()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  <div class=\"gog-toast__content\">\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n    </span>\n    <div class=\"gog-toast__main\">\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\n      @if (hasActions()) {\n        <div class=\"gog-toast__actions\">\n          @for (action of toast().actions; track action.label) {\n            <gog-button\n              class=\"gog-toast__action\"\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (gogClick)=\"runAction(action)\"\n            >\n              @if (action.iconName || action.iconTemplate) {\n                <gog-icon\n                  [template]=\"action.iconTemplate ?? null\"\n                  [name]=\"action.iconName ?? 'check'\"\n                />\n              }\n              {{ action.label }}\n            </gog-button>\n          }\n        </div>\n      }\n    </div>\n    <gog-button\n      class=\"gog-toast__close\"\n      variant=\"ghost\"\n      size=\"sm\"\n      type=\"button\"\n      aria-label=\"Close toast\"\n      (gogClick)=\"close()\"\n    >\n      <gog-icon name=\"close\" />\n    </gog-button>\n  </div>\n  @if (!toast().isSticky) {\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-toast', imports: [ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.role]': 'ariaRole()',
-                        '[attr.aria-live]': 'ariaLive()',
-                        '[attr.aria-atomic]': 'true',
-                    }, template: "<div\n  class=\"gog-toast\"\n  [class.gog-toast--paused]=\"isPaused()\"\n  [class.gog-toast--queued]=\"!isFront()\"\n  [class.gog-toast--success]=\"toast().type === 'success'\"\n  [class.gog-toast--error]=\"toast().type === 'error'\"\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\n  [class.gog-toast--info]=\"toast().type === 'info'\"\n  [class.gog-toast--visible]=\"visible()\"\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\n  (mouseenter)=\"pauseAutoDismiss()\"\n  (mouseleave)=\"resumeAutoDismiss()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  <div class=\"gog-toast__content\">\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n    </span>\n    <div class=\"gog-toast__main\">\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\n      @if (hasActions()) {\n        <div class=\"gog-toast__actions\">\n          @for (action of toast().actions; track action.label) {\n            <gog-button\n              class=\"gog-toast__action\"\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (gogClick)=\"runAction(action)\"\n            >\n              @if (action.iconName || action.iconTemplate) {\n                <gog-icon\n                  [template]=\"action.iconTemplate ?? null\"\n                  [name]=\"action.iconName ?? 'check'\"\n                />\n              }\n              {{ action.label }}\n            </gog-button>\n          }\n        </div>\n      }\n    </div>\n    <gog-button\n      class=\"gog-toast__close\"\n      variant=\"ghost\"\n      size=\"sm\"\n      type=\"button\"\n      aria-label=\"Close toast\"\n      (gogClick)=\"close()\"\n    >\n      <gog-icon name=\"close\" />\n    </gog-button>\n  </div>\n  @if (!toast().isSticky) {\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"] }]
+            args: [{ selector: 'gog-toast', imports: [ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], isFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFront", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], progressEl: [{ type: i0.ViewChild, args: ['progress', { isSignal: true }] }] } });
 
 const DEFAULT_DURATION = 4000;
@@ -4684,6 +4895,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }] });
 
 const POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+/** The two types urgent enough to interrupt whatever the screen reader is currently saying. */
+const ASSERTIVE_TYPES = ['error', 'warning'];
 class ToastContainerComponent {
     toastService = inject(ToastService);
     maxVisiblePerPosition = input(5, ...(ngDevMode ? [{ debugName: "maxVisiblePerPosition" }] : /* istanbul ignore next */ []));
@@ -4696,6 +4909,25 @@ class ToastContainerComponent {
             .filter((toast) => toast.position === position)
             .slice(0, Math.max(0, this.maxVisiblePerPosition())),
     })).filter((group) => group.toasts.length > 0), ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /**
+     * What the two permanently-mounted live regions in the template say right now, split by
+     * urgency. The regions themselves are always in the DOM — that is the whole point of putting
+     * them here rather than on `gog-toast`, whose host element only exists from the moment its
+     * text does, which is exactly the case screen readers miss.
+     *
+     * Derived from `groups()` rather than from the raw service state so that what is announced
+     * matches what is on screen: a toast queued beyond `maxVisiblePerPosition` is not visible yet
+     * and must not be read out yet either.
+     */
+    announcements = computed(() => {
+        const visible = this.groups().flatMap((group) => group.toasts);
+        return {
+            polite: visible.filter((toast) => !ASSERTIVE_TYPES.includes(toast.type)).map(toAnnouncement),
+            assertive: visible
+                .filter((toast) => ASSERTIVE_TYPES.includes(toast.type))
+                .map(toAnnouncement),
+        };
+    }, ...(ngDevMode ? [{ debugName: "announcements" }] : /* istanbul ignore next */ []));
     trackGroup(_, group) {
         return group.position;
     }
@@ -4705,20 +4937,42 @@ class ToastContainerComponent {
     trackToast(_, toast) {
         return toast.id;
     }
+    trackAnnouncement(_, announcement) {
+        return announcement.key;
+    }
     dismiss(id) {
         this.toastService.dismiss(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastContainerComponent, isStandalone: true, selector: "gog-toast-container", inputs: { maxVisiblePerPosition: { classPropertyName: "maxVisiblePerPosition", publicName: "maxVisiblePerPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (group of groups(); track trackGroup($index, group)) {\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\n      <gog-toast\n        [toast]=\"toast\"\n        [isFront]=\"toastIndex === 0\"\n        [class.slide-left]=\"isLeft(group.position)\"\n        [style.--toast-stack-index]=\"toastIndex\"\n        (dismissed)=\"dismiss($event)\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "gog-toast", inputs: ["toast", "isFront"], outputs: ["dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastContainerComponent, isStandalone: true, selector: "gog-toast-container", inputs: { maxVisiblePerPosition: { classPropertyName: "maxVisiblePerPosition", publicName: "maxVisiblePerPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\r\n  Both regions stay mounted for the lifetime of the container, empty or not, so a screen reader\r\n  has already picked them up by the time a message lands inside one. `aria-atomic=\"false\"` so\r\n  only the newly added line is read, not the whole open stack again on every arrival.\r\n-->\r\n<div class=\"gog-visually-hidden\" aria-live=\"polite\" aria-atomic=\"false\">\r\n  @for (announcement of announcements().polite; track trackAnnouncement($index, announcement)) {\r\n    <p>{{ announcement.message }}</p>\r\n  }\r\n</div>\r\n<div class=\"gog-visually-hidden\" aria-live=\"assertive\" aria-atomic=\"false\">\r\n  @for (announcement of announcements().assertive; track trackAnnouncement($index, announcement)) {\r\n    <p>{{ announcement.message }}</p>\r\n  }\r\n</div>\r\n\r\n@for (group of groups(); track trackGroup($index, group)) {\r\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\r\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\r\n      <gog-toast\r\n        [toast]=\"toast\"\r\n        [isFront]=\"toastIndex === 0\"\r\n        [class.slide-left]=\"isLeft(group.position)\"\r\n        [style.--toast-stack-index]=\"toastIndex\"\r\n        (dismissed)=\"dismiss($event)\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "gog-toast", inputs: ["toast", "isFront"], outputs: ["dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-toast-container', imports: [ToastComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of groups(); track trackGroup($index, group)) {\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\n      <gog-toast\n        [toast]=\"toast\"\n        [isFront]=\"toastIndex === 0\"\n        [class.slide-left]=\"isLeft(group.position)\"\n        [style.--toast-stack-index]=\"toastIndex\"\n        (dismissed)=\"dismiss($event)\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"] }]
+            args: [{ selector: 'gog-toast-container', imports: [ToastComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n  Both regions stay mounted for the lifetime of the container, empty or not, so a screen reader\r\n  has already picked them up by the time a message lands inside one. `aria-atomic=\"false\"` so\r\n  only the newly added line is read, not the whole open stack again on every arrival.\r\n-->\r\n<div class=\"gog-visually-hidden\" aria-live=\"polite\" aria-atomic=\"false\">\r\n  @for (announcement of announcements().polite; track trackAnnouncement($index, announcement)) {\r\n    <p>{{ announcement.message }}</p>\r\n  }\r\n</div>\r\n<div class=\"gog-visually-hidden\" aria-live=\"assertive\" aria-atomic=\"false\">\r\n  @for (announcement of announcements().assertive; track trackAnnouncement($index, announcement)) {\r\n    <p>{{ announcement.message }}</p>\r\n  }\r\n</div>\r\n\r\n@for (group of groups(); track trackGroup($index, group)) {\r\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\r\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\r\n      <gog-toast\r\n        [toast]=\"toast\"\r\n        [isFront]=\"toastIndex === 0\"\r\n        [class.slide-left]=\"isLeft(group.position)\"\r\n        [style.--toast-stack-index]=\"toastIndex\"\r\n        (dismissed)=\"dismiss($event)\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"] }]
         }], propDecorators: { maxVisiblePerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePerPosition", required: false }] }] } });
+function toAnnouncement(toast) {
+    return { key: `${toast.id}:${toast.revision}`, message: toast.message };
+}
 
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SIZE$1 = 'md';
 const DEFAULT_ERROR_DISPLAY$2 = 'manual';
+const DEFAULT_SHOW_SPIN_BUTTONS = true;
+const DEFAULT_LABELS$1 = {
+    clear: 'Clear',
+    increment: 'Increment',
+    decrement: 'Decrement',
+    showPassword: 'Show password',
+    hidePassword: 'Hide password',
+};
+/** Native `stepUp()`/`stepDown()` default when `step` is left unset. */
+const DEFAULT_STEP = 1;
+/** Rounds to `step`'s own decimal precision, so e.g. repeated `0.1` steps don't drift to
+ * `0.30000000000000004`. */
+function roundToStep(value, step) {
+    const decimals = (String(step).split('.')[1] ?? '').length;
+    return decimals === 0 ? Math.round(value) : Number(value.toFixed(decimals));
+}
 /**
  * Arbitrary markup in the field's leading slot — an icon, a button, a prefix label:
  *
@@ -4764,15 +5018,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 class InputfieldComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** See `GogInputType` for why this is a subset of the native `type` list. */
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /** Defaults to 'current-password' for password fields, 'off' otherwise */
     autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /**
+     * Native `readonly`: the value is still selectable, focusable and submitted with the form, but
+     * cannot be edited. Distinct from `disabled`, which also takes the field out of the tab order,
+     * greys it out and drops it from form submission.
+     *
+     * Suppresses the clear button and the number field's spin buttons for as long as it is on —
+     * both promise an edit the field would refuse.
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Native `maxlength`. Unset (`null`), no limit is applied. */
+    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+    /** Native `minlength`. Unset (`null`), no minimum is applied. */
+    minlength = input(null, ...(ngDevMode ? [{ debugName: "minlength" }] : /* istanbul ignore next */ []));
+    /** Native `pattern`, as a regular-expression source string. Unset (`''`), nothing is applied. */
+    pattern = input('', ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    /**
+     * Native `inputmode` — see `GogInputMode`. Unset, the browser infers a keyboard from `type`.
+     */
+    inputMode = input(null, ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Native `spellcheck`. Unset (`null`), the browser's own default applies; set `false` on
+     * fields holding names, codes or identifiers, where the red underline is noise.
+     */
+    spellcheck = input(null, ...(ngDevMode ? [{ debugName: "spellcheck" }] : /* istanbul ignore next */ []));
     /** Only applied when `type="number"`. */
     min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     /** Only applied when `type="number"`. */
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     /** Only applied when `type="number"`. */
     step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a `type="number"` field shows the library's own increment/decrement buttons in
+     * place of the browser's native (and inconsistently-styled across platforms) spin glyphs.
+     * The native glyphs are always hidden on a number field regardless of this — off just means
+     * no stepper UI at all, not a fallback to the native one. Arrow-key stepping on the focused
+     * field keeps working either way; that's native `<input type="number">` behaviour, unrelated
+     * to which glyphs are visible. Unset, falls back to `GOG_CONFIG.inputfield.showSpinButtons`,
+     * then to `true`.
+     */
+    showSpinButtons = input(undefined, ...(ngDevMode ? [{ debugName: "showSpinButtons" }] : /* istanbul ignore next */ []));
+    /** aria-label for the number field's increment button. Unset, falls back to `GOG_CONFIG.labels.increment`. */
+    incrementLabel = input(undefined, ...(ngDevMode ? [{ debugName: "incrementLabel" }] : /* istanbul ignore next */ []));
+    /** aria-label for the number field's decrement button. Unset, falls back to `GOG_CONFIG.labels.decrement`. */
+    decrementLabel = input(undefined, ...(ngDevMode ? [{ debugName: "decrementLabel" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     /**
      * See `GogErrorDisplay`. Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to
@@ -4780,6 +5073,12 @@ class InputfieldComponent {
      */
     errorDisplay = input(undefined, ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * The `<input>`'s `id`. Left unset, the field generates one — the label's `for` and the error
+     * message's `aria-describedby` both need a real id, and a field that is silently unlabelled
+     * without one is the wrong default. Set this only when something outside the component has to
+     * reference the input by a known id.
+     */
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
@@ -4819,17 +5118,17 @@ class InputfieldComponent {
      * @deprecated since 21.3.0 (2026-08-07) — project a `<button gogInputAddonEnd>` element instead. Removed in 21.5.0. Put `aria-label` on that button.
      */
     iconEndLabel = input('', ...(ngDevMode ? [{ debugName: "iconEndLabel" }] : /* istanbul ignore next */ []));
-    /** aria-label for the reveal-password button, shown when `type` is `'password'` */
-    showPasswordLabel = input('Show password', ...(ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []));
-    /** aria-label for the hide-password button, shown once the password is revealed */
-    hidePasswordLabel = input('Hide password', ...(ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []));
+    /** aria-label for the reveal-password button, shown when `type` is `'password'`. Unset, falls back to `GOG_CONFIG.labels.showPassword`. */
+    showPasswordLabel = input(undefined, ...(ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []));
+    /** aria-label for the hide-password button, shown once the password is revealed. Unset, falls back to `GOG_CONFIG.labels.hidePassword`. */
+    hidePasswordLabel = input(undefined, ...(ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []));
     /**
      * Whether to offer a clear button once the field has text. Unset, falls back to
      * `GOG_CONFIG.control.clearable`, then to `false`.
      */
     clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the clear button. */
-    clearAriaLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the clear button. Unset, falls back to `GOG_CONFIG.labels.clear`. */
+    clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.floatLabel.variant`, then to `'none'` (off). */
     floatLabel = input(undefined, ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.floatLabel.showPlaceholder`, then to `false`. */
@@ -4856,19 +5155,55 @@ class InputfieldComponent {
      * Empty for `'md'`: that is this component's default size and has no modifier rule of its own — every `gog-input-wrapper--*` chain bottoms out at it.
      */
     sizeClass = computed(() => this.resolvedSize() === 'md' ? '' : `gog-input-wrapper--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
+    resolvedClearLabel = computed(() => resolveConfigured(this.clearAriaLabel(), this.globalConfig.labels?.clear, DEFAULT_LABELS$1.clear), ...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
+    resolvedIncrementLabel = computed(() => resolveConfigured(this.incrementLabel(), this.globalConfig.labels?.increment, DEFAULT_LABELS$1.increment), ...(ngDevMode ? [{ debugName: "resolvedIncrementLabel" }] : /* istanbul ignore next */ []));
+    resolvedDecrementLabel = computed(() => resolveConfigured(this.decrementLabel(), this.globalConfig.labels?.decrement, DEFAULT_LABELS$1.decrement), ...(ngDevMode ? [{ debugName: "resolvedDecrementLabel" }] : /* istanbul ignore next */ []));
+    resolvedShowSpinButtons = computed(() => resolveConfigured(this.showSpinButtons(), this.globalConfig.inputfield?.showSpinButtons, DEFAULT_SHOW_SPIN_BUTTONS), ...(ngDevMode ? [{ debugName: "resolvedShowSpinButtons" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Disabled and read-only both refuse edits; the affordances that offer one key off this. */
+    isNotEditable = computed(() => this.isDisabled() || this.readonly(), ...(ngDevMode ? [{ debugName: "isNotEditable" }] : /* istanbul ignore next */ []));
     isPasswordField = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordField" }] : /* istanbul ignore next */ []));
     isNumberField = computed(() => this.type() === 'number', ...(ngDevMode ? [{ debugName: "isNumberField" }] : /* istanbul ignore next */ []));
+    hasSpinButtons = computed(() => this.isNumberField() && this.resolvedShowSpinButtons() && !this.readonly(), ...(ngDevMode ? [{ debugName: "hasSpinButtons" }] : /* istanbul ignore next */ []));
+    /** Current field value as a number, or `null` while empty. */
+    numericValue = computed(() => this.value() === '' ? null : Number(this.value()), ...(ngDevMode ? [{ debugName: "numericValue" }] : /* istanbul ignore next */ []));
+    isAtMin = computed(() => {
+        const min = this.min();
+        const current = this.numericValue();
+        return min !== null && current !== null && current <= min;
+    }, ...(ngDevMode ? [{ debugName: "isAtMin" }] : /* istanbul ignore next */ []));
+    isAtMax = computed(() => {
+        const max = this.max();
+        const current = this.numericValue();
+        return max !== null && current !== null && current >= max;
+    }, ...(ngDevMode ? [{ debugName: "isAtMax" }] : /* istanbul ignore next */ []));
     effectiveType = computed(() => this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
     effectiveAutocomplete = computed(() => this.autocomplete() || (this.type() === 'password' ? 'current-password' : 'off'), ...(ngDevMode ? [{ debugName: "effectiveAutocomplete" }] : /* istanbul ignore next */ []));
     hasError = this.errorState.hasError;
     visibleError = this.errorState.visibleError;
+    /** Fallback id, generated once per instance — see `resolvedInputId`. */
+    autoId = nextGogControlId('gog-input');
+    /** The consumer's `inputId` when given, otherwise the generated one. Never empty. */
+    resolvedInputId = computed(() => this.inputId() || this.autoId, ...(ngDevMode ? [{ debugName: "resolvedInputId" }] : /* istanbul ignore next */ []));
+    /**
+     * Only non-null while the error element is actually rendered — the template renders it on
+     * `visibleError()`, and an `aria-describedby` pointing at an id that isn't in the DOM is worse
+     * than none at all.
+     */
+    errorId = computed(() => this.visibleError() ? `${this.resolvedInputId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     floatLabelState = new GogFloatLabelState(this.floatLabel, this.floatLabelShowPlaceholder, this.placeholder, this.isFocused, 
     // "Has content" for a text field is simply a non-empty value.
     computed(() => this.value() !== ''), this.globalConfig);
-    clearableState = new GogClearableState(this.clearable, computed(() => this.value() !== ''), this.isDisabled, this.globalConfig, () => false);
+    clearableState = new GogClearableState(this.clearable, computed(() => this.value() !== ''), this.isNotEditable, this.globalConfig, () => false);
     /** Whether to render the clear button right now — see `GogClearableState`. */
     showClear = this.clearableState.isVisible;
+    /**
+     * Both the stepper and the clear button are on screen — only possible on a `clearable`
+     * number field with a value. Drives `.gog-input-wrapper--spin-clear`, which widens the end
+     * gutter and shifts the clear button clear of the stepper; without it the two overlap.
+     */
+    hasSpinAndClear = computed(() => this.hasSpinButtons() && this.showClear() && !this.isPasswordField(), ...(ngDevMode ? [{ debugName: "hasSpinAndClear" }] : /* istanbul ignore next */ []));
     resolvedFloatLabel = this.floatLabelState.variant;
     isFloatLabelActive = this.floatLabelState.isActive;
     isFloatLabelFloated = this.floatLabelState.isFloated;
@@ -4885,11 +5220,13 @@ class InputfieldComponent {
     hasIconStartAction = computed(() => !!this.iconStartFn(), ...(ngDevMode ? [{ debugName: "hasIconStartAction" }] : /* istanbul ignore next */ []));
     /** For password fields the trailing icon is always the built-in show/hide toggle. */
     effectiveIconEnd = computed(() => this.isPasswordField() ? (this.passwordVisible() ? 'eye-off' : 'eye') : this.iconEnd(), ...(ngDevMode ? [{ debugName: "effectiveIconEnd" }] : /* istanbul ignore next */ []));
-    effectiveIconEndLabel = computed(() => this.isPasswordField()
-        ? this.passwordVisible()
-            ? this.hidePasswordLabel()
-            : this.showPasswordLabel()
-        : this.iconEndLabel(), ...(ngDevMode ? [{ debugName: "effectiveIconEndLabel" }] : /* istanbul ignore next */ []));
+    effectiveIconEndLabel = computed(() => {
+        if (!this.isPasswordField())
+            return this.iconEndLabel();
+        return this.passwordVisible()
+            ? resolveConfigured(this.hidePasswordLabel(), this.globalConfig.labels?.hidePassword, DEFAULT_LABELS$1.hidePassword)
+            : resolveConfigured(this.showPasswordLabel(), this.globalConfig.labels?.showPassword, DEFAULT_LABELS$1.showPassword);
+    }, ...(ngDevMode ? [{ debugName: "effectiveIconEndLabel" }] : /* istanbul ignore next */ []));
     hasIconEnd = computed(() => this.showClear() ||
         !!this.addonEnd() ||
         !!this.iconEndTemplate() ||
@@ -4940,12 +5277,35 @@ class InputfieldComponent {
         }
         this._onChange(input.value);
     }
-    /** Clears the field and notifies any attached form, then returns focus to the input. */
+    /** Increments (`direction: 1`) or decrements (`direction: -1`) by `step`, clamped to min/max. */
+    stepValue(direction) {
+        if (this.isNotEditable())
+            return;
+        const step = this.step() ?? DEFAULT_STEP;
+        const current = this.numericValue() ?? this.min() ?? 0;
+        let next = roundToStep(current + direction * step, step);
+        const min = this.min();
+        const max = this.max();
+        if (min !== null)
+            next = Math.max(next, min);
+        if (max !== null)
+            next = Math.min(next, max);
+        this.value.set(String(next));
+        this._onChange(next);
+    }
+    /**
+     * Clears the field and notifies any attached form.
+     *
+     * The value written to the form control has to match what `onInput` writes when the user
+     * empties the field by hand — `null` for a number field, `''` otherwise. Emitting `''` for a
+     * number field put a string into a control typed `number | null`, which then failed
+     * `Validators.min`-style checks and round-tripped the wrong type to the server.
+     */
     clearValue(event) {
         event.preventDefault();
         event.stopPropagation();
         this.value.set('');
-        this._onChange('');
+        this._onChange(this.isNumberField() ? null : '');
         this._onTouched();
     }
     onFocus() {
@@ -4956,7 +5316,7 @@ class InputfieldComponent {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, queries: [{ propertyName: "addonStart", first: true, predicate: GogInputAddonStartDirective, descendants: true, isSignal: true }, { propertyName: "addonEnd", first: true, predicate: GogInputAddonEndDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"inputId() || null\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    @if (addonStart()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonStart]\" />\r\n      </span>\r\n    } @else if (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <!--\r\n      A password field's built-in show/hide toggle owns the end slot: it is the only control\r\n      that reveals the value, so a projected addon must not be able to displace it.\r\n    -->\r\n    @if (showClear() && !isPasswordField()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action gog-input__clear\"\r\n        [attr.aria-label]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else if (addonEnd() && !isPasswordField()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonEnd]\" />\r\n      </span>\r\n    } @else if (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n          (click)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field-container{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field-container{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__addon{pointer-events:auto}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__label--float{position:absolute;left:var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding);transform:none}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);transform:translateY(0);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;left:calc(var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showSpinButtons: { classPropertyName: "showSpinButtons", publicName: "showSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, queries: [{ propertyName: "addonStart", first: true, predicate: GogInputAddonStartDirective, descendants: true, isSignal: true }, { propertyName: "addonEnd", first: true, predicate: GogInputAddonEndDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd() || hasSpinButtons()\"\r\n  [class.gog-input-wrapper--spin-clear]=\"hasSpinAndClear()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    @if (addonStart()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonStart]\" />\r\n      </span>\r\n    } @else if (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-input__field--spin-hidden]=\"isNumberField()\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.maxlength]=\"maxlength()\"\r\n      [attr.minlength]=\"minlength()\"\r\n      [attr.pattern]=\"pattern() || null\"\r\n      [attr.inputmode]=\"inputMode()\"\r\n      [attr.spellcheck]=\"spellcheck()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <!--\r\n      A password field's built-in show/hide toggle owns the end slot: it is the only control\r\n      that reveals the value, so a projected addon must not be able to displace it.\r\n    -->\r\n    @if (hasSpinButtons()) {\r\n      <span class=\"gog-input__spin\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--up\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedIncrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMax()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(1)\"\r\n        >\r\n          <gog-icon name=\"chevron-up\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--down\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedDecrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMin()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(-1)\"\r\n        >\r\n          <gog-icon name=\"chevron-down\" />\r\n        </button>\r\n      </span>\r\n    }\r\n    <!--\r\n      The clear button sits outside the stepper's `@if` rather than in an `@else` branch: on a\r\n      number field the two have to coexist, and the stepper owns the field's right edge while\r\n      the clear button shifts left of it (`--spin-clear` on the wrapper widens the gutter). It\r\n      still outranks a projected addon or a decorative end icon \u2014 those share one slot with it\r\n      and only get it when there is nothing to clear.\r\n    -->\r\n    @if (showClear() && !isPasswordField()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action gog-input__clear\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else if (!hasSpinButtons()) {\r\n      @if (addonEnd() && !isPasswordField()) {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__addon\">\r\n          <ng-content select=\"[gogInputAddonEnd]\" />\r\n        </span>\r\n      } @else if (hasIconEnd()) {\r\n        @if (hasIconEndAction()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n            [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n            (click)=\"onIconEndClick()\"\r\n          >\r\n            <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n            <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n          </span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field-container{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field-container{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--spin-clear .gog-input__field-container{--gog-input-pr: calc( var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset)) + var(--gog-input-spin-width) )}.gog-input-wrapper--spin-clear .gog-input__clear{right:calc(var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset)) + var(--gog-input-spin-width))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__addon{pointer-events:auto}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__field--spin-hidden::-webkit-inner-spin-button,.gog-input__field--spin-hidden::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.gog-input__field--spin-hidden{appearance:textfield;-moz-appearance:textfield}.gog-input__spin{position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;pointer-events:auto;border-inline-start:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn{display:flex;flex:1 1 0;align-items:center;justify-content:center;width:var(--gog-input-spin-width);padding:0;border:none;background:none;color:var(--gog-input-icon-color);line-height:0;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__spin-btn--up{border-start-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width));border-block-end:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn--down{border-end-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width))}.gog-input__spin-btn gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * .7)}.gog-input__spin-btn:hover:not(:disabled){color:var(--gog-input-icon-hover-color);background-color:var(--gog-input-spin-hover-bg)}.gog-input__spin-btn:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:calc(-1 * var(--gog-input-icon-focus-ring-width))}.gog-input__spin-btn:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__label--float{position:absolute;left:var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding);transform:none}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);transform:translateY(0);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;left:calc(var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, decorators: [{
             type: Component,
@@ -4966,12 +5326,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // full-width class: this field is full width by default, so the class only appears
                         // once a consumer opts *out* of that.
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"inputId() || null\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    @if (addonStart()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonStart]\" />\r\n      </span>\r\n    } @else if (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <!--\r\n      A password field's built-in show/hide toggle owns the end slot: it is the only control\r\n      that reveals the value, so a projected addon must not be able to displace it.\r\n    -->\r\n    @if (showClear() && !isPasswordField()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action gog-input__clear\"\r\n        [attr.aria-label]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else if (addonEnd() && !isPasswordField()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonEnd]\" />\r\n      </span>\r\n    } @else if (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n          (click)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field-container{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field-container{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__addon{pointer-events:auto}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__label--float{position:absolute;left:var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding);transform:none}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);transform:translateY(0);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;left:calc(var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], addonStart: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogInputAddonStartDirective), { isSignal: true }] }], addonEnd: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogInputAddonEndDirective), { isSignal: true }] }] } });
+                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd() || hasSpinButtons()\"\r\n  [class.gog-input-wrapper--spin-clear]=\"hasSpinAndClear()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    @if (addonStart()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonStart]\" />\r\n      </span>\r\n    } @else if (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-input__field--spin-hidden]=\"isNumberField()\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.maxlength]=\"maxlength()\"\r\n      [attr.minlength]=\"minlength()\"\r\n      [attr.pattern]=\"pattern() || null\"\r\n      [attr.inputmode]=\"inputMode()\"\r\n      [attr.spellcheck]=\"spellcheck()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <!--\r\n      A password field's built-in show/hide toggle owns the end slot: it is the only control\r\n      that reveals the value, so a projected addon must not be able to displace it.\r\n    -->\r\n    @if (hasSpinButtons()) {\r\n      <span class=\"gog-input__spin\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--up\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedIncrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMax()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(1)\"\r\n        >\r\n          <gog-icon name=\"chevron-up\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--down\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedDecrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMin()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(-1)\"\r\n        >\r\n          <gog-icon name=\"chevron-down\" />\r\n        </button>\r\n      </span>\r\n    }\r\n    <!--\r\n      The clear button sits outside the stepper's `@if` rather than in an `@else` branch: on a\r\n      number field the two have to coexist, and the stepper owns the field's right edge while\r\n      the clear button shifts left of it (`--spin-clear` on the wrapper widens the gutter). It\r\n      still outranks a projected addon or a decorative end icon \u2014 those share one slot with it\r\n      and only get it when there is nothing to clear.\r\n    -->\r\n    @if (showClear() && !isPasswordField()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action gog-input__clear\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else if (!hasSpinButtons()) {\r\n      @if (addonEnd() && !isPasswordField()) {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__addon\">\r\n          <ng-content select=\"[gogInputAddonEnd]\" />\r\n        </span>\r\n      } @else if (hasIconEnd()) {\r\n        @if (hasIconEndAction()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n            [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n            (click)=\"onIconEndClick()\"\r\n          >\r\n            <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n            <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n          </span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field-container{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field-container{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--spin-clear .gog-input__field-container{--gog-input-pr: calc( var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset)) + var(--gog-input-spin-width) )}.gog-input-wrapper--spin-clear .gog-input__clear{right:calc(var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset)) + var(--gog-input-spin-width))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__addon{pointer-events:auto}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__field--spin-hidden::-webkit-inner-spin-button,.gog-input__field--spin-hidden::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.gog-input__field--spin-hidden{appearance:textfield;-moz-appearance:textfield}.gog-input__spin{position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;pointer-events:auto;border-inline-start:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn{display:flex;flex:1 1 0;align-items:center;justify-content:center;width:var(--gog-input-spin-width);padding:0;border:none;background:none;color:var(--gog-input-icon-color);line-height:0;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__spin-btn--up{border-start-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width));border-block-end:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn--down{border-end-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width))}.gog-input__spin-btn gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * .7)}.gog-input__spin-btn:hover:not(:disabled){color:var(--gog-input-icon-hover-color);background-color:var(--gog-input-spin-hover-bg)}.gog-input__spin-btn:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:calc(-1 * var(--gog-input-icon-focus-ring-width))}.gog-input__spin-btn:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__label--float{position:absolute;left:var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding);transform:none}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);transform:translateY(0);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;left:calc(var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpinButtons", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], addonStart: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogInputAddonStartDirective), { isSignal: true }] }], addonEnd: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogInputAddonEndDirective), { isSignal: true }] }] } });
 
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SIZE = 'md';
 const DEFAULT_ERROR_DISPLAY$1 = 'manual';
+/** Matches the native `<textarea>`'s own out-of-the-box behaviour. */
+const DEFAULT_RESIZE = 'vertical';
+const DEFAULT_CLEAR_LABEL = 'Clear';
 class TextareaComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -4982,12 +5345,35 @@ class TextareaComponent {
      */
     errorDisplay = input(undefined, ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * The `<textarea>`'s `id`. Left unset, the field generates one — see
+     * `gog-inputfield`'s own `inputId` for why that is the default rather than an opt-in.
+     */
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Native `readonly` — see `gog-inputfield`'s own `readonly` for how it differs from
+     * `disabled`. Suppresses the clear button while on.
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Native `rows` attribute, controlling the field's initial height. */
     rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Native `maxlength`. Unset (`null`), no limit is applied. */
+    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+    /** Native `minlength`. Unset (`null`), no minimum is applied. */
+    minlength = input(null, ...(ngDevMode ? [{ debugName: "minlength" }] : /* istanbul ignore next */ []));
+    /** Native `spellcheck`. Unset (`null`), the browser's own default applies. */
+    spellcheck = input(null, ...(ngDevMode ? [{ debugName: "spellcheck" }] : /* istanbul ignore next */ []));
+    /**
+     * Which direction(s) the field's own drag handle resizes it in — matches the native CSS
+     * `resize` value space (`'vertical'`, `'horizontal'`, `'both'`, `'none'`). Unset, falls back
+     * to `GOG_CONFIG.textarea.resize`, then to `'vertical'`, matching a plain `<textarea>`. The
+     * handle itself is restyled to be more visible than the browser's default glyph; `'none'`
+     * removes it entirely.
+     */
+    resize = input(undefined, ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
     /**
      * Full width of the container by default, matching every other field-style control.
      * Set to `false` to shrink the field to fit its content instead.
@@ -4998,8 +5384,8 @@ class TextareaComponent {
      * `GOG_CONFIG.control.clearable`, then to `false`.
      */
     clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the clear button. */
-    clearAriaLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the clear button. Unset, falls back to `GOG_CONFIG.labels.clear`. */
+    clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.floatLabel.variant`, then to `'none'` (off). */
     floatLabel = input(undefined, ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
     /** Unset, falls back to `GOG_CONFIG.floatLabel.showPlaceholder`, then to `false`. */
@@ -5008,9 +5394,11 @@ class TextareaComponent {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     ngControl = inject(NgControl, { optional: true, self: true });
     globalConfig = inject(GOG_CONFIG);
+    destroyRef = inject(DestroyRef);
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* 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), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedResize = computed(() => resolveConfigured(this.resize(), this.globalConfig.textarea?.resize, DEFAULT_RESIZE), ...(ngDevMode ? [{ debugName: "resolvedResize" }] : /* istanbul ignore next */ []));
     resolvedErrorDisplay = computed(() => resolveConfigured(this.errorDisplay(), this.globalConfig.control?.errorDisplay, DEFAULT_ERROR_DISPLAY$1), ...(ngDevMode ? [{ debugName: "resolvedErrorDisplay" }] : /* istanbul ignore next */ []));
     errorState = new GogErrorState(this.errorMessage, this.resolvedErrorDisplay, this.ngControl);
     /** Set from `(focus)`/`(blur)` on the `<textarea>` — see `onFocus`/`onBlur`. */
@@ -5025,18 +5413,37 @@ class TextareaComponent {
      * isn't scrolling, which shifts the resting layout of every textarea.
      */
     scrollbarWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * How far the field's own right/bottom edge currently sits from its container's — 0 unless
+     * the user has dragged the resize handle to make the field narrower/shorter than its
+     * container. The resize grip is anchored to the container (a `<textarea>` can't reliably
+     * host `::after`), so without this it stays put at the container's original corner instead
+     * of following the field's own as it's resized.
+     */
+    resizeInsetRight = signal(0, ...(ngDevMode ? [{ debugName: "resizeInsetRight" }] : /* istanbul ignore next */ []));
+    resizeInsetBottom = signal(0, ...(ngDevMode ? [{ debugName: "resizeInsetBottom" }] : /* istanbul ignore next */ []));
     /**
      * The single size modifier, replacing one `[class.gog-input-wrapper--<size>]` binding per size.
      * Empty for `'md'`: that is this component's default size and has no modifier rule of its own — every `gog-input-wrapper--*` chain bottoms out at it.
      */
     sizeClass = computed(() => this.resolvedSize() === 'md' ? '' : `gog-input-wrapper--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Disabled and read-only both refuse edits — see `gog-inputfield`. */
+    isNotEditable = computed(() => this.isDisabled() || this.readonly(), ...(ngDevMode ? [{ debugName: "isNotEditable" }] : /* istanbul ignore next */ []));
+    /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
+    resolvedClearLabel = computed(() => resolveConfigured(this.clearAriaLabel(), this.globalConfig.labels?.clear, DEFAULT_CLEAR_LABEL), ...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
     hasError = this.errorState.hasError;
     visibleError = this.errorState.visibleError;
+    /** Fallback id, generated once per instance — see `resolvedInputId`. */
+    autoId = nextGogControlId('gog-textarea');
+    /** The consumer's `inputId` when given, otherwise the generated one. Never empty. */
+    resolvedInputId = computed(() => this.inputId() || this.autoId, ...(ngDevMode ? [{ debugName: "resolvedInputId" }] : /* istanbul ignore next */ []));
+    /** Non-null only while the error element is actually rendered — see `gog-inputfield`. */
+    errorId = computed(() => this.visibleError() ? `${this.resolvedInputId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     floatLabelState = new GogFloatLabelState(this.floatLabel, this.floatLabelShowPlaceholder, this.placeholder, this.isFocused, 
     // "Has content" for a textarea is simply a non-empty value.
     computed(() => this.value() !== ''), this.globalConfig);
-    clearableState = new GogClearableState(this.clearable, computed(() => this.value() !== ''), this.isDisabled, this.globalConfig, () => false);
+    clearableState = new GogClearableState(this.clearable, computed(() => this.value() !== ''), this.isNotEditable, this.globalConfig, () => false);
     /** Whether to render the clear button right now — see `GogClearableState`. */
     showClear = this.clearableState.isVisible;
     resolvedFloatLabel = this.floatLabelState.variant;
@@ -5054,6 +5461,25 @@ class TextareaComponent {
             this.value();
             this.scrollbarWidth.set(el.offsetWidth - el.clientWidth);
         });
+        // Tracks manual drags of the resize handle — see `resizeInsetRight`/`resizeInsetBottom`.
+        // A plain `afterRenderEffect` can't see this: dragging the handle doesn't touch any
+        // Angular-owned state, so nothing would ever re-run it; a `ResizeObserver` is the only
+        // thing that actually notices the field's own box changing size.
+        afterNextRender(() => {
+            const el = this.fieldRef().nativeElement;
+            const container = el.parentElement;
+            // Not implemented by jsdom (so: absent in unit tests) and by very old browsers, which
+            // then simply keep the field glued to the container's own corner, as before this input.
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const measure = () => {
+                this.resizeInsetRight.set(Math.max(0, container.clientWidth - el.offsetWidth));
+                this.resizeInsetBottom.set(Math.max(0, container.clientHeight - el.offsetHeight));
+            };
+            const observer = new ResizeObserver(measure);
+            observer.observe(el);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
         // Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
         // available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
         // injecting NgControl would be a dependency cycle.
@@ -5097,7 +5523,7 @@ class TextareaComponent {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "gog-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"inputId() || null\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <textarea\r\n      #field\r\n      class=\"gog-input__field gog-textarea__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [rows]=\"rows()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    ></textarea>\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n        [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n        [attr.aria-label]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__field{resize:vertical;min-height:2.5em;line-height:1.5}.gog-input__field-container{position:relative}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size)}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__label--float{position:absolute;left:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;left:calc(var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);right:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "gog-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", 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 }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n  }\r\n  <div\r\n    class=\"gog-input__field-container\"\r\n    [class.gog-input__field-container--resizable]=\"resolvedResize() !== 'none' && !isDisabled()\"\r\n    [style.--gog-textarea-resize-inset-right.px]=\"resizeInsetRight()\"\r\n    [style.--gog-textarea-resize-inset-bottom.px]=\"resizeInsetBottom()\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <textarea\r\n      #field\r\n      class=\"gog-input__field gog-textarea__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-textarea__field--resize-vertical]=\"resolvedResize() === 'vertical'\"\r\n      [class.gog-textarea__field--resize-horizontal]=\"resolvedResize() === 'horizontal'\"\r\n      [class.gog-textarea__field--resize-both]=\"resolvedResize() === 'both'\"\r\n      [class.gog-textarea__field--resize-none]=\"resolvedResize() === 'none'\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [rows]=\"rows()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n      [attr.maxlength]=\"maxlength()\"\r\n      [attr.minlength]=\"minlength()\"\r\n      [attr.spellcheck]=\"spellcheck()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    ></textarea>\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n        [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\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  </div>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__field{display:block;min-height:2.5em;line-height:1.5}.gog-textarea__field::-webkit-resizer{background:transparent}.gog-textarea__field--resize-vertical{resize:vertical}.gog-textarea__field--resize-horizontal{resize:horizontal}.gog-textarea__field--resize-both{resize:both}.gog-textarea__field--resize-none{resize:none}.gog-input__field-container{position:relative}.gog-input__field-container--resizable:after{content:\"\";position:absolute;right:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-right));bottom:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-bottom));width:var(--gog-textarea-resize-grip-size);height:var(--gog-textarea-resize-grip-size);clip-path:polygon(100% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(135deg,transparent 0 var(--gog-textarea-resize-grip-stripe-gap),var(--gog-textarea-resize-grip-color) var(--gog-textarea-resize-grip-stripe-gap) calc(var(--gog-textarea-resize-grip-stripe-gap) + var(--gog-textarea-resize-grip-stripe-width)));opacity:var(--gog-textarea-resize-grip-opacity);pointer-events:none}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size)}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__label--float{position:absolute;left:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;left:calc(var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);right:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -5107,8 +5533,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // full-width class: this field is full width by default, so the class only appears
                         // once a consumer opts *out* of that.
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"inputId() || null\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <textarea\r\n      #field\r\n      class=\"gog-input__field gog-textarea__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [rows]=\"rows()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    ></textarea>\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n        [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n        [attr.aria-label]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__field{resize:vertical;min-height:2.5em;line-height:1.5}.gog-input__field-container{position:relative}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size)}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__label--float{position:absolute;left:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;left:calc(var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);right:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n  }\r\n  <div\r\n    class=\"gog-input__field-container\"\r\n    [class.gog-input__field-container--resizable]=\"resolvedResize() !== 'none' && !isDisabled()\"\r\n    [style.--gog-textarea-resize-inset-right.px]=\"resizeInsetRight()\"\r\n    [style.--gog-textarea-resize-inset-bottom.px]=\"resizeInsetBottom()\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <textarea\r\n      #field\r\n      class=\"gog-input__field gog-textarea__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-textarea__field--resize-vertical]=\"resolvedResize() === 'vertical'\"\r\n      [class.gog-textarea__field--resize-horizontal]=\"resolvedResize() === 'horizontal'\"\r\n      [class.gog-textarea__field--resize-both]=\"resolvedResize() === 'both'\"\r\n      [class.gog-textarea__field--resize-none]=\"resolvedResize() === 'none'\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [rows]=\"rows()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n      [attr.maxlength]=\"maxlength()\"\r\n      [attr.minlength]=\"minlength()\"\r\n      [attr.spellcheck]=\"spellcheck()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    ></textarea>\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n        [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\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  </div>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__field{display:block;min-height:2.5em;line-height:1.5}.gog-textarea__field::-webkit-resizer{background:transparent}.gog-textarea__field--resize-vertical{resize:vertical}.gog-textarea__field--resize-horizontal{resize:horizontal}.gog-textarea__field--resize-both{resize:both}.gog-textarea__field--resize-none{resize:none}.gog-input__field-container{position:relative}.gog-input__field-container--resizable:after{content:\"\";position:absolute;right:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-right));bottom:calc(var(--gog-textarea-resize-grip-offset) + var(--gog-textarea-resize-inset-bottom));width:var(--gog-textarea-resize-grip-size);height:var(--gog-textarea-resize-grip-size);clip-path:polygon(100% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(135deg,transparent 0 var(--gog-textarea-resize-grip-stripe-gap),var(--gog-textarea-resize-grip-color) var(--gog-textarea-resize-grip-stripe-gap) calc(var(--gog-textarea-resize-grip-stripe-gap) + var(--gog-textarea-resize-grip-stripe-width)));opacity:var(--gog-textarea-resize-grip-opacity);pointer-events:none}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size)}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__label--float{position:absolute;left:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;left:calc(var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);right:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 class ChipComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -5258,14 +5684,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\r\n          [template]=\"chevronSlot()?.templateRef ?? chevronTemplate()\"\r\n          name=\"chevron-down\"\r\n        />\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]=\"clearAriaLabel()\"\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:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right: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;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;left: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;left: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%;right: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-right: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"], 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\r\n          [template]=\"chevronSlot()?.templateRef ?? chevronTemplate()\"\r\n          name=\"chevron-down\"\r\n        />\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:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right: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;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;left: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;left: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%;right: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-right: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 });
 }
 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: {
                         // 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\r\n          [template]=\"chevronSlot()?.templateRef ?? chevronTemplate()\"\r\n          name=\"chevron-down\"\r\n        />\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]=\"clearAriaLabel()\"\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:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right: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;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;left: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;left: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%;right: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-right: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\r\n          [template]=\"chevronSlot()?.templateRef ?? chevronTemplate()\"\r\n          name=\"chevron-down\"\r\n        />\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:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right: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;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;left: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;left: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%;right: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-right: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 }] }] } });
 
 /**
@@ -5313,7 +5739,7 @@ class GogTooltipBubbleComponent {
         return typeof value === 'string' ? value : '';
     }, ...(ngDevMode ? [{ debugName: "textContent" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogTooltipBubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogTooltipBubbleComponent, isStandalone: true, selector: "gog-tooltip-bubble", inputs: { bubbleId: { classPropertyName: "bubbleId", publicName: "bubbleId", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "bubbleId()", "class.gog-tooltip--top": "side() === 'top'", "class.gog-tooltip--bottom": "side() === 'bottom'", "class.gog-tooltip--left": "side() === 'left'", "class.gog-tooltip--right": "side() === 'right'", "class.gog-tooltip--visible": "visible()", "class": "extraClass()", "style.top.px": "top()", "style.left.px": "left()", "style.z-index": "zIndex()" }, classAttribute: "gog-tooltip" }, ngImport: i0, template: "<gog-scroll\r\n  class=\"gog-tooltip__scroll\"\r\n  size=\"thin\"\r\n  [focusable]=\"false\"\r\n  overscrollBehavior=\"contain\"\r\n>\r\n  @if (templateContent(); as template) {\r\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n  } @else {\r\n    {{ textContent() }}\r\n  }\r\n</gog-scroll>\r\n<span class=\"gog-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:fixed;top:0;left:0;z-index:var(--gog-tooltip-z);max-width:var(--gog-tooltip-max-width);padding:var(--gog-tooltip-padding);border-radius:var(--gog-tooltip-radius);border:var(--gog-tooltip-border-width) var(--gog-tooltip-border-style) var(--gog-tooltip-border-color);background:var(--gog-tooltip-bg);color:var(--gog-tooltip-color);font-family:var(--gog-tooltip-font-family);font-size:var(--gog-tooltip-font-size);line-height:var(--gog-tooltip-line-height);box-shadow:var(--gog-tooltip-shadow);word-wrap:break-word;opacity:0;transform:scale(.96);transition:opacity var(--gog-tooltip-transition-duration) var(--gog-easing),transform var(--gog-tooltip-transition-duration) var(--gog-easing)}:host(.gog-tooltip--visible){opacity:1;transform:scale(1)}.gog-tooltip__scroll{max-height:var(--gog-tooltip-max-height)}.gog-tooltip__arrow{position:absolute;width:0;height:0;border:var(--gog-tooltip-arrow-size) solid transparent}:host(.gog-tooltip--top) .gog-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--gog-tooltip-bg);border-bottom-width:0}:host(.gog-tooltip--bottom) .gog-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--gog-tooltip-bg);border-top-width:0}:host(.gog-tooltip--left) .gog-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--gog-tooltip-bg);border-right-width:0}:host(.gog-tooltip--right) .gog-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--gog-tooltip-bg);border-left-width:0}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogTooltipBubbleComponent, isStandalone: true, selector: "gog-tooltip-bubble", inputs: { bubbleId: { classPropertyName: "bubbleId", publicName: "bubbleId", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "bubbleId()", "class.gog-tooltip--top": "side() === 'top'", "class.gog-tooltip--bottom": "side() === 'bottom'", "class.gog-tooltip--left": "side() === 'left'", "class.gog-tooltip--right": "side() === 'right'", "class.gog-tooltip--visible": "visible()", "class": "extraClass()", "style.top.px": "top()", "style.left.px": "left()", "style.z-index": "zIndex()" }, classAttribute: "gog-tooltip" }, ngImport: i0, template: "<gog-scroll\r\n  class=\"gog-tooltip__scroll\"\r\n  size=\"thin\"\r\n  [focusable]=\"false\"\r\n  overscrollBehavior=\"contain\"\r\n>\r\n  @if (templateContent(); as template) {\r\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n  } @else {\r\n    {{ textContent() }}\r\n  }\r\n</gog-scroll>\r\n<span class=\"gog-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:fixed;top:0;left:0;z-index:var(--gog-tooltip-z);max-width:var(--gog-tooltip-max-width);padding:var(--gog-tooltip-padding);border-radius:var(--gog-tooltip-radius);border:var(--gog-tooltip-border-width) var(--gog-tooltip-border-style) var(--gog-tooltip-border-color);background:var(--gog-tooltip-bg);color:var(--gog-tooltip-color);font-family:var(--gog-tooltip-font-family);font-size:var(--gog-tooltip-font-size);line-height:var(--gog-tooltip-line-height);box-shadow:var(--gog-tooltip-shadow);word-wrap:break-word;opacity:0;transform:scale(.96);transition:opacity var(--gog-tooltip-transition-duration) var(--gog-easing),transform var(--gog-tooltip-transition-duration) var(--gog-easing)}:host(.gog-tooltip--visible){opacity:1;transform:scale(1)}.gog-tooltip__scroll{max-height:var(--gog-tooltip-max-height)}.gog-tooltip__arrow{position:absolute;width:0;height:0;border:var(--gog-tooltip-arrow-size) solid transparent}:host(.gog-tooltip--top) .gog-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--gog-tooltip-bg);border-bottom-width:0}:host(.gog-tooltip--bottom) .gog-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--gog-tooltip-bg);border-top-width:0}:host(.gog-tooltip--left) .gog-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--gog-tooltip-bg);border-right-width:0}:host(.gog-tooltip--right) .gog-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--gog-tooltip-bg);border-left-width:0}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ 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: GogTooltipBubbleComponent, decorators: [{
             type: Component,
@@ -5695,6 +6121,9 @@ function readPxToken(el, token, fallback) {
 
 /** Height of the select-all/clear row, included in the panel height estimate. */
 const CONTROLS_ROW_HEIGHT = 38;
+/** Built-in defaults, used when neither the instance input nor `GOG_CONFIG.labels` supplies one. */
+const DEFAULT_SELECT_ALL_LABEL = 'Select all';
+const DEFAULT_CLEAR_ALL_LABEL = 'Clear';
 /**
  * Custom markup for the multiselect's clear button:
  *
@@ -5715,12 +6144,26 @@ class MultiselectComponent extends GogDropdownBase {
     showControls = input(false, ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
     /** Where the "select all"/"clear" row sits relative to the option list. Sticky either way. */
     controlsPosition = input('top', ...(ngDevMode ? [{ debugName: "controlsPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Visible text of the select-all button. Unset, falls back to `GOG_CONFIG.labels.selectAll`,
+     * then to `'Select all'`.
+     */
+    selectAllLabel = input(undefined, ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Visible text of the clear-all button — the one inside the panel, next to select-all. The
+     * trigger's own clear icon is `clearAriaLabel`. Unset, falls back to
+     * `GOG_CONFIG.labels.clearAll`, then to `'Clear'`.
+     */
+    clearAllLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAllLabel" }] : /* istanbul ignore next */ []));
     /**
      * @deprecated since 21.3.0 (2026-08-07) — project an `<ng-template gogMultiselectClearIcon>` into the component instead. Removed in 21.5.0.
      */
     clearIconTemplate = input(null, ...(ngDevMode ? [{ debugName: "clearIconTemplate" }] : /* istanbul ignore next */ []));
     /** Projected `gogMultiselectClearIcon` template; wins over the deprecated `clearIconTemplate` input. */
     clearIconSlot = contentChild(GogMultiselectClearIconDirective, ...(ngDevMode ? [{ debugName: "clearIconSlot" }] : /* istanbul ignore next */ []));
+    /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
+    resolvedSelectAllLabel = computed(() => resolveConfigured(this.selectAllLabel(), this.globalConfig.labels?.selectAll, DEFAULT_SELECT_ALL_LABEL), ...(ngDevMode ? [{ debugName: "resolvedSelectAllLabel" }] : /* istanbul ignore next */ []));
+    resolvedClearAllLabel = computed(() => resolveConfigured(this.clearAllLabel(), this.globalConfig.labels?.clearAll, DEFAULT_CLEAR_ALL_LABEL), ...(ngDevMode ? [{ debugName: "resolvedClearAllLabel" }] : /* istanbul ignore next */ []));
     /**
      * Two-way bindable selection: `[(value)]="signal"`.
      *
@@ -5841,15 +6284,15 @@ 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 }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { 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 ?? chevronTemplate()\"\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]=\"clearAriaLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? clearIconTemplate()\" 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)\">Select all</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\r\n  </div>\r\n</ng-template>\r\n\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-right: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));left:0;right: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;left:unset;right: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:left;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;left: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;left: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-left: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-left:1.1em;text-align:left}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { 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 }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { 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 ?? chevronTemplate()\"\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 ?? clearIconTemplate()\" 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-right: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));left:0;right: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;left:unset;right: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:left;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;left: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;left: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-left: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-left:1.1em;text-align:left}\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 });
 }
 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: {
                         // 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 ?? chevronTemplate()\"\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]=\"clearAriaLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? clearIconTemplate()\" 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)\">Select all</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\r\n  </div>\r\n</ng-template>\r\n\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-right: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));left:0;right: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;left:unset;right: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:left;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;left: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;left: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-left: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-left:1.1em;text-align:left}\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 }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", 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 }] }] } });
+                    }, 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 ?? chevronTemplate()\"\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 ?? clearIconTemplate()\" 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-right: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));left:0;right: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;left:unset;right: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:left;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;left: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;left: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-left: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-left:1.1em;text-align:left}\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 }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", 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;
 function measureWith(font) {
@@ -5863,9 +6306,26 @@ function measureWith(font) {
 
 /** Built-in default, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_ERROR_DISPLAY = 'manual';
+/** How many digits after the decimal point `step` prints, e.g. `0.25` → `2`, `5` → `0`. */
+function decimalPlaces(step) {
+    const str = String(step);
+    const dot = str.indexOf('.');
+    return dot === -1 ? 0 : str.length - dot - 1;
+}
+/**
+ * Character count of `value` formatted with `decimals` fraction digits — the widest a
+ * number in `[min, max]` at this `step` can ever print, since digit count only grows moving
+ * away from zero (see `valueDisplayChars` below for why `min`/`max` alone are enough to
+ * bound every value in between).
+ */
+function digitLength(value, decimals) {
+    const sign = value < 0 ? 1 : 0;
+    const intLen = String(Math.trunc(Math.abs(value))).length;
+    const fraction = decimals > 0 ? decimals + 1 : 0; // +1 for the decimal point itself
+    return sign + intLen + fraction;
+}
 class SliderComponent {
-    static nextId = 0;
-    inputId = `gog-slider-${++SliderComponent.nextId}`;
+    inputId = nextGogControlId('gog-slider');
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
@@ -5898,30 +6358,125 @@ class SliderComponent {
      * as they do horizontally.
      */
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    /** Two-way bindable value: `[(value)]="signal"`. */
+    /**
+     * Switches the slider to two-thumb mode for picking a *range* of values instead of a
+     * single one. When on, use `[(rangeValue)]` instead of `[(value)]` — the two are mutually
+     * exclusive; `value`/`writeValue` are ignored while this is `true`, and vice versa.
+     */
+    range = input(false, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the start (lower) thumb in `range` mode. Falls back to `'Minimum'`,
+     * prefixed with `label()` when one is set (e.g. `'Price Minimum'`) — a shared `<label>`
+     * can't be associated with two inputs via `for`, so each thumb needs its own name.
+     */
+    startAriaLabel = input('', ...(ngDevMode ? [{ debugName: "startAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the end (upper) thumb in `range` mode. Falls back to `'Maximum'`. */
+    endAriaLabel = input('', ...(ngDevMode ? [{ debugName: "endAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Disables only the start (lower) thumb in `range` mode — e.g. to pin a range's floor
+     * while letting the consumer still raise or lower its ceiling. ORed with `disabled`
+     * (either one disables it), never overrides it: `disabled` still means "both thumbs off".
+     * Ignored outside `range` mode, where there's only one thumb and `disabled` already covers
+     * it. Unlike `disabled`, this never applies the whole-control `.gog-slider--disabled`
+     * dimming/`pointer-events: none` — only the one thumb goes inert, both visually (its own
+     * dot dims) and functionally (the native input's own `disabled` attribute takes it out of
+     * the tab order), so the other thumb stays fully usable.
+     */
+    startDisabled = input(false, ...(ngDevMode ? [{ debugName: "startDisabled" }] : /* istanbul ignore next */ []));
+    /** Disables only the end (upper) thumb in `range` mode. Mirrors `startDisabled`. */
+    endDisabled = input(false, ...(ngDevMode ? [{ debugName: "endDisabled" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable value: `[(value)]="signal"`. Ignored when `range` is `true`. */
     value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable `{ start, end }` pair: `[(rangeValue)]="signal"`. Used only when `range` is `true`. */
+    rangeValue = model({ start: 0, end: 100 }, ...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
     ngControl = inject(NgControl, { optional: true, self: true });
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     globalConfig = inject(GOG_CONFIG);
     resolvedErrorDisplay = computed(() => resolveConfigured(this.errorDisplay(), this.globalConfig.control?.errorDisplay, DEFAULT_ERROR_DISPLAY), ...(ngDevMode ? [{ debugName: "resolvedErrorDisplay" }] : /* istanbul ignore next */ []));
     errorState = new GogErrorState(this.errorMessage, this.resolvedErrorDisplay, this.ngControl);
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * `isDisabled()` also covers `cvaDisabled()` — a `[formControl]`'s own `.disable()`, which
+     * (being one FormControl backing one `rangeValue`) always speaks for both thumbs at once
+     * and has no way to target just one. `startDisabled`/`endDisabled` are the only route to a
+     * one-sided disable, and only make sense in `range` mode.
+     */
+    isStartDisabled = computed(() => this.isDisabled() || this.startDisabled(), ...(ngDevMode ? [{ debugName: "isStartDisabled" }] : /* istanbul ignore next */ []));
+    isEndDisabled = computed(() => this.isDisabled() || this.endDisabled(), ...(ngDevMode ? [{ debugName: "isEndDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Drives the whole-control `.gog-slider--disabled` class (dimming + `pointer-events: none`
+     * over the whole track). Applying that class off a one-sided `isStartDisabled()`/
+     * `isEndDisabled()` would also block pointer/touch input to the *other*, still-enabled
+     * thumb — `pointer-events: none` on an ancestor cuts off every descendant, not just the
+     * disabled one — so in `range` mode this only fires once *both* sides are disabled. A
+     * still-disabled single thumb stays inert on its own regardless (its native `disabled`
+     * attribute already takes it out of the tab order and stops it from firing events).
+     */
+    isFullyDisabled = computed(() => this.range() ? this.isStartDisabled() && this.isEndDisabled() : this.isDisabled(), ...(ngDevMode ? [{ debugName: "isFullyDisabled" }] : /* istanbul ignore next */ []));
     clampedValue = computed(() => {
         const value = this.value();
         return Math.min(this.max(), Math.max(this.min(), value));
     }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
-    fillPercent = computed(() => {
-        const range = this.max() - this.min();
-        if (range === 0)
+    /**
+     * `rangeValue()` clamped to `[min, max]`, swapping the pair back in order if a consumer
+     * writes `start > end` directly (e.g. via `writeValue`/a FormControl) — dragging or
+     * keyboard-nudging a thumb past the other can never produce that, since
+     * onRangeStartInput/onRangeEndInput already clamp against each other there.
+     */
+    clampedRange = computed(() => this.clampRange(this.rangeValue()), ...(ngDevMode ? [{ debugName: "clampedRange" }] : /* istanbul ignore next */ []));
+    percentFor(value) {
+        const span = this.max() - this.min();
+        if (span === 0)
             return 0;
-        return ((this.clampedValue() - this.min()) / range) * 100;
-    }, ...(ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []));
+        return ((value - this.min()) / span) * 100;
+    }
+    clampRange(value) {
+        const lo = this.min();
+        const hi = this.max();
+        const start = Math.min(hi, Math.max(lo, value.start));
+        const end = Math.min(hi, Math.max(lo, value.end));
+        return start <= end ? { start, end } : { start: end, end: start };
+    }
+    fillPercent = computed(() => this.percentFor(this.clampedValue()), ...(ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []));
+    rangeStartPercent = computed(() => this.percentFor(this.clampedRange().start), ...(ngDevMode ? [{ debugName: "rangeStartPercent" }] : /* istanbul ignore next */ []));
+    rangeEndPercent = computed(() => this.percentFor(this.clampedRange().end), ...(ngDevMode ? [{ debugName: "rangeEndPercent" }] : /* istanbul ignore next */ []));
     thumbPos = computed(() => `${this.fillPercent()}%`, ...(ngDevMode ? [{ debugName: "thumbPos" }] : /* istanbul ignore next */ []));
     fillScale = computed(() => this.fillPercent() / 100, ...(ngDevMode ? [{ debugName: "fillScale" }] : /* istanbul ignore next */ []));
+    rangeStartPos = computed(() => `${this.rangeStartPercent()}%`, ...(ngDevMode ? [{ debugName: "rangeStartPos" }] : /* istanbul ignore next */ []));
+    rangeEndPos = computed(() => `${this.rangeEndPercent()}%`, ...(ngDevMode ? [{ debugName: "rangeEndPos" }] : /* istanbul ignore next */ []));
+    rangeDisplayValue = computed(() => {
+        const { start, end } = this.clampedRange();
+        return `${start} – ${end}`;
+    }, ...(ngDevMode ? [{ debugName: "rangeDisplayValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Reserved width for `.gog-slider__value`, in `ch`. Without this the span sizes to
+     * whatever the *current* value happens to print as, so it visibly resizes on every drag —
+     * harmless when `fullWidth` absorbs the wiggle (the default for horizontal), but a vertical
+     * slider is only ever as wide as its content (see the `fit-content` comment in the
+     * stylesheet), so there the whole control jitters in width as you drag, and the header row
+     * being what's regrowing/shrinking tugs the min/max labels below along with it even though
+     * their own text never changes. Sized from `min()`/`max()` rather than the live value:
+     * digit count only grows moving away from zero, so whichever endpoint prints the most
+     * characters is already the worst case for every value in between.
+     */
+    valueDisplayChars = computed(() => {
+        const decimals = decimalPlaces(this.step());
+        const chars = Math.max(digitLength(this.min(), decimals), digitLength(this.max(), decimals));
+        return this.range() ? chars * 2 + 3 : chars; // +3 for the " – " separator
+    }, ...(ngDevMode ? [{ debugName: "valueDisplayChars" }] : /* istanbul ignore next */ []));
+    startInputAriaLabel = computed(() => {
+        const base = this.startAriaLabel() || 'Minimum';
+        return this.label() ? `${this.label()} ${base}` : base;
+    }, ...(ngDevMode ? [{ debugName: "startInputAriaLabel" }] : /* istanbul ignore next */ []));
+    endInputAriaLabel = computed(() => {
+        const base = this.endAriaLabel() || 'Maximum';
+        return this.label() ? `${this.label()} ${base}` : base;
+    }, ...(ngDevMode ? [{ debugName: "endInputAriaLabel" }] : /* istanbul ignore next */ []));
     isVertical = computed(() => this.orientation() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
     hasError = this.errorState.hasError;
     visibleError = this.errorState.visibleError;
     errorId = computed(() => (this.hasError() ? `${this.inputId}-error` : null), ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    /** Fires with a plain `number` normally, or a `GogSliderRange` while `range()` is `true`. */
     onChange = () => { };
     onTouched = () => { };
     constructor() {
@@ -5936,8 +6491,14 @@ class SliderComponent {
         this.errorState.check();
     }
     writeValue(val) {
-        const next = val ?? this.min();
-        this.value.set(Math.min(this.max(), Math.max(this.min(), next)));
+        if (this.range()) {
+            const next = val ?? { start: this.min(), end: this.max() };
+            this.rangeValue.set(this.clampRange(next));
+        }
+        else {
+            const next = val ?? this.min();
+            this.value.set(Math.min(this.max(), Math.max(this.min(), next)));
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -5958,22 +6519,64 @@ class SliderComponent {
     onBlur() {
         this.onTouched();
     }
+    /**
+     * Start (lower) thumb in `range` mode. Both native inputs keep the slider's global
+     * `min()`/`max()` (see the template's comment on why), so crossing prevention happens
+     * entirely here via `Math.min(current.end, ...)` rather than through a narrowed native
+     * `max` attribute — which also means the browser will happily keep dragging this input's
+     * own raw `.value` past `current.end` even once we've clamped the logical value. Writing
+     * the clamped result back to `input.value` directly (rather than trusting the `[value]`
+     * binding to do it) matters because that binding no-ops once the *next* clamped result
+     * matches what Angular itself last wrote — it has no way to know the raw DOM value has
+     * since drifted out from under it via native dragging.
+     */
+    onRangeStartInput(event) {
+        const input = event.target;
+        const raw = Number(input.value);
+        const current = this.clampedRange();
+        const start = Math.min(current.end, Math.max(this.min(), raw));
+        const next = { start, end: current.end };
+        input.value = String(start);
+        this.rangeValue.set(next);
+        this.onChange(next);
+    }
+    /** End (upper) thumb in `range` mode. Mirrors `onRangeStartInput`. */
+    onRangeEndInput(event) {
+        const input = event.target;
+        const raw = Number(input.value);
+        const current = this.clampedRange();
+        const end = Math.max(current.start, Math.min(this.max(), raw));
+        const next = { start: current.start, end };
+        input.value = String(end);
+        this.rangeValue.set(next);
+        this.onChange(next);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SliderComponent, isStandalone: true, selector: "gog-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showThumb: { classPropertyName: "showThumb", publicName: "showThumb", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()", "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-slider gog-contained-layout\"\r\n  [class.gog-slider--disabled]=\"isDisabled()\"\r\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\r\n  [class.gog-slider--vertical]=\"isVertical()\"\r\n>\r\n  <div class=\"gog-slider__header\">\r\n    @if (label()) {\r\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\r\n    }\r\n\r\n    @if (showValue()) {\r\n      <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"gog-slider__track-container\">\r\n    <div class=\"gog-slider__track\">\r\n      <div class=\"gog-slider__fill\"></div>\r\n    </div>\r\n\r\n    @if (showThumb()) {\r\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\r\n    }\r\n\r\n    <input\r\n      [id]=\"inputId\"\r\n      class=\"gog-slider__input\"\r\n      type=\"range\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\r\n      [attr.aria-valuemin]=\"min()\"\r\n      [attr.aria-valuemax]=\"max()\"\r\n      [attr.aria-valuenow]=\"clampedValue()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      [attr.aria-orientation]=\"isVertical() ? 'vertical' : null\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [step]=\"step()\"\r\n      [value]=\"clampedValue()\"\r\n      [disabled]=\"isDisabled()\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"gog-slider__range-labels\">\r\n    <span>{{ min() }}</span>\r\n    <span>{{ max() }}</span>\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:var(--gog-slider-auto-width)}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border:var(--gog-slider-track-border-width) var(--gog-slider-track-border-style) var(--gog-slider-track-border-color);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none;box-sizing:border-box}.gog-slider__fill{width:100%;height:100%;background:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}.gog-slider--vertical{width:fit-content}.gog-slider--vertical .gog-slider__track-container{height:var(--gog-slider-vertical-length);width:var(--gog-slider-track-area-height)}.gog-slider--vertical .gog-slider__track{inset-inline:auto;inset-block:0;left:50%;translate:-50% 0;width:var(--gog-slider-track-height);height:100%}.gog-slider--vertical .gog-slider__fill{transform:scaleY(var(--fill-scale, 0));transform-origin:bottom center}.gog-slider--vertical .gog-slider__thumb{top:calc(100% - var(--thumb-pos, 0%));left:50%}.gog-slider--vertical .gog-slider__input{writing-mode:vertical-lr;direction:rtl}.gog-slider--vertical .gog-slider__range-labels{flex-direction:column-reverse;align-items:center;gap:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SliderComponent, isStandalone: true, selector: "gog-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showThumb: { classPropertyName: "showThumb", publicName: "showThumb", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, startDisabled: { classPropertyName: "startDisabled", publicName: "startDisabled", isSignal: true, isRequired: false, transformFunction: null }, endDisabled: { classPropertyName: "endDisabled", publicName: "endDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()", "style.--range-start-pos": "rangeStartPos()", "style.--range-end-pos": "rangeEndPos()", "style.--value-chars": "valueDisplayChars()", "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\r\n  class=\"gog-slider gog-contained-layout\"\r\n  [class.gog-slider--disabled]=\"isFullyDisabled()\"\r\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\r\n  [class.gog-slider--vertical]=\"isVertical()\"\r\n  [class.gog-slider--range]=\"range()\"\r\n>\r\n  <div class=\"gog-slider__header\">\r\n    @if (label()) {\r\n      <label [attr.for]=\"range() ? null : inputId\" class=\"gog-slider__label\">{{ label() }}</label>\r\n    }\r\n\r\n    @if (showValue()) {\r\n      <span class=\"gog-slider__value\">{{ range() ? rangeDisplayValue() : clampedValue() }}</span>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"gog-slider__track-container\">\r\n    <div class=\"gog-slider__track\">\r\n      <div class=\"gog-slider__fill\"></div>\r\n    </div>\r\n\r\n    @if (showThumb()) {\r\n      @if (range()) {\r\n        <div\r\n          class=\"gog-slider__thumb gog-slider__thumb--start\"\r\n          [class.gog-slider__thumb--disabled]=\"isStartDisabled()\"\r\n          aria-hidden=\"true\"\r\n        ></div>\r\n        <div\r\n          class=\"gog-slider__thumb gog-slider__thumb--end\"\r\n          [class.gog-slider__thumb--disabled]=\"isEndDisabled()\"\r\n          aria-hidden=\"true\"\r\n        ></div>\r\n      } @else {\r\n        <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\r\n      }\r\n    }\r\n\r\n    @if (range()) {\r\n      <!--\r\n        Both inputs' `min`/`max` stay pinned to the slider's own global min()/max(), even\r\n        though each thumb can't actually reach past the other one (enforced in\r\n        onRangeStart/EndInput instead). Narrowing a native input's own `min`/`max` attribute\r\n        to the other thumb's value would seem like free crossing-prevention, but it also\r\n        shifts where the browser positions that input's own (invisible) native thumb inside\r\n        its box \u2014 off of the box's own start()/end() percentage that --range-start-pos /\r\n        --range-end-pos and this file's custom thumb divs use, so the two would drift apart\r\n        and the real, clickable native thumb would stop lining up with what's drawn on\r\n        screen. `aria-valuemin`/`aria-valuemax` below are fine to narrow dynamically \u2014\r\n        they're just announced text, not something the browser positions anything from.\r\n      -->\r\n      <input\r\n        [id]=\"inputId\"\r\n        class=\"gog-slider__input gog-slider__input--start\"\r\n        type=\"range\"\r\n        [attr.aria-label]=\"startInputAriaLabel()\"\r\n        [attr.aria-valuemin]=\"min()\"\r\n        [attr.aria-valuemax]=\"clampedRange().end\"\r\n        [attr.aria-valuenow]=\"clampedRange().start\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        [attr.aria-orientation]=\"isVertical() ? 'vertical' : null\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [step]=\"step()\"\r\n        [value]=\"clampedRange().start\"\r\n        [disabled]=\"isStartDisabled()\"\r\n        (input)=\"onRangeStartInput($event)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n      <input\r\n        class=\"gog-slider__input gog-slider__input--end\"\r\n        type=\"range\"\r\n        [attr.aria-label]=\"endInputAriaLabel()\"\r\n        [attr.aria-valuemin]=\"clampedRange().start\"\r\n        [attr.aria-valuemax]=\"max()\"\r\n        [attr.aria-valuenow]=\"clampedRange().end\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        [attr.aria-orientation]=\"isVertical() ? 'vertical' : null\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [step]=\"step()\"\r\n        [value]=\"clampedRange().end\"\r\n        [disabled]=\"isEndDisabled()\"\r\n        (input)=\"onRangeEndInput($event)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n    } @else {\r\n      <input\r\n        [id]=\"inputId\"\r\n        class=\"gog-slider__input\"\r\n        type=\"range\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\r\n        [attr.aria-valuemin]=\"min()\"\r\n        [attr.aria-valuemax]=\"max()\"\r\n        [attr.aria-valuenow]=\"clampedValue()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        [attr.aria-orientation]=\"isVertical() ? 'vertical' : null\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [step]=\"step()\"\r\n        [value]=\"clampedValue()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (input)=\"onInput($event)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"gog-slider__range-labels\">\r\n    <span>{{ min() }}</span>\r\n    <span>{{ max() }}</span>\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:var(--gog-slider-auto-width)}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:max(var(--gog-slider-value-min-width),var(--value-chars, 0) * 1ch);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);font-variant-numeric:tabular-nums;color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border:var(--gog-slider-track-border-width) var(--gog-slider-track-border-style) var(--gog-slider-track-border-color);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none;box-sizing:border-box}.gog-slider__fill{width:100%;height:100%;background:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__input:disabled{cursor:not-allowed}.gog-slider--range .gog-slider__input{pointer-events:none}.gog-slider--range .gog-slider__input::-webkit-slider-thumb{pointer-events:auto}.gog-slider--range .gog-slider__input::-moz-range-thumb{pointer-events:auto}.gog-slider--range .gog-slider__fill{position:absolute;inset:0;width:auto;height:auto;transform:none}.gog-slider--range:not(.gog-slider--vertical) .gog-slider__fill{left:var(--range-start-pos, 0%);right:calc(100% - var(--range-end-pos, 100%))}.gog-slider--range .gog-slider__thumb--start{left:var(--range-start-pos, 0%)}.gog-slider--range .gog-slider__thumb--end{left:var(--range-end-pos, 100%)}.gog-slider__thumb--disabled{opacity:var(--gog-slider-disabled-opacity)}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}.gog-slider--vertical{width:fit-content}.gog-slider--vertical .gog-slider__track-container{height:var(--gog-slider-vertical-length);width:var(--gog-slider-track-area-height)}.gog-slider--vertical .gog-slider__track{inset-inline:auto;inset-block:0;left:50%;translate:-50% 0;width:var(--gog-slider-track-height);height:100%}.gog-slider--vertical .gog-slider__fill{transform:scaleY(var(--fill-scale, 0));transform-origin:bottom center}.gog-slider--vertical .gog-slider__thumb{top:calc(100% - var(--thumb-pos, 0%));left:50%}.gog-slider--vertical.gog-slider--range .gog-slider__fill{transform:none;top:calc(100% - var(--range-end-pos, 100%));bottom:var(--range-start-pos, 0%);left:0;right:0}.gog-slider--vertical.gog-slider--range .gog-slider__thumb--start{top:calc(100% - var(--range-start-pos, 0%));left:50%}.gog-slider--vertical.gog-slider--range .gog-slider__thumb--end{top:calc(100% - var(--range-end-pos, 100%));left:50%}.gog-slider--vertical .gog-slider__input{writing-mode:vertical-lr;direction:rtl}.gog-slider--vertical .gog-slider__range-labels{flex-direction:column-reverse;align-items:center;gap:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--thumb-pos]': 'thumbPos()',
                         '[style.--fill-scale]': 'fillScale()',
+                        '[style.--range-start-pos]': 'rangeStartPos()',
+                        '[style.--range-end-pos]': 'rangeEndPos()',
+                        '[style.--value-chars]': 'valueDisplayChars()',
                         // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
                         // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
                         // full-width class: this control is full width by default, so the class only
                         // appears once a consumer opts *out* of that.
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "<div\r\n  class=\"gog-slider gog-contained-layout\"\r\n  [class.gog-slider--disabled]=\"isDisabled()\"\r\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\r\n  [class.gog-slider--vertical]=\"isVertical()\"\r\n>\r\n  <div class=\"gog-slider__header\">\r\n    @if (label()) {\r\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\r\n    }\r\n\r\n    @if (showValue()) {\r\n      <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"gog-slider__track-container\">\r\n    <div class=\"gog-slider__track\">\r\n      <div class=\"gog-slider__fill\"></div>\r\n    </div>\r\n\r\n    @if (showThumb()) {\r\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\r\n    }\r\n\r\n    <input\r\n      [id]=\"inputId\"\r\n      class=\"gog-slider__input\"\r\n      type=\"range\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\r\n      [attr.aria-valuemin]=\"min()\"\r\n      [attr.aria-valuemax]=\"max()\"\r\n      [attr.aria-valuenow]=\"clampedValue()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      [attr.aria-orientation]=\"isVertical() ? 'vertical' : null\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [step]=\"step()\"\r\n      [value]=\"clampedValue()\"\r\n      [disabled]=\"isDisabled()\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n  </div>\r\n\r\n  <div class=\"gog-slider__range-labels\">\r\n    <span>{{ min() }}</span>\r\n    <span>{{ max() }}</span>\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:var(--gog-slider-auto-width)}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border:var(--gog-slider-track-border-width) var(--gog-slider-track-border-style) var(--gog-slider-track-border-color);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none;box-sizing:border-box}.gog-slider__fill{width:100%;height:100%;background:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}.gog-slider--vertical{width:fit-content}.gog-slider--vertical .gog-slider__track-container{height:var(--gog-slider-vertical-length);width:var(--gog-slider-track-area-height)}.gog-slider--vertical .gog-slider__track{inset-inline:auto;inset-block:0;left:50%;translate:-50% 0;width:var(--gog-slider-track-height);height:100%}.gog-slider--vertical .gog-slider__fill{transform:scaleY(var(--fill-scale, 0));transform-origin:bottom center}.gog-slider--vertical .gog-slider__thumb{top:calc(100% - var(--thumb-pos, 0%));left:50%}.gog-slider--vertical .gog-slider__input{writing-mode:vertical-lr;direction:rtl}.gog-slider--vertical .gog-slider__range-labels{flex-direction:column-reverse;align-items:center;gap:2px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumb", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, template: "<div\r\n  class=\"gog-slider gog-contained-layout\"\r\n  [class.gog-slider--disabled]=\"isFullyDisabled()\"\r\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\r\n  [class.gog-slider--vertical]=\"isVertical()\"\r\n  [class.gog-slider--range]=\"range()\"\r\n>\r\n  <div class=\"gog-slider__header\">\r\n    @if (label()) {\r\n      <label [attr.for]=\"range() ? null : inputId\" class=\"gog-slider__label\">{{ label() }}</label>\r\n    }\r\n\r\n    @if (showValue()) {\r\n      <span class=\"gog-slider__value\">{{ range() ? rangeDisplayValue() : clampedValue() }}</span>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"gog-slider__track-container\">\r\n    <div class=\"gog-slider__track\">\r\n      <div class=\"gog-slider__fill\"></div>\r\n    </div>\r\n\r\n    @if (showThumb()) {\r\n      @if (range()) {\r\n        <div\r\n          class=\"gog-slider__thumb gog-slider__thumb--start\"\r\n          [class.gog-slider__thumb--disabled]=\"isStartDisabled()\"\r\n          aria-hidden=\"true\"\r\n        ></div>\r\n        <div\r\n          class=\"gog-slider__thumb gog-slider__thumb--end\"\r\n          [class.gog-slider__thumb--disabled]=\"isEndDisabled()\"\r\n          aria-hidden=\"true\"\r\n        ></div>\r\n      } @else {\r\n        <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\r\n      }\r\n    }\r\n\r\n    @if (range()) {\r\n      <!--\r\n        Both inputs' `min`/`max` stay pinned to the slider's own global min()/max(), even\r\n        though each thumb can't actually reach past the other one (enforced in\r\n        onRangeStart/EndInput instead). Narrowing a native input's own `min`/`max` attribute\r\n        to the other thumb's value would seem like free crossing-prevention, but it also\r\n        shifts where the browser positions that input's own (invisible) native thumb inside\r\n        its box \u2014 off of the box's own start()/end() percentage that --range-start-pos /\r\n        --range-end-pos and this file's custom thumb divs use, so the two would drift apart\r\n        and the real, clickable native thumb would stop lining up with what's drawn on\r\n        screen. `aria-valuemin`/`aria-valuemax` below are fine to narrow dynamically \u2014\r\n        they're just announced text, not something the browser positions anything from.\r\n      -->\r\n      <input\r\n        [id]=\"inputId\"\r\n        class=\"gog-slider__input gog-slider__input--start\"\r\n        type=\"range\"\r\n        [attr.aria-label]=\"startInputAriaLabel()\"\r\n        [attr.aria-valuemin]=\"min()\"\r\n        [attr.aria-valuemax]=\"clampedRange().end\"\r\n        [attr.aria-valuenow]=\"clampedRange().start\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        [attr.aria-orientation]=\"isVertical() ? 'vertical' : null\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [step]=\"step()\"\r\n        [value]=\"clampedRange().start\"\r\n        [disabled]=\"isStartDisabled()\"\r\n        (input)=\"onRangeStartInput($event)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n      <input\r\n        class=\"gog-slider__input gog-slider__input--end\"\r\n        type=\"range\"\r\n        [attr.aria-label]=\"endInputAriaLabel()\"\r\n        [attr.aria-valuemin]=\"clampedRange().start\"\r\n        [attr.aria-valuemax]=\"max()\"\r\n        [attr.aria-valuenow]=\"clampedRange().end\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        [attr.aria-orientation]=\"isVertical() ? 'vertical' : null\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [step]=\"step()\"\r\n        [value]=\"clampedRange().end\"\r\n        [disabled]=\"isEndDisabled()\"\r\n        (input)=\"onRangeEndInput($event)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n    } @else {\r\n      <input\r\n        [id]=\"inputId\"\r\n        class=\"gog-slider__input\"\r\n        type=\"range\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\r\n        [attr.aria-valuemin]=\"min()\"\r\n        [attr.aria-valuemax]=\"max()\"\r\n        [attr.aria-valuenow]=\"clampedValue()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        [attr.aria-orientation]=\"isVertical() ? 'vertical' : null\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [step]=\"step()\"\r\n        [value]=\"clampedValue()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (input)=\"onInput($event)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"gog-slider__range-labels\">\r\n    <span>{{ min() }}</span>\r\n    <span>{{ max() }}</span>\r\n  </div>\r\n\r\n  @if (hasError()) {\r\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:var(--gog-slider-auto-width)}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:max(var(--gog-slider-value-min-width),var(--value-chars, 0) * 1ch);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);font-variant-numeric:tabular-nums;color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border:var(--gog-slider-track-border-width) var(--gog-slider-track-border-style) var(--gog-slider-track-border-color);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none;box-sizing:border-box}.gog-slider__fill{width:100%;height:100%;background:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__input:disabled{cursor:not-allowed}.gog-slider--range .gog-slider__input{pointer-events:none}.gog-slider--range .gog-slider__input::-webkit-slider-thumb{pointer-events:auto}.gog-slider--range .gog-slider__input::-moz-range-thumb{pointer-events:auto}.gog-slider--range .gog-slider__fill{position:absolute;inset:0;width:auto;height:auto;transform:none}.gog-slider--range:not(.gog-slider--vertical) .gog-slider__fill{left:var(--range-start-pos, 0%);right:calc(100% - var(--range-end-pos, 100%))}.gog-slider--range .gog-slider__thumb--start{left:var(--range-start-pos, 0%)}.gog-slider--range .gog-slider__thumb--end{left:var(--range-end-pos, 100%)}.gog-slider__thumb--disabled{opacity:var(--gog-slider-disabled-opacity)}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}.gog-slider--vertical{width:fit-content}.gog-slider--vertical .gog-slider__track-container{height:var(--gog-slider-vertical-length);width:var(--gog-slider-track-area-height)}.gog-slider--vertical .gog-slider__track{inset-inline:auto;inset-block:0;left:50%;translate:-50% 0;width:var(--gog-slider-track-height);height:100%}.gog-slider--vertical .gog-slider__fill{transform:scaleY(var(--fill-scale, 0));transform-origin:bottom center}.gog-slider--vertical .gog-slider__thumb{top:calc(100% - var(--thumb-pos, 0%));left:50%}.gog-slider--vertical.gog-slider--range .gog-slider__fill{transform:none;top:calc(100% - var(--range-end-pos, 100%));bottom:var(--range-start-pos, 0%);left:0;right:0}.gog-slider--vertical.gog-slider--range .gog-slider__thumb--start{top:calc(100% - var(--range-start-pos, 0%));left:50%}.gog-slider--vertical.gog-slider--range .gog-slider__thumb--end{top:calc(100% - var(--range-end-pos, 100%));left:50%}.gog-slider--vertical .gog-slider__input{writing-mode:vertical-lr;direction:rtl}.gog-slider--vertical .gog-slider__range-labels{flex-direction:column-reverse;align-items:center;gap:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumb", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], startDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDisabled", required: false }] }], endDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDisabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }] } });
 
+/** Built-in defaults, used when neither the instance input nor `GOG_CONFIG.labels` supplies one. */
+const DEFAULT_LABELS = {
+    pagination: 'Pagination',
+    previousPage: 'Previous page',
+    nextPage: 'Next page',
+    page: (page, isCurrent) => isCurrent ? `Page ${page}, current page` : `Go to page ${page}`,
+};
 class PaginatorComponent {
     /** 1-based current page. Two-way bindable: `[(page)]="myPageSignal"`. */
     page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
@@ -6002,7 +6605,28 @@ class PaginatorComponent {
     siblingCount = input(2, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
     size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name of the `<nav>`. Unset, falls back to `GOG_CONFIG.labels.pagination`, then
+     * to `'Pagination'`.
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    globalConfig = inject(GOG_CONFIG);
+    /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
+    resolvedAriaLabel = computed(() => resolveConfigured(this.ariaLabel(), this.globalConfig.labels?.pagination, DEFAULT_LABELS.pagination), ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * The two step buttons. Config-only: unlike the `<nav>` name, these say the same thing on
+     * every paginator in an app, so a per-instance input would be dead weight.
+     */
+    resolvedPreviousLabel = computed(() => resolveConfigured(undefined, this.globalConfig.labels?.previousPage, DEFAULT_LABELS.previousPage), ...(ngDevMode ? [{ debugName: "resolvedPreviousLabel" }] : /* istanbul ignore next */ []));
+    resolvedNextLabel = computed(() => resolveConfigured(undefined, this.globalConfig.labels?.nextPage, DEFAULT_LABELS.nextPage), ...(ngDevMode ? [{ debugName: "resolvedNextLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Names one page button. A method rather than a `computed`, since it takes the page number —
+     * the formatter itself is resolved once and only re-read when the config object changes.
+     */
+    pageLabel(page) {
+        const format = this.globalConfig.labels?.page ?? DEFAULT_LABELS.page;
+        return format(page, page === this.page());
+    }
     pageNumbers = computed(() => {
         const total = Math.max(1, this.totalPages());
         const current = this.page();
@@ -6072,20 +6696,20 @@ class PaginatorComponent {
         this.goTo(this.page() + 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === totalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-paginator', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-paginator',
                         role: 'navigation',
-                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-label]': 'resolvedAriaLabel()',
                         // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
                         // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
                         // full-width class: this control is full width by default, so the class only
                         // appears once a consumer opts *out* of that.
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
+                    }, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === totalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }], showFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstPage", required: false }] }], showLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastPage", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class SpinnerOverlayComponent {
@@ -6415,7 +7039,7 @@ class TableComponent {
         return map;
     }, ...(ngDevMode ? [{ debugName: "headerTemplateMap" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -6426,22 +7050,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GogColumn), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
 
+/** Built-in defaults, used when `GOG_CONFIG.theme` doesn't supply one. */
+const DEFAULT_THEME = 'light';
+const DEFAULT_LIGHT_THEME = 'light';
+const DEFAULT_DARK_THEME = 'dark';
+/**
+ * Owns the `data-theme` attribute on `<html>`, which is what every `--gog-*` palette block in
+ * `theme.css` keys off.
+ *
+ * Zero-config behaviour is unchanged from 21.3.1: it adopts whatever `data-theme` is already on
+ * the document, or `'light'` if there is none. Persistence and following the OS setting are
+ * both **opt-in** through `GOG_CONFIG.theme`, so an app that never configures anything cannot
+ * have its theme changed out from under it by an upgrade.
+ */
 class ThemeService {
     document = inject(DOCUMENT);
     root = this.document.documentElement;
-    theme = signal(this.readTheme(), ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    destroyRef = inject(DestroyRef);
+    config = inject(GOG_CONFIG).theme ?? {};
+    state = signal(DEFAULT_THEME, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * The active theme name. Read-only on purpose: writing it directly would move the signal
+     * without touching the DOM attribute the styles actually read, leaving the two silently out
+     * of sync. Go through `setTheme`/`toggleTheme`.
+     */
+    theme = this.state.asReadonly();
+    /**
+     * Set once the app (or the user) has chosen a theme explicitly, which stops
+     * `followSystem` from overriding that choice on the next OS-level change.
+     */
+    hasExplicitChoice = false;
     constructor() {
-        this.applyTheme(this.theme());
+        this.state.set(this.resolveInitialTheme());
+        this.applyTheme(this.state());
+        this.watchSystemPreference();
     }
     setTheme(theme) {
-        this.theme.set(theme);
+        this.hasExplicitChoice = true;
+        this.state.set(theme);
         this.applyTheme(theme);
+        this.persist(theme);
     }
+    /**
+     * Flips between the configured light and dark theme names (`'light'`/`'dark'` by default).
+     * From a third, custom theme this lands on the dark one, since that is the only reading of
+     * "toggle" that terminates.
+     */
     toggleTheme() {
-        this.setTheme(this.theme() === 'dark' ? 'light' : 'dark');
+        const light = this.config.lightTheme ?? DEFAULT_LIGHT_THEME;
+        const dark = this.config.darkTheme ?? DEFAULT_DARK_THEME;
+        this.setTheme(this.state() === dark ? light : dark);
+    }
+    /**
+     * In precedence order:
+     *
+     * 1. a `data-theme` already on `<html>` — server-rendered or set by an inline script before
+     *    Angular booted, and either way a decision that has already been painted;
+     * 2. the persisted choice, when `storageKey` is configured;
+     * 3. the OS setting, when `followSystem` is on;
+     * 4. `defaultTheme`, then `'light'`.
+     */
+    resolveInitialTheme() {
+        const fromDocument = this.root.getAttribute('data-theme');
+        if (fromDocument)
+            return fromDocument;
+        const stored = this.readStored();
+        if (stored)
+            return stored;
+        if (this.config.followSystem && this.prefersDark()) {
+            return this.config.darkTheme ?? DEFAULT_DARK_THEME;
+        }
+        return this.config.defaultTheme ?? DEFAULT_THEME;
+    }
+    /**
+     * Keeps the theme in step with the OS while the app has no explicit choice of its own. Only
+     * wired up when `followSystem` is on, so the default configuration adds no listener at all.
+     */
+    watchSystemPreference() {
+        if (!this.isBrowser || !this.config.followSystem)
+            return;
+        const query = window.matchMedia('(prefers-color-scheme: dark)');
+        const onChange = (event) => {
+            if (this.hasExplicitChoice)
+                return;
+            const next = event.matches
+                ? (this.config.darkTheme ?? DEFAULT_DARK_THEME)
+                : (this.config.lightTheme ?? DEFAULT_LIGHT_THEME);
+            this.state.set(next);
+            this.applyTheme(next);
+        };
+        query.addEventListener('change', onChange);
+        this.destroyRef.onDestroy(() => query.removeEventListener('change', onChange));
     }
-    readTheme() {
-        return this.root.getAttribute('data-theme') ?? 'light';
+    prefersDark() {
+        return this.isBrowser && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    /**
+     * Storage access is wrapped because it throws rather than degrades in two ordinary cases:
+     * Safari's private mode, and a browser configured to block site data. A theme preference is
+     * not worth taking the app down for.
+     */
+    readStored() {
+        const key = this.config.storageKey;
+        if (!key || !this.isBrowser)
+            return null;
+        try {
+            return window.localStorage.getItem(key);
+        }
+        catch {
+            return null;
+        }
+    }
+    persist(theme) {
+        const key = this.config.storageKey;
+        if (!key || !this.isBrowser)
+            return;
+        try {
+            window.localStorage.setItem(key, theme);
+        }
+        catch {
+            // See readStored.
+        }
     }
     applyTheme(theme) {
         this.root.setAttribute('data-theme', theme);
@@ -6848,6 +7578,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-calendar-focus-ring-offset',
             '--gog-calendar-focus-ring-width',
             '--gog-calendar-font-family',
+            '--gog-calendar-footer-gap',
             '--gog-calendar-header-gap',
             '--gog-calendar-header-margin',
             '--gog-calendar-lg-day-size',
@@ -7258,8 +7989,18 @@ const GOG_TOKEN_GROUPS = [
             '--gog-input-label-text-transform',
             '--gog-input-placeholder-color',
             '--gog-input-radius',
+            '--gog-input-spin-hover-bg',
+            '--gog-input-spin-width',
             '--gog-input-transition-duration',
             '--gog-textarea-clear-icon-ratio',
+            '--gog-textarea-resize-grip-color',
+            '--gog-textarea-resize-grip-offset',
+            '--gog-textarea-resize-grip-opacity',
+            '--gog-textarea-resize-grip-size',
+            '--gog-textarea-resize-grip-stripe-gap',
+            '--gog-textarea-resize-grip-stripe-width',
+            '--gog-textarea-resize-inset-bottom',
+            '--gog-textarea-resize-inset-right',
         ],
     },
     {
@@ -7470,8 +8211,10 @@ const GOG_TOKEN_GROUPS = [
             '--gog-scroll-fade-duration',
             '--gog-scroll-focus-ring',
             '--gog-scroll-focus-ring-width',
+            '--gog-scroll-normal-thumb-hit-padding',
             '--gog-scroll-normal-thumb-min-size',
             '--gog-scroll-normal-track-width',
+            '--gog-scroll-thin-thumb-hit-padding',
             '--gog-scroll-thin-thumb-min-size',
             '--gog-scroll-thin-track-width',
             '--gog-scroll-thumb-active-bg',