@masmarino/gabarit 0.1.2 → 0.3.0

package/fesm2022/masmarino-gabarit.mjs

@@ -4,7 +4,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-const GABARIT_VERSION = '0.1.2';
+const GABARIT_VERSION = '0.3.0';
 
 const BUILT_IN_ICONS = {
     search: `<path d="m21 21-4.34-4.34" />
@@ -19,6 +19,14 @@ const BUILT_IN_ICONS = {
 <path d="m2 2 20 20" />`,
     'chevron-down': `<path d="m6 9 6 6 6-6" />`,
     check: `<path d="M20 6 9 17l-5-5" />`,
+    'check-circle': `<path d="m5 12 5 5 9-10" />`,
+    'alert-circle': `<path d="M12 7v6" />
+<path d="M12 17h.01" />`,
+    'alert-triangle': `<path d="m21.73 18-8-14a2 2 0 0 0-3.46 0L2.27 18a2 2 0 0 0 1.73 3h16a2 2 0 0 0 1.73-3Z" />
+<path d="M12 9v4" />
+<path d="M12 17h.01" />`,
+    info: `<path d="M12 17v-6" />
+<path d="M12 7h.01" />`,
 };
 
 class IconRegistry {
@@ -90,7 +98,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;width:1.25em;height:1.25em}svg{width:100%;height:100%}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
 
-let nextId = 0;
+let nextId$3 = 0;
 class AppShell {
     navLabel = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []));
@@ -100,7 +108,7 @@ class AppShell {
     ...(ngDevMode ? [{ debugName: "openMenuLabel" }] : /* istanbul ignore next */ []));
     closeMenuLabel = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeMenuLabel" }] : /* istanbul ignore next */ []));
