@guildofgleks/ui 21.7.2 → 21.8.0

package/AGENTS.md

@@ -5,7 +5,8 @@ an app that **consumes** the published `@guildofgleks/ui` npm package. It is not
 authoring the library — if you are working inside the `gleks_web_ui` monorepo itself, read
 `.github/instructions/*.md` instead.
 
-Everything below reflects the library's actual source as of **`21.7.0`**. 21.7.0 removed the three
+Everything below reflects the library's actual source as of **`21.8.0`** (in progress — the
+released version is 21.7.2; see `CHANGELOG.md` for what 21.8.0 adds). 21.7.0 removed the three
 abbreviated token prefixes and 21.5.0 removed a batch of deprecated API — see **Removed in 21.7.0**
 and **Removed in 21.5.0** near the end of this file, which exist so code written against an older
 version can be migrated — and `CHANGELOG.md` has the rest. `README.md` covers the same ground at a
@@ -264,7 +265,7 @@ parent's config**, one level deep per key — it does not replace it.
 
 | Key            | Fields                                                                  | Applies to                                                                                                                                                                                                                                                                                                                                                                                                   |
 | -------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `control`      | `size`, `errorDisplay`, `clearable`                                     | `size`: button, inputfield, textarea, select, multiselect, checkbox, radio-group, button-toggle-group, datepicker. `errorDisplay`: inputfield, textarea, select, multiselect, autocomplete, radio-group, slider, datepicker. `clearable`: inputfield, textarea, select, multiselect, autocomplete, datepicker. Not table/accordion/paginator (density, not form size), not spinner/skeleton/tag/chip/toggle. |
