@guildofgleks/ui 0.2.2 → 21.2.3

package/fesm2022/guildofgleks-ui.mjs

@@ -59,7 +59,7 @@ class ButtonComponent {
         sm: 'sm',
         md: 'sm',
         lg: 'md',
-        slg: 'lg',
+        slg: 'md',
     };
     spinnerSize = computed(() => ButtonComponent.SPINNER_SIZE_BY_BUTTON_SIZE[this.size()], ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
@@ -174,6 +174,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect{stroke-width:var(--gog-icon-stroke-width)}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }] } });
 
+class SkeletonComponent {
+    shape = input('text', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    animation = input('pulse', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
+    /** CSS width, e.g. '240px' or '60%'. Falls back to a shape/size default when unset. */
+    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** CSS height override. Ignored for `text`, whose lines size from `size` instead. */
+    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Number of stacked lines when `shape="text"`. The last line renders shorter. */
+    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    lineList = computed(() => {
+        const count = Math.max(1, this.lines());
+        return Array.from({ length: count }, (_, index) => count > 1 && index === count - 1);
+    }, ...(ngDevMode ? [{ debugName: "lineList" }] : /* istanbul ignore next */ []));
+    // Keeps a width-only override circular instead of an oval, since `circle` has no
+    // independent height concept of its own.
+    resolvedHeight = computed(() => {
+        if (this.shape() === 'text') {
+            return null;
+        }
+        if (this.shape() === 'circle') {
+            return this.height() ?? this.width();
+        }
+        return this.height();
+    }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => [
+        'gog-skeleton',
+        `gog-skeleton--${this.shape()}`,
+        `gog-skeleton--${this.size()}`,
+        `gog-skeleton--${this.animation()}`,
+        this.rounded() ? null : 'gog-skeleton--square',
+    ]
+        .filter((className) => className !== null)
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SkeletonComponent, isStandalone: true, selector: "gog-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.width": "width()", "style.height": "resolvedHeight()", "attr.role": "ariaLabel() ? \"status\" : null", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaLabel() ? null : \"true\"" } }, ngImport: i0, template: "@switch (shape()) {\n  @case ('text') {\n    @for (isShort of lineList(); track $index) {\n      <span\n        class=\"gog-skeleton__bone gog-skeleton__line\"\n        [class.gog-skeleton__line--short]=\"isShort\"\n      ></span>\n    }\n  }\n  @default {\n    <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gog-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[style.width]': 'width()',
+                        '[style.height]': 'resolvedHeight()',
+                        // Decorative by default — a page can carry dozens of these while loading, and a
+                        // role="status" on every single bone would flood assistive tech with announcements.
+                        // Pass `ariaLabel` on the one instance that should actually speak for the loading state.
+                        '[attr.role]': 'ariaLabel() ? "status" : null',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-hidden]': 'ariaLabel() ? null : "true"',
+                    }, template: "@switch (shape()) {\n  @case ('text') {\n    @for (isShort of lineList(); track $index) {\n      <span\n        class=\"gog-skeleton__bone gog-skeleton__line\"\n        [class.gog-skeleton__line--short]=\"isShort\"\n      ></span>\n    }\n  }\n  @default {\n    <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"] }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
 class GogAccordionContentDirective {
     templateRef = inject(TemplateRef);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -214,6 +268,14 @@ class AccordionComponent {
     expandFirst = input(false, ...(ngDevMode ? [{ debugName: "expandFirst" }] : /* istanbul ignore next */ []));
     multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /**
+     * How many skeleton rows to render while `loading` is true and `items` is still
+     * empty — the common case of "the list itself hasn't arrived yet," where there's
+     * no item count to derive a row count from. Ignored once `items` has entries:
+     * then one skeleton row is rendered per item instead, so the placeholder matches
+     * the eventual shape.
+     */
+    skeletonCount = input(3, ...(ngDevMode ? [{ debugName: "skeletonCount" }] : /* istanbul ignore next */ []));
     showChevron = input(true, ...(ngDevMode ? [{ debugName: "showChevron" }] : /* istanbul ignore next */ []));
     /**
      * When set, wraps each header button in `role="heading"` with this `aria-level`,
@@ -248,6 +310,10 @@ class AccordionComponent {
      * with a new array reference after the user closed everything by hand.
      */
     autoExpanded = signal(false, ...(ngDevMode ? [{ debugName: "autoExpanded" }] : /* istanbul ignore next */ []));
+    skeletonRows = computed(() => {
+        const count = this.items().length || this.skeletonCount();
+        return Array.from({ length: count }, (_, index) => index);
+    }, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const items = this.items();
@@ -287,14 +353,14 @@ class AccordionComponent {
         handleRovingFocusKeydown(event, headers);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [class.gog-accordion--loading]=\"loading()\"\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\n  [class.gog-accordion--md]=\"size() === 'md'\"\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\n  class=\"gog-accordion gog-contained-layout\"\n>\n  @if (loading()) {\n    @for (item of items(); track item.id) {\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\n          <span class=\"gog-accordion__skeleton-line\"></span>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of items(); track item.id) {\n      <div\n        class=\"gog-accordion__item\"\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\n      >\n        <ng-template #headerButton>\n          <button\n            [id]=\"uid + '-btn-' + item.id\"\n            class=\"gog-accordion__header\"\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\n            [attr.aria-expanded]=\"isOpen(item.id)\"\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [disabled]=\"item.disabled || null\"\n            (click)=\"toggle(item)\"\n            (keydown)=\"onHeaderKeydown($event)\"\n            type=\"button\"\n          >\n            <span class=\"gog-accordion__header-content\">\n              @if (headerTpl(); as tpl) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tpl.templateRef;\n                    context: { $implicit: item, open: isOpen(item.id) }\n                  \"\n                />\n              } @else {\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\n              }\n            </span>\n            @if (showChevron()) {\n              <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\n                @if (chevronTpl(); as tpl) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      tpl.templateRef;\n                      context: { $implicit: item, open: isOpen(item.id) }\n                    \"\n                  />\n                } @else {\n                  <gog-icon name=\"chevron-down\" />\n                }\n              </span>\n            }\n          </button>\n        </ng-template>\n\n        @if (headingLevel(); as level) {\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\n          </div>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\n        }\n\n        <div\n          [id]=\"uid + '-body-' + item.id\"\n          class=\"gog-accordion__body\"\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\n        >\n          <div class=\"gog-accordion__body-inner\">\n            @if (contentTpl(); as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\n            }\n          </div>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:var(--gog-accordion-skeleton-height);width:var(--gog-accordion-skeleton-width);border-radius:var(--gog-accordion-skeleton-radius);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer var(--gog-accordion-skeleton-duration) infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\r\n  [class.gog-accordion--md]=\"size() === 'md'\"\r\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"55%\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet, IconComponent, SkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-accordion-host',
-                    }, template: "<div\n  [class.gog-accordion--loading]=\"loading()\"\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\n  [class.gog-accordion--md]=\"size() === 'md'\"\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\n  class=\"gog-accordion gog-contained-layout\"\n>\n  @if (loading()) {\n    @for (item of items(); track item.id) {\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\n          <span class=\"gog-accordion__skeleton-line\"></span>\n        </div>\n      </div>\n    }\n  } @else {\n    @for (item of items(); track item.id) {\n      <div\n        class=\"gog-accordion__item\"\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\n      >\n        <ng-template #headerButton>\n          <button\n            [id]=\"uid + '-btn-' + item.id\"\n            class=\"gog-accordion__header\"\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\n            [attr.aria-expanded]=\"isOpen(item.id)\"\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n            [disabled]=\"item.disabled || null\"\n            (click)=\"toggle(item)\"\n            (keydown)=\"onHeaderKeydown($event)\"\n            type=\"button\"\n          >\n            <span class=\"gog-accordion__header-content\">\n              @if (headerTpl(); as tpl) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tpl.templateRef;\n                    context: { $implicit: item, open: isOpen(item.id) }\n                  \"\n                />\n              } @else {\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\n              }\n            </span>\n            @if (showChevron()) {\n              <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\n                @if (chevronTpl(); as tpl) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      tpl.templateRef;\n                      context: { $implicit: item, open: isOpen(item.id) }\n                    \"\n                  />\n                } @else {\n                  <gog-icon name=\"chevron-down\" />\n                }\n              </span>\n            }\n          </button>\n        </ng-template>\n\n        @if (headingLevel(); as level) {\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\n          </div>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\n        }\n\n        <div\n          [id]=\"uid + '-body-' + item.id\"\n          class=\"gog-accordion__body\"\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\n        >\n          <div class=\"gog-accordion__body-inner\">\n            @if (contentTpl(); as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\n            }\n          </div>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{transform:rotate(180deg);color:var(--gog-accordion-accent-color)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}.gog-accordion__skeleton-line{display:block;height:var(--gog-accordion-skeleton-height);width:var(--gog-accordion-skeleton-width);border-radius:var(--gog-accordion-skeleton-radius);background:linear-gradient(90deg,var(--gog-accordion-skeleton-start) 25%,var(--gog-accordion-skeleton-mid) 50%,var(--gog-accordion-skeleton-end) 75%);background-size:200% 100%;animation:gog-accordion-shimmer var(--gog-accordion-skeleton-duration) infinite}@keyframes gog-accordion-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}.gog-accordion__skeleton-line{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], openIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIds", required: false }] }, { type: i0.Output, args: ["openIdsChange"] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
+                    }, template: "<div\r\n  [class.gog-accordion--loading]=\"loading()\"\r\n  [class.gog-accordion--slg]=\"size() === 'slg'\"\r\n  [class.gog-accordion--md]=\"size() === 'md'\"\r\n  [class.gog-accordion--sm]=\"size() === 'sm'\"\r\n  [class.gog-accordion--xsm]=\"size() === 'xsm'\"\r\n  class=\"gog-accordion gog-contained-layout\"\r\n>\r\n  @if (loading()) {\r\n    @for (row of skeletonRows(); track row) {\r\n      <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n        <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n          <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"55%\" />\r\n        </div>\r\n      </div>\r\n    }\r\n  } @else {\r\n    @for (item of items(); track item.id) {\r\n      <div\r\n        class=\"gog-accordion__item\"\r\n        [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n        [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n      >\r\n        <ng-template #headerButton>\r\n          <button\r\n            [id]=\"uid + '-btn-' + item.id\"\r\n            class=\"gog-accordion__header\"\r\n            [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n            [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n            [attr.aria-expanded]=\"isOpen(item.id)\"\r\n            [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n            [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n            [disabled]=\"item.disabled || null\"\r\n            (click)=\"toggle(item)\"\r\n            (keydown)=\"onHeaderKeydown($event)\"\r\n            type=\"button\"\r\n          >\r\n            <span class=\"gog-accordion__header-content\">\r\n              @if (headerTpl(); as tpl) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    tpl.templateRef;\r\n                    context: { $implicit: item, open: isOpen(item.id) }\r\n                  \"\r\n                />\r\n              } @else {\r\n                <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n              }\r\n            </span>\r\n            @if (showChevron()) {\r\n              <span\r\n                class=\"gog-accordion__chevron\"\r\n                [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                @if (chevronTpl(); as tpl) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      tpl.templateRef;\r\n                      context: { $implicit: item, open: isOpen(item.id) }\r\n                    \"\r\n                  />\r\n                } @else {\r\n                  <gog-icon name=\"chevron-down\" />\r\n                }\r\n              </span>\r\n            }\r\n          </button>\r\n        </ng-template>\r\n\r\n        @if (headingLevel(); as level) {\r\n          <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n            <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n          </div>\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n        }\r\n\r\n        <div\r\n          [id]=\"uid + '-body-' + item.id\"\r\n          class=\"gog-accordion__body\"\r\n          [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n          role=\"region\"\r\n          [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n          [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n          [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n        >\r\n          <div class=\"gog-accordion__body-inner\">\r\n            @if (contentTpl(); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:left;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], openIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIds", required: false }] }, { type: i0.Output, args: ["openIdsChange"] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
 
 const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 6px)';
 const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
