@masmarino/gabarit 0.4.0 → 0.5.0

package/fesm2022/masmarino-gabarit.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, computed, ChangeDetectionStrategy, Component, output, signal, viewChild, HostListener, booleanAttribute, forwardRef, ElementRef, effect, contentChildren, viewChildren, InjectionToken, isDevMode, Injector, afterNextRender } from '@angular/core';
+import { Injectable, inject, input, computed, ChangeDetectionStrategy, Component, output, signal, viewChild, HostListener, booleanAttribute, forwardRef, ElementRef, effect, contentChildren, viewChildren, model, InjectionToken, isDevMode, Injector, afterNextRender } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
 import { isObservable } from 'rxjs';
 
-const GABARIT_VERSION = '0.4.0';
+const GABARIT_VERSION = '0.5.0';
 
 const BUILT_IN_ICONS = {
     search: `<path d="m21 21-4.34-4.34" />
@@ -20,6 +21,8 @@ const BUILT_IN_ICONS = {
 <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
 <path d="m2 2 20 20" />`,
     'chevron-down': `<path d="m6 9 6 6 6-6" />`,
+    'chevron-left': `<path d="m15 18-6-6 6-6" />`,
+    'chevron-right': `<path d="m9 18 6-6-6-6" />`,
     'chevrons-left': `<path d="m11 17-5-5 5-5" />
 <path d="m18 17-5-5 5-5" />`,
     'chevrons-right': `<path d="m6 17 5-5-5-5" />
@@ -36,6 +39,10 @@ const BUILT_IN_ICONS = {
 <path d="M12 17h.01" />`,
     info: `<path d="M12 17v-6" />
 <path d="M12 7h.01" />`,
+    'arrow-up': `<path d="m5 12 7-7 7 7" />
+<path d="M12 19V5" />`,
+    'arrow-down': `<path d="M12 5v14" />
+<path d="m19 12-7 7-7-7" />`,
 };
 
 class IconRegistry {
@@ -219,23 +226,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ selector: 'gbt-button', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type()\"\n  class=\"gbt-button gbt-button--{{ variant() }} gbt-button--{{ size() }}\"\n  [disabled]=\"disabled() || loading()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n  (click)=\"handleClick()\"\n>\n  @if (iconName()) {\n    <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n  }\n  @if (loading()) {\n    <span class=\"gbt-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"sr-only\">{{ loadingLabel() }}</span>\n  }\n  <span>{{ text() }}</span>\n</button>\n", styles: [":host{display:inline-block;width:fit-content}.gbt-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:var(--site-border-radius-sm);font-family:var(--font-family);font-weight:600;cursor:pointer;transition:background-color var(--site-transition-fast),opacity var(--site-transition-fast)}.gbt-button:disabled{cursor:not-allowed;opacity:.5}.gbt-button--small{padding:.375rem .75rem;font-size:.8125rem}.gbt-button--medium{padding:.5rem 1rem;font-size:.875rem}.gbt-button--large{padding:.75rem 1.5rem;font-size:1rem}.gbt-button--primary{background:var(--primary);color:var(--text-on-primary)}.gbt-button--primary:not(:disabled):hover{background:var(--primary-hover)}.gbt-button--secondary{background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}.gbt-button--secondary:not(:disabled):hover{background:var(--bg-hover)}.gbt-button--danger{background:var(--color-error-fill);color:var(--text-on-error)}.gbt-button--danger:not(:disabled):hover{background:var(--color-error-hover)}.gbt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gbt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.gbt-button__spinner{animation:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@keyframes gbt-button-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
-class Card {
-    hoverable = input(false, { ...(ngDevMode ? { debugName: "hoverable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    heading = input('', /* @ts-ignore */
+class Badge {
+    variant = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Badge, isStandalone: true, selector: "gbt-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"gbt-badge\" [attr.data-variant]=\"variant()\">\n  @if (icon(); as name) {\n    <gbt-icon [name]=\"name\" class=\"gbt-badge__icon\" aria-hidden=\"true\" />\n  }\n  <span class=\"gbt-badge__label\"><ng-content /></span>\n</span>\n", styles: [":host{display:inline-flex}.gbt-badge{box-sizing:border-box;display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:999px;background:var(--bg-hover);color:var(--text-secondary);font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap}.gbt-badge[data-variant=success]{background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-badge[data-variant=warning]{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-badge[data-variant=error]{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-badge[data-variant=info]{background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-badge__icon{flex-shrink:0;width:.875em;height:.875em}.gbt-badge__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Badge, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-badge', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"gbt-badge\" [attr.data-variant]=\"variant()\">\n  @if (icon(); as name) {\n    <gbt-icon [name]=\"name\" class=\"gbt-badge__icon\" aria-hidden=\"true\" />\n  }\n  <span class=\"gbt-badge__label\"><ng-content /></span>\n</span>\n", styles: [":host{display:inline-flex}.gbt-badge{box-sizing:border-box;display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:999px;background:var(--bg-hover);color:var(--text-secondary);font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap}.gbt-badge[data-variant=success]{background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-badge[data-variant=warning]{background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-badge[data-variant=error]{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-badge[data-variant=info]{background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-badge__icon{flex-shrink:0;width:.875em;height:.875em}.gbt-badge__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+class EmptyState {
+    illustration = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "illustration" }] : /* istanbul ignore next */ []));
+    heading = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
-    icon = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    headingLevel = input(2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
-    cardClass = computed(() => 'gbt-card' + (this.hoverable() ? ' gbt-card--hoverable' : ''), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cardClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Card, isStandalone: true, selector: "gbt-card", inputs: { hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"cardClass()\">\n  @if (heading()) {\n    <div class=\"gbt-card__header\">\n      @switch (headingLevel()) {\n        @case (1) {\n          <h1 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h1>\n        }\n        @case (3) {\n          <h3 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h3>\n        }\n        @case (4) {\n          <h4 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h4>\n        }\n        @case (5) {\n          <h5 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h5>\n        }\n        @case (6) {\n          <h6 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h6>\n        }\n        @default {\n          <h2 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h2>\n        }\n      }\n      <ng-content select=\"[card-header-actions]\"></ng-content>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n<ng-template #headingContent>\n  @if (icon()) {\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  }\n  {{ heading() }}\n</ng-template>\n", styles: [":host{display:block}.gbt-card{background:var(--bg-principal);border-radius:var(--site-border-radius-lg);box-shadow:var(--site-shadow-sm);position:relative;overflow:hidden;transition:box-shadow .18s cubic-bezier(.4,0,.2,1);padding:1.25rem 1.5rem;font-size:.9rem;line-height:1.65;color:var(--text-secondary)}.gbt-card--hoverable{cursor:pointer;-webkit-user-select:none;user-select:none}.gbt-card--hoverable:hover{box-shadow:var(--site-shadow-lg)}.gbt-card__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.gbt-card__title{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    message = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: EmptyState, isStandalone: true, selector: "gbt-empty-state", inputs: { illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"gbt-empty-state\">\n  <div class=\"gbt-empty-state__illustration\" aria-hidden=\"true\">\n    @switch (illustration()) {\n      @case ('folder') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"16\" y=\"38\" width=\"64\" height=\"40\" rx=\"4\" />\n          <path d=\"M16 38 v-8a4 4 0 0 1 4-4h16l8 8h28a4 4 0 0 1 4 4\" />\n          <rect x=\"34\" y=\"14\" width=\"16\" height=\"20\" rx=\"2\" transform=\"rotate(-8 42 24)\" opacity=\"0.55\" />\n          <rect x=\"50\" y=\"16\" width=\"16\" height=\"20\" rx=\"2\" transform=\"rotate(6 58 26)\" opacity=\"0.55\" />\n        </svg>\n      }\n      @case ('star') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M48,18 L55.6,37.5 L76.5,38.7 L60.4,52 L65.6,72.3 L48,61 L30.4,72.3 L35.6,52 L19.5,38.7 L40.4,37.5 Z\" />\n          <path d=\"M78,14 L81,20 L78,26 L75,20 Z\" opacity=\"0.55\" />\n          <path d=\"M16,64 L19,70 L16,76 L13,70 Z\" opacity=\"0.55\" />\n        </svg>\n      }\n      @case ('checklist') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"24\" y=\"18\" width=\"48\" height=\"64\" rx=\"6\" />\n          <rect x=\"38\" y=\"12\" width=\"20\" height=\"10\" rx=\"3\" />\n          <line x1=\"34\" y1=\"38\" x2=\"62\" y2=\"38\" />\n          <path d=\"M32 50 l4 4 l8-8\" />\n          <line x1=\"46\" y1=\"52\" x2=\"62\" y2=\"52\" />\n          <line x1=\"34\" y1=\"66\" x2=\"62\" y2=\"66\" opacity=\"0.55\" />\n        </svg>\n      }\n      @case ('merge') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"26\" cy=\"20\" r=\"7\" />\n          <circle cx=\"26\" cy=\"76\" r=\"7\" />\n          <circle cx=\"70\" cy=\"48\" r=\"7\" />\n          <path d=\"M26 27 V60 Q26 68 34 68 H63\" />\n          <path d=\"M26 55 Q26 41 40 41 H63\" />\n        </svg>\n      }\n      @case ('pipeline') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"18\" cy=\"48\" r=\"10\" />\n          <path d=\"M14 42 L25 48 L14 54 Z\" fill=\"currentColor\" stroke=\"none\" />\n          <line x1=\"28\" y1=\"48\" x2=\"42\" y2=\"48\" />\n          <circle cx=\"50\" cy=\"48\" r=\"8\" />\n          <line x1=\"58\" y1=\"48\" x2=\"72\" y2=\"48\" />\n          <circle cx=\"80\" cy=\"48\" r=\"8\" />\n        </svg>\n      }\n      @case ('tag') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 20 H54 L82 48 L54 76 H18 Q14 76 14 72 V24 Q14 20 18 20 Z\" />\n          <circle cx=\"34\" cy=\"36\" r=\"5\" />\n        </svg>\n      }\n      @case ('book') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M48 26 Q34 16 16 20 V72 Q34 68 48 78 Q62 68 80 72 V20 Q62 16 48 26 Z\" />\n          <line x1=\"24\" y1=\"32\" x2=\"40\" y2=\"30\" />\n          <line x1=\"24\" y1=\"42\" x2=\"40\" y2=\"40\" />\n          <line x1=\"56\" y1=\"30\" x2=\"72\" y2=\"32\" />\n          <line x1=\"56\" y1=\"40\" x2=\"72\" y2=\"42\" />\n        </svg>\n      }\n    }\n  </div>\n  <p class=\"gbt-empty-state__heading\">{{ heading() }}</p>\n  @if (message()) {\n    <p class=\"gbt-empty-state__message\">{{ message() }}</p>\n  }\n  <div class=\"gbt-empty-state__action\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.gbt-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding:3rem 1.5rem}.gbt-empty-state__illustration{width:6rem;height:6rem;color:var(--text-discret)}.gbt-empty-state__illustration svg{width:100%;height:100%}.gbt-empty-state__heading{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.gbt-empty-state__message{margin:0;max-width:32rem;color:var(--text-secondary);font-size:.875rem}.gbt-empty-state__action:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Card, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EmptyState, decorators: [{
             type: Component,
-            args: [{ selector: 'gbt-card', standalone: true, imports: [Icon, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClass()\">\n  @if (heading()) {\n    <div class=\"gbt-card__header\">\n      @switch (headingLevel()) {\n        @case (1) {\n          <h1 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h1>\n        }\n        @case (3) {\n          <h3 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h3>\n        }\n        @case (4) {\n          <h4 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h4>\n        }\n        @case (5) {\n          <h5 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h5>\n        }\n        @case (6) {\n          <h6 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h6>\n        }\n        @default {\n          <h2 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h2>\n        }\n      }\n      <ng-content select=\"[card-header-actions]\"></ng-content>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n<ng-template #headingContent>\n  @if (icon()) {\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  }\n  {{ heading() }}\n</ng-template>\n", styles: [":host{display:block}.gbt-card{background:var(--bg-principal);border-radius:var(--site-border-radius-lg);box-shadow:var(--site-shadow-sm);position:relative;overflow:hidden;transition:box-shadow .18s cubic-bezier(.4,0,.2,1);padding:1.25rem 1.5rem;font-size:.9rem;line-height:1.65;color:var(--text-secondary)}.gbt-card--hoverable{cursor:pointer;-webkit-user-select:none;user-select:none}.gbt-card--hoverable:hover{box-shadow:var(--site-shadow-lg)}.gbt-card__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.gbt-card__title{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}\n"] }]
-        }], propDecorators: { hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
+            args: [{ selector: 'gbt-empty-state', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gbt-empty-state\">\n  <div class=\"gbt-empty-state__illustration\" aria-hidden=\"true\">\n    @switch (illustration()) {\n      @case ('folder') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"16\" y=\"38\" width=\"64\" height=\"40\" rx=\"4\" />\n          <path d=\"M16 38 v-8a4 4 0 0 1 4-4h16l8 8h28a4 4 0 0 1 4 4\" />\n          <rect x=\"34\" y=\"14\" width=\"16\" height=\"20\" rx=\"2\" transform=\"rotate(-8 42 24)\" opacity=\"0.55\" />\n          <rect x=\"50\" y=\"16\" width=\"16\" height=\"20\" rx=\"2\" transform=\"rotate(6 58 26)\" opacity=\"0.55\" />\n        </svg>\n      }\n      @case ('star') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M48,18 L55.6,37.5 L76.5,38.7 L60.4,52 L65.6,72.3 L48,61 L30.4,72.3 L35.6,52 L19.5,38.7 L40.4,37.5 Z\" />\n          <path d=\"M78,14 L81,20 L78,26 L75,20 Z\" opacity=\"0.55\" />\n          <path d=\"M16,64 L19,70 L16,76 L13,70 Z\" opacity=\"0.55\" />\n        </svg>\n      }\n      @case ('checklist') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"24\" y=\"18\" width=\"48\" height=\"64\" rx=\"6\" />\n          <rect x=\"38\" y=\"12\" width=\"20\" height=\"10\" rx=\"3\" />\n          <line x1=\"34\" y1=\"38\" x2=\"62\" y2=\"38\" />\n          <path d=\"M32 50 l4 4 l8-8\" />\n          <line x1=\"46\" y1=\"52\" x2=\"62\" y2=\"52\" />\n          <line x1=\"34\" y1=\"66\" x2=\"62\" y2=\"66\" opacity=\"0.55\" />\n        </svg>\n      }\n      @case ('merge') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"26\" cy=\"20\" r=\"7\" />\n          <circle cx=\"26\" cy=\"76\" r=\"7\" />\n          <circle cx=\"70\" cy=\"48\" r=\"7\" />\n          <path d=\"M26 27 V60 Q26 68 34 68 H63\" />\n          <path d=\"M26 55 Q26 41 40 41 H63\" />\n        </svg>\n      }\n      @case ('pipeline') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"18\" cy=\"48\" r=\"10\" />\n          <path d=\"M14 42 L25 48 L14 54 Z\" fill=\"currentColor\" stroke=\"none\" />\n          <line x1=\"28\" y1=\"48\" x2=\"42\" y2=\"48\" />\n          <circle cx=\"50\" cy=\"48\" r=\"8\" />\n          <line x1=\"58\" y1=\"48\" x2=\"72\" y2=\"48\" />\n          <circle cx=\"80\" cy=\"48\" r=\"8\" />\n        </svg>\n      }\n      @case ('tag') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 20 H54 L82 48 L54 76 H18 Q14 76 14 72 V24 Q14 20 18 20 Z\" />\n          <circle cx=\"34\" cy=\"36\" r=\"5\" />\n        </svg>\n      }\n      @case ('book') {\n        <svg viewBox=\"0 0 96 96\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M48 26 Q34 16 16 20 V72 Q34 68 48 78 Q62 68 80 72 V20 Q62 16 48 26 Z\" />\n          <line x1=\"24\" y1=\"32\" x2=\"40\" y2=\"30\" />\n          <line x1=\"24\" y1=\"42\" x2=\"40\" y2=\"40\" />\n          <line x1=\"56\" y1=\"30\" x2=\"72\" y2=\"32\" />\n          <line x1=\"56\" y1=\"40\" x2=\"72\" y2=\"42\" />\n        </svg>\n      }\n    }\n  </div>\n  <p class=\"gbt-empty-state__heading\">{{ heading() }}</p>\n  @if (message()) {\n    <p class=\"gbt-empty-state__message\">{{ message() }}</p>\n  }\n  <div class=\"gbt-empty-state__action\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.gbt-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding:3rem 1.5rem}.gbt-empty-state__illustration{width:6rem;height:6rem;color:var(--text-discret)}.gbt-empty-state__illustration svg{width:100%;height:100%}.gbt-empty-state__heading{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.gbt-empty-state__message{margin:0;max-width:32rem;color:var(--text-secondary);font-size:.875rem}.gbt-empty-state__action:empty{display:none}\n"] }]
+        }], propDecorators: { illustration: [{ type: i0.Input, args: [{ isSignal: true, alias: "illustration", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
 
 let nextInputId = 0;
 class GbtInput {
@@ -319,59 +336,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     ], template: "<div class=\"gbt-input\">\n  @if (label()) {\n    <label [for]=\"id()\">{{ label() }}{{ required() ? ' *' : '' }}</label>\n  }\n  <div class=\"gbt-input__wrapper\">\n    <input\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        class=\"gbt-input__toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordVisible() ? hidePasswordLabel() : showPasswordLabel()\"\n      >\n        <gbt-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" aria-hidden=\"true\" />\n      </button>\n    }\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.gbt-input{display:flex;flex-direction:column;gap:.375rem}.gbt-input label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-input__wrapper{position:relative;display:flex;align-items:center}.gbt-input input{box-sizing:border-box;width:100%;padding:.5rem .75rem;font-family:var(--font-family);font-size:.875rem;color:var(--text-primary);background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);transition:border-color var(--site-transition-fast)}.gbt-input input:focus{outline:none;border-color:var(--primary)}.gbt-input input:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.gbt-input input:disabled{background:var(--bg-panel);cursor:not-allowed}.gbt-input__toggle{position:absolute;right:.5rem;display:inline-flex;background:none;border:none;color:var(--text-discret);cursor:pointer}.gbt-input__toggle:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-input__error{margin:0;font-size:.75rem;color:var(--color-error-text)}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
 
-let nextCheckboxId = 0;
-class Checkbox {
-    id = input(`gbt-checkbox-${++nextCheckboxId}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    label = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    checked = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    formDisabled = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    onChange = () => { };
-    onTouched = () => { };
-    writeValue(value) {
-        this.checked.set(!!value);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.formDisabled.set(isDisabled);
-    }
-    onToggle(event) {
-        const value = event.target.checked;
-        this.checked.set(value);
-        this.onChange(value);
-        this.onTouched();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: Checkbox, isStandalone: true, selector: "gbt-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => Checkbox),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<label class=\"gbt-checkbox\" [class.gbt-checkbox--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onToggle($event)\"\n  />\n  <span>{{ label() }}</span>\n</label>\n", styles: [".gbt-checkbox{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-checkbox:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-checkbox--disabled{cursor:not-allowed;opacity:.5}.gbt-checkbox input{width:1rem;height:1rem;accent-color:var(--primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Checkbox, decorators: [{
-            type: Component,
-            args: [{ selector: 'gbt-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => Checkbox),
-                            multi: true,
-                        },
-                    ], template: "<label class=\"gbt-checkbox\" [class.gbt-checkbox--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onToggle($event)\"\n  />\n  <span>{{ label() }}</span>\n</label>\n", styles: [".gbt-checkbox{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-checkbox:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-checkbox--disabled{cursor:not-allowed;opacity:.5}.gbt-checkbox input{width:1rem;height:1rem;accent-color:var(--primary)}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
-
 let nextSelectId = 0;
 class Select {
     elementRef = inject(ElementRef);
@@ -379,6 +343,8 @@ class Select {
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     options = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -538,13 +504,13 @@ class Select {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Select, isStandalone: true, selector: "gbt-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "handleClickOutside($event)", "keydown": "onKeydown($event)", "window:scroll": "updatePanelPosition()", "window:resize": "updatePanelPosition()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Select, isStandalone: true, selector: "gbt-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "handleClickOutside($event)", "keydown": "onKeydown($event)", "window:scroll": "updatePanelPosition()", "window:resize": "updatePanelPosition()" }, properties: { "class.gbt-select--sm": "size() === 'sm'" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => Select),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [id]=\"labelId()\" [for]=\"id()\" class=\"gbt-select__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (open() && panelStyle(); as style) {\n    <ul\n      [id]=\"id() + '-listbox'\"\n      class=\"gbt-select__panel\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <li role=\"presentation\">\n          <button\n            [id]=\"id() + '-option-' + i\"\n            type=\"button\"\n            role=\"option\"\n            tabindex=\"-1\"\n            class=\"gbt-select__option\"\n            [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n            [class.gbt-select__option--active]=\"i === activeIndex()\"\n            [attr.aria-selected]=\"isSelected(option.value)\"\n            (click)=\"selectOption(option.value)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            @if (option.icon) {\n              <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n            }\n            <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n            @if (isSelected(option.value)) {\n              <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [id]=\"labelId()\" [for]=\"id()\" class=\"gbt-select__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (open() && panelStyle(); as style) {\n    <ul\n      [id]=\"id() + '-listbox'\"\n      class=\"gbt-select__panel\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <li role=\"presentation\">\n          <button\n            [id]=\"id() + '-option-' + i\"\n            type=\"button\"\n            role=\"option\"\n            tabindex=\"-1\"\n            class=\"gbt-select__option\"\n            [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n            [class.gbt-select__option--active]=\"i === activeIndex()\"\n            [attr.aria-selected]=\"isSelected(option.value)\"\n            (click)=\"selectOption(option.value)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            @if (option.icon) {\n              <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n            }\n            <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n            @if (isSelected(option.value)) {\n              <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}:host(.gbt-select--sm){min-width:120px}:host(.gbt-select--sm) .gbt-select__trigger{height:32px;padding:0 8px;font-size:13px}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Select, decorators: [{
             type: Component,
@@ -553,14 +519,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         '(keydown)': 'onKeydown($event)',
                         '(window:scroll)': 'updatePanelPosition()',
                         '(window:resize)': 'updatePanelPosition()',
+                        '[class.gbt-select--sm]': "size() === 'sm'",
                     }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => Select),
                             multi: true,
                         },
-                    ], template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [id]=\"labelId()\" [for]=\"id()\" class=\"gbt-select__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (open() && panelStyle(); as style) {\n    <ul\n      [id]=\"id() + '-listbox'\"\n      class=\"gbt-select__panel\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <li role=\"presentation\">\n          <button\n            [id]=\"id() + '-option-' + i\"\n            type=\"button\"\n            role=\"option\"\n            tabindex=\"-1\"\n            class=\"gbt-select__option\"\n            [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n            [class.gbt-select__option--active]=\"i === activeIndex()\"\n            [attr.aria-selected]=\"isSelected(option.value)\"\n            (click)=\"selectOption(option.value)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            @if (option.icon) {\n              <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n            }\n            <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n            @if (isSelected(option.value)) {\n              <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }] } });
+                    ], template: "<div class=\"gbt-select\" [class.gbt-select--disabled]=\"isDisabled()\">\n  @if (label()) {\n    <label [id]=\"labelId()\" [for]=\"id()\" class=\"gbt-select__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n\n  <button\n    type=\"button\"\n    [id]=\"id()\"\n    class=\"gbt-select__trigger\"\n    [class.gbt-select__trigger--open]=\"open()\"\n    [disabled]=\"isDisabled()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"open() ? id() + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"activeOptionId()\"\n    [attr.aria-labelledby]=\"label() ? labelId() + ' ' + id() : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (click)=\"toggleOpen()\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" class=\"gbt-select__trigger-icon\" aria-hidden=\"true\" />\n    }\n    <span\n      class=\"gbt-select__trigger-label\"\n      [class.gbt-select__trigger-label--placeholder]=\"selectedOptions().length === 0\"\n    >\n      {{ triggerLabel() }}\n    </span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-select__chevron\" aria-hidden=\"true\" />\n  </button>\n  @if (open() && panelStyle(); as style) {\n    <ul\n      [id]=\"id() + '-listbox'\"\n      class=\"gbt-select__panel\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n      [attr.aria-multiselectable]=\"multiple()\"\n      [style.top]=\"style.top\"\n      [style.left]=\"style.left\"\n      [style.width]=\"style.width\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <li role=\"presentation\">\n          <button\n            [id]=\"id() + '-option-' + i\"\n            type=\"button\"\n            role=\"option\"\n            tabindex=\"-1\"\n            class=\"gbt-select__option\"\n            [class.gbt-select__option--selected]=\"isSelected(option.value)\"\n            [class.gbt-select__option--active]=\"i === activeIndex()\"\n            [attr.aria-selected]=\"isSelected(option.value)\"\n            (click)=\"selectOption(option.value)\"\n            (mouseenter)=\"activeIndex.set(i)\"\n          >\n            @if (option.icon) {\n              <gbt-icon [name]=\"option.icon\" class=\"gbt-select__option-icon\" aria-hidden=\"true\" />\n            }\n            <span class=\"gbt-select__option-label\">{{ option.label }}</span>\n            @if (isSelected(option.value)) {\n              <gbt-icon name=\"check\" class=\"gbt-select__option-check\" aria-hidden=\"true\" />\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-select__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;min-width:180px}.gbt-select{display:flex;flex-direction:column;gap:.375rem}.gbt-select--disabled{opacity:.5}.gbt-select__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-select__trigger{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger:hover:not(:disabled){border-color:var(--border-color)}.gbt-select__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-select__trigger:disabled{cursor:not-allowed}:host(.gbt-select--sm){min-width:120px}:host(.gbt-select--sm) .gbt-select__trigger{height:32px;padding:0 8px;font-size:13px}.gbt-select__trigger-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__trigger-label{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__trigger-label--placeholder{color:var(--text-discret)}.gbt-select__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-select__trigger--open .gbt-select__chevron{transform:rotate(180deg)}.gbt-select__panel{position:fixed;z-index:1000;margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-select-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-select__panel::-webkit-scrollbar{width:6px}.gbt-select__panel::-webkit-scrollbar-track{background:transparent}.gbt-select__panel::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-select__option{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:8px;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-select__option:hover,.gbt-select__option--active{background:var(--bg-hover)}.gbt-select__option--selected{color:var(--primary);font-weight:600}.gbt-select__option-icon{flex-shrink:0;color:var(--text-secondary)}.gbt-select__option--selected .gbt-select__option-icon{color:var(--primary)}.gbt-select__option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-select__option-check{flex-shrink:0;color:var(--primary)}@keyframes gbt-select-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.gbt-select__error{margin:0;font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }] } });
+
+class ListToolbar {
+    searchValue = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+    searchLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    sortOptions = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortOptions" }] : /* istanbul ignore next */ []));
+    sortValue = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortValue" }] : /* istanbul ignore next */ []));
+    sortDirection = input('asc', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
+    sortLabel = input('Sort by', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortLabel" }] : /* istanbul ignore next */ []));
+    directionLabel = input('Reverse sort direction', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directionLabel" }] : /* istanbul ignore next */ []));
+    searchValueChange = output();
+    sortValueChange = output();
+    sortDirectionChange = output();
+    // Plain `[ngModel]` bindings on the child `gbt-input`/`gbt-select` defer their
+    // initial value to a control-value-accessor writeValue() call scheduled on a
+    // microtask (an Angular Forms `NgModel` implementation detail), so the very
+    // first render would briefly show the empty/placeholder state. Reactive
+    // FormControls propagate `setValue()` to the CVA synchronously, so we mirror
+    // the inputs onto internal controls instead and forward user edits back out.
+    searchControl = new FormControl('', { nonNullable: true });
+    sortControl = new FormControl(null);
+    constructor() {
+        effect(() => this.searchControl.setValue(this.searchValue(), { emitEvent: false }));
+        effect(() => this.sortControl.setValue(this.sortValue(), { emitEvent: false }));
+        this.searchControl.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe((value) => this.searchValueChange.emit(value));
+        this.sortControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+            if (value !== null && value !== this.sortValue()) {
+                this.sortValueChange.emit(value);
+            }
+        });
+    }
+    asSelectOptions(options) {
+        return options;
+    }
+    toggleDirection() {
+        this.sortDirectionChange.emit(this.sortDirection() === 'asc' ? 'desc' : 'asc');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: ListToolbar, isStandalone: true, selector: "gbt-list-toolbar", inputs: { searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: true, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: true, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, directionLabel: { classPropertyName: "directionLabel", publicName: "directionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValueChange: "searchValueChange", sortValueChange: "sortValueChange", sortDirectionChange: "sortDirectionChange" }, ngImport: i0, template: "<div class=\"gbt-list-toolbar\">\n  <gbt-input\n    class=\"gbt-list-toolbar__search\"\n    [label]=\"searchLabel()\"\n    [placeholder]=\"searchPlaceholder()\"\n    [formControl]=\"searchControl\"\n  />\n  <gbt-select\n    class=\"gbt-list-toolbar__sort\"\n    [label]=\"sortLabel()\"\n    [options]=\"asSelectOptions(sortOptions())\"\n    [formControl]=\"sortControl\"\n  />\n  <button\n    type=\"button\"\n    class=\"gbt-list-toolbar__direction\"\n    (click)=\"toggleDirection()\"\n    [attr.aria-label]=\"directionLabel()\"\n    [attr.aria-pressed]=\"sortDirection() === 'desc'\"\n  >\n    <gbt-icon [name]=\"sortDirection() === 'asc' ? 'arrow-up' : 'arrow-down'\" />\n  </button>\n</div>\n", styles: [":host{display:block}.gbt-list-toolbar{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap}.gbt-list-toolbar__search{flex:1;min-width:200px}.gbt-list-toolbar__sort{min-width:160px}.gbt-list-toolbar__direction{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:var(--bg-principal);color:var(--text-secondary);cursor:pointer;transition:background var(--site-transition-fast)}.gbt-list-toolbar__direction:hover{background:var(--bg-hover)}.gbt-list-toolbar__direction:focus-visible{outline:2px solid var(--primary);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GbtInput, selector: "gbt-input", inputs: ["id", "label", "type", "required", "disabled", "placeholder", "errorMessage", "autocomplete", "showPasswordLabel", "hidePasswordLabel"], outputs: ["committed"] }, { kind: "component", type: Select, selector: "gbt-select", inputs: ["id", "label", "size", "options", "multiple", "placeholder", "disabled", "required", "errorMessage", "selectedCountLabel"] }, { kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListToolbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-list-toolbar', standalone: true, imports: [ReactiveFormsModule, GbtInput, Select, Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gbt-list-toolbar\">\n  <gbt-input\n    class=\"gbt-list-toolbar__search\"\n    [label]=\"searchLabel()\"\n    [placeholder]=\"searchPlaceholder()\"\n    [formControl]=\"searchControl\"\n  />\n  <gbt-select\n    class=\"gbt-list-toolbar__sort\"\n    [label]=\"sortLabel()\"\n    [options]=\"asSelectOptions(sortOptions())\"\n    [formControl]=\"sortControl\"\n  />\n  <button\n    type=\"button\"\n    class=\"gbt-list-toolbar__direction\"\n    (click)=\"toggleDirection()\"\n    [attr.aria-label]=\"directionLabel()\"\n    [attr.aria-pressed]=\"sortDirection() === 'desc'\"\n  >\n    <gbt-icon [name]=\"sortDirection() === 'asc' ? 'arrow-up' : 'arrow-down'\" />\n  </button>\n</div>\n", styles: [":host{display:block}.gbt-list-toolbar{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap}.gbt-list-toolbar__search{flex:1;min-width:200px}.gbt-list-toolbar__sort{min-width:160px}.gbt-list-toolbar__direction{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:var(--bg-principal);color:var(--text-secondary);cursor:pointer;transition:background var(--site-transition-fast)}.gbt-list-toolbar__direction:hover{background:var(--bg-hover)}.gbt-list-toolbar__direction:focus-visible{outline:2px solid var(--primary);outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: true }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: true }] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: true }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }], sortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortLabel", required: false }] }], directionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "directionLabel", required: false }] }], searchValueChange: [{ type: i0.Output, args: ["searchValueChange"] }], sortValueChange: [{ type: i0.Output, args: ["sortValueChange"] }], sortDirectionChange: [{ type: i0.Output, args: ["sortDirectionChange"] }] } });
+
+class Card {
+    hoverable = input(false, { ...(ngDevMode ? { debugName: "hoverable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    headingLevel = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    cardClass = computed(() => 'gbt-card' + (this.hoverable() ? ' gbt-card--hoverable' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Card, isStandalone: true, selector: "gbt-card", inputs: { hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"cardClass()\">\n  @if (heading()) {\n    <div class=\"gbt-card__header\">\n      @switch (headingLevel()) {\n        @case (1) {\n          <h1 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h1>\n        }\n        @case (3) {\n          <h3 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h3>\n        }\n        @case (4) {\n          <h4 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h4>\n        }\n        @case (5) {\n          <h5 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h5>\n        }\n        @case (6) {\n          <h6 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h6>\n        }\n        @default {\n          <h2 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h2>\n        }\n      }\n      <ng-content select=\"[card-header-actions]\"></ng-content>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n<ng-template #headingContent>\n  @if (icon()) {\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  }\n  {{ heading() }}\n</ng-template>\n", styles: [":host{display:block}.gbt-card{background:var(--bg-principal);border-radius:var(--site-border-radius-lg);box-shadow:var(--site-shadow-sm);position:relative;overflow:hidden;transition:box-shadow .18s cubic-bezier(.4,0,.2,1);padding:1.25rem 1.5rem;font-size:.9rem;line-height:1.65;color:var(--text-secondary)}.gbt-card--hoverable{cursor:pointer;-webkit-user-select:none;user-select:none}.gbt-card--hoverable:hover{box-shadow:var(--site-shadow-lg)}.gbt-card__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.gbt-card__title{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Card, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-card', standalone: true, imports: [Icon, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClass()\">\n  @if (heading()) {\n    <div class=\"gbt-card__header\">\n      @switch (headingLevel()) {\n        @case (1) {\n          <h1 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h1>\n        }\n        @case (3) {\n          <h3 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h3>\n        }\n        @case (4) {\n          <h4 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h4>\n        }\n        @case (5) {\n          <h5 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h5>\n        }\n        @case (6) {\n          <h6 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h6>\n        }\n        @default {\n          <h2 class=\"gbt-card__title\"><ng-container *ngTemplateOutlet=\"headingContent\" /></h2>\n        }\n      }\n      <ng-content select=\"[card-header-actions]\"></ng-content>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n<ng-template #headingContent>\n  @if (icon()) {\n    <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n  }\n  {{ heading() }}\n</ng-template>\n", styles: [":host{display:block}.gbt-card{background:var(--bg-principal);border-radius:var(--site-border-radius-lg);box-shadow:var(--site-shadow-sm);position:relative;overflow:hidden;transition:box-shadow .18s cubic-bezier(.4,0,.2,1);padding:1.25rem 1.5rem;font-size:.9rem;line-height:1.65;color:var(--text-secondary)}.gbt-card--hoverable{cursor:pointer;-webkit-user-select:none;user-select:none}.gbt-card--hoverable:hover{box-shadow:var(--site-shadow-lg)}.gbt-card__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.gbt-card__title{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}\n"] }]
+        }], propDecorators: { hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
+
+let nextCheckboxId = 0;
+class Checkbox {
+    id = input(`gbt-checkbox-${++nextCheckboxId}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    checked = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onToggle(event) {
+        const value = event.target.checked;
+        this.checked.set(value);
+        this.onChange(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: Checkbox, isStandalone: true, selector: "gbt-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => Checkbox),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label class=\"gbt-checkbox\" [class.gbt-checkbox--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onToggle($event)\"\n  />\n  <span>{{ label() }}</span>\n</label>\n", styles: [".gbt-checkbox{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-checkbox:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-checkbox--disabled{cursor:not-allowed;opacity:.5}.gbt-checkbox input{width:1rem;height:1rem;accent-color:var(--primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Checkbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Checkbox),
+                            multi: true,
+                        },
+                    ], template: "<label class=\"gbt-checkbox\" [class.gbt-checkbox--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onToggle($event)\"\n  />\n  <span>{{ label() }}</span>\n</label>\n", styles: [".gbt-checkbox{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-checkbox:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-checkbox--disabled{cursor:not-allowed;opacity:.5}.gbt-checkbox input{width:1rem;height:1rem;accent-color:var(--primary)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class Modal {
     isOpen = input.required(/* @ts-ignore */
@@ -892,7 +984,7 @@ class Tabs {
     ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     triggers = viewChildren('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
-    activeIndex = signal(0, /* @ts-ignore */
+    activeIndex = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
@@ -901,6 +993,21 @@ class Tabs {
             const groupId = this.id();
             tabs.forEach((tab, i) => tab.setState(i, i === active, groupId));
         });
+        // Self-heals an out-of-range `activeIndex` — e.g. a consumer binds it to
+        // a URL query parameter and the stored value no longer matches any tab —
+        // instead of leaving every panel hidden and every trigger out of the
+        // keyboard tab order with no way to reach the component at all.
+        effect(() => {
+            const count = this.tabs().length;
+            if (count === 0) {
+                return;
+            }
+            const current = this.activeIndex();
+            const clamped = Math.min(Math.max(current, 0), count - 1);
+            if (clamped !== current) {
+                this.activeIndex.set(clamped);
+            }
+        });
     }
     select(index) {
         this.activeIndex.set(index);
@@ -925,12 +1032,12 @@ class Tabs {
         this.triggers()[next]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Tabs, isStandalone: true, selector: "gbt-tabs", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], viewQueries: [{ propertyName: "triggers", predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gbt-tabs\">\n  <div class=\"gbt-tabs__list\" role=\"tablist\">\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        #trigger\n        type=\"button\"\n        class=\"gbt-tabs__trigger\"\n        [class.gbt-tabs__trigger--active]=\"activeIndex() === i\"\n        role=\"tab\"\n        [id]=\"id() + '-trigger-' + i\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"id() + '-panel-' + i\"\n        [tabIndex]=\"activeIndex() === i ? 0 : -1\"\n        (click)=\"select(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n      >\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <div class=\"gbt-tabs__panels\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.gbt-tabs{display:flex;flex-direction:column}.gbt-tabs__list{display:flex;gap:.5rem;border-bottom:1px solid var(--border-color);overflow-x:auto}.gbt-tabs__trigger{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:.75rem 1rem;font-size:.9375rem;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:color var(--site-transition-fast),border-color var(--site-transition-fast)}.gbt-tabs__trigger:hover{color:var(--text-primary)}.gbt-tabs__trigger:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:var(--site-border-radius-sm)}.gbt-tabs__trigger--active{color:var(--primary);border-bottom-color:var(--primary)}.gbt-tabs__panels{padding-top:1rem;display:flex;flex-direction:column;gap:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Tabs, isStandalone: true, selector: "gbt-tabs", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], viewQueries: [{ propertyName: "triggers", predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gbt-tabs\">\n  <div class=\"gbt-tabs__list\" role=\"tablist\">\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        #trigger\n        type=\"button\"\n        class=\"gbt-tabs__trigger\"\n        [class.gbt-tabs__trigger--active]=\"activeIndex() === i\"\n        role=\"tab\"\n        [id]=\"id() + '-trigger-' + i\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"id() + '-panel-' + i\"\n        [tabIndex]=\"activeIndex() === i ? 0 : -1\"\n        (click)=\"select(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n      >\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <div class=\"gbt-tabs__panels\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.gbt-tabs{display:flex;flex-direction:column}.gbt-tabs__list{display:flex;gap:.5rem;border-bottom:1px solid var(--border-color);overflow-x:auto}.gbt-tabs__trigger{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:.75rem 1rem;font-size:.9375rem;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:color var(--site-transition-fast),border-color var(--site-transition-fast)}.gbt-tabs__trigger:hover{color:var(--text-primary)}.gbt-tabs__trigger:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:var(--site-border-radius-sm)}.gbt-tabs__trigger--active{color:var(--primary);border-bottom-color:var(--primary)}.gbt-tabs__panels{padding-top:1rem;display:flex;flex-direction:column;gap:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
             args: [{ selector: 'gbt-tabs', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gbt-tabs\">\n  <div class=\"gbt-tabs__list\" role=\"tablist\">\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        #trigger\n        type=\"button\"\n        class=\"gbt-tabs__trigger\"\n        [class.gbt-tabs__trigger--active]=\"activeIndex() === i\"\n        role=\"tab\"\n        [id]=\"id() + '-trigger-' + i\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"id() + '-panel-' + i\"\n        [tabIndex]=\"activeIndex() === i ? 0 : -1\"\n        (click)=\"select(i)\"\n        (keydown)=\"onKeydown($event, i)\"\n      >\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n  <div class=\"gbt-tabs__panels\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.gbt-tabs{display:flex;flex-direction:column}.gbt-tabs__list{display:flex;gap:.5rem;border-bottom:1px solid var(--border-color);overflow-x:auto}.gbt-tabs__trigger{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:.75rem 1rem;font-size:.9375rem;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:color var(--site-transition-fast),border-color var(--site-transition-fast)}.gbt-tabs__trigger:hover{color:var(--text-primary)}.gbt-tabs__trigger:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:var(--site-border-radius-sm)}.gbt-tabs__trigger--active{color:var(--primary);border-bottom-color:var(--primary)}.gbt-tabs__panels{padding-top:1rem;display:flex;flex-direction:column;gap:1rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Tab), { isSignal: true }] }], triggers: [{ type: i0.ViewChildren, args: ['trigger', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Tab), { isSignal: true }] }], triggers: [{ type: i0.ViewChildren, args: ['trigger', { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }] } });
 
 function linearScale(domain, range) {
     const [d0, d1] = domain;
@@ -2431,6 +2538,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     }, template: "<div class=\"gbt-menu\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"gbt-menu__trigger\"\n    [class.gbt-menu__trigger--open]=\"open()\"\n    [class.gbt-menu__trigger--icon-only]=\"triggerIcon()\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-label]=\"triggerIcon() ? label() : null\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" aria-hidden=\"true\" />\n    } @else {\n      <span class=\"gbt-menu__label\">{{ label() }}</span>\n      <gbt-icon name=\"chevron-down\" class=\"gbt-menu__chevron\" aria-hidden=\"true\" />\n    }\n  </button>\n\n  @if (open() && position(); as pos) {\n    <div\n      #list\n      class=\"gbt-menu__list\"\n      role=\"menu\"\n      tabindex=\"-1\"\n      [attr.aria-label]=\"label()\"\n      [style.top]=\"pos.top\"\n      [style.left]=\"pos.left\"\n      [style.right]=\"pos.right\"\n      (keydown)=\"onListKeydown($event)\"\n      (click)=\"onListClick()\"\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block}.gbt-menu{position:relative;display:inline-block}.gbt-menu__trigger{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:transparent;border:1px solid transparent;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-menu__trigger:hover{background:var(--bg-hover)}.gbt-menu__trigger:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.gbt-menu__trigger--open{background:var(--bg-hover)}.gbt-menu__trigger--icon-only{padding:.5rem;gap:0}.gbt-menu__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-menu__trigger--open .gbt-menu__chevron{transform:rotate(180deg)}.gbt-menu__list{position:fixed;z-index:1000;display:flex;flex-direction:column;min-width:180px;padding:6px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-menu-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}@keyframes gbt-menu-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.gbt-menu__list{animation:none}.gbt-menu__chevron{transition:none}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
 
+const ELLIPSIS = '…';
+function range(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function paginationRange(page, pageCount, siblingCount) {
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= pageCount) {
+        return range(1, pageCount);
+    }
+    const leftSiblingIndex = Math.max(page - siblingCount, 1);
+    const rightSiblingIndex = Math.min(page + siblingCount, pageCount);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    // -2, not -1: a lone skipped page right before the last one isn't worth an
+    // ellipsis — showing that page costs no more room than the "…" would.
+    const shouldShowRightDots = rightSiblingIndex < pageCount - 2;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftItemCount = 3 + siblingCount * 2;
+        return [...range(1, leftItemCount), ELLIPSIS, pageCount];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightItemCount = 3 + siblingCount * 2;
+        return [1, ELLIPSIS, ...range(pageCount - rightItemCount + 1, pageCount)];
+    }
+    return [1, ELLIPSIS, ...range(leftSiblingIndex, rightSiblingIndex), ELLIPSIS, pageCount];
+}
+class Pagination {
+    page = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    totalItems = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    siblingCount = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input('Pagination', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    previousLabel = input('Previous page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
+    nextLabel = input('Next page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+    pageLabel = input((page) => `Page ${page}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageLabel" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    pageSizeLabel = input((size) => `${size} / page`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeLabel" }] : /* istanbul ignore next */ []));
+    pageSizeSelectLabel = input('Rows per page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeSelectLabel" }] : /* istanbul ignore next */ []));
+    showItemsSummary = input(false, { ...(ngDevMode ? { debugName: "showItemsSummary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    itemsSummaryLabel = input((shown, total) => `${shown} of ${total} items`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsSummaryLabel" }] : /* istanbul ignore next */ []));
+    pageChange = output();
+    pageSizeChange = output();
+    ELLIPSIS = ELLIPSIS;
+    pageCount = computed(() => Math.max(1, Math.ceil(this.totalItems() / this.pageSize())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    items = computed(() => paginationRange(this.page(), this.pageCount(), this.siblingCount()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    itemsShown = computed(() => {
+        const start = (this.page() - 1) * this.pageSize();
+        return Math.max(0, Math.min(this.pageSize(), this.totalItems() - start));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsShown" }] : /* istanbul ignore next */ []));
+    itemsSummary = computed(() => this.itemsSummaryLabel()(this.itemsShown(), this.totalItems()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsSummary" }] : /* istanbul ignore next */ []));
+    pageSizeSelectOptions = computed(() => this.pageSizeOptions().map((size) => ({ value: size, label: this.pageSizeLabel()(size) })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeSelectOptions" }] : /* istanbul ignore next */ []));
+    pageSizeControl = new FormControl(this.pageSize(), {
+        nonNullable: true,
+    });
+    constructor() {
+        effect(() => {
+            const size = this.pageSize();
+            if (this.pageSizeControl.value !== size) {
+                this.pageSizeControl.setValue(size, { emitEvent: false });
+            }
+        });
+        this.pageSizeControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((size) => {
+            this.pageSizeChange.emit(size);
+            this.pageChange.emit(1);
+        });
+        // Self-heals a stale `page` — e.g. a filter shrinks `totalItems` while
+        // the app was sitting on a now out-of-range page — instead of leaving
+        // the pager stuck with no page marked current and a live "previous"
+        // button pointing at a page that no longer exists.
+        effect(() => {
+            const count = this.pageCount();
+            const current = this.page();
+            const clamped = Math.min(Math.max(current, 1), count);
+            if (clamped !== current) {
+                this.pageChange.emit(clamped);
+            }
+        });
+    }
+    goTo(page) {
+        if (this.disabled())
+            return;
+        const clamped = Math.min(Math.max(page, 1), this.pageCount());
+        if (clamped === this.page())
+            return;
+        this.pageChange.emit(clamped);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Pagination, isStandalone: true, selector: "gbt-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", 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 }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSizeLabel: { classPropertyName: "pageSizeLabel", publicName: "pageSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeSelectLabel: { classPropertyName: "pageSizeSelectLabel", publicName: "pageSizeSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, showItemsSummary: { classPropertyName: "showItemsSummary", publicName: "showItemsSummary", isSignal: true, isRequired: false, transformFunction: null }, itemsSummaryLabel: { classPropertyName: "itemsSummaryLabel", publicName: "itemsSummaryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"gbt-pagination\">\n  <div class=\"gbt-pagination__side gbt-pagination__side--start\">\n    @if (showItemsSummary()) {\n      <span class=\"gbt-pagination__summary\">{{ itemsSummary() }}</span>\n    }\n  </div>\n\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ul class=\"gbt-pagination__list\">\n      <li>\n        <button\n          type=\"button\"\n          class=\"gbt-pagination__nav\"\n          [disabled]=\"disabled() || page() <= 1\"\n          [attr.aria-label]=\"previousLabel()\"\n          (click)=\"goTo(page() - 1)\"\n        >\n          <gbt-icon name=\"chevron-left\" aria-hidden=\"true\" />\n        </button>\n      </li>\n      @for (item of items(); track $index) {\n        @if (item === ELLIPSIS) {\n          <li class=\"gbt-pagination__ellipsis\" aria-hidden=\"true\">{{ ELLIPSIS }}</li>\n        } @else {\n          <li>\n            <button\n              type=\"button\"\n              class=\"gbt-pagination__page\"\n              [class.gbt-pagination__page--current]=\"item === page()\"\n              [attr.aria-current]=\"item === page() ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel()(item)\"\n              [disabled]=\"disabled()\"\n              (click)=\"goTo(item)\"\n            >\n              {{ item }}\n            </button>\n          </li>\n        }\n      }\n      <li>\n        <button\n          type=\"button\"\n          class=\"gbt-pagination__nav\"\n          [disabled]=\"disabled() || page() >= pageCount()\"\n          [attr.aria-label]=\"nextLabel()\"\n          (click)=\"goTo(page() + 1)\"\n        >\n          <gbt-icon name=\"chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n\n  <div class=\"gbt-pagination__side gbt-pagination__side--end\">\n    @if (pageSizeOptions().length > 0) {\n      <gbt-select\n        class=\"gbt-pagination__page-size\"\n        size=\"sm\"\n        [label]=\"pageSizeSelectLabel()\"\n        [options]=\"pageSizeSelectOptions()\"\n        [disabled]=\"disabled()\"\n        [formControl]=\"pageSizeControl\"\n      />\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.gbt-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.gbt-pagination__side{display:flex;align-items:center;flex:1;min-width:0}.gbt-pagination__side--start{justify-content:flex-start}.gbt-pagination__side--end{justify-content:flex-end}.gbt-pagination__summary{color:var(--text-secondary);font-size:.8125rem;white-space:nowrap}.gbt-pagination__page-size{min-width:0}.gbt-pagination__list{display:flex;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none}.gbt-pagination__nav,.gbt-pagination__page{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 .375rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-pagination__nav:hover:not(:disabled),.gbt-pagination__page:hover:not(:disabled){background:var(--bg-hover)}.gbt-pagination__nav:focus-visible,.gbt-pagination__page:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.gbt-pagination__nav:disabled,.gbt-pagination__page:disabled{color:var(--text-discret);cursor:not-allowed}.gbt-pagination__page--current{background:var(--primary);color:var(--text-on-primary);font-weight:600}.gbt-pagination__page--current:hover{background:var(--primary)}.gbt-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--text-discret)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }, { kind: "component", type: Select, selector: "gbt-select", inputs: ["id", "label", "size", "options", "multiple", "placeholder", "disabled", "required", "errorMessage", "selectedCountLabel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Pagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-pagination', standalone: true, imports: [Icon, Select, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gbt-pagination\">\n  <div class=\"gbt-pagination__side gbt-pagination__side--start\">\n    @if (showItemsSummary()) {\n      <span class=\"gbt-pagination__summary\">{{ itemsSummary() }}</span>\n    }\n  </div>\n\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ul class=\"gbt-pagination__list\">\n      <li>\n        <button\n          type=\"button\"\n          class=\"gbt-pagination__nav\"\n          [disabled]=\"disabled() || page() <= 1\"\n          [attr.aria-label]=\"previousLabel()\"\n          (click)=\"goTo(page() - 1)\"\n        >\n          <gbt-icon name=\"chevron-left\" aria-hidden=\"true\" />\n        </button>\n      </li>\n      @for (item of items(); track $index) {\n        @if (item === ELLIPSIS) {\n          <li class=\"gbt-pagination__ellipsis\" aria-hidden=\"true\">{{ ELLIPSIS }}</li>\n        } @else {\n          <li>\n            <button\n              type=\"button\"\n              class=\"gbt-pagination__page\"\n              [class.gbt-pagination__page--current]=\"item === page()\"\n              [attr.aria-current]=\"item === page() ? 'page' : null\"\n              [attr.aria-label]=\"pageLabel()(item)\"\n              [disabled]=\"disabled()\"\n              (click)=\"goTo(item)\"\n            >\n              {{ item }}\n            </button>\n          </li>\n        }\n      }\n      <li>\n        <button\n          type=\"button\"\n          class=\"gbt-pagination__nav\"\n          [disabled]=\"disabled() || page() >= pageCount()\"\n          [attr.aria-label]=\"nextLabel()\"\n          (click)=\"goTo(page() + 1)\"\n        >\n          <gbt-icon name=\"chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </li>\n    </ul>\n  </nav>\n\n  <div class=\"gbt-pagination__side gbt-pagination__side--end\">\n    @if (pageSizeOptions().length > 0) {\n      <gbt-select\n        class=\"gbt-pagination__page-size\"\n        size=\"sm\"\n        [label]=\"pageSizeSelectLabel()\"\n        [options]=\"pageSizeSelectOptions()\"\n        [disabled]=\"disabled()\"\n        [formControl]=\"pageSizeControl\"\n      />\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.gbt-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:1rem}.gbt-pagination__side{display:flex;align-items:center;flex:1;min-width:0}.gbt-pagination__side--start{justify-content:flex-start}.gbt-pagination__side--end{justify-content:flex-end}.gbt-pagination__summary{color:var(--text-secondary);font-size:.8125rem;white-space:nowrap}.gbt-pagination__page-size{min-width:0}.gbt-pagination__list{display:flex;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none}.gbt-pagination__nav,.gbt-pagination__page{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 .375rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-pagination__nav:hover:not(:disabled),.gbt-pagination__page:hover:not(:disabled){background:var(--bg-hover)}.gbt-pagination__nav:focus-visible,.gbt-pagination__page:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.gbt-pagination__nav:disabled,.gbt-pagination__page:disabled{color:var(--text-discret);cursor:not-allowed}.gbt-pagination__page--current{background:var(--primary);color:var(--text-on-primary);font-weight:600}.gbt-pagination__page--current:hover{background:var(--primary)}.gbt-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;color:var(--text-discret)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], pageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLabel", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageSizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeLabel", required: false }] }], pageSizeSelectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeSelectLabel", required: false }] }], showItemsSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemsSummary", required: false }] }], itemsSummaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsSummaryLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
+
 class Breadcrumb {
     ariaLabel = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -3059,5 +3277,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppShell, Autocomplete, BarChart, BarSeries, Breadcrumb, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, ConfirmDangerModal, DimensionCard, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, Menu, Modal, RadioGroup, SearchBar, Select, Sparkline, Switch, Tab, Table, Tabs, Textarea, TimelineChart, TimelineSeries, Toaster, Tooltip, areaPath, bandScale, formatCompact, formatDuration, formatNumber, formatPercent, linePath, linearScale, nearestIndex, niceTicks, niceXDomain, niceYDomain, timeScale, timeTicks };
+export { AppShell, Autocomplete, Badge, BarChart, BarSeries, Breadcrumb, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, ConfirmDangerModal, DimensionCard, EmptyState, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, ListToolbar, Menu, Modal, Pagination, RadioGroup, SearchBar, Select, Sparkline, Switch, Tab, Table, Tabs, Textarea, TimelineChart, TimelineSeries, Toaster, Tooltip, areaPath, bandScale, formatCompact, formatDuration, formatNumber, formatPercent, linePath, linearScale, nearestIndex, niceTicks, niceXDomain, niceYDomain, timeScale, timeTicks };
 //# sourceMappingURL=masmarino-gabarit.mjs.map