+| `control`      | `size`, `errorDisplay`, `clearable`                                     | `size`: button, `[gogButton]`, button-toggle-group, checkbox, toggle, radio-group, inputfield, textarea, select, multiselect, autocomplete, datepicker. `errorDisplay`: inputfield, textarea, select, multiselect, autocomplete, datepicker, radio-group, slider. `clearable`: inputfield, textarea, select, multiselect, autocomplete, datepicker. Not table/accordion/paginator (density, not form size), not spinner/skeleton/tag/chip.                                                          |
 | `dropdown`     | `appendToBody`, `direction`, `filter`, `filterPosition`                 | `gog-select`, `gog-multiselect`. `gog-datepicker`/`gog-autocomplete` honour `appendToBody`/`direction` too (autocomplete has no `filter` box — it filters via the trigger's own text).                                                                                                                                                                                                                       |
 | `floatLabel`   | `variant`, `showPlaceholder`                                            | inputfield, textarea, select, multiselect, autocomplete, datepicker.                                                                                                                                                                                                                                                                                                                                         |
 | `datepicker`   | `locale`, `firstDayOfWeek`, `format`                                    | `gog-datepicker`, `gog-calendar`.                                                                                                                                                                                                                                                                                                                                                                            |
@@ -474,10 +475,37 @@ Every component below is exported from `@guildofgleks/ui`'s root — `import { X
 | `loading`   | `boolean`                         | `false`     | shows an inline `gog-spinner`, blocks clicks          |
 | `debounce`  | `number \| undefined`             | `300`       | ms; via `GOG_CONFIG.button.debounce` — see note below |
 | `ariaLabel` | `string \| null`                  | `null`      | **use this, not a raw `aria-label` attribute**        |
+| `ariaPressed` | `boolean \| 'mixed' \| null`    | `null`      | toggle button; `false` renders `aria-pressed="false"` |
+| `ariaExpanded` | `boolean \| null`              | `null`      | disclosure / popup trigger                            |
+| `ariaControls` | `string \| null`               | `null`      | id of the controlled element; pairs with `ariaExpanded` |
+| `ariaHasPopup` | `GogAriaHasPopup \| null`      | `null`      | `boolean \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'` |
 | `ripple`    | `boolean \| undefined`            | `false`     | press ripple; via `GOG_CONFIG.ripple.enabled`         |
 
 Outputs: `gogClick: MouseEvent`.
 
+**Every ARIA attribute this button needs has an input, and a raw attribute is not a
+substitute.** `<gog-button [attr.aria-pressed]="on()">` compiles, throws nothing, and does
+nothing: the attribute lands on the `<gog-button>` custom element, which has no role, while the
+real `<button>` inside stays unmarked. The failure is invisible — the control looks right and is
+simply not a toggle to a screen reader. Use `[ariaPressed]`, `[ariaExpanded]`, `[ariaControls]`,
+`[ariaHasPopup]` and `ariaLabel`.
+
+`false` is not the same as unset. `null` omits the attribute; `false` renders
+`aria-pressed="false"` / `aria-expanded="false"`, which is what an off toggle or a closed
+disclosure has to say — a button with no `aria-pressed` at all is not a toggle button.
+
+**`[gogButton]` needs none of these inputs.** It styles an element you own, so write the ARIA
+attributes on your own `<button>`/`<a>` directly. Same for `[gogMenuTrigger]`, which sets
+`aria-haspopup`/`aria-expanded`/`aria-controls` on its host — put it on your own `<button
+gogButton>`, as its own example shows, not on a `<gog-button>`.
+
+```html
+<gog-button [ariaPressed]="mirrored()" (gogClick)="toggleMirror()">Mirror</gog-button>
+
+<gog-button [ariaExpanded]="open()" ariaControls="filters" ariaHasPopup="dialog"
+            (gogClick)="open.set(!open())">Filters</gog-button>
+```
+
 **`debounce` is a spam guard, not a delay before the first click.** The first click in a window
 fires immediately (leading edge); further clicks within `debounce` ms are silently dropped.
 
@@ -707,12 +735,12 @@ icon.
 An on/off switch (`role="switch"`) — semantically different from a checkbox ("is this setting
 on", not "is this one of the things you selected").
 
-| Input                   | Type                   | Default |
-| ----------------------- | ---------------------- | ------- |
-| `label`, `ariaLabel`    | `string`               | `''`    |
-| `size`                  | `GogSize \| undefined` | `'md'`  |
-| `disabled`, `fullWidth` | `boolean`              | `false` |
-| `labelPosition`         | `'start' \| 'end'`     | `'end'` |
+| Input                   | Type                   | Default | Notes                                 |
+| ----------------------- | ---------------------- | ------- | ------------------------------------- |
+| `label`, `ariaLabel`    | `string`               | `''`    |                                       |
+| `size`                  | `GogSize \| undefined` | `'md'`  | via `GOG_CONFIG.control.size`         |
+| `disabled`, `fullWidth` | `boolean`              | `false` |                                       |
+| `labelPosition`         | `'start' \| 'end'`     | `'end'` |                                       |
 | `onLabel`, `offLabel`   | `string`               | `''`    | text rendered inside the track itself |
 
 Model: `checked: boolean`. CVA: yes.
@@ -1752,6 +1780,7 @@ Shared enum-like types (`import type { ... } from '@guildofgleks/ui'`):
 | `GogSize`                     | `'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`                                                                            |
 | `GogVariant`                  | `'primary' \| 'secondary' \| 'outline' \| 'ghost'`                                                                  |
 | `GogSurfaceVariant`           | `'outlined' \| 'elevated' \| 'filled'` — `gog-card` and `gog-panel`                                                 |
+| `GogAriaHasPopup`             | `boolean \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'` — `gog-button`'s `ariaHasPopup`                    |
 | `GogTagVariant`               | `'success' \| 'danger' \| 'warning' \| 'info'`                                                                      |
 | `GogOrientation`              | `'horizontal' \| 'vertical'`                                                                                        |
 | `GogTagShape`                 | `'rounded' \| 'pill'`                                                                                               |

package/CHANGELOG.md

@@ -4,6 +4,36 @@ All notable changes to `@guildofgleks/ui` are documented here. Format follows
 [Keep a Changelog](https://keepachangelog.com/en/1.0.0/); this project has not yet
 reached 1.0, so breaking changes may land in minor versions.
 
+## [21.8.0] - 03.09.2026
+
+### Added
+
+- **`gog-button` forwards ARIA state and relationships: `ariaPressed`, `ariaExpanded`,
+  `ariaControls`, `ariaHasPopup`.** The component hides the real `<button>`, so
+  `<gog-button [attr.aria-pressed]="on()">` puts the attribute on the custom element host —
+  which has no role — and assistive tech never sees it. It compiles, throws nothing, looks
+  right, and silently ships a toggle button that is not a toggle button; `ariaLabel` already
+  existed for exactly this reason and was the only one. `null` (the default) omits the
+  attribute, while `false` is forwarded as `aria-pressed="false"`/`aria-expanded="false"`,
+  which is what an off toggle or a closed disclosure must say. New exported type
+  `GogAriaHasPopup`. The `[gogButton]` directive needs none of this — it styles an element you
+  own, so write the attributes there directly.
+
+### Fixed
+
+- **`GOG_CONFIG`'s own documentation now names every component that reads each key.** The
+  `GogGlobalConfig` JSDoc — the closest thing the library has to a source of truth for which
+  component honours which setting, and what your editor shows you on hover — under-reported four
+  keys. `control.size` did not mention `gog-button-toggle-group`, `gog-toggle`, `gog-autocomplete`
+  or `gog-datepicker`; `control.errorDisplay`, `control.clearable` and `floatLabel` did not
+  mention `gog-autocomplete` or `gog-datepicker`; and `dropdown` claimed to apply to
+  `gog-select`/`gog-multiselect` as a block, when `appendToBody`/`direction` also reach
+  `gog-autocomplete` and `gog-datepicker` while `filter`/`filterPosition` genuinely do not.
+  `AGENTS.md`'s config table was closer but stated outright that `gog-toggle` does **not** take
+  `control.size`, which it does. No behaviour change — every one of these components already
+  honoured the setting; only the documentation was wrong, in the direction of telling you a
+  setting would not work when it does.
+
 ## [21.7.2] - 30.08.2026
 
 ### Fixed

package/fesm2022/guildofgleks-ui.mjs

@@ -461,6 +461,35 @@ class ButtonComponent {
      * Use this input instead, especially for icon-only buttons.
      */
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * State and relationship attributes, forwarded to the native `<button>` for the same reason
+     * `ariaLabel` is: this component hides the real button, so an `[attr.aria-*]` written on
+     * `<gog-button>` lands on the custom element — which has no role — and reaches nothing.
+     * It fails silently, with no error and no visible difference.
+     *
+     * `null` (the default) omits the attribute. `false` is **not** the same as `null` here and is
+     * deliberately forwarded: a toggle button in its off state has to say `aria-pressed="false"`,
+     * because a button with no `aria-pressed` at all is not a toggle button — it is a button that
+     * does something, and a screen reader will describe it as one.
+     *
+     * ```html
+     * <gog-button [ariaPressed]="isRtl()" (gogClick)="toggle()">Mirror</gog-button>
+     *
+     * <gog-button [ariaExpanded]="isOpen()" ariaControls="filters" ariaHasPopup="dialog">
+     *   Filters
+     * </gog-button>
+     * ```
+     *
+     * The `[gogButton]` directive needs none of this: it styles an element the consumer owns, so
+     * `aria-pressed` written there already lands where it should.
+     */
+    ariaPressed = input(null, ...(ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []));
+    /** See `ariaPressed`. `false` renders `aria-expanded="false"`; `null` omits the attribute. */
+    ariaExpanded = input(null, ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+    /** Id of the element this button controls — pairs with `ariaExpanded`. See `ariaPressed`. */
+    ariaControls = input(null, ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    /** What this button opens, if anything. See `ariaPressed`. */
+    ariaHasPopup = input(null, ...(ngDevMode ? [{ debugName: "ariaHasPopup" }] : /* istanbul ignore next */ []));
     gogClick = output();
     /** Fully non-interactive: excluded from tab order via the native `disabled` attribute. */
     isNativeDisabled = computed(() => this.disabled(), ...(ngDevMode ? [{ debugName: "isNativeDisabled" }] : /* istanbul ignore next */ []));
@@ -497,7 +526,7 @@ class ButtonComponent {
         this.click$.next(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ButtonComponent, isStandalone: true, selector: "gog-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaPressed: { classPropertyName: "ariaPressed", publicName: "ariaPressed", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick" }, host: { properties: { "class.gog-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-pressed]=\"ariaPressed()\"\r\n  [attr.aria-expanded]=\"ariaExpanded()\"\r\n  [attr.aria-controls]=\"ariaControls()\"\r\n  [attr.aria-haspopup]=\"ariaHasPopup()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"], dependencies: [{ kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -505,8 +534,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // Drives the :host(.gog-host--full-width) rules in the stylesheet — without this
                         // binding the `fullWidth` input has no visible effect.
                         '[class.gog-host--full-width]': 'fullWidth()',
-                    }, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
+                    }, template: "<button\r\n  (click)=\"onClick($event)\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"isDisabled() && !isNativeDisabled() ? 'true' : null\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-pressed]=\"ariaPressed()\"\r\n  [attr.aria-expanded]=\"ariaExpanded()\"\r\n  [attr.aria-controls]=\"ariaControls()\"\r\n  [attr.aria-haspopup]=\"ariaHasPopup()\"\r\n  [attr.disabled]=\"isNativeDisabled() ? true : null\"\r\n  [class.gog-btn--ghost]=\"variant() === 'ghost'\"\r\n  [class.gog-btn--loading]=\"loading()\"\r\n  [class.gog-btn--outline]=\"variant() === 'outline'\"\r\n  [class.gog-btn--primary]=\"variant() === 'primary'\"\r\n  [class.gog-btn--secondary]=\"variant() === 'secondary'\"\r\n  [class.gog-cursor-not-allowed]=\"isDisabled()\"\r\n  [class.gog-cursor-pointer]=\"!isDisabled()\"\r\n  [class.gog-cursor-wait]=\"loading()\"\r\n  [type]=\"type()\"\r\n  class=\"gog-btn gog-inline-center gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  gogRipple\r\n  [rippleDisabled]=\"!rippleEnabled()\"\r\n>\r\n  @if (loading()) {\r\n    <gog-spinner [size]=\"spinnerSize()\" aria-hidden=\"true\" class=\"gog-btn__spinner\" />\r\n  }\r\n\r\n  <span [class.gog-btn__content--hidden]=\"loading()\" class=\"gog-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-btn{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaPressed", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }] } });
 
 /** Built-in default, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SIZE$9 = 'md';
@@ -5517,7 +5546,7 @@ class ConfirmationDialogComponent {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n      data.cancelText\n    }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n      data.confirmText\n    }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirmation-dialog-gap);min-width:var(--gog-confirmation-dialog-min-width);max-width:var(--gog-confirmation-dialog-max-width);color:var(--gog-confirmation-dialog-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirmation-dialog-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirmation-dialog-actions-gap);margin-top:var(--gog-confirmation-dialog-actions-offset)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfirmationDialogComponent, isStandalone: true, selector: "gog-confirmation-dialog", ngImport: i0, template: "<div\n  class=\"confirm-dialog\"\n  [attr.aria-labelledby]=\"'confirm-title-' + instanceId\"\n  [attr.aria-describedby]=\"'confirm-desc-' + instanceId\"\n>\n  <h3 [id]=\"'confirm-title-' + instanceId\" class=\"confirm-dialog__title heading-md\">\n    {{ data.title }}\n  </h3>\n  <p [id]=\"'confirm-desc-' + instanceId\" class=\"confirm-dialog__description body-sm\">\n    {{ data.description }}\n  </p>\n  <div class=\"confirm-dialog__actions\">\n    <gog-button variant=\"ghost\" type=\"button\" (gogClick)=\"cancel()\">{{\n      data.cancelText\n    }}</gog-button>\n    <gog-button variant=\"primary\" type=\"button\" (gogClick)=\"confirm()\">{{\n      data.confirmText\n    }}</gog-button>\n  </div>\n</div>\n", styles: [":host{display:block;contain:layout style}.confirm-dialog{display:flex;flex-direction:column;gap:var(--gog-confirmation-dialog-gap);min-width:var(--gog-confirmation-dialog-min-width);max-width:var(--gog-confirmation-dialog-max-width);color:var(--gog-confirmation-dialog-color)}.confirm-dialog__title{margin:0}.confirm-dialog__description{margin:0;color:var(--gog-confirmation-dialog-description-color)}.confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--gog-confirmation-dialog-actions-gap);margin-top:var(--gog-confirmation-dialog-actions-offset)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
@@ -5925,7 +5954,7 @@ class ToastComponent {
         return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-toast\"\r\n  [class.gog-toast--paused]=\"isPaused()\"\r\n  [class.gog-toast--queued]=\"!isFront()\"\r\n  [class.gog-toast--success]=\"toast().type === 'success'\"\r\n  [class.gog-toast--error]=\"toast().type === 'error'\"\r\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n  [class.gog-toast--info]=\"toast().type === 'info'\"\r\n  [class.gog-toast--visible]=\"visible()\"\r\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n  (mouseenter)=\"pauseAutoDismiss()\"\r\n  (mouseleave)=\"resumeAutoDismiss()\"\r\n  (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n  <div class=\"gog-toast__content\">\r\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n    </span>\r\n    <div class=\"gog-toast__main\">\r\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n      @if (hasActions()) {\r\n        <div class=\"gog-toast__actions\">\r\n          @for (action of toast().actions; track action.label) {\r\n            <gog-button\r\n              class=\"gog-toast__action\"\r\n              variant=\"ghost\"\r\n              size=\"sm\"\r\n              type=\"button\"\r\n              (gogClick)=\"runAction(action)\"\r\n            >\r\n              @if (action.iconName || action.iconTemplate) {\r\n                <gog-icon\r\n                  [template]=\"action.iconTemplate ?? null\"\r\n                  [name]=\"action.iconName ?? 'check'\"\r\n                />\r\n              }\r\n              {{ action.label }}\r\n            </gog-button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <gog-button\r\n      class=\"gog-toast__close\"\r\n      variant=\"ghost\"\r\n      size=\"sm\"\r\n      type=\"button\"\r\n      [ariaLabel]=\"closeLabel\"\r\n      (gogClick)=\"close()\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </gog-button>\r\n  </div>\r\n  @if (!toast().isSticky) {\r\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-inline-start:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-button-padding: var(--gog-toast-action-padding);--gog-button-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-button-padding: var(--gog-toast-close-padding);--gog-button-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast{transition:none;animation:none}.gog-toast__progress{transition:none;animation-timing-function:steps(20,end)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-toast\"\r\n  [class.gog-toast--paused]=\"isPaused()\"\r\n  [class.gog-toast--queued]=\"!isFront()\"\r\n  [class.gog-toast--success]=\"toast().type === 'success'\"\r\n  [class.gog-toast--error]=\"toast().type === 'error'\"\r\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n  [class.gog-toast--info]=\"toast().type === 'info'\"\r\n  [class.gog-toast--visible]=\"visible()\"\r\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n  (mouseenter)=\"pauseAutoDismiss()\"\r\n  (mouseleave)=\"resumeAutoDismiss()\"\r\n  (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n  <div class=\"gog-toast__content\">\r\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n    </span>\r\n    <div class=\"gog-toast__main\">\r\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n      @if (hasActions()) {\r\n        <div class=\"gog-toast__actions\">\r\n          @for (action of toast().actions; track action.label) {\r\n            <gog-button\r\n              class=\"gog-toast__action\"\r\n              variant=\"ghost\"\r\n              size=\"sm\"\r\n              type=\"button\"\r\n              (gogClick)=\"runAction(action)\"\r\n            >\r\n              @if (action.iconName || action.iconTemplate) {\r\n                <gog-icon\r\n                  [template]=\"action.iconTemplate ?? null\"\r\n                  [name]=\"action.iconName ?? 'check'\"\r\n                />\r\n              }\r\n              {{ action.label }}\r\n            </gog-button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <gog-button\r\n      class=\"gog-toast__close\"\r\n      variant=\"ghost\"\r\n      size=\"sm\"\r\n      type=\"button\"\r\n      [ariaLabel]=\"closeLabel\"\r\n      (gogClick)=\"close()\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </gog-button>\r\n  </div>\r\n  @if (!toast().isSticky) {\r\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-inline-start:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-button-padding: var(--gog-toast-action-padding);--gog-button-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-button-padding: var(--gog-toast-close-padding);--gog-button-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;inset-inline:0;bottom:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:var(--gog-inline-start-side) center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast{transition:none;animation:none}.gog-toast__progress{transition:none;animation-timing-function:steps(20,end)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], 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,
@@ -7896,7 +7925,7 @@ class MultiselectComponent extends GogDropdownBase {
         return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\r\n    (click)=\"toggle()\"\r\n    (focus)=\"onFocusIn()\"\r\n    (blur)=\"onFocusOut()\"\r\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n    (keydown.escape)=\"close()\"\r\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? null\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? null\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__empty\">{{ filterEmptyMessage() }}</p>\r\n        }\r\n        @for (option of visibleOptions(); track valueOf(option)) {\r\n          <!--\r\n            tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__option\"\r\n            role=\"option\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-selected]=\"isSelected(option)\"\r\n            [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n            [class.gog-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(option, $event)\"\r\n            (keydown)=\"onOptionKeydown($event)\"\r\n            gogRipple\r\n            [rippleDisabled]=\"!rippleEnabled()\"\r\n          >\r\n            @if (optionSlot(); as slot) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  slot.templateRef;\r\n                  context: optionContext(option, isSelected(option))\r\n                \"\r\n              />\r\n            } @else {\r\n              <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">{{\r\n      resolvedSelectAllLabel()\r\n    }}</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">{{\r\n      resolvedClearAllLabel()\r\n    }}</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;align-self:baseline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-inline-end:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;inset-inline-start:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;align-self:baseline;margin-inline-start:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-inline-start:1.1em;text-align:start}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }, { kind: "directive", type: GogRippleDirective, selector: "[gogRipple]", inputs: ["rippleDisabled", "rippleCentred"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -8396,7 +8425,7 @@ class PaginatorComponent {
             this.pageSize.set(size);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === resolvedTotalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n\r\n@if (resolvedShowPageSizeSelect()) {\r\n  <!--\r\n    Bound with `[(pageSize)]`'s writable half, so choosing a size writes straight back through the\r\n    model the consumer bound \u2014 there is no intermediate state to keep in sync. `fullWidth` off so\r\n    the select sizes to its content instead of stretching the paginator row.\r\n\r\n    A plain `@if`, not `@defer`, and that was measured rather than assumed: `@defer` does move\r\n    `SelectComponent` out of this component's static `dependencies` and into\r\n    `deferBlockDependencies`, but ng-packagr flattens the whole library into one FESM, so the\r\n    deferred reference compiles to `Promise.resolve().then(() => select_component)` \u2014 a binding in\r\n    the *same module*, not a dynamic `import()`. With no import boundary there is nothing for a\r\n    bundler to split on and nothing it may drop, so the consumer ships exactly the same bytes,\r\n    minus a placeholder and an SSR pop-in. Making this genuinely lazy needs secondary entry\r\n    points (`@guildofgleks/ui/select`), which is a packaging decision, not a template one.\r\n  -->\r\n  <gog-select\r\n    class=\"gog-paginator__page-size\"\r\n    [options]=\"resolvedPageSizeOptions()\"\r\n    [value]=\"pageSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [fullWidth]=\"false\"\r\n    [size]=\"size()\"\r\n    [ariaLabel]=\"resolvedRowsPerPageLabel()\"\r\n    (valueChange)=\"onPageSizeChange($event)\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}.gog-paginator__page-size{margin-inline-start:auto;min-width:var(--gog-paginator-page-size-min-width)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: SelectComponent, selector: "gog-select", inputs: ["inputId", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedAriaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  [ariaLabel]=\"resolvedPreviousLabel()\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"pageLabel(item)\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === resolvedTotalPages()\"\r\n  [ariaLabel]=\"resolvedNextLabel()\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n\r\n@if (resolvedShowPageSizeSelect()) {\r\n  <!--\r\n    Bound with `[(pageSize)]`'s writable half, so choosing a size writes straight back through the\r\n    model the consumer bound \u2014 there is no intermediate state to keep in sync. `fullWidth` off so\r\n    the select sizes to its content instead of stretching the paginator row.\r\n\r\n    A plain `@if`, not `@defer`, and that was measured rather than assumed: `@defer` does move\r\n    `SelectComponent` out of this component's static `dependencies` and into\r\n    `deferBlockDependencies`, but ng-packagr flattens the whole library into one FESM, so the\r\n    deferred reference compiles to `Promise.resolve().then(() => select_component)` \u2014 a binding in\r\n    the *same module*, not a dynamic `import()`. With no import boundary there is nothing for a\r\n    bundler to split on and nothing it may drop, so the consumer ships exactly the same bytes,\r\n    minus a placeholder and an SSR pop-in. Making this genuinely lazy needs secondary entry\r\n    points (`@guildofgleks/ui/select`), which is a packaging decision, not a template one.\r\n  -->\r\n  <gog-select\r\n    class=\"gog-paginator__page-size\"\r\n    [options]=\"resolvedPageSizeOptions()\"\r\n    [value]=\"pageSize()\"\r\n    [disabled]=\"disabled()\"\r\n    [fullWidth]=\"false\"\r\n    [size]=\"size()\"\r\n    [ariaLabel]=\"resolvedRowsPerPageLabel()\"\r\n    (valueChange)=\"onPageSizeChange($event)\"\r\n  />\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}.gog-paginator__page-size{margin-inline-start:auto;min-width:var(--gog-paginator-page-size-min-width)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "ripple", "debounce", "ariaLabel", "ariaPressed", "ariaExpanded", "ariaControls", "ariaHasPopup"], outputs: ["gogClick"] }, { kind: "component", type: SelectComponent, selector: "gog-select", inputs: ["inputId", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,