-    id = ++nextId;
+    id = ++nextId$3;
     mainId = `gbt-app-shell-main-${this.id}`;
     navId = `gbt-app-shell-nav-${this.id}`;
     menuOpen = signal(false, /* @ts-ignore */
@@ -183,11 +191,11 @@ class Button {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Button, isStandalone: true, selector: "gbt-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, 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}.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"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Button, isStandalone: true, selector: "gbt-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, 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"], 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: Button, decorators: [{
             type: Component,
-            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}.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"] }]
+            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 {
@@ -277,7 +285,7 @@ class GbtInput {
                 useExisting: forwardRef(() => GbtInput),
                 multi: true,
             },
-        ], ngImport: i0, 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{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{font-size:.75rem;color:var(--color-error-text)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, 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{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"], 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: GbtInput, decorators: [{
             type: Component,
@@ -287,7 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                             useExisting: forwardRef(() => GbtInput),
                             multi: true,
                         },
-                    ], 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{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{font-size:.75rem;color:var(--color-error-text)}\n"] }]
+                    ], 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{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;
@@ -515,7 +523,7 @@ class Select {
                 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{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{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{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{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{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,
@@ -530,7 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                             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{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{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{font-size:.75rem;color:var(--color-error-text)}@media(prefers-reduced-motion:reduce){.gbt-select__panel{animation:none}.gbt-select__chevron{transition:none}}\n"] }]
+                    ], 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{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{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 }] }] } });
 
 class Modal {
@@ -2397,9 +2405,344 @@ 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    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open()\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <span class=\"gbt-menu__label\">{{ label() }}</span>\n    <gbt-icon name=\"chevron-down\" class=\"gbt-menu__chevron\" aria-hidden=\"true\" />\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__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 }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
 
+const DEFAULT_DURATION_MS = 5000;
+const ASSERTIVE_VARIANTS = new Set(['warning', 'error']);
+const VARIANT_ICONS = {
+    success: 'check-circle',
+    error: 'alert-circle',
+    warning: 'alert-triangle',
+    info: 'info',
+};
+class Toaster {
+    toasts = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    position = input('bottom-right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    closeLabel = input('Close', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    dismissed = output();
+    timers = new Map();
+    constructor() {
+        effect(() => {
+            const currentIds = new Set(this.toasts().map((toast) => toast.id));
+            for (const [id, timer] of this.timers) {
+                if (!currentIds.has(id)) {
+                    clearTimeout(timer);
+                    this.timers.delete(id);
+                }
+            }
+            for (const toast of this.toasts()) {
+                if (this.timers.has(toast.id)) {
+                    continue;
+                }
+                const duration = toast.duration ?? DEFAULT_DURATION_MS;
+                if (!Number.isFinite(duration) || duration <= 0) {
+                    continue;
+                }
+                this.timers.set(toast.id, setTimeout(() => {
+                    this.timers.delete(toast.id);
+                    this.dismissed.emit(toast.id);
+                }, duration));
+            }
+        });
+    }
+    ngOnDestroy() {
+        for (const timer of this.timers.values()) {
+            clearTimeout(timer);
+        }
+        this.timers.clear();
+    }
+    roleFor(variant) {
+        return ASSERTIVE_VARIANTS.has(variant) ? 'alert' : 'status';
+    }
+    iconFor(variant) {
+        return VARIANT_ICONS[variant];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Toaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Toaster, isStandalone: true, selector: "gbt-toaster", inputs: { toasts: { classPropertyName: "toasts", publicName: "toasts", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div class=\"gbt-toaster\" [attr.data-position]=\"position()\">\n  @for (toast of toasts(); track toast.id) {\n    <div\n      class=\"gbt-toaster__item\"\n      [attr.data-variant]=\"toast.variant\"\n      [attr.role]=\"roleFor(toast.variant)\"\n      aria-atomic=\"true\"\n    >\n      <span class=\"gbt-toaster__icon\">\n        <gbt-icon [name]=\"iconFor(toast.variant)\" aria-hidden=\"true\" />\n      </span>\n      <p class=\"gbt-toaster__message\">{{ toast.message }}</p>\n      <button\n        type=\"button\"\n        class=\"gbt-toaster__close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"dismissed.emit(toast.id)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  }\n</div>\n", styles: [".gbt-toaster{position:fixed;z-index:100;display:flex;flex-direction:column;gap:.5rem;max-width:min(90vw,360px);pointer-events:none}.gbt-toaster[data-position=top-right]{top:1rem;right:1rem;align-items:flex-end}.gbt-toaster[data-position=top-left]{top:1rem;left:1rem;align-items:flex-start}.gbt-toaster[data-position=top-center]{top:1rem;left:50%;align-items:center;transform:translate(-50%)}.gbt-toaster[data-position=bottom-right]{right:1rem;bottom:1rem;flex-direction:column-reverse;align-items:flex-end}.gbt-toaster[data-position=bottom-left]{bottom:1rem;left:1rem;flex-direction:column-reverse;align-items:flex-start}.gbt-toaster[data-position=bottom-center]{bottom:1rem;left:50%;flex-direction:column-reverse;align-items:center;transform:translate(-50%)}.gbt-toaster__item{display:flex;align-items:flex-start;gap:.625rem;width:100%;padding:.75rem 1rem;pointer-events:auto;background:var(--bg-inverse);border:none;border-radius:var(--site-border-radius);box-shadow:var(--site-shadow-lg);animation:gbt-toaster-in var(--site-transition-base)}.gbt-toaster__item[data-variant=success] .gbt-toaster__icon{background:var(--color-success-vivid-base)}.gbt-toaster__item[data-variant=warning] .gbt-toaster__icon{background:var(--color-warning-vivid-base)}.gbt-toaster__item[data-variant=error] .gbt-toaster__icon{background:var(--color-error-vivid-base)}.gbt-toaster__item[data-variant=info] .gbt-toaster__icon{background:var(--color-info-vivid-base)}.gbt-toaster__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;margin-top:.0625rem;color:var(--text-on-color);border-radius:50%}.gbt-toaster__icon gbt-icon{width:1.125em;height:1.125em}.gbt-toaster__message{flex:1 1 auto;margin:.3125rem 0;color:var(--text-on-color);font-size:.875rem;line-height:1.4}.gbt-toaster__close{position:relative;display:inline-flex;flex:none;align-self:flex-start;margin-top:.3125rem;background:none;border:none;border-radius:50%;color:var(--text-on-color);opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-toaster__close:hover,.gbt-toaster__close:focus-visible{opacity:1}.gbt-toaster__close:focus-visible{outline:2px solid var(--text-on-color);outline-offset:2px}.gbt-toaster__close:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}@keyframes gbt-toaster-in{0%{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\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: Toaster, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-toaster', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gbt-toaster\" [attr.data-position]=\"position()\">\n  @for (toast of toasts(); track toast.id) {\n    <div\n      class=\"gbt-toaster__item\"\n      [attr.data-variant]=\"toast.variant\"\n      [attr.role]=\"roleFor(toast.variant)\"\n      aria-atomic=\"true\"\n    >\n      <span class=\"gbt-toaster__icon\">\n        <gbt-icon [name]=\"iconFor(toast.variant)\" aria-hidden=\"true\" />\n      </span>\n      <p class=\"gbt-toaster__message\">{{ toast.message }}</p>\n      <button\n        type=\"button\"\n        class=\"gbt-toaster__close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"dismissed.emit(toast.id)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  }\n</div>\n", styles: [".gbt-toaster{position:fixed;z-index:100;display:flex;flex-direction:column;gap:.5rem;max-width:min(90vw,360px);pointer-events:none}.gbt-toaster[data-position=top-right]{top:1rem;right:1rem;align-items:flex-end}.gbt-toaster[data-position=top-left]{top:1rem;left:1rem;align-items:flex-start}.gbt-toaster[data-position=top-center]{top:1rem;left:50%;align-items:center;transform:translate(-50%)}.gbt-toaster[data-position=bottom-right]{right:1rem;bottom:1rem;flex-direction:column-reverse;align-items:flex-end}.gbt-toaster[data-position=bottom-left]{bottom:1rem;left:1rem;flex-direction:column-reverse;align-items:flex-start}.gbt-toaster[data-position=bottom-center]{bottom:1rem;left:50%;flex-direction:column-reverse;align-items:center;transform:translate(-50%)}.gbt-toaster__item{display:flex;align-items:flex-start;gap:.625rem;width:100%;padding:.75rem 1rem;pointer-events:auto;background:var(--bg-inverse);border:none;border-radius:var(--site-border-radius);box-shadow:var(--site-shadow-lg);animation:gbt-toaster-in var(--site-transition-base)}.gbt-toaster__item[data-variant=success] .gbt-toaster__icon{background:var(--color-success-vivid-base)}.gbt-toaster__item[data-variant=warning] .gbt-toaster__icon{background:var(--color-warning-vivid-base)}.gbt-toaster__item[data-variant=error] .gbt-toaster__icon{background:var(--color-error-vivid-base)}.gbt-toaster__item[data-variant=info] .gbt-toaster__icon{background:var(--color-info-vivid-base)}.gbt-toaster__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;margin-top:.0625rem;color:var(--text-on-color);border-radius:50%}.gbt-toaster__icon gbt-icon{width:1.125em;height:1.125em}.gbt-toaster__message{flex:1 1 auto;margin:.3125rem 0;color:var(--text-on-color);font-size:.875rem;line-height:1.4}.gbt-toaster__close{position:relative;display:inline-flex;flex:none;align-self:flex-start;margin-top:.3125rem;background:none;border:none;border-radius:50%;color:var(--text-on-color);opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-toaster__close:hover,.gbt-toaster__close:focus-visible{opacity:1}.gbt-toaster__close:focus-visible{outline:2px solid var(--text-on-color);outline-offset:2px}.gbt-toaster__close:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}@keyframes gbt-toaster-in{0%{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { toasts: [{ type: i0.Input, args: [{ isSignal: true, alias: "toasts", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+const SHOW_DELAY_MS = 400;
+const FADE_MS = 120;
+const GAP_PX = 8;
+let nextId$2 = 0;
+class Tooltip {
+    elementRef = inject((ElementRef));
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    position = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    tooltipId = `gbt-tooltip-${++nextId$2}`;
+    visible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    closing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []));
+    coords = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "coords" }] : /* istanbul ignore next */ []));
+    showTimer = null;
+    hideTimer = null;
+    onMouseEnter() {
+        this.showTimer = setTimeout(() => {
+            this.showTimer = null;
+            this.show();
+        }, SHOW_DELAY_MS);
+    }
+    onFocusIn() {
+        this.show();
+    }
+    show() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+        this.closing.set(false);
+        this.updatePosition();
+        this.visible.set(true);
+    }
+    updatePosition() {
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        switch (this.position()) {
+            case 'top':
+                this.coords.set({ top: rect.top - GAP_PX, left: rect.left + rect.width / 2 });
+                break;
+            case 'bottom':
+                this.coords.set({ top: rect.bottom + GAP_PX, left: rect.left + rect.width / 2 });
+                break;
+            case 'left':
+                this.coords.set({ top: rect.top + rect.height / 2, left: rect.left - GAP_PX });
+                break;
+            case 'right':
+                this.coords.set({ top: rect.top + rect.height / 2, left: rect.right + GAP_PX });
+                break;
+        }
+    }
+    hide() {
+        if (this.showTimer !== null) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (!this.visible() || this.closing())
+            return;
+        this.closing.set(true);
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            this.closing.set(false);
+            this.visible.set(false);
+        }, FADE_MS);
+    }
+    ngOnDestroy() {
+        if (this.showTimer !== null) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Tooltip, isStandalone: true, selector: "gbt-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "hide()", "focusin": "onFocusIn()", "focusout": "hide()", "keydown.escape": "hide()", "window:scroll": "updatePosition()", "window:resize": "updatePosition()" }, classAttribute: "gbt-tooltip-host" }, exportAs: ["gbtTooltip"], ngImport: i0, template: "<ng-content />\n@if (visible() && coords(); as pos) {\n  <span\n    class=\"gbt-tooltip__bubble\"\n    [class.gbt-tooltip__bubble--leaving]=\"closing()\"\n    role=\"tooltip\"\n    [id]=\"tooltipId\"\n    [attr.data-position]=\"position()\"\n    [style.top.px]=\"pos.top\"\n    [style.left.px]=\"pos.left\"\n  >\n    {{ text() }}\n  </span>\n}", styles: [".gbt-tooltip-host{display:inline-block}.gbt-tooltip__bubble{position:fixed;z-index:1100;max-width:240px;padding:.375rem .625rem;background:var(--bg-inverse);color:var(--text-on-color);text-align:center;white-space:normal;border:1px solid rgba(255,255,255,.15);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-md);font-size:.8125rem;line-height:1.3;pointer-events:none}.gbt-tooltip__bubble[data-position=top]{transform:translate(-50%,-100%)}.gbt-tooltip__bubble[data-position=bottom]{transform:translate(-50%)}.gbt-tooltip__bubble[data-position=left]{transform:translate(-100%,-50%)}.gbt-tooltip__bubble[data-position=right]{transform:translateY(-50%)}.gbt-tooltip__bubble{animation:gbt-tooltip-fade-in .12s ease-out}.gbt-tooltip__bubble.gbt-tooltip__bubble--leaving{animation:gbt-tooltip-fade-out .12s ease-in forwards}@keyframes gbt-tooltip-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gbt-tooltip-fade-out{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Tooltip, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-tooltip', standalone: true, exportAs: 'gbtTooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'gbt-tooltip-host',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'hide()',
+                        '(focusin)': 'onFocusIn()',
+                        '(focusout)': 'hide()',
+                        '(keydown.escape)': 'hide()',
+                        '(window:scroll)': 'updatePosition()',
+                        '(window:resize)': 'updatePosition()',
+                    }, template: "<ng-content />\n@if (visible() && coords(); as pos) {\n  <span\n    class=\"gbt-tooltip__bubble\"\n    [class.gbt-tooltip__bubble--leaving]=\"closing()\"\n    role=\"tooltip\"\n    [id]=\"tooltipId\"\n    [attr.data-position]=\"position()\"\n    [style.top.px]=\"pos.top\"\n    [style.left.px]=\"pos.left\"\n  >\n    {{ text() }}\n  </span>\n}", styles: [".gbt-tooltip-host{display:inline-block}.gbt-tooltip__bubble{position:fixed;z-index:1100;max-width:240px;padding:.375rem .625rem;background:var(--bg-inverse);color:var(--text-on-color);text-align:center;white-space:normal;border:1px solid rgba(255,255,255,.15);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-md);font-size:.8125rem;line-height:1.3;pointer-events:none}.gbt-tooltip__bubble[data-position=top]{transform:translate(-50%,-100%)}.gbt-tooltip__bubble[data-position=bottom]{transform:translate(-50%)}.gbt-tooltip__bubble[data-position=left]{transform:translate(-100%,-50%)}.gbt-tooltip__bubble[data-position=right]{transform:translateY(-50%)}.gbt-tooltip__bubble{animation:gbt-tooltip-fade-in .12s ease-out}.gbt-tooltip__bubble.gbt-tooltip__bubble--leaving{animation:gbt-tooltip-fade-out .12s ease-in forwards}@keyframes gbt-tooltip-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gbt-tooltip-fade-out{0%{opacity:1}to{opacity:0}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+let nextId$1 = 0;
+class RadioGroup {
+    id = input(`gbt-radio-group-${++nextId$1}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errorMessage = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    selected = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* 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.selected.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    isSelected(value) {
+        return this.selected() === value;
+    }
+    selectOption(value) {
+        this.selected.set(value);
+        this.onChange(value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: RadioGroup, isStandalone: true, selector: "gbt-radio-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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 } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioGroup),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<fieldset\n  class=\"gbt-radio-group\"\n  [attr.data-orientation]=\"orientation()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-invalid]=\"errorMessage() ? true : null\"\n  [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n>\n  <legend class=\"gbt-radio-group__legend\">{{ label() }}{{ required() ? ' *' : '' }}</legend>\n  <div class=\"gbt-radio-group__options\">\n    @for (option of options(); track option.value; let i = $index) {\n      <label class=\"gbt-radio-group__option\">\n        <input\n          type=\"radio\"\n          [id]=\"id() + '-' + i\"\n          [name]=\"id()\"\n          [value]=\"option.value\"\n          [checked]=\"isSelected(option.value)\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"selectOption(option.value)\"\n        />\n        <span>{{ option.label }}</span>\n      </label>\n    }\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-radio-group__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</fieldset>\n", styles: [".gbt-radio-group{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;border:none}.gbt-radio-group:disabled,.gbt-radio-group[disabled]{opacity:.5}.gbt-radio-group__legend{padding:0;font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-radio-group__options{display:flex;flex-direction:column;gap:.5rem}.gbt-radio-group[data-orientation=horizontal] .gbt-radio-group__options{flex-direction:row;flex-wrap:wrap;gap:1.25rem}.gbt-radio-group__option{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-radio-group__option:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-radio-group__option:has(input:disabled){cursor:not-allowed;opacity:.5}.gbt-radio-group__option input{width:1rem;height:1rem;accent-color:var(--primary)}.gbt-radio-group__error{margin:0;font-size:.75rem;color:var(--color-error-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-radio-group', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioGroup),
+                            multi: true,
+                        },
+                    ], template: "<fieldset\n  class=\"gbt-radio-group\"\n  [attr.data-orientation]=\"orientation()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-invalid]=\"errorMessage() ? true : null\"\n  [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n>\n  <legend class=\"gbt-radio-group__legend\">{{ label() }}{{ required() ? ' *' : '' }}</legend>\n  <div class=\"gbt-radio-group__options\">\n    @for (option of options(); track option.value; let i = $index) {\n      <label class=\"gbt-radio-group__option\">\n        <input\n          type=\"radio\"\n          [id]=\"id() + '-' + i\"\n          [name]=\"id()\"\n          [value]=\"option.value\"\n          [checked]=\"isSelected(option.value)\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"selectOption(option.value)\"\n        />\n        <span>{{ option.label }}</span>\n      </label>\n    }\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-radio-group__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</fieldset>\n", styles: [".gbt-radio-group{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;border:none}.gbt-radio-group:disabled,.gbt-radio-group[disabled]{opacity:.5}.gbt-radio-group__legend{padding:0;font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-radio-group__options{display:flex;flex-direction:column;gap:.5rem}.gbt-radio-group[data-orientation=horizontal] .gbt-radio-group__options{flex-direction:row;flex-wrap:wrap;gap:1.25rem}.gbt-radio-group__option{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-radio-group__option:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-radio-group__option:has(input:disabled){cursor:not-allowed;opacity:.5}.gbt-radio-group__option input{width:1rem;height:1rem;accent-color:var(--primary)}.gbt-radio-group__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: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", 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 }] }] } });
+
+let nextSwitchId = 0;
+class Switch {
+    id = input(`gbt-switch-${++nextSwitchId}`, /* @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: Switch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: Switch, isStandalone: true, selector: "gbt-switch", 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(() => Switch),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label class=\"gbt-switch\" [class.gbt-switch--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    class=\"gbt-switch__input\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"gbt-switch__track\">\n    <span class=\"gbt-switch__thumb\"></span>\n  </span>\n  <span>{{ label() }}</span>\n</label>\n", styles: [".gbt-switch{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-switch:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-switch--disabled{cursor:not-allowed;opacity:.5}.gbt-switch__input{position:absolute;width:2.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit}.gbt-switch__track{position:relative;display:inline-flex;flex-shrink:0;align-items:center;width:2.25rem;height:1.25rem;background:var(--border-color);border-radius:999px;transition:background .15s ease}.gbt-switch__input:checked+.gbt-switch__track{background:var(--primary)}.gbt-switch__input:focus-visible+.gbt-switch__track{outline:2px solid var(--primary);outline-offset:2px}.gbt-switch__thumb{position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;background:var(--bg-principal);border-radius:50%;box-shadow:var(--site-shadow-sm);transition:transform .15s ease}.gbt-switch__input:checked~.gbt-switch__track .gbt-switch__thumb{transform:translate(1rem)}@media(prefers-reduced-motion:reduce){.gbt-switch__track,.gbt-switch__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Switch, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Switch),
+                            multi: true,
+                        },
+                    ], template: "<label class=\"gbt-switch\" [class.gbt-switch--disabled]=\"isDisabled()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    class=\"gbt-switch__input\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"gbt-switch__track\">\n    <span class=\"gbt-switch__thumb\"></span>\n  </span>\n  <span>{{ label() }}</span>\n</label>\n", styles: [".gbt-switch{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-switch:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-switch--disabled{cursor:not-allowed;opacity:.5}.gbt-switch__input{position:absolute;width:2.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit}.gbt-switch__track{position:relative;display:inline-flex;flex-shrink:0;align-items:center;width:2.25rem;height:1.25rem;background:var(--border-color);border-radius:999px;transition:background .15s ease}.gbt-switch__input:checked+.gbt-switch__track{background:var(--primary)}.gbt-switch__input:focus-visible+.gbt-switch__track{outline:2px solid var(--primary);outline-offset:2px}.gbt-switch__thumb{position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;background:var(--bg-principal);border-radius:50%;box-shadow:var(--site-shadow-sm);transition:transform .15s ease}.gbt-switch__input:checked~.gbt-switch__track .gbt-switch__thumb{transform:translate(1rem)}@media(prefers-reduced-motion:reduce){.gbt-switch__track,.gbt-switch__thumb{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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+let nextId = 0;
+class Textarea {
+    id = input(`gbt-textarea-${++nextId}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    errorMessage = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    rows = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    committed = output();
+    value = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* 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.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const value = event.target.value;
+        this.value.set(value);
+        this.onChange(value);
+    }
+    onBlur() {
+        this.onTouched();
+        this.committed.emit(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Textarea, isStandalone: true, selector: "gbt-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { committed: "committed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => Textarea),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"gbt-textarea\">\n  @if (label()) {\n    <label [for]=\"id()\">{{ label() }}{{ required() ? ' *' : '' }}</label>\n  }\n  <textarea\n    [id]=\"id()\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [disabled]=\"isDisabled()\"\n    [rows]=\"rows()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    >{{ value() }}</textarea\n  >\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-textarea__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.gbt-textarea{display:flex;flex-direction:column;gap:.375rem}.gbt-textarea label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-textarea textarea{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);resize:vertical;transition:border-color var(--site-transition-fast)}.gbt-textarea textarea:focus{outline:none;border-color:var(--primary)}.gbt-textarea textarea:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.gbt-textarea textarea:disabled{background:var(--bg-panel);cursor:not-allowed;resize:none}.gbt-textarea__error{margin:0;font-size:.75rem;color:var(--color-error-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Textarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'gbt-textarea', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Textarea),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"gbt-textarea\">\n  @if (label()) {\n    <label [for]=\"id()\">{{ label() }}{{ required() ? ' *' : '' }}</label>\n  }\n  <textarea\n    [id]=\"id()\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [disabled]=\"isDisabled()\"\n    [rows]=\"rows()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    >{{ value() }}</textarea\n  >\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-textarea__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.gbt-textarea{display:flex;flex-direction:column;gap:.375rem}.gbt-textarea label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-textarea textarea{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);resize:vertical;transition:border-color var(--site-transition-fast)}.gbt-textarea textarea:focus{outline:none;border-color:var(--primary)}.gbt-textarea textarea:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.gbt-textarea textarea:disabled{background:var(--bg-panel);cursor:not-allowed;resize:none}.gbt-textarea__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 }] }], 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 }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppShell, BarChart, BarSeries, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, DimensionCard, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, Menu, Modal, SearchBar, Select, Sparkline, Tab, Table, Tabs, TimelineChart, TimelineSeries, areaPath, bandScale, formatCompact, formatDuration, formatNumber, formatPercent, linePath, linearScale, nearestIndex, niceTicks, niceXDomain, niceYDomain, timeScale, timeTicks };
+export { AppShell, BarChart, BarSeries, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, 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 };
 //# sourceMappingURL=masmarino-gabarit.mjs.map