@masmarino/gabarit 0.2.0 → 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.2.0';
+const GABARIT_VERSION = '0.3.0';
 
 const BUILT_IN_ICONS = {
     search: `<path d="m21 21-4.34-4.34" />
@@ -98,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$1 = 0;
+let nextId$3 = 0;
 class AppShell {
     navLabel = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []));
@@ -108,7 +108,7 @@ class AppShell {
     ...(ngDevMode ? [{ debugName: "openMenuLabel" }] : /* istanbul ignore next */ []));
     closeMenuLabel = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeMenuLabel" }] : /* istanbul ignore next */ []));
-    id = ++nextId$1;
+    id = ++nextId$3;
     mainId = `gbt-app-shell-main-${this.id}`;
     navId = `gbt-app-shell-nav-${this.id}`;
     menuOpen = signal(false, /* @ts-ignore */
@@ -285,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,
@@ -295,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;
@@ -523,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,
@@ -538,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 {
@@ -2469,14 +2469,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 const SHOW_DELAY_MS = 400;
 const FADE_MS = 120;
 const GAP_PX = 8;
-let nextId = 0;
+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}`;
+    tooltipId = `gbt-tooltip-${++nextId$2}`;
     visible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     closing = signal(false, /* @ts-ignore */
@@ -2561,9 +2561,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     }, 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, Toaster, Tooltip, 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