@@ -331,6 +397,7 @@ class CheckboxComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     checkIconTemplate = input(null, ...(ngDevMode ? [{ debugName: "checkIconTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Two-way bindable checked state: `[(checked)]="signal"`.
@@ -376,13 +443,13 @@ class CheckboxComponent {
     onCheckedChange = () => { };
     onTouched = () => { };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "gog-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkIconTemplate: { classPropertyName: "checkIconTemplate", publicName: "checkIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "style.--gog-checkbox-box-size": "boxSize()", "style.--gog-checkbox-label-size": "labelSize()", "style.--gog-checkbox-icon-size": "iconSize()", "style.--gog-checkbox-padding": "checkboxPadding" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CheckboxComponent, isStandalone: true, selector: "gog-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, checkIconTemplate: { classPropertyName: "checkIconTemplate", publicName: "checkIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "style.--gog-checkbox-box-size": "boxSize()", "style.--gog-checkbox-label-size": "labelSize()", "style.--gog-checkbox-icon-size": "iconSize()", "style.--gog-checkbox-padding": "checkboxPadding", "class.gog-host--full-width": "fullWidth()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-checkbox{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -391,14 +458,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[style.--gog-checkbox-label-size]': 'labelSize()',
                         '[style.--gog-checkbox-icon-size]': 'iconSize()',
                         '[style.--gog-checkbox-padding]': 'checkboxPadding',
+                        // 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()',
                     }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIconTemplate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+                    ], template: "<label [class.gog-checkbox--disabled]=\"isDisabled()\" class=\"gog-checkbox gog-contained-layout\">\n  <input\n    (blur)=\"onBlur()\"\n    (change)=\"onInputChange($event)\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__input\"\n    type=\"checkbox\"\n  />\n\n  <span\n    [class.gog-checkbox__box--checked]=\"checked()\"\n    [class.gog-checkbox__box--indeterminate]=\"indeterminate()\"\n    class=\"gog-checkbox__box\"\n  >\n    @if (indeterminate()) {\n      <span class=\"gog-checkbox__dash\" aria-hidden=\"true\"></span>\n    } @else if (checked()) {\n      <gog-icon [template]=\"checkIconTemplate()\" name=\"check\" />\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"gog-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".gog-checkbox{display:inline-flex;align-items:center;gap:var(--gog-checkbox-gap);padding:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.gog-checkbox--disabled{opacity:var(--gog-checkbox-disabled-opacity);cursor:not-allowed}.gog-checkbox__input{position:absolute;top:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));left:var(--gog-checkbox-padding, var(--gog-control-checkbox-padding));width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));margin:0;opacity:0;cursor:inherit}.gog-checkbox__box{display:flex;align-items:center;justify-content:center;width:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));height:var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md));box-sizing:border-box;border:var(--gog-checkbox-border-width) var(--gog-checkbox-border-style) var(--gog-checkbox-border-color);border-radius:var(--gog-checkbox-radius);background-color:var(--gog-checkbox-bg);color:var(--gog-checkbox-icon-color);flex:0 0 auto;line-height:0;overflow:hidden;transition:border-color var(--gog-checkbox-transition-duration) var(--gog-easing),background-color var(--gog-checkbox-transition-duration) var(--gog-easing)}.gog-checkbox__box--checked,.gog-checkbox__box--indeterminate{border-color:var(--gog-checkbox-checked-border);background-color:var(--gog-checkbox-checked-bg)}.gog-checkbox__box gog-icon{display:block;font-size:var(--gog-checkbox-icon-size, var(--gog-control-checkbox-icon-size-md));line-height:1;pointer-events:none}.gog-checkbox__dash{width:calc(var(--gog-checkbox-box-size, var(--gog-control-checkbox-box-size-md)) * var(--gog-checkbox-dash-width-ratio));height:var(--gog-checkbox-dash-height);border-radius:var(--gog-checkbox-dash-radius);background-color:currentColor;pointer-events:none}.gog-checkbox__label{font-family:var(--gog-checkbox-font-family);font-size:var(--gog-checkbox-label-size, var(--gog-control-checkbox-label-size-md));line-height:var(--gog-checkbox-label-line-height);color:var(--gog-checkbox-label-color)}.gog-checkbox__input:focus-visible+.gog-checkbox__box{outline:var(--gog-checkbox-focus-ring-width) solid var(--gog-checkbox-focus-ring);outline-offset:var(--gog-checkbox-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.gog-checkbox__box{transition:none}}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-checkbox{width:100%}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], checkIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIconTemplate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
 const DIALOG_REF = new InjectionToken('DIALOG_REF');
@@ -993,6 +1063,11 @@ class InputfieldComponent {
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default, matching every other field-style control.
+     * Set to `false` to shrink the field to fit its content instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     /** Default icon name for the leading icon. */
     iconStart = input('', ...(ngDevMode ? [{ debugName: "iconStart" }] : /* istanbul ignore next */ []));
     /** Default icon name for the trailing icon. */
@@ -1080,12 +1155,18 @@ class InputfieldComponent {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"effectiveType()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (visibleError()) {\n    <span\n      class=\"gog-input__error\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n      >{{ visibleError() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"effectiveType()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (visibleError()) {\n    <span\n      class=\"gog-input__error\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n      >{{ visibleError() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-inputfield', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"effectiveType()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (visibleError()) {\n    <span\n      class=\"gog-input__error\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n      >{{ visibleError() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+            args: [{ selector: 'gog-inputfield', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
+                        // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
+                        // full-width class: this field is full width by default, so the class only appears
+                        // once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    }, template: "<div\n  class=\"gog-input-wrapper gog-contained-layout\"\n  [class.gog-input-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-input-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-input-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-input-wrapper--slg]=\"size() === 'slg'\"\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd()\"\n>\n  @if (label()) {\n    <label class=\"gog-input__label\" [attr.for]=\"inputId() || null\">{{ label() }}</label>\n  }\n  <div class=\"gog-input__field-container\">\n    @if (hasIconStart()) {\n      @if (hasIconStartAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\n          [attr.aria-label]=\"iconStartLabel() || null\"\n          (click)=\"onIconStartClick()\"\n        >\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\n        </span>\n      }\n    }\n    <input\n      class=\"gog-input__field\"\n      [class.gog-input__field--error]=\"hasError()\"\n      [attr.id]=\"inputId() || null\"\n      [type]=\"effectiveType()\"\n      [attr.name]=\"name() || null\"\n      [placeholder]=\"placeholder()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [autocomplete]=\"effectiveAutocomplete()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (hasIconEnd()) {\n      @if (hasIconEndAction()) {\n        <button\n          type=\"button\"\n          class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\n          [attr.aria-label]=\"effectiveIconEndLabel() || null\"\n          (click)=\"onIconEndClick()\"\n        >\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </button>\n      } @else {\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\n        </span>\n      }\n    }\n  </div>\n  @if (visibleError()) {\n    <span\n      class=\"gog-input__error\"\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\n      role=\"alert\"\n      >{{ visibleError() }}</span\n    >\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}@media(prefers-reduced-motion:reduce){.gog-input__field{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class ChipComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -1093,6 +1174,7 @@ class ChipComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
     removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     removeAriaLabel = input('Remove chip', ...(ngDevMode ? [{ debugName: "removeAriaLabel" }] : /* istanbul ignore next */ []));
     avatarUrl = input(null, ...(ngDevMode ? [{ debugName: "avatarUrl" }] : /* istanbul ignore next */ []));
@@ -1109,6 +1191,7 @@ class ChipComponent {
         this.clickable() ? 'gog-chip--clickable' : null,
         this.avatarUrl() ? 'gog-chip--has-avatar' : null,
         this.iconName() ? 'gog-chip--has-icon' : null,
+        this.fullWidth() ? 'gog-host--full-width' : null,
     ]
         .filter((className) => className !== null)
         .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
@@ -1131,14 +1214,14 @@ class ChipComponent {
         this.gogRemove.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\n  class=\"gog-chip__surface\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.role]=\"isInteractive() ? 'button' : null\"\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n  (click)=\"onChipClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (avatarUrl()) {\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n  }\n\n  @if (iconName()) {\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n  }\n\n  <span class=\"gog-chip__content\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (removable() && !disabled()) {\n    <button\n      class=\"gog-chip__remove\"\n      type=\"button\"\n      [attr.aria-label]=\"removeAriaLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gog-icon name=\"close\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ChipComponent, isStandalone: true, selector: "gog-chip", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClick: "gogClick", gogRemove: "gogRemove" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div\n  class=\"gog-chip__surface\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.role]=\"isInteractive() ? 'button' : null\"\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n  (click)=\"onChipClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (avatarUrl()) {\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n  }\n\n  @if (iconName()) {\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n  }\n\n  <span class=\"gog-chip__content\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (removable() && !disabled()) {\n    <button\n      class=\"gog-chip__remove\"\n      type=\"button\"\n      [attr.aria-label]=\"removeAriaLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gog-icon name=\"close\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-chip', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div\n  class=\"gog-chip__surface\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.role]=\"isInteractive() ? 'button' : null\"\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n  (click)=\"onChipClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (avatarUrl()) {\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n  }\n\n  @if (iconName()) {\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n  }\n\n  <span class=\"gog-chip__content\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (removable() && !disabled()) {\n    <button\n      class=\"gog-chip__remove\"\n      type=\"button\"\n      [attr.aria-label]=\"removeAriaLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gog-icon name=\"close\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
+                    }, template: "<div\n  class=\"gog-chip__surface\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.role]=\"isInteractive() ? 'button' : null\"\n  [attr.tabindex]=\"isInteractive() ? 0 : null\"\n  [style.cursor]=\"isInteractive() ? 'pointer' : 'default'\"\n  (click)=\"onChipClick($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @if (avatarUrl()) {\n    <img class=\"gog-chip__avatar\" [src]=\"avatarUrl()\" [alt]=\"avatarAlt()\" />\n  }\n\n  @if (iconName()) {\n    <gog-icon class=\"gog-chip__icon\" [ariaHidden]=\"true\" [name]=\"iconName() ?? 'check'\" />\n  }\n\n  <span class=\"gog-chip__content\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (removable() && !disabled()) {\n    <button\n      class=\"gog-chip__remove\"\n      type=\"button\"\n      [attr.aria-label]=\"removeAriaLabel()\"\n      (click)=\"onRemoveClick($event)\"\n    >\n      <gog-icon name=\"close\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;max-width:100%;contain:layout style}.gog-chip__surface{display:inline-flex;align-items:center;gap:var(--gog-chip-gap, var(--gog-chip-size-gap, var(--gog-chip-md-gap)));box-sizing:border-box;width:fit-content;max-width:100%;overflow:hidden;padding:var(--gog-chip-padding-block, var(--gog-chip-size-padding-block, var(--gog-chip-md-padding-block))) var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline)));border:var(--gog-chip-border-width) var(--gog-chip-border-style) var(--gog-chip-border);border-radius:var(--gog-chip-radius);background-color:var(--gog-chip-bg);color:var(--gog-chip-color);font-family:var(--gog-chip-font-family);font-size:var(--gog-chip-font-size, var(--gog-chip-size-font-size, var(--gog-chip-md-font-size)));font-weight:var(--gog-chip-font-weight);line-height:var(--gog-chip-line-height);white-space:nowrap;-webkit-user-select:none;user-select:none}.gog-chip__surface:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--clickable) .gog-chip__surface:hover:not([aria-disabled=true]){background-color:var(--gog-chip-hover-bg)}.gog-chip__surface[aria-disabled=true]{opacity:var(--gog-chip-disabled-opacity);pointer-events:none}.gog-chip__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:var(--gog-chip-line-height)}.gog-chip__avatar{width:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));height:var(--gog-chip-avatar-size, var(--gog-chip-size-avatar-size, var(--gog-chip-md-avatar-size)));border-radius:50%;object-fit:cover;flex-shrink:0}.gog-chip__icon{flex-shrink:0;font-size:var(--gog-chip-icon-size, var(--gog-chip-size-icon-size, var(--gog-chip-md-icon-size)))}.gog-chip__remove{display:inline-grid;place-items:center;width:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));height:calc(var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size))) * var(--gog-chip-remove-scale));padding:0;border:0;border-radius:50%;background:transparent;color:var(--gog-chip-remove-color);font-size:var(--gog-chip-remove-size, var(--gog-chip-size-remove-size, var(--gog-chip-md-remove-size)));cursor:pointer;flex-shrink:0}.gog-chip__remove:hover:not(:disabled){color:var(--gog-chip-remove-hover-color)}.gog-chip__remove:focus-visible{outline:var(--gog-chip-focus-ring-width) solid var(--gog-chip-border);outline-offset:var(--gog-chip-focus-ring-offset)}:host(.gog-chip--xsm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-xsm-font-size);--gog-chip-size-padding-block: var(--gog-chip-xsm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-xsm-padding-inline);--gog-chip-size-gap: var(--gog-chip-xsm-gap);--gog-chip-size-avatar-size: var(--gog-chip-xsm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-xsm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-xsm-remove-size)}:host(.gog-chip--sm) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-sm-font-size);--gog-chip-size-padding-block: var(--gog-chip-sm-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-sm-padding-inline);--gog-chip-size-gap: var(--gog-chip-sm-gap);--gog-chip-size-avatar-size: var(--gog-chip-sm-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-sm-icon-size);--gog-chip-size-remove-size: var(--gog-chip-sm-remove-size)}:host(.gog-chip--md) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-md-font-size);--gog-chip-size-padding-block: var(--gog-chip-md-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-md-padding-inline);--gog-chip-size-gap: var(--gog-chip-md-gap);--gog-chip-size-avatar-size: var(--gog-chip-md-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-md-icon-size);--gog-chip-size-remove-size: var(--gog-chip-md-remove-size)}:host(.gog-chip--lg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-lg-font-size);--gog-chip-size-padding-block: var(--gog-chip-lg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-lg-padding-inline);--gog-chip-size-gap: var(--gog-chip-lg-gap);--gog-chip-size-avatar-size: var(--gog-chip-lg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-lg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-lg-remove-size)}:host(.gog-chip--slg) .gog-chip__surface{--gog-chip-size-font-size: var(--gog-chip-slg-font-size);--gog-chip-size-padding-block: var(--gog-chip-slg-padding-block);--gog-chip-size-padding-inline: var(--gog-chip-slg-padding-inline);--gog-chip-size-gap: var(--gog-chip-slg-gap);--gog-chip-size-avatar-size: var(--gog-chip-slg-avatar-size);--gog-chip-size-icon-size: var(--gog-chip-slg-icon-size);--gog-chip-size-remove-size: var(--gog-chip-slg-remove-size)}:host(.gog-chip--pill) .gog-chip__surface{border-radius:var(--gog-chip-pill-radius)}:host(.gog-chip--rounded) .gog-chip__surface{border-radius:var(--gog-chip-radius)}:host(.gog-chip--has-avatar) .gog-chip__surface{padding-left:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-avatar-inset-ratio))}:host(.gog-chip--removable) .gog-chip__surface{padding-right:calc(var(--gog-chip-padding-inline, var(--gog-chip-size-padding-inline, var(--gog-chip-md-padding-inline))) * var(--gog-chip-remove-inset-ratio))}:host(.gog-host--full-width){display:flex}:host(.gog-host--full-width) .gog-chip__surface{width:100%}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], gogClick: [{ type: i0.Output, args: ["gogClick"] }], gogRemove: [{ type: i0.Output, args: ["gogRemove"] }] } });
 
 class TagComponent {
     variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -1146,6 +1229,7 @@ class TagComponent {
     shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     iconName = input(null, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
     iconTemplate = input(null, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     hasIcon = computed(() => this.iconTemplate() !== null || this.iconName() !== null, ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => [
         'gog-tag',
@@ -1153,18 +1237,19 @@ class TagComponent {
         `gog-tag--${this.size()}`,
         `gog-tag--${this.shape()}`,
         this.hasIcon() ? 'gog-tag--has-icon' : null,
+        this.fullWidth() ? 'gog-host--full-width' : null,
     ]
         .filter((className) => className !== null)
         .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagComponent, isStandalone: true, selector: "gog-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (hasIcon()) {\n  <gog-icon\n    class=\"gog-tag__icon\"\n    [ariaHidden]=\"true\"\n    [name]=\"iconName() ?? 'info'\"\n    [template]=\"iconTemplate()\"\n  />\n}\n\n<span class=\"gog-tag__content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-resolved-color: var( --gog-tag-accent, var(--gog-tag-variant-color, var(--gog-tag-default-color)) );display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block, var(--gog-tag-size-padding-block, var(--gog-tag-md-padding-block))) var(--gog-tag-padding-inline, var(--gog-tag-size-padding-inline, var(--gog-tag-md-padding-inline)));border:var(--gog-tag-border-width) var(--gog-tag-border-style) var(--gog-tag-border, var(--gog-tag-resolved-color));border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-bg-mix), var(--gog-tag-bg-base)));box-shadow:inset 0 0 0 var(--gog-tag-inner-border-width) var(--gog-tag-border, var(--gog-tag-resolved-color));color:var(--gog-tag-color, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-color-mix), var(--gog-tag-color-base)));font-family:var(--gog-tag-font-family);font-size:var(--gog-tag-font-size, var(--gog-tag-size-font-size, var(--gog-tag-md-font-size)));font-weight:var(--gog-tag-font-weight);line-height:var(--gog-tag-line-height);white-space:nowrap;gap:var(--gog-tag-gap, var(--gog-tag-size-gap, var(--gog-tag-md-gap)))}:host(.gog-tag--success){--gog-tag-variant-color: var(--gog-tag-success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--gog-tag-danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--gog-tag-warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--gog-tag-info-color)}:host(.gog-tag--xsm){--gog-tag-size-font-size: var(--gog-tag-xsm-font-size);--gog-tag-size-padding-block: var(--gog-tag-xsm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-xsm-padding-inline);--gog-tag-size-gap: var(--gog-tag-xsm-gap);--gog-tag-size-icon-size: var(--gog-tag-xsm-icon-size)}:host(.gog-tag--sm){--gog-tag-size-font-size: var(--gog-tag-sm-font-size);--gog-tag-size-padding-block: var(--gog-tag-sm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-sm-padding-inline);--gog-tag-size-gap: var(--gog-tag-sm-gap);--gog-tag-size-icon-size: var(--gog-tag-sm-icon-size)}:host(.gog-tag--md){--gog-tag-size-font-size: var(--gog-tag-md-font-size);--gog-tag-size-padding-block: var(--gog-tag-md-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-md-padding-inline);--gog-tag-size-gap: var(--gog-tag-md-gap);--gog-tag-size-icon-size: var(--gog-tag-md-icon-size)}:host(.gog-tag--lg){--gog-tag-size-font-size: var(--gog-tag-lg-font-size);--gog-tag-size-padding-block: var(--gog-tag-lg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-lg-padding-inline);--gog-tag-size-gap: var(--gog-tag-lg-gap);--gog-tag-size-icon-size: var(--gog-tag-lg-icon-size)}:host(.gog-tag--slg){--gog-tag-size-font-size: var(--gog-tag-slg-font-size);--gog-tag-size-padding-block: var(--gog-tag-slg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-slg-padding-inline);--gog-tag-size-gap: var(--gog-tag-slg-gap);--gog-tag-size-icon-size: var(--gog-tag-slg-icon-size)}:host(.gog-tag--rounded){border-radius:var(--gog-tag-radius)}:host(.gog-tag--pill){border-radius:var(--gog-tag-pill-radius)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size, var(--gog-tag-size-icon-size, var(--gog-tag-md-icon-size)))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagComponent, isStandalone: true, selector: "gog-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (hasIcon()) {\n  <gog-icon\n    class=\"gog-tag__icon\"\n    [ariaHidden]=\"true\"\n    [name]=\"iconName() ?? 'info'\"\n    [template]=\"iconTemplate()\"\n  />\n}\n\n<span class=\"gog-tag__content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-resolved-color: var( --gog-tag-accent, var(--gog-tag-variant-color, var(--gog-tag-default-color)) );display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block, var(--gog-tag-size-padding-block, var(--gog-tag-md-padding-block))) var(--gog-tag-padding-inline, var(--gog-tag-size-padding-inline, var(--gog-tag-md-padding-inline)));border:var(--gog-tag-border-width) var(--gog-tag-border-style) var(--gog-tag-border, var(--gog-tag-resolved-color));border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-bg-mix), var(--gog-tag-bg-base)));box-shadow:inset 0 0 0 var(--gog-tag-inner-border-width) var(--gog-tag-border, var(--gog-tag-resolved-color));color:var(--gog-tag-color, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-color-mix), var(--gog-tag-color-base)));font-family:var(--gog-tag-font-family);font-size:var(--gog-tag-font-size, var(--gog-tag-size-font-size, var(--gog-tag-md-font-size)));font-weight:var(--gog-tag-font-weight);line-height:var(--gog-tag-line-height);white-space:nowrap;gap:var(--gog-tag-gap, var(--gog-tag-size-gap, var(--gog-tag-md-gap)))}:host(.gog-tag--success){--gog-tag-variant-color: var(--gog-tag-success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--gog-tag-danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--gog-tag-warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--gog-tag-info-color)}:host(.gog-tag--xsm){--gog-tag-size-font-size: var(--gog-tag-xsm-font-size);--gog-tag-size-padding-block: var(--gog-tag-xsm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-xsm-padding-inline);--gog-tag-size-gap: var(--gog-tag-xsm-gap);--gog-tag-size-icon-size: var(--gog-tag-xsm-icon-size)}:host(.gog-tag--sm){--gog-tag-size-font-size: var(--gog-tag-sm-font-size);--gog-tag-size-padding-block: var(--gog-tag-sm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-sm-padding-inline);--gog-tag-size-gap: var(--gog-tag-sm-gap);--gog-tag-size-icon-size: var(--gog-tag-sm-icon-size)}:host(.gog-tag--md){--gog-tag-size-font-size: var(--gog-tag-md-font-size);--gog-tag-size-padding-block: var(--gog-tag-md-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-md-padding-inline);--gog-tag-size-gap: var(--gog-tag-md-gap);--gog-tag-size-icon-size: var(--gog-tag-md-icon-size)}:host(.gog-tag--lg){--gog-tag-size-font-size: var(--gog-tag-lg-font-size);--gog-tag-size-padding-block: var(--gog-tag-lg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-lg-padding-inline);--gog-tag-size-gap: var(--gog-tag-lg-gap);--gog-tag-size-icon-size: var(--gog-tag-lg-icon-size)}:host(.gog-tag--slg){--gog-tag-size-font-size: var(--gog-tag-slg-font-size);--gog-tag-size-padding-block: var(--gog-tag-slg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-slg-padding-inline);--gog-tag-size-gap: var(--gog-tag-slg-gap);--gog-tag-size-icon-size: var(--gog-tag-slg-icon-size)}:host(.gog-tag--rounded){border-radius:var(--gog-tag-radius)}:host(.gog-tag--pill){border-radius:var(--gog-tag-pill-radius)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size, var(--gog-tag-size-icon-size, var(--gog-tag-md-icon-size)))}:host(.gog-host--full-width){display:flex;width:100%}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-tag', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "@if (hasIcon()) {\n  <gog-icon\n    class=\"gog-tag__icon\"\n    [ariaHidden]=\"true\"\n    [name]=\"iconName() ?? 'info'\"\n    [template]=\"iconTemplate()\"\n  />\n}\n\n<span class=\"gog-tag__content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-resolved-color: var( --gog-tag-accent, var(--gog-tag-variant-color, var(--gog-tag-default-color)) );display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block, var(--gog-tag-size-padding-block, var(--gog-tag-md-padding-block))) var(--gog-tag-padding-inline, var(--gog-tag-size-padding-inline, var(--gog-tag-md-padding-inline)));border:var(--gog-tag-border-width) var(--gog-tag-border-style) var(--gog-tag-border, var(--gog-tag-resolved-color));border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-bg-mix), var(--gog-tag-bg-base)));box-shadow:inset 0 0 0 var(--gog-tag-inner-border-width) var(--gog-tag-border, var(--gog-tag-resolved-color));color:var(--gog-tag-color, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-color-mix), var(--gog-tag-color-base)));font-family:var(--gog-tag-font-family);font-size:var(--gog-tag-font-size, var(--gog-tag-size-font-size, var(--gog-tag-md-font-size)));font-weight:var(--gog-tag-font-weight);line-height:var(--gog-tag-line-height);white-space:nowrap;gap:var(--gog-tag-gap, var(--gog-tag-size-gap, var(--gog-tag-md-gap)))}:host(.gog-tag--success){--gog-tag-variant-color: var(--gog-tag-success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--gog-tag-danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--gog-tag-warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--gog-tag-info-color)}:host(.gog-tag--xsm){--gog-tag-size-font-size: var(--gog-tag-xsm-font-size);--gog-tag-size-padding-block: var(--gog-tag-xsm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-xsm-padding-inline);--gog-tag-size-gap: var(--gog-tag-xsm-gap);--gog-tag-size-icon-size: var(--gog-tag-xsm-icon-size)}:host(.gog-tag--sm){--gog-tag-size-font-size: var(--gog-tag-sm-font-size);--gog-tag-size-padding-block: var(--gog-tag-sm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-sm-padding-inline);--gog-tag-size-gap: var(--gog-tag-sm-gap);--gog-tag-size-icon-size: var(--gog-tag-sm-icon-size)}:host(.gog-tag--md){--gog-tag-size-font-size: var(--gog-tag-md-font-size);--gog-tag-size-padding-block: var(--gog-tag-md-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-md-padding-inline);--gog-tag-size-gap: var(--gog-tag-md-gap);--gog-tag-size-icon-size: var(--gog-tag-md-icon-size)}:host(.gog-tag--lg){--gog-tag-size-font-size: var(--gog-tag-lg-font-size);--gog-tag-size-padding-block: var(--gog-tag-lg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-lg-padding-inline);--gog-tag-size-gap: var(--gog-tag-lg-gap);--gog-tag-size-icon-size: var(--gog-tag-lg-icon-size)}:host(.gog-tag--slg){--gog-tag-size-font-size: var(--gog-tag-slg-font-size);--gog-tag-size-padding-block: var(--gog-tag-slg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-slg-padding-inline);--gog-tag-size-gap: var(--gog-tag-slg-gap);--gog-tag-size-icon-size: var(--gog-tag-slg-icon-size)}:host(.gog-tag--rounded){border-radius:var(--gog-tag-radius)}:host(.gog-tag--pill){border-radius:var(--gog-tag-pill-radius)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size, var(--gog-tag-size-icon-size, var(--gog-tag-md-icon-size)))}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }] } });
+                    }, template: "@if (hasIcon()) {\n  <gog-icon\n    class=\"gog-tag__icon\"\n    [ariaHidden]=\"true\"\n    [name]=\"iconName() ?? 'info'\"\n    [template]=\"iconTemplate()\"\n  />\n}\n\n<span class=\"gog-tag__content\">\n  <ng-content></ng-content>\n</span>\n", styles: [":host{--gog-tag-resolved-color: var( --gog-tag-accent, var(--gog-tag-variant-color, var(--gog-tag-default-color)) );display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:fit-content;max-width:100%;padding:var(--gog-tag-padding-block, var(--gog-tag-size-padding-block, var(--gog-tag-md-padding-block))) var(--gog-tag-padding-inline, var(--gog-tag-size-padding-inline, var(--gog-tag-md-padding-inline)));border:var(--gog-tag-border-width) var(--gog-tag-border-style) var(--gog-tag-border, var(--gog-tag-resolved-color));border-radius:var(--gog-tag-radius);background-color:var(--gog-tag-bg, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-bg-mix), var(--gog-tag-bg-base)));box-shadow:inset 0 0 0 var(--gog-tag-inner-border-width) var(--gog-tag-border, var(--gog-tag-resolved-color));color:var(--gog-tag-color, color-mix(in srgb, var(--gog-tag-resolved-color) var(--gog-tag-color-mix), var(--gog-tag-color-base)));font-family:var(--gog-tag-font-family);font-size:var(--gog-tag-font-size, var(--gog-tag-size-font-size, var(--gog-tag-md-font-size)));font-weight:var(--gog-tag-font-weight);line-height:var(--gog-tag-line-height);white-space:nowrap;gap:var(--gog-tag-gap, var(--gog-tag-size-gap, var(--gog-tag-md-gap)))}:host(.gog-tag--success){--gog-tag-variant-color: var(--gog-tag-success-color)}:host(.gog-tag--danger){--gog-tag-variant-color: var(--gog-tag-danger-color)}:host(.gog-tag--warning){--gog-tag-variant-color: var(--gog-tag-warning-color)}:host(.gog-tag--info){--gog-tag-variant-color: var(--gog-tag-info-color)}:host(.gog-tag--xsm){--gog-tag-size-font-size: var(--gog-tag-xsm-font-size);--gog-tag-size-padding-block: var(--gog-tag-xsm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-xsm-padding-inline);--gog-tag-size-gap: var(--gog-tag-xsm-gap);--gog-tag-size-icon-size: var(--gog-tag-xsm-icon-size)}:host(.gog-tag--sm){--gog-tag-size-font-size: var(--gog-tag-sm-font-size);--gog-tag-size-padding-block: var(--gog-tag-sm-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-sm-padding-inline);--gog-tag-size-gap: var(--gog-tag-sm-gap);--gog-tag-size-icon-size: var(--gog-tag-sm-icon-size)}:host(.gog-tag--md){--gog-tag-size-font-size: var(--gog-tag-md-font-size);--gog-tag-size-padding-block: var(--gog-tag-md-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-md-padding-inline);--gog-tag-size-gap: var(--gog-tag-md-gap);--gog-tag-size-icon-size: var(--gog-tag-md-icon-size)}:host(.gog-tag--lg){--gog-tag-size-font-size: var(--gog-tag-lg-font-size);--gog-tag-size-padding-block: var(--gog-tag-lg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-lg-padding-inline);--gog-tag-size-gap: var(--gog-tag-lg-gap);--gog-tag-size-icon-size: var(--gog-tag-lg-icon-size)}:host(.gog-tag--slg){--gog-tag-size-font-size: var(--gog-tag-slg-font-size);--gog-tag-size-padding-block: var(--gog-tag-slg-padding-block);--gog-tag-size-padding-inline: var(--gog-tag-slg-padding-inline);--gog-tag-size-gap: var(--gog-tag-slg-gap);--gog-tag-size-icon-size: var(--gog-tag-slg-icon-size)}:host(.gog-tag--rounded){border-radius:var(--gog-tag-radius)}:host(.gog-tag--pill){border-radius:var(--gog-tag-pill-radius)}.gog-tag__content{min-width:0}.gog-tag__icon{flex-shrink:0;font-size:var(--gog-tag-icon-size, var(--gog-tag-size-icon-size, var(--gog-tag-md-icon-size)))}:host(.gog-host--full-width){display:flex;width:100%}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
 
 /**
  * Renders a template into `document.body` while keeping it wired to the declaring
@@ -1339,6 +1424,11 @@ class GogDropdownBase {
     appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     chevronTemplate = input(null, ...(ngDevMode ? [{ debugName: "chevronTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default, matching every other field-style control.
+     * Set to `false` to shrink the trigger to fit its selected label instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     /**
      * Spacing tokens feeding the height estimate. Overridable so each control keeps the
@@ -1636,11 +1726,20 @@ class GogDropdownBase {
         this.panelPlacement.set(placement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogDropdownBase, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevronTemplate: { classPropertyName: "chevronTemplate", publicName: "chevronTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: GogDropdownBase, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, chevronTemplate: { classPropertyName: "chevronTemplate", publicName: "chevronTemplate", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], dropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMaxHeight", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronTemplate", required: false }] }] } });
+            type: Directive,
+            args: [{
+                    host: {
+                        // Drives the :host(.gog-host--auto-width) rules in each subclass's stylesheet —
+                        // without this binding the `fullWidth` input has no visible effect. Inverted from
+                        // gog-button's full-width class: these controls are full width by default, so the
+                        // class only appears once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], dropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMaxHeight", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronTemplate", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
 function readPx(raw, fallback) {
     const parsed = Number.parseFloat(raw.trim());
     return Number.isFinite(parsed) ? parsed : fallback;
@@ -1674,11 +1773,11 @@ class SelectComponent extends GogDropdownBase {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\n      <!--\n        tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n        focus is moved between options with the arrow keys, not by tabbing through every\n        one of them. Programmatic .focus() still works on a negative tabindex.\n      -->\n      <button\n        type=\"button\"\n        class=\"gog-select__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        [attr.aria-selected]=\"isSelected(option.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\n      <!--\n        tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n        focus is moved between options with the arrow keys, not by tabbing through every\n        one of them. Programmatic .focus() still works on a negative tabindex.\n      -->\n      <button\n        type=\"button\"\n        class=\"gog-select__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        [attr.aria-selected]=\"isSelected(option.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\n      <!--\n        tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n        focus is moved between options with the arrow keys, not by tabbing through every\n        one of them. Programmatic .focus() still works on a negative tabindex.\n      -->\n      <button\n        type=\"button\"\n        class=\"gog-select__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        [attr.aria-selected]=\"isSelected(option.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
+            args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-select\"\n  [class.gog-select--disabled]=\"isDisabled()\"\n  [class.gog-select--open]=\"isOpen()\"\n  [class.gog-select--xsm]=\"size() === 'xsm'\"\n  [class.gog-select--sm]=\"size() === 'sm'\"\n  [class.gog-select--lg]=\"size() === 'lg'\"\n  [class.gog-select--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\n    assistive tech alike.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-select__field\">\n    <button\n      type=\"button\"\n      class=\"gog-select__control\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (click)=\"toggle()\"\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\n      (keydown.escape)=\"close()\"\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n    >\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\n        {{ selectedOption()?.name || placeholder() }}\n      </span>\n\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\n        <gog-icon [template]=\"chevronTemplate()\" name=\"chevron-down\" />\n      </span>\n    </button>\n\n    @if (isOpen() && !appendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-select__dropdown\"\n    [class.gog-select__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-select__dropdown--portal]=\"appendToBody()\"\n    [class.gog-select__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-select__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-select__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-select__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (option of options(); track option.id) {\n      <!--\n        tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\n        focus is moved between options with the arrow keys, not by tabbing through every\n        one of them. Programmatic .focus() still works on a negative tabindex.\n      -->\n      <button\n        type=\"button\"\n        class=\"gog-select__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        [attr.aria-selected]=\"isSelected(option.id)\"\n        [attr.aria-disabled]=\"option.disabled ?? false\"\n        [class.gog-select__option--selected]=\"isSelected(option.id)\"\n        [class.gog-select__option--disabled]=\"option.disabled ?? false\"\n        (click)=\"selectOption(option, $event)\"\n        (keydown)=\"onOptionKeydown($event)\"\n      >\n        <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\n          @if (isSelected(option.id)) {\n            <gog-icon name=\"check\" />\n          }\n        </span>\n        <span class=\"gog-select__option-label\">{{ option.name }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow-y:auto;box-shadow:var(--gog-select-panel-shadow)}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option{transition:none}}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 /** Height of the select-all/clear row, included in the panel height estimate. */
@@ -1730,11 +1829,11 @@ class MultiselectComponent extends GogDropdownBase {
         return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n          expects: focus moves between options with the arrow keys, not by tabbing\n          through every one. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-ms__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n          expects: focus moves between options with the arrow keys, not by tabbing\n          through every one. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-ms__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n          expects: focus moves between options with the arrow keys, not by tabbing\n          through every one. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-ms__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
+            args: [{ selector: 'gog-multiselect', imports: [ButtonComponent, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-ms-wrapper\"\n  [class.gog-ms-wrapper--xsm]=\"size() === 'xsm'\"\n  [class.gog-ms-wrapper--sm]=\"size() === 'sm'\"\n  [class.gog-ms-wrapper--lg]=\"size() === 'lg'\"\n  [class.gog-ms-wrapper--slg]=\"size() === 'slg'\"\n>\n  <!--\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\n    name at all whenever `label` was set, because that also suppresses the aria-label.\n  -->\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\n    <label class=\"gog-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"gog-ms\"\n    role=\"combobox\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\n    [class.gog-ms--open]=\"isOpen()\"\n    [class.gog-ms--disabled]=\"isDisabled()\"\n    [class.gog-ms--error]=\"hasError()\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle(); $event.preventDefault()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (keydown.escape)=\"close()\"\n    (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\n    (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\n  >\n    <span class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\n      {{ selectedNames() || placeholder() }}\n    </span>\n\n    <span class=\"gog-ms__actions\">\n      @if (selectedNames()) {\n        <button\n          type=\"button\"\n          class=\"gog-ms__clear gog-inline-center\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <gog-icon [template]=\"clearIconTemplate()\" name=\"close\" />\n        </button>\n      }\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\n        <gog-icon\n          [template]=\"chevronTemplate()\"\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\n        />\n      </span>\n    </span>\n  </div>\n\n  @if (isOpen() && !appendToBody()) {\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n  }\n\n  @if (visibleError()) {\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</span>\n  }\n</div>\n\n<!--\n  One template for both render modes. When `appendToBody` is set it is stamped into\n  <body> by the overlay, which is why the portal-only modifier and the resolved\n  coordinates are applied conditionally: outside the component's subtree the panel can\n  no longer inherit the size tokens from the `.gog-ms-wrapper--sm/--lg` wrapper.\n-->\n<ng-template #panelTpl>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-ms__dropdown\"\n    [class.gog-ms__dropdown--up]=\"!appendToBody() && dropdownDirectionState() === 'up'\"\n    [class.gog-ms__dropdown--portal]=\"appendToBody()\"\n    [class.gog-ms__dropdown--xsm]=\"appendToBody() && size() === 'xsm'\"\n    [class.gog-ms__dropdown--sm]=\"appendToBody() && size() === 'sm'\"\n    [class.gog-ms__dropdown--lg]=\"appendToBody() && size() === 'lg'\"\n    [class.gog-ms__dropdown--slg]=\"appendToBody() && size() === 'slg'\"\n    [style.top.px]=\"appendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"appendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"appendToBody() ? resolvedPanelWidth() : null\"\n    [style.max-height]=\"appendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @if (showControls() && controlsPosition() === 'top') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n    <div class=\"gog-ms__options\">\n      @for (option of options(); track option.id) {\n        <!--\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern\n          expects: focus moves between options with the arrow keys, not by tabbing\n          through every one. Programmatic .focus() still works on a negative tabindex.\n        -->\n        <button\n          type=\"button\"\n          class=\"gog-ms__option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"isSelected(option.id)\"\n          [attr.aria-disabled]=\"option.disabled ?? false\"\n          [class.gog-ms__option--selected]=\"isSelected(option.id)\"\n          [class.gog-ms__option--disabled]=\"option.disabled ?? false\"\n          (click)=\"toggleOption(option, $event)\"\n          (keydown)=\"onOptionKeydown($event)\"\n        >\n          <span class=\"gog-ms__option-mark\" aria-hidden=\"true\">\n            <gog-icon [name]=\"isSelected(option.id) ? 'checkbox-checked' : 'checkbox'\" />\n          </span>\n          {{ option.name }}\n        </button>\n      }\n    </div>\n    @if (showControls() && controlsPosition() === 'bottom') {\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #controlsRowTpl>\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-ms-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-ms-size-padding-y: var(--gog-field-xsm-padding-y);--gog-ms-size-padding-x: var(--gog-field-xsm-padding-x);--gog-ms-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-ms-size-padding-y: var(--gog-field-sm-padding-y);--gog-ms-size-padding-x: var(--gog-field-sm-padding-x);--gog-ms-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-ms-size-padding-y: var(--gog-field-lg-padding-y);--gog-ms-size-padding-x: var(--gog-field-lg-padding-x);--gog-ms-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-ms-size-padding-y: var(--gog-field-slg-padding-y);--gog-ms-size-padding-x: var(--gog-field-slg-padding-x);--gog-ms-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-ms-label-font-family);font-size:var(--gog-ms-label-font-size);color:var(--gog-ms-label-color);text-transform:var(--gog-ms-label-text-transform);letter-spacing:var(--gog-ms-label-letter-spacing);cursor:pointer}.gog-ms{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-ms-field-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border);border-radius:var(--gog-ms-radius);color:var(--gog-ms-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-ms-transition-duration) var(--gog-easing),box-shadow var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-ms-focus-border)}.gog-ms:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-ms-border-color);box-shadow:var(--gog-ms-focus-glow)}.gog-ms--disabled{opacity:var(--gog-ms-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-ms-error-color)}.gog-ms__value{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-ms-value-color)}.gog-ms__value--placeholder{color:var(--gog-ms-placeholder-color)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-ms-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-ms-clear-radius);background:transparent;color:var(--gog-ms-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-ms-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-ms-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:var(--gog-ms-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-ms-border-color);transition:transform var(--gog-ms-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-ms-panel-offset));left:0;right:0;z-index:var(--gog-dropdown-z);background-color:var(--gog-ms-panel-bg);border:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-panel-border);border-radius:var(--gog-ms-radius);max-height:var(--gog-ms-panel-max-height);overflow-y:auto;box-shadow:var(--gog-ms-panel-shadow)}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-ms-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{position:sticky;top:0;z-index:1;display:flex;gap:var(--gog-ms-controls-gap);padding:var(--gog-ms-controls-padding);background-color:var(--gog-ms-panel-bg);border-bottom:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__controls--bottom{top:auto;bottom:0;border-bottom:0;border-top:var(--gog-ms-field-border-width) var(--gog-ms-field-border-style) var(--gog-ms-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-ms-options-padding);gap:var(--gog-ms-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-ms-option-gap-inline);padding:var(--gog-ms-padding-y, var(--gog-ms-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-ms-padding-x, var(--gog-ms-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-ms-option-radius);transition:background-color var(--gog-ms-option-transition-duration) var(--gog-easing);color:var(--gog-ms-option-color)}.gog-ms__option--disabled{opacity:var(--gog-ms-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-ms-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-ms-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-ms-focus-ring-width) solid var(--gog-ms-focus-ring);outline-offset:calc(var(--gog-ms-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));height:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-ms-font-size, var(--gog-ms-size-font-size, var(--gog-field-md-font-size))) * var(--gog-ms-mark-icon-ratio));color:var(--gog-ms-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-ms-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-ms-font-family);font-size:var(--gog-ms-error-font-size);color:var(--gog-ms-error-color);margin-top:var(--gog-ms-error-offset)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark{transition:none}}\n"] }]
         }], propDecorators: { showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], clearIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIconTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 class SliderComponent {
@@ -1751,6 +1850,13 @@ class SliderComponent {
     errorDisplay = input('manual', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default. Set to `false` to size the track to
+     * `--gog-slider-auto-width` instead — a slider's track has no content of its own to
+     * shrink-wrap to, so unlike the other field controls this needs an explicit fallback
+     * width rather than `fit-content`.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     /** Two-way bindable value: `[(value)]="signal"`. */
     value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     ngControl = inject(NgControl, { optional: true, self: true });
@@ -1809,73 +1915,29 @@ class SliderComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SliderComponent, isStandalone: true, selector: "gog-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showThumb: { classPropertyName: "showThumb", publicName: "showThumb", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()" } }, ngImport: i0, template: "<div\n  class=\"gog-slider gog-contained-layout\"\n  [class.gog-slider--disabled]=\"isDisabled()\"\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n  <div class=\"gog-slider__header\">\n    @if (label()) {\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\n    }\n\n    @if (showValue()) {\n      <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\n    }\n  </div>\n\n  <div class=\"gog-slider__track-container\">\n    <div class=\"gog-slider__track\">\n      <div class=\"gog-slider__fill\"></div>\n    </div>\n\n    @if (showThumb()) {\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n    }\n\n    <input\n      [id]=\"inputId\"\n      class=\"gog-slider__input\"\n      type=\"range\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"clampedValue()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"clampedValue()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  <div class=\"gog-slider__range-labels\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SliderComponent, isStandalone: true, selector: "gog-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showThumb: { classPropertyName: "showThumb", publicName: "showThumb", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--thumb-pos": "thumbPos()", "style.--fill-scale": "fillScale()", "class.gog-host--auto-width": "!fullWidth()" } }, ngImport: i0, template: "<div\n  class=\"gog-slider gog-contained-layout\"\n  [class.gog-slider--disabled]=\"isDisabled()\"\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n  <div class=\"gog-slider__header\">\n    @if (label()) {\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\n    }\n\n    @if (showValue()) {\n      <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\n    }\n  </div>\n\n  <div class=\"gog-slider__track-container\">\n    <div class=\"gog-slider__track\">\n      <div class=\"gog-slider__fill\"></div>\n    </div>\n\n    @if (showThumb()) {\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n    }\n\n    <input\n      [id]=\"inputId\"\n      class=\"gog-slider__input\"\n      type=\"range\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"clampedValue()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"clampedValue()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  <div class=\"gog-slider__range-labels\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}:host(.gog-host--auto-width){width:var(--gog-slider-auto-width)}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--thumb-pos]': 'thumbPos()',
                         '[style.--fill-scale]': 'fillScale()',
-                    }, template: "<div\n  class=\"gog-slider gog-contained-layout\"\n  [class.gog-slider--disabled]=\"isDisabled()\"\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n  <div class=\"gog-slider__header\">\n    @if (label()) {\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\n    }\n\n    @if (showValue()) {\n      <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\n    }\n  </div>\n\n  <div class=\"gog-slider__track-container\">\n    <div class=\"gog-slider__track\">\n      <div class=\"gog-slider__fill\"></div>\n    </div>\n\n    @if (showThumb()) {\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n    }\n\n    <input\n      [id]=\"inputId\"\n      class=\"gog-slider__input\"\n      type=\"range\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"clampedValue()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"clampedValue()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  <div class=\"gog-slider__range-labels\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumb", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
-
-class SkeletonComponent {
-    shape = input('text', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    animation = input('pulse', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
-    /** CSS width, e.g. '240px' or '60%'. Falls back to a shape/size default when unset. */
-    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    /** CSS height override. Ignored for `text`, whose lines size from `size` instead. */
-    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    /** Number of stacked lines when `shape="text"`. The last line renders shorter. */
-    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
-    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
-    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    lineList = computed(() => {
-        const count = Math.max(1, this.lines());
-        return Array.from({ length: count }, (_, index) => count > 1 && index === count - 1);
-    }, ...(ngDevMode ? [{ debugName: "lineList" }] : /* istanbul ignore next */ []));
-    // Keeps a width-only override circular instead of an oval, since `circle` has no
-    // independent height concept of its own.
-    resolvedHeight = computed(() => {
-        if (this.shape() === 'text') {
-            return null;
-        }
-        if (this.shape() === 'circle') {
-            return this.height() ?? this.width();
-        }
-        return this.height();
-    }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => [
-        'gog-skeleton',
-        `gog-skeleton--${this.shape()}`,
-        `gog-skeleton--${this.size()}`,
-        `gog-skeleton--${this.animation()}`,
-        this.rounded() ? null : 'gog-skeleton--square',
-    ]
-        .filter((className) => className !== null)
-        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SkeletonComponent, isStandalone: true, selector: "gog-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.width": "width()", "style.height": "resolvedHeight()", "attr.role": "ariaLabel() ? \"status\" : null", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaLabel() ? null : \"true\"" } }, ngImport: i0, template: "@switch (shape()) {\n  @case ('text') {\n    @for (isShort of lineList(); track $index) {\n      <span\n        class=\"gog-skeleton__bone gog-skeleton__line\"\n        [class.gog-skeleton__line--short]=\"isShort\"\n      ></span>\n    }\n  }\n  @default {\n    <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gog-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class]': 'hostClasses()',
-                        '[style.width]': 'width()',
-                        '[style.height]': 'resolvedHeight()',
-                        // Decorative by default — a page can carry dozens of these while loading, and a
-                        // role="status" on every single bone would flood assistive tech with announcements.
-                        // Pass `ariaLabel` on the one instance that should actually speak for the loading state.
-                        '[attr.role]': 'ariaLabel() ? "status" : null',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.aria-hidden]': 'ariaLabel() ? null : "true"',
-                    }, template: "@switch (shape()) {\n  @case ('text') {\n    @for (isShort of lineList(); track $index) {\n      <span\n        class=\"gog-skeleton__bone gog-skeleton__line\"\n        [class.gog-skeleton__line--short]=\"isShort\"\n      ></span>\n    }\n  }\n  @default {\n    <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"] }]
-        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+                        // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
+                        // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
+                        // full-width class: this control is full width by default, so the class only
+                        // appears once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    }, template: "<div\n  class=\"gog-slider gog-contained-layout\"\n  [class.gog-slider--disabled]=\"isDisabled()\"\n  [class.gog-slider--thumb-hidden]=\"!showThumb()\"\n>\n  <div class=\"gog-slider__header\">\n    @if (label()) {\n      <label [attr.for]=\"inputId\" class=\"gog-slider__label\">{{ label() }}</label>\n    }\n\n    @if (showValue()) {\n      <span class=\"gog-slider__value\">{{ clampedValue() }}</span>\n    }\n  </div>\n\n  <div class=\"gog-slider__track-container\">\n    <div class=\"gog-slider__track\">\n      <div class=\"gog-slider__fill\"></div>\n    </div>\n\n    @if (showThumb()) {\n      <div class=\"gog-slider__thumb\" aria-hidden=\"true\"></div>\n    }\n\n    <input\n      [id]=\"inputId\"\n      class=\"gog-slider__input\"\n      type=\"range\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || 'Slider'\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"clampedValue()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"clampedValue()\"\n      [disabled]=\"isDisabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  <div class=\"gog-slider__range-labels\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-slider__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block}:host(.gog-host--auto-width){width:var(--gog-slider-auto-width)}.gog-slider{display:flex;flex-direction:column;gap:var(--gog-slider-gap);width:100%}.gog-slider--disabled{opacity:var(--gog-slider-disabled-opacity);pointer-events:none}.gog-slider--thumb-hidden .gog-slider__thumb{display:none}.gog-slider__header{display:flex;align-items:center;justify-content:space-between}.gog-slider__label{font-family:var(--gog-slider-label-font-family);font-size:var(--gog-slider-label-font-size);color:var(--gog-slider-label-color);text-transform:var(--gog-slider-label-text-transform);letter-spacing:var(--gog-slider-label-letter-spacing)}.gog-slider__value{min-width:var(--gog-slider-value-min-width);font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-value-font-size);color:var(--gog-slider-value-color);text-align:right}.gog-slider__track-container{position:relative;display:flex;align-items:center;height:var(--gog-slider-track-area-height)}.gog-slider__track{position:absolute;inset-inline:0;height:var(--gog-slider-track-height);border-radius:var(--gog-slider-track-radius);overflow:hidden;background-color:var(--gog-slider-track-bg);pointer-events:none}.gog-slider__fill{width:100%;height:100%;background-color:var(--gog-slider-fill-bg);transform:scaleX(var(--fill-scale, 0));transform-origin:left center;will-change:transform}.gog-slider__thumb{position:absolute;top:50%;left:var(--thumb-pos, 0%);width:var(--gog-slider-thumb-size);height:var(--gog-slider-thumb-size);border:var(--gog-slider-thumb-border-width) solid var(--gog-slider-thumb-border);border-radius:var(--gog-slider-thumb-radius);background-color:var(--gog-slider-thumb-bg);pointer-events:none;translate:-50% -50%;will-change:translate;box-shadow:0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__track-container:focus-within .gog-slider__thumb{box-shadow:0 0 0 var(--gog-slider-focus-ring-width) var(--gog-slider-focus-ring),0 0 var(--gog-slider-thumb-glow-size) var(--gog-slider-thumb-shadow)}.gog-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;outline:none}.gog-slider__range-labels{display:flex;justify-content:space-between;font-family:var(--gog-slider-value-font-family);font-size:var(--gog-slider-range-font-size);color:var(--gog-slider-range-color)}.gog-slider__error{font-family:var(--gog-slider-error-font-family);font-size:var(--gog-slider-error-font-size);color:var(--gog-slider-error-color)}@media(prefers-reduced-motion:reduce){.gog-slider__fill,.gog-slider__thumb{will-change:auto}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showThumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumb", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class PaginatorComponent {
     /** 1-based current page. Two-way bindable: `[(page)]="myPageSignal"`. */
     page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default. Set to `false` to shrink to fit the page
+     * buttons instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     totalPages = input(1, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     /**
      * `window` (default): a fixed number of page buttons (`visiblePages`) that slides to keep
@@ -1966,7 +2028,7 @@ class PaginatorComponent {
         this.goTo(this.page() + 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -1974,8 +2036,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         class: 'gog-paginator',
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
-                    }, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }], showFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstPage", required: false }] }], showLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastPage", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+                        // Drives the :host(.gog-host--auto-width) rule in the stylesheet — without this
+                        // binding the `fullWidth` input has no visible effect. Inverted from gog-button's
+                        // full-width class: this control is full width by default, so the class only
+                        // appears once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    }, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }], showFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstPage", required: false }] }], showLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastPage", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class SpinnerOverlayComponent {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
@@ -2069,6 +2136,11 @@ function getByPath(row, field) {
 }
 class TableComponent {
     value = input([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default. Set to `false` to shrink the table to fit
+     * its columns' content instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     /** 0 = no pagination */
     pageSize = input(0, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     showRowNumbers = input(true, ...(ngDevMode ? [{ debugName: "showRowNumbers" }] : /* istanbul ignore next */ []));
@@ -2216,16 +2288,16 @@ class TableComponent {
         return map;
     }, ...(ngDevMode ? [{ debugName: "headerTemplateMap" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n  <div class=\"gog-table-scroll\">\n    <table\n      class=\"gog-table\"\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\n      [class.gog-table--loading]=\"loading()\"\n      [class.gog-table--slg]=\"size() === 'slg'\"\n      [class.gog-table--md]=\"size() === 'md'\"\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\n      [class.gog-table--sm]=\"size() === 'sm'\"\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\n    >\n      <colgroup>\n        @if (showRowNumbers()) {\n          <col class=\"gog-table__col--num\" />\n        }\n        @for (col of columns(); track col.field()) {\n          <col\n            [style.width]=\"col.width() || null\"\n            [style.min-width]=\"col.minWidth() || null\"\n            [style.max-width]=\"col.maxWidth() || null\"\n          />\n        }\n      </colgroup>\n      <thead>\n        <tr>\n          @if (showRowNumbers()) {\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\n          }\n          @for (col of columns(); track col.field()) {\n            <th\n              class=\"gog-table__th\"\n              scope=\"col\"\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n              (click)=\"handleSortClick(col)\"\n              (keydown.enter)=\"handleSortClick(col)\"\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n            >\n              @if (getHeaderTemplate(col.field()); as headerTpl) {\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\n              } @else {\n                <span class=\"gog-table__th-inner\">\n                  {{ col.header() || col.field() }}\n                  @if (col.sortable() && !loading()) {\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n                      @if (getSortDirection(col.field()) === 'asc') {\n                        <gog-icon name=\"sort-up\" />\n                      } @else if (getSortDirection(col.field()) === 'desc') {\n                        <gog-icon name=\"sort-down\" />\n                      } @else {\n                        <gog-icon name=\"sort\" />\n                      }\n                    </span>\n                  }\n                </span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n              <gog-spinner size=\"md\" />\n            </td>\n          </tr>\n        } @else if (visibleRows().length === 0) {\n          <tr>\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n          </tr>\n        } @else {\n          @for (row of visibleRows(); track $index; let i = $index) {\n            <tr class=\"gog-table__row\">\n              @if (showRowNumbers()) {\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n              }\n              @for (col of columns(); track col.field()) {\n                <td class=\"gog-table__td\">\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n                    />\n                  } @else {\n                    {{ formatCellValue(row, col.field()) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (hasPagination() || showTotal()) {\n    <div class=\"gog-table__footer\">\n      @if (showTotal()) {\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\n          Total: {{ value().length }}\n        </span>\n      }\n\n      @if (hasPagination()) {\n        <gog-paginator\n          class=\"gog-table__pagination\"\n          [style.grid-area]=\"paginatorGridArea()\"\n          [(page)]=\"currentPage\"\n          [totalPages]=\"totalPages()\"\n          rangeMode=\"ellipsis\"\n          size=\"sm\"\n          ariaLabel=\"Table pagination\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: Column, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <div class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--slg]=\"size() === 'slg'\"\r\n      [class.gog-table--md]=\"size() === 'md'\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--sm]=\"size() === 'sm'\"\r\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col.field()); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\r\n                    />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-table', imports: [SpinnerComponent, PaginatorComponent, NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-table-host',
                         '[style.display]': '"block"',
-                        '[style.width]': '"100%"',
-                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\n  <div class=\"gog-table-scroll\">\n    <table\n      class=\"gog-table\"\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\n      [class.gog-table--loading]=\"loading()\"\n      [class.gog-table--slg]=\"size() === 'slg'\"\n      [class.gog-table--md]=\"size() === 'md'\"\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\n      [class.gog-table--sm]=\"size() === 'sm'\"\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\n    >\n      <colgroup>\n        @if (showRowNumbers()) {\n          <col class=\"gog-table__col--num\" />\n        }\n        @for (col of columns(); track col.field()) {\n          <col\n            [style.width]=\"col.width() || null\"\n            [style.min-width]=\"col.minWidth() || null\"\n            [style.max-width]=\"col.maxWidth() || null\"\n          />\n        }\n      </colgroup>\n      <thead>\n        <tr>\n          @if (showRowNumbers()) {\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\n          }\n          @for (col of columns(); track col.field()) {\n            <th\n              class=\"gog-table__th\"\n              scope=\"col\"\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\n              (click)=\"handleSortClick(col)\"\n              (keydown.enter)=\"handleSortClick(col)\"\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\n            >\n              @if (getHeaderTemplate(col.field()); as headerTpl) {\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\n              } @else {\n                <span class=\"gog-table__th-inner\">\n                  {{ col.header() || col.field() }}\n                  @if (col.sortable() && !loading()) {\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\n                      @if (getSortDirection(col.field()) === 'asc') {\n                        <gog-icon name=\"sort-up\" />\n                      } @else if (getSortDirection(col.field()) === 'desc') {\n                        <gog-icon name=\"sort-down\" />\n                      } @else {\n                        <gog-icon name=\"sort\" />\n                      }\n                    </span>\n                  }\n                </span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\n              <gog-spinner size=\"md\" />\n            </td>\n          </tr>\n        } @else if (visibleRows().length === 0) {\n          <tr>\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\n          </tr>\n        } @else {\n          @for (row of visibleRows(); track $index; let i = $index) {\n            <tr class=\"gog-table__row\">\n              @if (showRowNumbers()) {\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\n              }\n              @for (col of columns(); track col.field()) {\n                <td class=\"gog-table__td\">\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\n                    />\n                  } @else {\n                    {{ formatCellValue(row, col.field()) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (hasPagination() || showTotal()) {\n    <div class=\"gog-table__footer\">\n      @if (showTotal()) {\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\n          Total: {{ value().length }}\n        </span>\n      }\n\n      @if (hasPagination()) {\n        <gog-paginator\n          class=\"gog-table__pagination\"\n          [style.grid-area]=\"paginatorGridArea()\"\n          [(page)]=\"currentPage\"\n          [totalPages]=\"totalPages()\"\n          rangeMode=\"ellipsis\"\n          size=\"sm\"\n          ariaLabel=\"Table pagination\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Column), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
+                        '[style.width]': 'fullWidth() ? "100%" : "fit-content"',
+                    }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <div class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--slg]=\"size() === 'slg'\"\r\n      [class.gog-table--md]=\"size() === 'md'\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [class.gog-table--sm]=\"size() === 'sm'\"\r\n      [class.gog-table--xsm]=\"size() === 'xsm'\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col.field()); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col.field()); as bodyTpl) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, index: i }\"\r\n                    />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%;overflow-x:auto}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Column), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateDirective), { isSignal: true }] }] } });
 
 class ThemeService {
     document = inject(DOCUMENT);