@masmarino/gabarit 1.3.0 → 1.4.0

package/fesm2022/masmarino-gabarit.mjs

@@ -6,7 +6,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import * as i1 from "@angular/forms";
 import { FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
 import { EMPTY, catchError, forkJoin, from, isObservable, of, switchMap } from "rxjs";
-const GABARIT_VERSION = "1.3.0";
+const GABARIT_VERSION = "1.4.0";
 const BUILT_IN_ICONS = {
 	search: `<path d="m21 21-4.34-4.34" />
 <circle cx="11" cy="11" r="8" />`,
@@ -459,7 +459,7 @@ var AppShell = class AppShell {
 		}],
 		ngImport: i0,
 		template: "<div class=\"gbt-app-shell\">\n  <a class=\"gbt-app-shell__skip\" [href]=\"'#' + mainId\">{{ skipLabel() }}</a>\n\n  <nav\n    #nav\n    [id]=\"navId\"\n    class=\"gbt-app-shell__nav\"\n    [class.gbt-app-shell__nav--open]=\"menuOpen()\"\n    [class.gbt-app-shell__nav--collapsed]=\"collapsed()\"\n    [attr.aria-label]=\"navLabel()\"\n    tabindex=\"-1\"\n    (keydown)=\"onNavKeydown($event)\"\n  >\n    <div class=\"gbt-app-shell__brand\">\n      <ng-content select=\"[shell-brand]\" />\n    </div>\n    <ng-content select=\"[shell-nav]\" />\n    <div class=\"gbt-app-shell__bottom\">\n      @if (versionLabel()) {\n        @if (!collapsed()) {\n          <div class=\"gbt-app-shell__version\">v{{ versionLabel() }}</div>\n        }\n      }\n      @if (collapsible()) {\n        <button\n          type=\"button\"\n          class=\"gbt-app-shell__collapse-toggle\"\n          [class.gbt-app-shell__collapse-toggle--collapsed]=\"collapsed()\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <gbt-icon name=\"chevrons-left\" />\n        </button>\n      }\n    </div>\n  </nav>\n\n  @if (menuOpen()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div class=\"gbt-app-shell__scrim\" (click)=\"close()\"></div>\n  }\n\n  <div class=\"gbt-app-shell__body\">\n    <header class=\"gbt-app-shell__header\">\n      <button\n        #toggle\n        type=\"button\"\n        class=\"gbt-app-shell__toggle\"\n        [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"navId\"\n        [attr.aria-label]=\"menuLabel()\"\n        (click)=\"toggleMenu()\"\n      >\n        <span class=\"gbt-app-shell__burger\" aria-hidden=\"true\"></span>\n      </button>\n      <ng-content select=\"[shell-header]\" />\n    </header>\n\n    <main [id]=\"mainId\" class=\"gbt-app-shell__content\" tabindex=\"-1\">\n      <ng-content />\n    </main>\n  </div>\n</div>\n",
-		styles: [":host{display:block}.gbt-app-shell{display:flex;min-height:100vh;background:var(--bg-panel)}.gbt-app-shell__skip{position:absolute;left:-9999px;top:0;z-index:1040;padding:.5rem .75rem;border-radius:var(--site-border-radius-sm);background:var(--primary);color:var(--text-on-primary);font-size:.875rem;text-decoration:none}.gbt-app-shell__skip:focus-visible{left:.5rem;top:.5rem;outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__nav{display:flex;flex-direction:column;gap:.25rem;flex-shrink:0;box-sizing:border-box;width:220px;padding:1rem .75rem;background:var(--bg-panel);border-right:1px solid var(--gbt-shell-border, var(--border-color));overflow:hidden;transition:width .2s ease}@media(min-width:769px){.gbt-app-shell__nav--collapsed{width:64px;overflow:visible}}.gbt-app-shell__brand{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gbt-app-shell__bottom{margin-top:auto;text-align:center;display:flex;flex-direction:column;gap:.25rem}.gbt-app-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;margin-top:auto;padding:.5rem .75rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer}.gbt-app-shell__collapse-toggle:hover{background:var(--bg-hover)}.gbt-app-shell__collapse-toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__collapse-toggle gbt-icon{transition:transform .2s ease}.gbt-app-shell__collapse-toggle--collapsed gbt-icon{transform:rotate(180deg)}.gbt-app-shell__version{margin-top:auto;padding:.5rem .75rem 0;color:var(--text-secondary);font-size:.75rem}.gbt-app-shell__body{display:flex;flex-direction:column;flex:1;min-width:0}.gbt-app-shell__header{position:relative;z-index:1010;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--gbt-shell-header-bg, transparent);border-bottom:1px solid var(--gbt-shell-border, var(--border-color))}.gbt-app-shell__toggle{display:none;flex-shrink:0;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:transparent;cursor:pointer}.gbt-app-shell__toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__burger{display:block;position:relative;width:1rem;height:2px;margin:0 auto;background:var(--text-primary)}.gbt-app-shell__burger:before,.gbt-app-shell__burger:after{content:\"\";position:absolute;left:0;width:100%;height:2px;background:var(--text-primary)}.gbt-app-shell__burger:before{top:-5px}.gbt-app-shell__burger:after{top:5px}.gbt-app-shell__content{flex:1;min-width:0;padding:var(--gbt-shell-content-padding, 1rem)}.gbt-app-shell__content:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:-2px}@media(max-width:768px){.gbt-app-shell__toggle{display:block}.gbt-app-shell__nav{position:fixed;top:0;bottom:0;left:0;z-index:1030;transform:translate(-100%);transition:transform .16s ease-out}}@media(max-width:768px)and (prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}}@media(max-width:768px){.gbt-app-shell__nav--open{transform:translate(0)}.gbt-app-shell__scrim{position:fixed;inset:0;z-index:1020;background:#0006}.gbt-app-shell__collapse-toggle{display:none}}@media(prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}.gbt-app-shell__collapse-toggle gbt-icon{transition:none}}\n"],
+		styles: [":host{display:block}.gbt-app-shell{display:flex;min-height:100vh;background:var(--bg-panel)}.gbt-app-shell__skip{position:absolute;left:-9999px;top:0;z-index:1040;padding:.5rem .75rem;border-radius:var(--site-border-radius-sm);background:var(--primary);color:var(--text-on-primary);font-size:.875rem;text-decoration:none}.gbt-app-shell__skip:focus-visible{left:.5rem;top:.5rem;outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__nav{position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;gap:.25rem;flex-shrink:0;box-sizing:border-box;width:220px;height:100vh;height:100dvh;padding:1rem .75rem;background:var(--bg-panel);border-right:1px solid var(--gbt-shell-border, var(--border-color));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transition:width .2s ease}@media(min-width:769px){.gbt-app-shell__nav--collapsed{width:64px;overflow:visible}}.gbt-app-shell__brand{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gbt-app-shell__bottom{position:sticky;bottom:0;margin-top:auto;padding-top:.25rem;text-align:center;display:flex;flex-direction:column;gap:.25rem;background:inherit}.gbt-app-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;margin-top:auto;padding:.5rem .75rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer}.gbt-app-shell__collapse-toggle:hover{background:var(--bg-hover)}.gbt-app-shell__collapse-toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__collapse-toggle gbt-icon{transition:transform .2s ease}.gbt-app-shell__collapse-toggle--collapsed gbt-icon{transform:rotate(180deg)}.gbt-app-shell__version{margin-top:auto;padding:.5rem .75rem 0;color:var(--text-secondary);font-size:.75rem}.gbt-app-shell__body{display:flex;flex-direction:column;flex:1;min-width:0}.gbt-app-shell__header{position:sticky;top:0;z-index:1010;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--gbt-shell-header-bg, var(--bg-panel));border-bottom:1px solid var(--gbt-shell-border, var(--border-color))}.gbt-app-shell__toggle{display:none;flex-shrink:0;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:transparent;cursor:pointer}.gbt-app-shell__toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__burger{display:block;position:relative;width:1rem;height:2px;margin:0 auto;background:var(--text-primary)}.gbt-app-shell__burger:before,.gbt-app-shell__burger:after{content:\"\";position:absolute;left:0;width:100%;height:2px;background:var(--text-primary)}.gbt-app-shell__burger:before{top:-5px}.gbt-app-shell__burger:after{top:5px}.gbt-app-shell__content{flex:1;min-width:0;padding:var(--gbt-shell-content-padding, 1rem)}.gbt-app-shell__content:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:-2px}@media(max-width:768px){.gbt-app-shell__toggle{display:block}.gbt-app-shell__nav{position:fixed;top:0;bottom:0;left:0;z-index:1030;transform:translate(-100%);transition:transform .16s ease-out}}@media(max-width:768px)and (prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}}@media(max-width:768px){.gbt-app-shell__nav--open{transform:translate(0)}.gbt-app-shell__scrim{position:fixed;inset:0;z-index:1020;background:#0006}.gbt-app-shell__collapse-toggle{display:none}}@media(prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}.gbt-app-shell__collapse-toggle gbt-icon{transition:none}}\n"],
 		dependencies: [{
 			kind: "component",
 			type: Icon,
@@ -482,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [Icon],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<div class=\"gbt-app-shell\">\n  <a class=\"gbt-app-shell__skip\" [href]=\"'#' + mainId\">{{ skipLabel() }}</a>\n\n  <nav\n    #nav\n    [id]=\"navId\"\n    class=\"gbt-app-shell__nav\"\n    [class.gbt-app-shell__nav--open]=\"menuOpen()\"\n    [class.gbt-app-shell__nav--collapsed]=\"collapsed()\"\n    [attr.aria-label]=\"navLabel()\"\n    tabindex=\"-1\"\n    (keydown)=\"onNavKeydown($event)\"\n  >\n    <div class=\"gbt-app-shell__brand\">\n      <ng-content select=\"[shell-brand]\" />\n    </div>\n    <ng-content select=\"[shell-nav]\" />\n    <div class=\"gbt-app-shell__bottom\">\n      @if (versionLabel()) {\n        @if (!collapsed()) {\n          <div class=\"gbt-app-shell__version\">v{{ versionLabel() }}</div>\n        }\n      }\n      @if (collapsible()) {\n        <button\n          type=\"button\"\n          class=\"gbt-app-shell__collapse-toggle\"\n          [class.gbt-app-shell__collapse-toggle--collapsed]=\"collapsed()\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <gbt-icon name=\"chevrons-left\" />\n        </button>\n      }\n    </div>\n  </nav>\n\n  @if (menuOpen()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div class=\"gbt-app-shell__scrim\" (click)=\"close()\"></div>\n  }\n\n  <div class=\"gbt-app-shell__body\">\n    <header class=\"gbt-app-shell__header\">\n      <button\n        #toggle\n        type=\"button\"\n        class=\"gbt-app-shell__toggle\"\n        [attr.aria-expanded]=\"menuOpen()\"\n        [attr.aria-controls]=\"navId\"\n        [attr.aria-label]=\"menuLabel()\"\n        (click)=\"toggleMenu()\"\n      >\n        <span class=\"gbt-app-shell__burger\" aria-hidden=\"true\"></span>\n      </button>\n      <ng-content select=\"[shell-header]\" />\n    </header>\n\n    <main [id]=\"mainId\" class=\"gbt-app-shell__content\" tabindex=\"-1\">\n      <ng-content />\n    </main>\n  </div>\n</div>\n",
-			styles: [":host{display:block}.gbt-app-shell{display:flex;min-height:100vh;background:var(--bg-panel)}.gbt-app-shell__skip{position:absolute;left:-9999px;top:0;z-index:1040;padding:.5rem .75rem;border-radius:var(--site-border-radius-sm);background:var(--primary);color:var(--text-on-primary);font-size:.875rem;text-decoration:none}.gbt-app-shell__skip:focus-visible{left:.5rem;top:.5rem;outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__nav{display:flex;flex-direction:column;gap:.25rem;flex-shrink:0;box-sizing:border-box;width:220px;padding:1rem .75rem;background:var(--bg-panel);border-right:1px solid var(--gbt-shell-border, var(--border-color));overflow:hidden;transition:width .2s ease}@media(min-width:769px){.gbt-app-shell__nav--collapsed{width:64px;overflow:visible}}.gbt-app-shell__brand{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gbt-app-shell__bottom{margin-top:auto;text-align:center;display:flex;flex-direction:column;gap:.25rem}.gbt-app-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;margin-top:auto;padding:.5rem .75rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer}.gbt-app-shell__collapse-toggle:hover{background:var(--bg-hover)}.gbt-app-shell__collapse-toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__collapse-toggle gbt-icon{transition:transform .2s ease}.gbt-app-shell__collapse-toggle--collapsed gbt-icon{transform:rotate(180deg)}.gbt-app-shell__version{margin-top:auto;padding:.5rem .75rem 0;color:var(--text-secondary);font-size:.75rem}.gbt-app-shell__body{display:flex;flex-direction:column;flex:1;min-width:0}.gbt-app-shell__header{position:relative;z-index:1010;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--gbt-shell-header-bg, transparent);border-bottom:1px solid var(--gbt-shell-border, var(--border-color))}.gbt-app-shell__toggle{display:none;flex-shrink:0;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:transparent;cursor:pointer}.gbt-app-shell__toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__burger{display:block;position:relative;width:1rem;height:2px;margin:0 auto;background:var(--text-primary)}.gbt-app-shell__burger:before,.gbt-app-shell__burger:after{content:\"\";position:absolute;left:0;width:100%;height:2px;background:var(--text-primary)}.gbt-app-shell__burger:before{top:-5px}.gbt-app-shell__burger:after{top:5px}.gbt-app-shell__content{flex:1;min-width:0;padding:var(--gbt-shell-content-padding, 1rem)}.gbt-app-shell__content:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:-2px}@media(max-width:768px){.gbt-app-shell__toggle{display:block}.gbt-app-shell__nav{position:fixed;top:0;bottom:0;left:0;z-index:1030;transform:translate(-100%);transition:transform .16s ease-out}}@media(max-width:768px)and (prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}}@media(max-width:768px){.gbt-app-shell__nav--open{transform:translate(0)}.gbt-app-shell__scrim{position:fixed;inset:0;z-index:1020;background:#0006}.gbt-app-shell__collapse-toggle{display:none}}@media(prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}.gbt-app-shell__collapse-toggle gbt-icon{transition:none}}\n"]
+			styles: [":host{display:block}.gbt-app-shell{display:flex;min-height:100vh;background:var(--bg-panel)}.gbt-app-shell__skip{position:absolute;left:-9999px;top:0;z-index:1040;padding:.5rem .75rem;border-radius:var(--site-border-radius-sm);background:var(--primary);color:var(--text-on-primary);font-size:.875rem;text-decoration:none}.gbt-app-shell__skip:focus-visible{left:.5rem;top:.5rem;outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__nav{position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;gap:.25rem;flex-shrink:0;box-sizing:border-box;width:220px;height:100vh;height:100dvh;padding:1rem .75rem;background:var(--bg-panel);border-right:1px solid var(--gbt-shell-border, var(--border-color));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transition:width .2s ease}@media(min-width:769px){.gbt-app-shell__nav--collapsed{width:64px;overflow:visible}}.gbt-app-shell__brand{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gbt-app-shell__bottom{position:sticky;bottom:0;margin-top:auto;padding-top:.25rem;text-align:center;display:flex;flex-direction:column;gap:.25rem;background:inherit}.gbt-app-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;margin-top:auto;padding:.5rem .75rem;border:none;border-radius:var(--site-border-radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer}.gbt-app-shell__collapse-toggle:hover{background:var(--bg-hover)}.gbt-app-shell__collapse-toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__collapse-toggle gbt-icon{transition:transform .2s ease}.gbt-app-shell__collapse-toggle--collapsed gbt-icon{transform:rotate(180deg)}.gbt-app-shell__version{margin-top:auto;padding:.5rem .75rem 0;color:var(--text-secondary);font-size:.75rem}.gbt-app-shell__body{display:flex;flex-direction:column;flex:1;min-width:0}.gbt-app-shell__header{position:sticky;top:0;z-index:1010;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--gbt-shell-header-bg, var(--bg-panel));border-bottom:1px solid var(--gbt-shell-border, var(--border-color))}.gbt-app-shell__toggle{display:none;flex-shrink:0;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);background:transparent;cursor:pointer}.gbt-app-shell__toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:2px}.gbt-app-shell__burger{display:block;position:relative;width:1rem;height:2px;margin:0 auto;background:var(--text-primary)}.gbt-app-shell__burger:before,.gbt-app-shell__burger:after{content:\"\";position:absolute;left:0;width:100%;height:2px;background:var(--text-primary)}.gbt-app-shell__burger:before{top:-5px}.gbt-app-shell__burger:after{top:5px}.gbt-app-shell__content{flex:1;min-width:0;padding:var(--gbt-shell-content-padding, 1rem)}.gbt-app-shell__content:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--primary));outline-offset:-2px}@media(max-width:768px){.gbt-app-shell__toggle{display:block}.gbt-app-shell__nav{position:fixed;top:0;bottom:0;left:0;z-index:1030;transform:translate(-100%);transition:transform .16s ease-out}}@media(max-width:768px)and (prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}}@media(max-width:768px){.gbt-app-shell__nav--open{transform:translate(0)}.gbt-app-shell__scrim{position:fixed;inset:0;z-index:1020;background:#0006}.gbt-app-shell__collapse-toggle{display:none}}@media(prefers-reduced-motion:reduce){.gbt-app-shell__nav{transition:none}.gbt-app-shell__collapse-toggle gbt-icon{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -890,7 +890,7 @@ var Button = class Button {
 		} },
 		ngImport: i0,
 		template: "@if (isAnchor) {\n  @if (iconName()) {\n    <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n  }\n  <ng-content />\n} @else {\n  <button\n    [type]=\"type()\"\n    class=\"gbt-button gbt-button--{{ variant() }} gbt-button--{{ size() }}\"\n    [class.gbt-button--icon-only]=\"iconOnly()\"\n    [disabled]=\"disabled() || loading()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-pressed]=\"pressed()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.aria-haspopup]=\"ariaHaspopup()\"\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    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n  </button>\n}\n",
-		styles: [":host{display:inline-block;width:fit-content}:host(a){line-height:normal;text-decoration:none}:host(a.gbt-button){text-decoration:none}:host(.gbt-button-host--block){width:100%}:host(:not(a).gbt-button-host--block){display:block}:host(a.gbt-button-host--block){display:flex}:host(.gbt-button-host--block) .gbt-button{width:100%}.gbt-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;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),color var(--site-transition-fast),box-shadow 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;min-height:var(--gbt-control-height-sm)}.gbt-button--medium{padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}.gbt-button--large{padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}.gbt-button--icon-only{gap:0}.gbt-button--icon-only.gbt-button--small{padding:.375rem;min-width:var(--gbt-control-height-sm)}.gbt-button--icon-only.gbt-button--medium{padding:.5rem;min-width:var(--gbt-control-height-md)}.gbt-button--icon-only.gbt-button--large{padding:.75rem;min-width:var(--gbt-control-height-lg)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--small{padding:calc(.375rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium{padding:calc(.5rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--large{padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}.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--ghost{background:transparent;color:var(--text-secondary)}.gbt-button--ghost:not(:disabled):hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-button--ghost-danger{background:transparent;color:var(--text-secondary)}.gbt-button--ghost-danger:not(:disabled):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--ghost-danger:not(:disabled):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--link{min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}.gbt-button--link:not(:disabled):hover{color:var(--primary-hover);text-decoration-thickness:2px}.gbt-button[aria-pressed=true]{background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}.gbt-button--primary[aria-pressed=true]{background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}.gbt-button--danger[aria-pressed=true]{background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}.gbt-button--link[aria-pressed=true]{background:none;box-shadow:none;text-decoration-thickness:2px}:host{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;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),color var(--site-transition-fast),box-shadow var(--site-transition-fast),opacity var(--site-transition-fast)}:host([aria-disabled=true]){cursor:not-allowed;opacity:.5}:host(.gbt-button--small){padding:.375rem .75rem;font-size:.8125rem;min-height:var(--gbt-control-height-sm)}:host(.gbt-button--medium){padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}:host(.gbt-button--large){padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only){gap:0}:host(.gbt-button--icon-only.gbt-button--small){padding:.375rem;min-width:var(--gbt-control-height-sm)}:host(.gbt-button--icon-only.gbt-button--medium){padding:.5rem;min-width:var(--gbt-control-height-md)}:host(.gbt-button--icon-only.gbt-button--large){padding:.75rem;min-width:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--small){padding:calc(.375rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium){padding:calc(.5rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--large){padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}:host(.gbt-button--primary){background:var(--primary);color:var(--text-on-primary)}:host(.gbt-button--primary:not([aria-disabled=true])):hover{background:var(--primary-hover)}:host(.gbt-button--secondary){background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}:host(.gbt-button--secondary:not([aria-disabled=true])):hover{background:var(--bg-hover)}:host(.gbt-button--danger){background:var(--color-error-fill);color:var(--text-on-error)}:host(.gbt-button--danger:not([aria-disabled=true])):hover{background:var(--color-error-hover)}:host(.gbt-button--ghost){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost:not([aria-disabled=true])):hover{background:var(--bg-hover);color:var(--text-primary)}:host(.gbt-button--ghost-danger){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--link){min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}:host(.gbt-button--link:not([aria-disabled=true])):hover{color:var(--primary-hover);text-decoration-thickness:2px}:host([aria-pressed=true]){background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}:host(.gbt-button--primary[aria-pressed=true]){background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}:host(.gbt-button--danger[aria-pressed=true]){background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}:host(.gbt-button--link[aria-pressed=true]){background:none;box-shadow:none;text-decoration-thickness:2px}.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"],
+		styles: [":host{display:inline-block;width:fit-content}:host(a){line-height:normal;text-decoration:none}:host(a.gbt-button){text-decoration:none}:host(.gbt-button-host--block){width:100%}:host(:not(a).gbt-button-host--block){display:block}:host(a.gbt-button-host--block){display:flex}:host(.gbt-button-host--block) .gbt-button{width:100%}.gbt-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;text-align:center;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),color var(--site-transition-fast),box-shadow 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;min-height:var(--gbt-control-height-sm)}.gbt-button--medium{padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}.gbt-button--large{padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}.gbt-button--icon-only{gap:0}.gbt-button--icon-only.gbt-button--small{padding:.375rem;min-width:var(--gbt-control-height-sm)}.gbt-button--icon-only.gbt-button--medium{padding:.5rem;min-width:var(--gbt-control-height-md)}.gbt-button--icon-only.gbt-button--large{padding:.75rem;min-width:var(--gbt-control-height-lg)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--small{padding:calc(.375rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium{padding:calc(.5rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--large{padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}.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--ghost{background:transparent;color:var(--text-secondary)}.gbt-button--ghost:not(:disabled):hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-button--ghost-danger{background:transparent;color:var(--text-secondary)}.gbt-button--ghost-danger:not(:disabled):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--ghost-danger:not(:disabled):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--link{min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}.gbt-button--link:not(:disabled):hover{color:var(--primary-hover);text-decoration-thickness:2px}.gbt-button[aria-pressed=true]{background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}.gbt-button--primary[aria-pressed=true]{background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}.gbt-button--danger[aria-pressed=true]{background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}.gbt-button--link[aria-pressed=true]{background:none;box-shadow:none;text-decoration-thickness:2px}:host{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;text-align:center;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),color var(--site-transition-fast),box-shadow var(--site-transition-fast),opacity var(--site-transition-fast)}:host([aria-disabled=true]){cursor:not-allowed;opacity:.5}:host(.gbt-button--small){padding:.375rem .75rem;font-size:.8125rem;min-height:var(--gbt-control-height-sm)}:host(.gbt-button--medium){padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}:host(.gbt-button--large){padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only){gap:0}:host(.gbt-button--icon-only.gbt-button--small){padding:.375rem;min-width:var(--gbt-control-height-sm)}:host(.gbt-button--icon-only.gbt-button--medium){padding:.5rem;min-width:var(--gbt-control-height-md)}:host(.gbt-button--icon-only.gbt-button--large){padding:.75rem;min-width:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--small){padding:calc(.375rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium){padding:calc(.5rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--large){padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}:host(.gbt-button--primary){background:var(--primary);color:var(--text-on-primary)}:host(.gbt-button--primary:not([aria-disabled=true])):hover{background:var(--primary-hover)}:host(.gbt-button--secondary){background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}:host(.gbt-button--secondary:not([aria-disabled=true])):hover{background:var(--bg-hover)}:host(.gbt-button--danger){background:var(--color-error-fill);color:var(--text-on-error)}:host(.gbt-button--danger:not([aria-disabled=true])):hover{background:var(--color-error-hover)}:host(.gbt-button--ghost){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost:not([aria-disabled=true])):hover{background:var(--bg-hover);color:var(--text-primary)}:host(.gbt-button--ghost-danger){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--link){min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}:host(.gbt-button--link:not([aria-disabled=true])):hover{color:var(--primary-hover);text-decoration-thickness:2px}:host([aria-pressed=true]){background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}:host(.gbt-button--primary[aria-pressed=true]){background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}:host(.gbt-button--danger[aria-pressed=true]){background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}:host(.gbt-button--link[aria-pressed=true]){background:none;box-shadow:none;text-decoration-thickness:2px}.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,
@@ -918,7 +918,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.aria-disabled]": "isAnchor && disabled() ? \"true\" : null"
 			},
 			template: "@if (isAnchor) {\n  @if (iconName()) {\n    <gbt-icon [name]=\"iconName()!\" aria-hidden=\"true\" />\n  }\n  <ng-content />\n} @else {\n  <button\n    [type]=\"type()\"\n    class=\"gbt-button gbt-button--{{ variant() }} gbt-button--{{ size() }}\"\n    [class.gbt-button--icon-only]=\"iconOnly()\"\n    [disabled]=\"disabled() || loading()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-pressed]=\"pressed()\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.aria-haspopup]=\"ariaHaspopup()\"\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    @if (text()) {\n      <span>{{ text() }}</span>\n    }\n  </button>\n}\n",
-			styles: [":host{display:inline-block;width:fit-content}:host(a){line-height:normal;text-decoration:none}:host(a.gbt-button){text-decoration:none}:host(.gbt-button-host--block){width:100%}:host(:not(a).gbt-button-host--block){display:block}:host(a.gbt-button-host--block){display:flex}:host(.gbt-button-host--block) .gbt-button{width:100%}.gbt-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;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),color var(--site-transition-fast),box-shadow 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;min-height:var(--gbt-control-height-sm)}.gbt-button--medium{padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}.gbt-button--large{padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}.gbt-button--icon-only{gap:0}.gbt-button--icon-only.gbt-button--small{padding:.375rem;min-width:var(--gbt-control-height-sm)}.gbt-button--icon-only.gbt-button--medium{padding:.5rem;min-width:var(--gbt-control-height-md)}.gbt-button--icon-only.gbt-button--large{padding:.75rem;min-width:var(--gbt-control-height-lg)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--small{padding:calc(.375rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium{padding:calc(.5rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--large{padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}.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--ghost{background:transparent;color:var(--text-secondary)}.gbt-button--ghost:not(:disabled):hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-button--ghost-danger{background:transparent;color:var(--text-secondary)}.gbt-button--ghost-danger:not(:disabled):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--ghost-danger:not(:disabled):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--link{min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}.gbt-button--link:not(:disabled):hover{color:var(--primary-hover);text-decoration-thickness:2px}.gbt-button[aria-pressed=true]{background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}.gbt-button--primary[aria-pressed=true]{background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}.gbt-button--danger[aria-pressed=true]{background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}.gbt-button--link[aria-pressed=true]{background:none;box-shadow:none;text-decoration-thickness:2px}:host{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;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),color var(--site-transition-fast),box-shadow var(--site-transition-fast),opacity var(--site-transition-fast)}:host([aria-disabled=true]){cursor:not-allowed;opacity:.5}:host(.gbt-button--small){padding:.375rem .75rem;font-size:.8125rem;min-height:var(--gbt-control-height-sm)}:host(.gbt-button--medium){padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}:host(.gbt-button--large){padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only){gap:0}:host(.gbt-button--icon-only.gbt-button--small){padding:.375rem;min-width:var(--gbt-control-height-sm)}:host(.gbt-button--icon-only.gbt-button--medium){padding:.5rem;min-width:var(--gbt-control-height-md)}:host(.gbt-button--icon-only.gbt-button--large){padding:.75rem;min-width:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--small){padding:calc(.375rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium){padding:calc(.5rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--large){padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}:host(.gbt-button--primary){background:var(--primary);color:var(--text-on-primary)}:host(.gbt-button--primary:not([aria-disabled=true])):hover{background:var(--primary-hover)}:host(.gbt-button--secondary){background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}:host(.gbt-button--secondary:not([aria-disabled=true])):hover{background:var(--bg-hover)}:host(.gbt-button--danger){background:var(--color-error-fill);color:var(--text-on-error)}:host(.gbt-button--danger:not([aria-disabled=true])):hover{background:var(--color-error-hover)}:host(.gbt-button--ghost){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost:not([aria-disabled=true])):hover{background:var(--bg-hover);color:var(--text-primary)}:host(.gbt-button--ghost-danger){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--link){min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}:host(.gbt-button--link:not([aria-disabled=true])):hover{color:var(--primary-hover);text-decoration-thickness:2px}:host([aria-pressed=true]){background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}:host(.gbt-button--primary[aria-pressed=true]){background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}:host(.gbt-button--danger[aria-pressed=true]){background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}:host(.gbt-button--link[aria-pressed=true]){background:none;box-shadow:none;text-decoration-thickness:2px}.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"]
+			styles: [":host{display:inline-block;width:fit-content}:host(a){line-height:normal;text-decoration:none}:host(a.gbt-button){text-decoration:none}:host(.gbt-button-host--block){width:100%}:host(:not(a).gbt-button-host--block){display:block}:host(a.gbt-button-host--block){display:flex}:host(.gbt-button-host--block) .gbt-button{width:100%}.gbt-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;text-align:center;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),color var(--site-transition-fast),box-shadow 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;min-height:var(--gbt-control-height-sm)}.gbt-button--medium{padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}.gbt-button--large{padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}.gbt-button--icon-only{gap:0}.gbt-button--icon-only.gbt-button--small{padding:.375rem;min-width:var(--gbt-control-height-sm)}.gbt-button--icon-only.gbt-button--medium{padding:.5rem;min-width:var(--gbt-control-height-md)}.gbt-button--icon-only.gbt-button--large{padding:.75rem;min-width:var(--gbt-control-height-lg)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--small{padding:calc(.375rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium{padding:calc(.5rem - 1px)}.gbt-button--icon-only.gbt-button--secondary.gbt-button--large{padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}.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--ghost{background:transparent;color:var(--text-secondary)}.gbt-button--ghost:not(:disabled):hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-button--ghost-danger{background:transparent;color:var(--text-secondary)}.gbt-button--ghost-danger:not(:disabled):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--ghost-danger:not(:disabled):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-button--link{min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}.gbt-button--link:not(:disabled):hover{color:var(--primary-hover);text-decoration-thickness:2px}.gbt-button[aria-pressed=true]{background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}.gbt-button--primary[aria-pressed=true]{background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}.gbt-button--danger[aria-pressed=true]{background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}.gbt-button--link[aria-pressed=true]{background:none;box-shadow:none;text-decoration-thickness:2px}:host{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-sizing:border-box;text-align:center;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),color var(--site-transition-fast),box-shadow var(--site-transition-fast),opacity var(--site-transition-fast)}:host([aria-disabled=true]){cursor:not-allowed;opacity:.5}:host(.gbt-button--small){padding:.375rem .75rem;font-size:.8125rem;min-height:var(--gbt-control-height-sm)}:host(.gbt-button--medium){padding:.5rem 1rem;font-size:.875rem;min-height:var(--gbt-control-height-md)}:host(.gbt-button--large){padding:.75rem 1.5rem;font-size:1rem;min-height:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only){gap:0}:host(.gbt-button--icon-only.gbt-button--small){padding:.375rem;min-width:var(--gbt-control-height-sm)}:host(.gbt-button--icon-only.gbt-button--medium){padding:.5rem;min-width:var(--gbt-control-height-md)}:host(.gbt-button--icon-only.gbt-button--large){padding:.75rem;min-width:var(--gbt-control-height-lg)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--small){padding:calc(.375rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--medium){padding:calc(.5rem - 1px)}:host(.gbt-button--icon-only.gbt-button--secondary.gbt-button--large){padding:calc(.75rem - 1px);min-width:var(--gbt-control-height-lg);min-height:var(--gbt-control-height-lg)}:host(.gbt-button--primary){background:var(--primary);color:var(--text-on-primary)}:host(.gbt-button--primary:not([aria-disabled=true])):hover{background:var(--primary-hover)}:host(.gbt-button--secondary){background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color)}:host(.gbt-button--secondary:not([aria-disabled=true])):hover{background:var(--bg-hover)}:host(.gbt-button--danger){background:var(--color-error-fill);color:var(--text-on-error)}:host(.gbt-button--danger:not([aria-disabled=true])):hover{background:var(--color-error-hover)}:host(.gbt-button--ghost){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost:not([aria-disabled=true])):hover{background:var(--bg-hover);color:var(--text-primary)}:host(.gbt-button--ghost-danger){background:transparent;color:var(--text-secondary)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):hover{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--ghost-danger:not([aria-disabled=true])):focus-visible{background:var(--color-error-bg);color:var(--color-error-bg-text)}:host(.gbt-button--link){min-height:0;padding:.25rem .125rem;background:none;color:var(--primary);text-decoration:underline;text-underline-offset:.2em}:host(.gbt-button--link:not([aria-disabled=true])):hover{color:var(--primary-hover);text-decoration-thickness:2px}:host([aria-pressed=true]){background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--primary)}:host(.gbt-button--primary[aria-pressed=true]){background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--text-on-primary)}:host(.gbt-button--danger[aria-pressed=true]){background:var(--color-error-hover);box-shadow:inset 0 0 0 2px var(--text-on-error)}:host(.gbt-button--link[aria-pressed=true]){background:none;box-shadow:none;text-decoration-thickness:2px}.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"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -3141,6 +3141,7 @@ var GbtInput = class GbtInput {
 	maxlength = input(null, ...ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []);
 	min = input(null, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
 	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	combobox = input(null, ...ngDevMode ? [{ debugName: "combobox" }] : /* istanbul ignore next */ []);
 	showPasswordLabel = input("Show password", ...ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []);
 	hidePasswordLabel = input("Hide password", ...ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []);
 	committed = output();
@@ -3340,6 +3341,13 @@ var GbtInput = class GbtInput {
 				isRequired: false,
 				transformFunction: null
 			},
+			combobox: {
+				classPropertyName: "combobox",
+				publicName: "combobox",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			showPasswordLabel: {
 				classPropertyName: "showPasswordLabel",
 				publicName: "showPasswordLabel",
@@ -3362,7 +3370,7 @@ var GbtInput = class GbtInput {
 			multi: true
 		}],
 		ngImport: i0,
-		template: "<div\n  class=\"gbt-input\"\n  [class.gbt-input--sm]=\"size() === 'sm'\"\n  [class.gbt-input--mono]=\"mono()\"\n  [class.gbt-input--leading]=\"!!leadingIcon()\"\n>\n  @if (label()) {\n    <label [for]=\"id()\" [class.gbt-input__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-input__wrapper\">\n    @if (leadingIcon(); as icon) {\n      <span class=\"gbt-input__leading\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"icon\" />\n      </span>\n    }\n    <input\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.spellcheck]=\"spellcheck()\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.enterkeyhint]=\"enterkeyhint()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\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 (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-input__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"errorId()\" class=\"gbt-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+		template: "<div\n  class=\"gbt-input\"\n  [class.gbt-input--sm]=\"size() === 'sm'\"\n  [class.gbt-input--mono]=\"mono()\"\n  [class.gbt-input--leading]=\"!!leadingIcon()\"\n>\n  @if (label()) {\n    <label [for]=\"id()\" [class.gbt-input__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-input__wrapper\">\n    @if (leadingIcon(); as icon) {\n      <span class=\"gbt-input__leading\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"icon\" />\n      </span>\n    }\n    <input\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.spellcheck]=\"spellcheck()\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.enterkeyhint]=\"enterkeyhint()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.role]=\"combobox() ? 'combobox' : null\"\n      [attr.aria-autocomplete]=\"combobox() ? 'list' : null\"\n      [attr.aria-expanded]=\"combobox()?.expanded ?? null\"\n      [attr.aria-controls]=\"combobox()?.controls ?? null\"\n      [attr.aria-activedescendant]=\"combobox()?.activeDescendant ?? 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 (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-input__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"errorId()\" class=\"gbt-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
 		styles: [":host{display:block}.gbt-input{display:flex;flex-direction:column;gap:.375rem}.gbt-input label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-input__wrapper{position:relative;display:flex;align-items:center}.gbt-input input{box-sizing:border-box;width:100%;height:var(--gbt-control-height-md);padding:0 .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(--gbt-focus-ring, var(--primary));outline-offset:1px}.gbt-input input:disabled{background:var(--bg-panel);cursor:not-allowed}.gbt-input input[type=search]{-webkit-appearance:none;appearance:none}.gbt-input__label--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-input__hint{margin:0;font-size:.75rem;color:var(--text-secondary)}.gbt-input__leading{position:absolute;left:.75rem;display:inline-flex;font-size:.875rem;color:var(--text-discret);pointer-events:none}.gbt-input--leading input{padding-left:2.25rem}.gbt-input--mono input{font-family:var(--gbt-font-mono, ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace),serif;font-size:.8125rem}.gbt-input--sm input{height:var(--gbt-control-height-sm);padding:0 .625rem;font-size:.8125rem}.gbt-input--sm .gbt-input__leading{left:.625rem;font-size:.8125rem}.gbt-input--sm.gbt-input--mono input{font-size:.75rem}.gbt-input--sm.gbt-input--leading input{padding-left:2rem}.gbt-input__toggle{position:absolute;right:.5rem;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;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",
@@ -3390,7 +3398,7 @@ i0.ɵɵngDeclareClassMetadata({
 				useExisting: forwardRef(() => GbtInput),
 				multi: true
 			}],
-			template: "<div\n  class=\"gbt-input\"\n  [class.gbt-input--sm]=\"size() === 'sm'\"\n  [class.gbt-input--mono]=\"mono()\"\n  [class.gbt-input--leading]=\"!!leadingIcon()\"\n>\n  @if (label()) {\n    <label [for]=\"id()\" [class.gbt-input__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-input__wrapper\">\n    @if (leadingIcon(); as icon) {\n      <span class=\"gbt-input__leading\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"icon\" />\n      </span>\n    }\n    <input\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.spellcheck]=\"spellcheck()\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.enterkeyhint]=\"enterkeyhint()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\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 (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-input__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"errorId()\" class=\"gbt-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+			template: "<div\n  class=\"gbt-input\"\n  [class.gbt-input--sm]=\"size() === 'sm'\"\n  [class.gbt-input--mono]=\"mono()\"\n  [class.gbt-input--leading]=\"!!leadingIcon()\"\n>\n  @if (label()) {\n    <label [for]=\"id()\" [class.gbt-input__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-input__wrapper\">\n    @if (leadingIcon(); as icon) {\n      <span class=\"gbt-input__leading\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"icon\" />\n      </span>\n    }\n    <input\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.spellcheck]=\"spellcheck()\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.enterkeyhint]=\"enterkeyhint()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.role]=\"combobox() ? 'combobox' : null\"\n      [attr.aria-autocomplete]=\"combobox() ? 'list' : null\"\n      [attr.aria-expanded]=\"combobox()?.expanded ?? null\"\n      [attr.aria-controls]=\"combobox()?.controls ?? null\"\n      [attr.aria-activedescendant]=\"combobox()?.activeDescendant ?? 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 (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-input__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"errorId()\" class=\"gbt-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
 			styles: [":host{display:block}.gbt-input{display:flex;flex-direction:column;gap:.375rem}.gbt-input label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-input__wrapper{position:relative;display:flex;align-items:center}.gbt-input input{box-sizing:border-box;width:100%;height:var(--gbt-control-height-md);padding:0 .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(--gbt-focus-ring, var(--primary));outline-offset:1px}.gbt-input input:disabled{background:var(--bg-panel);cursor:not-allowed}.gbt-input input[type=search]{-webkit-appearance:none;appearance:none}.gbt-input__label--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-input__hint{margin:0;font-size:.75rem;color:var(--text-secondary)}.gbt-input__leading{position:absolute;left:.75rem;display:inline-flex;font-size:.875rem;color:var(--text-discret);pointer-events:none}.gbt-input--leading input{padding-left:2.25rem}.gbt-input--mono input{font-family:var(--gbt-font-mono, ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace),serif;font-size:.8125rem}.gbt-input--sm input{height:var(--gbt-control-height-sm);padding:0 .625rem;font-size:.8125rem}.gbt-input--sm .gbt-input__leading{left:.625rem;font-size:.8125rem}.gbt-input--sm.gbt-input--mono input{font-size:.75rem}.gbt-input--sm.gbt-input--leading input{padding-left:2rem}.gbt-input__toggle{position:absolute;right:.5rem;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;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"]
 		}]
 	}],
@@ -3555,6 +3563,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		combobox: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "combobox",
+				required: false
+			}]
+		}],
 		showPasswordLabel: [{
 			type: i0.Input,
 			args: [{
@@ -4243,6 +4259,7 @@ var ListToolbar = class ListToolbar {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],
@@ -13240,6 +13257,7 @@ var ConfirmDangerModal = class ConfirmDangerModal {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],
@@ -20442,6 +20460,13 @@ const DEFAULT_REGISTER_LABELS = Object.freeze({
 const DEFAULT_ACTIVATE_LABELS = Object.freeze({
 	heading: "Activate your account",
 	intro: "Choose the password of your account. Two-factor authentication will be set up the first time you sign in.",
+	introWithUsername: "Choose the username and the password of your account. Two-factor authentication will be set up the first time you sign in.",
+	username: "Username",
+	usernameHint: "3 to 32 characters: letters, digits, - and _. Saved in lower case.",
+	usernameEmpty: "Enter a username",
+	usernameInvalid: "Start with a letter; 3 to 32 characters: letters, digits, - and _",
+	usernameReserved: "This username is not available",
+	usernameTaken: "This username is already in use",
 	password: "New password",
 	passwordHint: (minLength) => `At least ${minLength} characters.`,
 	confirmation: "Confirm the password",
@@ -20690,8 +20715,13 @@ function classifyRegisterFailure(err) {
 }
 function classifyActivateFailure(err) {
 	if (!isAuthPortError(err)) return "other";
+	const message = portErrorMessage(err);
 	switch (err.status) {
-		case 400: return portErrorMessage(err)?.startsWith(AUTH_PORT_ERROR_BODIES.weakPasswordPrefix) ? "weak-password" : "invalid-link";
+		case 400:
+			if (message?.startsWith(AUTH_PORT_ERROR_BODIES.weakPasswordPrefix)) return "weak-password";
+			if (message === AUTH_PORT_ERROR_BODIES.usernameReserved) return "username-reserved";
+			return message?.startsWith(AUTH_PORT_ERROR_BODIES.usernamePrefix) ? "username-invalid" : "invalid-link";
+		case 409: return "username-taken";
 		case 429: return "rate-limited";
 		default: return "other";
 	}
@@ -21460,12 +21490,10 @@ var MfaEnrollment = class MfaEnrollment {
 		this.auth.confirmTotp(this.mfaToken(), code).subscribe({
 			next: ({ token, backupCodes }) => {
 				this.submitting.set(false);
-				this.sessionToken = token;
-				this.backupCodes.set(backupCodes);
 				this.secret.set("");
 				this.otpauthUrl.set("");
 				this.code.set("");
-				this.goTo("codes");
+				this.enrolled(token, backupCodes);
 			},
 			error: (err) => {
 				this.submitting.set(false);
@@ -21500,10 +21528,8 @@ var MfaEnrollment = class MfaEnrollment {
 			next: ({ token, backupCodes }) => {
 				this.submitting.set(false);
 				this.promptOpen.set(false);
-				this.sessionToken = token;
-				this.backupCodes.set(backupCodes);
 				this.passkeyName.set("");
-				this.goTo("codes");
+				this.enrolled(token, backupCodes);
 			},
 			error: (err) => {
 				if (run !== this.ceremony) return;
@@ -21527,6 +21553,15 @@ var MfaEnrollment = class MfaEnrollment {
 		}
 		this.cancelled.emit();
 	}
+	enrolled(token, backupCodes) {
+		if (backupCodes.length === 0) {
+			this.completed.emit(token);
+			return;
+		}
+		this.sessionToken = token;
+		this.backupCodes.set(backupCodes);
+		this.goTo("codes");
+	}
 	finish() {
 		if (!this.acknowledged() || this.sessionToken === null) return;
 		this.completed.emit(this.sessionToken);
@@ -21789,6 +21824,7 @@ var MfaEnrollment = class MfaEnrollment {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],
@@ -22151,7 +22187,7 @@ var AuthLogin = class AuthLogin {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<gbt-auth-panel [heading]=\"heading()\" [intro]=\"intro()\" [wide]=\"enrolling()\">\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @if (mfaToken() === null) {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\">\n      @if (error()) {\n        <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n      }\n\n      <gbt-input\n        [id]=\"id + '-username'\"\n        name=\"username\"\n        autocomplete=\"username\"\n        [label]=\"text().username\"\n        [ngModel]=\"username()\"\n        (ngModelChange)=\"username.set($event)\"\n      />\n      <gbt-input\n        [id]=\"id + '-password'\"\n        type=\"password\"\n        name=\"password\"\n        autocomplete=\"current-password\"\n        [label]=\"text().password\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"password.set($event)\"\n      />\n\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        type=\"submit\"\n        size=\"large\"\n        [text]=\"text().submit\"\n        [loading]=\"submitting()\"\n        [loadingLabel]=\"text().submitting\"\n      />\n    </form>\n\n    @if (registrationEnabled() && registerLink()) {\n      <gbt-auth-footer [text]=\"text().registerPrompt\"\n        ><ng-content select=\"[gbtAuthFooterLink]\"\n      /></gbt-auth-footer>\n    }\n  } @else if (enrolling()) {\n    <gbt-mfa-enrollment\n      [mfaToken]=\"mfaToken()!\"\n      [passkeysAvailable]=\"passkeysAvailable() === true\"\n      (completed)=\"enrolled($event)\"\n      (cancelled)=\"backToCredentials()\"\n      (expired)=\"sessionExpired()\"\n    />\n  } @else {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"verify()\">\n      @if (passkeyBlocked()) {\n        <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n          blockedReason()\n        }}</gbt-alert>\n      }\n      @if (error()) {\n        <gbt-alert [variant]=\"errorVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n          error()\n        }}</gbt-alert>\n      }\n      @if (passkeyInFlight()) {\n        <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"polite\">{{\n          text().passkeyPrompt\n        }}</gbt-alert>\n      }\n\n      @if (showBackupCode()) {\n        <gbt-input\n          [id]=\"id + '-mfa-backup-code'\"\n          inputmode=\"text\"\n          [spellcheck]=\"false\"\n          autocapitalize=\"off\"\n          enterkeyhint=\"go\"\n          name=\"backupCode\"\n          autocomplete=\"off\"\n          [label]=\"text().backupCodeLabel\"\n          [ngModel]=\"backupCode()\"\n          (ngModelChange)=\"backupCode.set($event)\"\n        />\n\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          type=\"submit\"\n          size=\"large\"\n          [text]=\"text().verify\"\n          [loading]=\"submitting()\"\n          [loadingLabel]=\"text().verifying\"\n        />\n      } @else {\n        @if (canUsePasskey()) {\n          <gbt-button\n            [attr.id]=\"id + '-mfa-passkey'\"\n            class=\"gbt-auth-panel__submit\"\n            block\n            size=\"large\"\n            iconName=\"key\"\n            [text]=\"text().usePasskey\"\n            [loading]=\"passkeyInFlight()\"\n            [disabled]=\"submitting() && !passkeyInFlight()\"\n            [loadingLabel]=\"text().passkeyValidating\"\n            (clicked)=\"usePasskey()\"\n          />\n        }\n\n        @if (canUsePasskey() && hasTotp()) {\n          <gbt-divider [label]=\"text().or\" />\n        }\n\n        @if (hasTotp()) {\n          <gbt-input\n            [id]=\"id + '-mfa-code'\"\n            inputmode=\"numeric\"\n            [spellcheck]=\"false\"\n            autocapitalize=\"off\"\n            enterkeyhint=\"go\"\n            name=\"code\"\n            autocomplete=\"one-time-code\"\n            [label]=\"text().codeLabel\"\n            [ngModel]=\"code()\"\n            (ngModelChange)=\"code.set($event)\"\n          />\n\n          <gbt-button\n            class=\"gbt-auth-panel__submit\"\n            block\n            type=\"submit\"\n            size=\"large\"\n            [text]=\"text().verify\"\n            [variant]=\"canUsePasskey() ? 'secondary' : 'primary'\"\n            [loading]=\"submitting() && !passkeyInFlight()\"\n            [disabled]=\"passkeyInFlight()\"\n            [loadingLabel]=\"text().verifying\"\n          />\n        }\n      }\n\n      <div class=\"gbt-auth-panel__links\">\n        @if (!passkeyBlocked()) {\n          <gbt-button\n            variant=\"link\"\n            [text]=\"showBackupCode() ? backFromBackupLabel() : text().useBackupCode\"\n            (clicked)=\"toggleBackupCode()\"\n          />\n        }\n        <gbt-button variant=\"link\" [text]=\"text().back\" (clicked)=\"backToCredentials()\" />\n      </div>\n    </form>\n  }\n</gbt-auth-panel>\n",
+		template: "<gbt-auth-panel [heading]=\"heading()\" [intro]=\"intro()\" [wide]=\"enrolling()\">\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @if (mfaToken() === null) {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\">\n      <ng-content select=\"[auth-notice]\" />\n      @if (error()) {\n        <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n      }\n\n      <gbt-input\n        [id]=\"id + '-username'\"\n        name=\"username\"\n        autocomplete=\"username\"\n        [label]=\"text().username\"\n        [ngModel]=\"username()\"\n        (ngModelChange)=\"username.set($event)\"\n      />\n      <gbt-input\n        [id]=\"id + '-password'\"\n        type=\"password\"\n        name=\"password\"\n        autocomplete=\"current-password\"\n        [label]=\"text().password\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"password.set($event)\"\n      />\n\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        type=\"submit\"\n        size=\"large\"\n        [text]=\"text().submit\"\n        [loading]=\"submitting()\"\n        [loadingLabel]=\"text().submitting\"\n      />\n    </form>\n\n    @if (registrationEnabled() && registerLink()) {\n      <gbt-auth-footer [text]=\"text().registerPrompt\"\n        ><ng-content select=\"[gbtAuthFooterLink]\"\n      /></gbt-auth-footer>\n    }\n  } @else if (enrolling()) {\n    <gbt-mfa-enrollment\n      [mfaToken]=\"mfaToken()!\"\n      [passkeysAvailable]=\"passkeysAvailable() === true\"\n      (completed)=\"enrolled($event)\"\n      (cancelled)=\"backToCredentials()\"\n      (expired)=\"sessionExpired()\"\n    />\n  } @else {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"verify()\">\n      @if (passkeyBlocked()) {\n        <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n          blockedReason()\n        }}</gbt-alert>\n      }\n      @if (error()) {\n        <gbt-alert [variant]=\"errorVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n          error()\n        }}</gbt-alert>\n      }\n      @if (passkeyInFlight()) {\n        <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"polite\">{{\n          text().passkeyPrompt\n        }}</gbt-alert>\n      }\n\n      @if (showBackupCode()) {\n        <gbt-input\n          [id]=\"id + '-mfa-backup-code'\"\n          inputmode=\"text\"\n          [spellcheck]=\"false\"\n          autocapitalize=\"off\"\n          enterkeyhint=\"go\"\n          name=\"backupCode\"\n          autocomplete=\"off\"\n          [label]=\"text().backupCodeLabel\"\n          [ngModel]=\"backupCode()\"\n          (ngModelChange)=\"backupCode.set($event)\"\n        />\n\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          type=\"submit\"\n          size=\"large\"\n          [text]=\"text().verify\"\n          [loading]=\"submitting()\"\n          [loadingLabel]=\"text().verifying\"\n        />\n      } @else {\n        @if (canUsePasskey()) {\n          <gbt-button\n            [attr.id]=\"id + '-mfa-passkey'\"\n            class=\"gbt-auth-panel__submit\"\n            block\n            size=\"large\"\n            iconName=\"key\"\n            [text]=\"text().usePasskey\"\n            [loading]=\"passkeyInFlight()\"\n            [disabled]=\"submitting() && !passkeyInFlight()\"\n            [loadingLabel]=\"text().passkeyValidating\"\n            (clicked)=\"usePasskey()\"\n          />\n        }\n\n        @if (canUsePasskey() && hasTotp()) {\n          <gbt-divider [label]=\"text().or\" />\n        }\n\n        @if (hasTotp()) {\n          <gbt-input\n            [id]=\"id + '-mfa-code'\"\n            inputmode=\"numeric\"\n            [spellcheck]=\"false\"\n            autocapitalize=\"off\"\n            enterkeyhint=\"go\"\n            name=\"code\"\n            autocomplete=\"one-time-code\"\n            [label]=\"text().codeLabel\"\n            [ngModel]=\"code()\"\n            (ngModelChange)=\"code.set($event)\"\n          />\n\n          <gbt-button\n            class=\"gbt-auth-panel__submit\"\n            block\n            type=\"submit\"\n            size=\"large\"\n            [text]=\"text().verify\"\n            [variant]=\"canUsePasskey() ? 'secondary' : 'primary'\"\n            [loading]=\"submitting() && !passkeyInFlight()\"\n            [disabled]=\"passkeyInFlight()\"\n            [loadingLabel]=\"text().verifying\"\n          />\n        }\n      }\n\n      <div class=\"gbt-auth-panel__links\">\n        @if (!passkeyBlocked()) {\n          <gbt-button\n            variant=\"link\"\n            [text]=\"showBackupCode() ? backFromBackupLabel() : text().useBackupCode\"\n            (clicked)=\"toggleBackupCode()\"\n          />\n        }\n        <gbt-button variant=\"link\" [text]=\"text().back\" (clicked)=\"backToCredentials()\" />\n      </div>\n    </form>\n  }\n</gbt-auth-panel>\n",
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -22247,6 +22283,7 @@ var AuthLogin = class AuthLogin {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],
@@ -22328,7 +22365,7 @@ i0.ɵɵngDeclareClassMetadata({
 				MfaEnrollment
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<gbt-auth-panel [heading]=\"heading()\" [intro]=\"intro()\" [wide]=\"enrolling()\">\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @if (mfaToken() === null) {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\">\n      @if (error()) {\n        <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n      }\n\n      <gbt-input\n        [id]=\"id + '-username'\"\n        name=\"username\"\n        autocomplete=\"username\"\n        [label]=\"text().username\"\n        [ngModel]=\"username()\"\n        (ngModelChange)=\"username.set($event)\"\n      />\n      <gbt-input\n        [id]=\"id + '-password'\"\n        type=\"password\"\n        name=\"password\"\n        autocomplete=\"current-password\"\n        [label]=\"text().password\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"password.set($event)\"\n      />\n\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        type=\"submit\"\n        size=\"large\"\n        [text]=\"text().submit\"\n        [loading]=\"submitting()\"\n        [loadingLabel]=\"text().submitting\"\n      />\n    </form>\n\n    @if (registrationEnabled() && registerLink()) {\n      <gbt-auth-footer [text]=\"text().registerPrompt\"\n        ><ng-content select=\"[gbtAuthFooterLink]\"\n      /></gbt-auth-footer>\n    }\n  } @else if (enrolling()) {\n    <gbt-mfa-enrollment\n      [mfaToken]=\"mfaToken()!\"\n      [passkeysAvailable]=\"passkeysAvailable() === true\"\n      (completed)=\"enrolled($event)\"\n      (cancelled)=\"backToCredentials()\"\n      (expired)=\"sessionExpired()\"\n    />\n  } @else {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"verify()\">\n      @if (passkeyBlocked()) {\n        <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n          blockedReason()\n        }}</gbt-alert>\n      }\n      @if (error()) {\n        <gbt-alert [variant]=\"errorVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n          error()\n        }}</gbt-alert>\n      }\n      @if (passkeyInFlight()) {\n        <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"polite\">{{\n          text().passkeyPrompt\n        }}</gbt-alert>\n      }\n\n      @if (showBackupCode()) {\n        <gbt-input\n          [id]=\"id + '-mfa-backup-code'\"\n          inputmode=\"text\"\n          [spellcheck]=\"false\"\n          autocapitalize=\"off\"\n          enterkeyhint=\"go\"\n          name=\"backupCode\"\n          autocomplete=\"off\"\n          [label]=\"text().backupCodeLabel\"\n          [ngModel]=\"backupCode()\"\n          (ngModelChange)=\"backupCode.set($event)\"\n        />\n\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          type=\"submit\"\n          size=\"large\"\n          [text]=\"text().verify\"\n          [loading]=\"submitting()\"\n          [loadingLabel]=\"text().verifying\"\n        />\n      } @else {\n        @if (canUsePasskey()) {\n          <gbt-button\n            [attr.id]=\"id + '-mfa-passkey'\"\n            class=\"gbt-auth-panel__submit\"\n            block\n            size=\"large\"\n            iconName=\"key\"\n            [text]=\"text().usePasskey\"\n            [loading]=\"passkeyInFlight()\"\n            [disabled]=\"submitting() && !passkeyInFlight()\"\n            [loadingLabel]=\"text().passkeyValidating\"\n            (clicked)=\"usePasskey()\"\n          />\n        }\n\n        @if (canUsePasskey() && hasTotp()) {\n          <gbt-divider [label]=\"text().or\" />\n        }\n\n        @if (hasTotp()) {\n          <gbt-input\n            [id]=\"id + '-mfa-code'\"\n            inputmode=\"numeric\"\n            [spellcheck]=\"false\"\n            autocapitalize=\"off\"\n            enterkeyhint=\"go\"\n            name=\"code\"\n            autocomplete=\"one-time-code\"\n            [label]=\"text().codeLabel\"\n            [ngModel]=\"code()\"\n            (ngModelChange)=\"code.set($event)\"\n          />\n\n          <gbt-button\n            class=\"gbt-auth-panel__submit\"\n            block\n            type=\"submit\"\n            size=\"large\"\n            [text]=\"text().verify\"\n            [variant]=\"canUsePasskey() ? 'secondary' : 'primary'\"\n            [loading]=\"submitting() && !passkeyInFlight()\"\n            [disabled]=\"passkeyInFlight()\"\n            [loadingLabel]=\"text().verifying\"\n          />\n        }\n      }\n\n      <div class=\"gbt-auth-panel__links\">\n        @if (!passkeyBlocked()) {\n          <gbt-button\n            variant=\"link\"\n            [text]=\"showBackupCode() ? backFromBackupLabel() : text().useBackupCode\"\n            (clicked)=\"toggleBackupCode()\"\n          />\n        }\n        <gbt-button variant=\"link\" [text]=\"text().back\" (clicked)=\"backToCredentials()\" />\n      </div>\n    </form>\n  }\n</gbt-auth-panel>\n"
+			template: "<gbt-auth-panel [heading]=\"heading()\" [intro]=\"intro()\" [wide]=\"enrolling()\">\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @if (mfaToken() === null) {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\">\n      <ng-content select=\"[auth-notice]\" />\n      @if (error()) {\n        <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n      }\n\n      <gbt-input\n        [id]=\"id + '-username'\"\n        name=\"username\"\n        autocomplete=\"username\"\n        [label]=\"text().username\"\n        [ngModel]=\"username()\"\n        (ngModelChange)=\"username.set($event)\"\n      />\n      <gbt-input\n        [id]=\"id + '-password'\"\n        type=\"password\"\n        name=\"password\"\n        autocomplete=\"current-password\"\n        [label]=\"text().password\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"password.set($event)\"\n      />\n\n      <gbt-button\n        class=\"gbt-auth-panel__submit\"\n        block\n        type=\"submit\"\n        size=\"large\"\n        [text]=\"text().submit\"\n        [loading]=\"submitting()\"\n        [loadingLabel]=\"text().submitting\"\n      />\n    </form>\n\n    @if (registrationEnabled() && registerLink()) {\n      <gbt-auth-footer [text]=\"text().registerPrompt\"\n        ><ng-content select=\"[gbtAuthFooterLink]\"\n      /></gbt-auth-footer>\n    }\n  } @else if (enrolling()) {\n    <gbt-mfa-enrollment\n      [mfaToken]=\"mfaToken()!\"\n      [passkeysAvailable]=\"passkeysAvailable() === true\"\n      (completed)=\"enrolled($event)\"\n      (cancelled)=\"backToCredentials()\"\n      (expired)=\"sessionExpired()\"\n    />\n  } @else {\n    <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"verify()\">\n      @if (passkeyBlocked()) {\n        <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n          blockedReason()\n        }}</gbt-alert>\n      }\n      @if (error()) {\n        <gbt-alert [variant]=\"errorVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n          error()\n        }}</gbt-alert>\n      }\n      @if (passkeyInFlight()) {\n        <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"polite\">{{\n          text().passkeyPrompt\n        }}</gbt-alert>\n      }\n\n      @if (showBackupCode()) {\n        <gbt-input\n          [id]=\"id + '-mfa-backup-code'\"\n          inputmode=\"text\"\n          [spellcheck]=\"false\"\n          autocapitalize=\"off\"\n          enterkeyhint=\"go\"\n          name=\"backupCode\"\n          autocomplete=\"off\"\n          [label]=\"text().backupCodeLabel\"\n          [ngModel]=\"backupCode()\"\n          (ngModelChange)=\"backupCode.set($event)\"\n        />\n\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          type=\"submit\"\n          size=\"large\"\n          [text]=\"text().verify\"\n          [loading]=\"submitting()\"\n          [loadingLabel]=\"text().verifying\"\n        />\n      } @else {\n        @if (canUsePasskey()) {\n          <gbt-button\n            [attr.id]=\"id + '-mfa-passkey'\"\n            class=\"gbt-auth-panel__submit\"\n            block\n            size=\"large\"\n            iconName=\"key\"\n            [text]=\"text().usePasskey\"\n            [loading]=\"passkeyInFlight()\"\n            [disabled]=\"submitting() && !passkeyInFlight()\"\n            [loadingLabel]=\"text().passkeyValidating\"\n            (clicked)=\"usePasskey()\"\n          />\n        }\n\n        @if (canUsePasskey() && hasTotp()) {\n          <gbt-divider [label]=\"text().or\" />\n        }\n\n        @if (hasTotp()) {\n          <gbt-input\n            [id]=\"id + '-mfa-code'\"\n            inputmode=\"numeric\"\n            [spellcheck]=\"false\"\n            autocapitalize=\"off\"\n            enterkeyhint=\"go\"\n            name=\"code\"\n            autocomplete=\"one-time-code\"\n            [label]=\"text().codeLabel\"\n            [ngModel]=\"code()\"\n            (ngModelChange)=\"code.set($event)\"\n          />\n\n          <gbt-button\n            class=\"gbt-auth-panel__submit\"\n            block\n            type=\"submit\"\n            size=\"large\"\n            [text]=\"text().verify\"\n            [variant]=\"canUsePasskey() ? 'secondary' : 'primary'\"\n            [loading]=\"submitting() && !passkeyInFlight()\"\n            [disabled]=\"passkeyInFlight()\"\n            [loadingLabel]=\"text().verifying\"\n          />\n        }\n      }\n\n      <div class=\"gbt-auth-panel__links\">\n        @if (!passkeyBlocked()) {\n          <gbt-button\n            variant=\"link\"\n            [text]=\"showBackupCode() ? backFromBackupLabel() : text().useBackupCode\"\n            (clicked)=\"toggleBackupCode()\"\n          />\n        }\n        <gbt-button variant=\"link\" [text]=\"text().back\" (clicked)=\"backToCredentials()\" />\n      </div>\n    </form>\n  }\n</gbt-auth-panel>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -22640,6 +22677,7 @@ var AuthRegister = class AuthRegister {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],
@@ -22800,6 +22838,8 @@ var AuthActivate = class AuthActivate {
 	token = input(null, ...ngDevMode ? [{ debugName: "token" }] : /* istanbul ignore next */ []);
 	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
 	minPasswordLength = input(8, ...ngDevMode ? [{ debugName: "minPasswordLength" }] : /* istanbul ignore next */ []);
+	chooseUsername = input(false, ...ngDevMode ? [{ debugName: "chooseUsername" }] : /* istanbul ignore next */ []);
+	usernamePattern = input(USERNAME_PATTERN, ...ngDevMode ? [{ debugName: "usernamePattern" }] : /* istanbul ignore next */ []);
 	activated = output();
 	signIn = output();
 	text = authLabels("activate", DEFAULT_ACTIVATE_LABELS, this.labels);
@@ -22812,11 +22852,18 @@ var AuthActivate = class AuthActivate {
 		computation: () => false
 	});
 	view = linkedSignal(() => this.token() ? "form" : "invalid", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	username = signal("", ...ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []);
 	password = signal("", ...ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []);
 	confirmation = signal("", ...ngDevMode ? [{ debugName: "confirmation" }] : /* istanbul ignore next */ []);
 	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
 	submitting = signal(false, ...ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []);
 	attempted = signal(false, ...ngDevMode ? [{ debugName: "attempted" }] : /* istanbul ignore next */ []);
+	intro = computed(() => this.chooseUsername() ? this.text().introWithUsername : this.text().intro, ...ngDevMode ? [{ debugName: "intro" }] : /* istanbul ignore next */ []);
+	usernameFieldError = computed(() => {
+		if (!this.chooseUsername() || !this.attempted()) return null;
+		const problem = usernameProblem(this.username(), this.usernamePattern());
+		return problem === "empty" ? this.text().usernameEmpty : problem === "invalid" ? this.text().usernameInvalid : null;
+	}, ...ngDevMode ? [{ debugName: "usernameFieldError" }] : /* istanbul ignore next */ []);
 	passwordFieldError = computed(() => {
 		if (!this.attempted()) return null;
 		const min = this.minPasswordLength();
@@ -22825,13 +22872,18 @@ var AuthActivate = class AuthActivate {
 	}, ...ngDevMode ? [{ debugName: "passwordFieldError" }] : /* istanbul ignore next */ []);
 	confirmationFieldError = computed(() => this.attempted() ? this.confirmationProblem() : null, ...ngDevMode ? [{ debugName: "confirmationFieldError" }] : /* istanbul ignore next */ []);
 	constructor() {
-		focusAfterRender(this.host, this.injector, () => this.view() === "form" ? `#${this.id}-password` : "h1");
+		focusAfterRender(this.host, this.injector, () => this.view() === "form" ? `#${this.id}-${this.firstField()}` : "h1");
 	}
 	submit() {
 		const token = this.spent() ? null : this.token();
 		if (this.submitting() || this.view() !== "form" || !token) return;
 		this.error.set("");
 		this.attempted.set(true);
+		const chooseUsername = this.chooseUsername();
+		if (chooseUsername && usernameProblem(this.username(), this.usernamePattern())) {
+			focusNow(this.host, `#${this.id}-username`);
+			return;
+		}
 		if (passwordProblem(this.password(), this.minPasswordLength())) {
 			focusNow(this.host, `#${this.id}-password`);
 			return;
@@ -22841,7 +22893,7 @@ var AuthActivate = class AuthActivate {
 			return;
 		}
 		this.submitting.set(true);
-		this.auth.activate(token, this.password()).subscribe({
+		(chooseUsername ? this.auth.activate(token, this.password(), this.username().trim()) : this.auth.activate(token, this.password())).subscribe({
 			next: () => {
 				this.submitting.set(false);
 				this.spent.set(true);
@@ -22859,6 +22911,10 @@ var AuthActivate = class AuthActivate {
 					return;
 				}
 				const text = this.text();
+				if (chooseUsername && failure.startsWith("username-")) {
+					this.fail(failure === "username-reserved" ? text.usernameReserved : failure === "username-taken" ? text.usernameTaken : text.usernameInvalid);
+					return;
+				}
 				this.fail(failure === "weak-password" ? text.weakPassword(this.minPasswordLength()) : failure === "rate-limited" ? text.tooManyAttempts : text.failed);
 			}
 		});
@@ -22876,9 +22932,12 @@ var AuthActivate = class AuthActivate {
 		this.view.set(view);
 		focusAfterRender(this.host, this.injector, "h1");
 	}
+	firstField() {
+		return this.chooseUsername() ? "username" : "password";
+	}
 	fail(message) {
 		this.error.set(message);
-		focusAfterRender(this.host, this.injector, `#${this.id}-password`);
+		focusAfterRender(this.host, this.injector, `#${this.id}-${this.firstField()}`);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -22915,6 +22974,20 @@ var AuthActivate = class AuthActivate {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			chooseUsername: {
+				classPropertyName: "chooseUsername",
+				publicName: "chooseUsername",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			usernamePattern: {
+				classPropertyName: "usernamePattern",
+				publicName: "usernamePattern",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -22929,7 +23002,7 @@ var AuthActivate = class AuthActivate {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<gbt-auth-panel\n  [heading]=\"view() === 'form' ? text().heading : ''\"\n  [intro]=\"view() === 'form' ? text().intro : ''\"\n>\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @switch (view()) {\n    @case ('form') {\n      <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\" novalidate>\n        @if (error()) {\n          <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n        }\n\n        <gbt-input\n          [id]=\"id + '-password'\"\n          type=\"password\"\n          name=\"password\"\n          autocomplete=\"new-password\"\n          [label]=\"text().password\"\n          [showPasswordLabel]=\"text().showPassword\"\n          [hidePasswordLabel]=\"text().hidePassword\"\n          [hint]=\"passwordHint()\"\n          [errorMessage]=\"passwordFieldError()\"\n          [ngModel]=\"password()\"\n          (ngModelChange)=\"password.set($event)\"\n        />\n\n        <gbt-input\n          [id]=\"id + '-confirmation'\"\n          type=\"password\"\n          name=\"confirmation\"\n          autocomplete=\"new-password\"\n          [label]=\"text().confirmation\"\n          [showPasswordLabel]=\"text().showPassword\"\n          [hidePasswordLabel]=\"text().hidePassword\"\n          [errorMessage]=\"confirmationFieldError()\"\n          [ngModel]=\"confirmation()\"\n          (ngModelChange)=\"confirmation.set($event)\"\n        />\n\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          type=\"submit\"\n          size=\"large\"\n          [text]=\"text().submit\"\n          [loading]=\"submitting()\"\n          [loadingLabel]=\"text().submitting\"\n        />\n      </form>\n\n      @if (signInLink()) {\n        <gbt-auth-footer [text]=\"text().signInPrompt\"\n          ><ng-content select=\"[gbtAuthFooterLink]\"\n        /></gbt-auth-footer>\n      }\n    }\n    @case ('success') {\n      <gbt-empty-state\n        class=\"gbt-auth-panel__status gbt-auth-panel__status--success\"\n        icon=\"circle-check\"\n        [headingLevel]=\"1\"\n        headingFocusable\n        [heading]=\"text().successHeading\"\n        [message]=\"text().successMessage\"\n      >\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          size=\"large\"\n          [text]=\"text().signIn\"\n          (clicked)=\"signIn.emit()\"\n        />\n      </gbt-empty-state>\n    }\n    @case ('invalid') {\n      <gbt-empty-state\n        class=\"gbt-auth-panel__status\"\n        tone=\"error\"\n        icon=\"shield-alert\"\n        [headingLevel]=\"1\"\n        headingFocusable\n        [heading]=\"text().invalidHeading\"\n        [message]=\"text().invalidMessage\"\n      >\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          size=\"large\"\n          [text]=\"text().signIn\"\n          (clicked)=\"signIn.emit()\"\n        />\n      </gbt-empty-state>\n    }\n  }\n</gbt-auth-panel>\n",
+		template: "<gbt-auth-panel\n  [heading]=\"view() === 'form' ? text().heading : ''\"\n  [intro]=\"view() === 'form' ? intro() : ''\"\n>\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @switch (view()) {\n    @case ('form') {\n      <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\" novalidate>\n        @if (error()) {\n          <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n        }\n\n        @if (chooseUsername()) {\n          <gbt-input\n            [id]=\"id + '-username'\"\n            name=\"username\"\n            autocomplete=\"username\"\n            [label]=\"text().username\"\n            [hint]=\"text().usernameHint\"\n            [errorMessage]=\"usernameFieldError()\"\n            [ngModel]=\"username()\"\n            (ngModelChange)=\"username.set($event)\"\n          />\n        }\n\n        <gbt-input\n          [id]=\"id + '-password'\"\n          type=\"password\"\n          name=\"password\"\n          autocomplete=\"new-password\"\n          [label]=\"text().password\"\n          [showPasswordLabel]=\"text().showPassword\"\n          [hidePasswordLabel]=\"text().hidePassword\"\n          [hint]=\"passwordHint()\"\n          [errorMessage]=\"passwordFieldError()\"\n          [ngModel]=\"password()\"\n          (ngModelChange)=\"password.set($event)\"\n        />\n\n        <gbt-input\n          [id]=\"id + '-confirmation'\"\n          type=\"password\"\n          name=\"confirmation\"\n          autocomplete=\"new-password\"\n          [label]=\"text().confirmation\"\n          [showPasswordLabel]=\"text().showPassword\"\n          [hidePasswordLabel]=\"text().hidePassword\"\n          [errorMessage]=\"confirmationFieldError()\"\n          [ngModel]=\"confirmation()\"\n          (ngModelChange)=\"confirmation.set($event)\"\n        />\n\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          type=\"submit\"\n          size=\"large\"\n          [text]=\"text().submit\"\n          [loading]=\"submitting()\"\n          [loadingLabel]=\"text().submitting\"\n        />\n      </form>\n\n      @if (signInLink()) {\n        <gbt-auth-footer [text]=\"text().signInPrompt\"\n          ><ng-content select=\"[gbtAuthFooterLink]\"\n        /></gbt-auth-footer>\n      }\n    }\n    @case ('success') {\n      <gbt-empty-state\n        class=\"gbt-auth-panel__status gbt-auth-panel__status--success\"\n        icon=\"circle-check\"\n        [headingLevel]=\"1\"\n        headingFocusable\n        [heading]=\"text().successHeading\"\n        [message]=\"text().successMessage\"\n      >\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          size=\"large\"\n          [text]=\"text().signIn\"\n          (clicked)=\"signIn.emit()\"\n        />\n      </gbt-empty-state>\n    }\n    @case ('invalid') {\n      <gbt-empty-state\n        class=\"gbt-auth-panel__status\"\n        tone=\"error\"\n        icon=\"shield-alert\"\n        [headingLevel]=\"1\"\n        headingFocusable\n        [heading]=\"text().invalidHeading\"\n        [message]=\"text().invalidMessage\"\n      >\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          size=\"large\"\n          [text]=\"text().signIn\"\n          (clicked)=\"signIn.emit()\"\n        />\n      </gbt-empty-state>\n    }\n  }\n</gbt-auth-panel>\n",
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -23019,6 +23092,7 @@ var AuthActivate = class AuthActivate {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],
@@ -23100,7 +23174,7 @@ i0.ɵɵngDeclareClassMetadata({
 				EmptyState
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<gbt-auth-panel\n  [heading]=\"view() === 'form' ? text().heading : ''\"\n  [intro]=\"view() === 'form' ? text().intro : ''\"\n>\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @switch (view()) {\n    @case ('form') {\n      <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\" novalidate>\n        @if (error()) {\n          <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n        }\n\n        <gbt-input\n          [id]=\"id + '-password'\"\n          type=\"password\"\n          name=\"password\"\n          autocomplete=\"new-password\"\n          [label]=\"text().password\"\n          [showPasswordLabel]=\"text().showPassword\"\n          [hidePasswordLabel]=\"text().hidePassword\"\n          [hint]=\"passwordHint()\"\n          [errorMessage]=\"passwordFieldError()\"\n          [ngModel]=\"password()\"\n          (ngModelChange)=\"password.set($event)\"\n        />\n\n        <gbt-input\n          [id]=\"id + '-confirmation'\"\n          type=\"password\"\n          name=\"confirmation\"\n          autocomplete=\"new-password\"\n          [label]=\"text().confirmation\"\n          [showPasswordLabel]=\"text().showPassword\"\n          [hidePasswordLabel]=\"text().hidePassword\"\n          [errorMessage]=\"confirmationFieldError()\"\n          [ngModel]=\"confirmation()\"\n          (ngModelChange)=\"confirmation.set($event)\"\n        />\n\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          type=\"submit\"\n          size=\"large\"\n          [text]=\"text().submit\"\n          [loading]=\"submitting()\"\n          [loadingLabel]=\"text().submitting\"\n        />\n      </form>\n\n      @if (signInLink()) {\n        <gbt-auth-footer [text]=\"text().signInPrompt\"\n          ><ng-content select=\"[gbtAuthFooterLink]\"\n        /></gbt-auth-footer>\n      }\n    }\n    @case ('success') {\n      <gbt-empty-state\n        class=\"gbt-auth-panel__status gbt-auth-panel__status--success\"\n        icon=\"circle-check\"\n        [headingLevel]=\"1\"\n        headingFocusable\n        [heading]=\"text().successHeading\"\n        [message]=\"text().successMessage\"\n      >\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          size=\"large\"\n          [text]=\"text().signIn\"\n          (clicked)=\"signIn.emit()\"\n        />\n      </gbt-empty-state>\n    }\n    @case ('invalid') {\n      <gbt-empty-state\n        class=\"gbt-auth-panel__status\"\n        tone=\"error\"\n        icon=\"shield-alert\"\n        [headingLevel]=\"1\"\n        headingFocusable\n        [heading]=\"text().invalidHeading\"\n        [message]=\"text().invalidMessage\"\n      >\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          size=\"large\"\n          [text]=\"text().signIn\"\n          (clicked)=\"signIn.emit()\"\n        />\n      </gbt-empty-state>\n    }\n  }\n</gbt-auth-panel>\n"
+			template: "<gbt-auth-panel\n  [heading]=\"view() === 'form' ? text().heading : ''\"\n  [intro]=\"view() === 'form' ? intro() : ''\"\n>\n  <ng-container ngProjectAs=\"[auth-logo]\"><ng-content select=\"[auth-logo]\" /></ng-container>\n\n  @switch (view()) {\n    @case ('form') {\n      <form class=\"gbt-auth-panel__form\" (ngSubmit)=\"submit()\" novalidate>\n        @if (error()) {\n          <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n        }\n\n        @if (chooseUsername()) {\n          <gbt-input\n            [id]=\"id + '-username'\"\n            name=\"username\"\n            autocomplete=\"username\"\n            [label]=\"text().username\"\n            [hint]=\"text().usernameHint\"\n            [errorMessage]=\"usernameFieldError()\"\n            [ngModel]=\"username()\"\n            (ngModelChange)=\"username.set($event)\"\n          />\n        }\n\n        <gbt-input\n          [id]=\"id + '-password'\"\n          type=\"password\"\n          name=\"password\"\n          autocomplete=\"new-password\"\n          [label]=\"text().password\"\n          [showPasswordLabel]=\"text().showPassword\"\n          [hidePasswordLabel]=\"text().hidePassword\"\n          [hint]=\"passwordHint()\"\n          [errorMessage]=\"passwordFieldError()\"\n          [ngModel]=\"password()\"\n          (ngModelChange)=\"password.set($event)\"\n        />\n\n        <gbt-input\n          [id]=\"id + '-confirmation'\"\n          type=\"password\"\n          name=\"confirmation\"\n          autocomplete=\"new-password\"\n          [label]=\"text().confirmation\"\n          [showPasswordLabel]=\"text().showPassword\"\n          [hidePasswordLabel]=\"text().hidePassword\"\n          [errorMessage]=\"confirmationFieldError()\"\n          [ngModel]=\"confirmation()\"\n          (ngModelChange)=\"confirmation.set($event)\"\n        />\n\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          type=\"submit\"\n          size=\"large\"\n          [text]=\"text().submit\"\n          [loading]=\"submitting()\"\n          [loadingLabel]=\"text().submitting\"\n        />\n      </form>\n\n      @if (signInLink()) {\n        <gbt-auth-footer [text]=\"text().signInPrompt\"\n          ><ng-content select=\"[gbtAuthFooterLink]\"\n        /></gbt-auth-footer>\n      }\n    }\n    @case ('success') {\n      <gbt-empty-state\n        class=\"gbt-auth-panel__status gbt-auth-panel__status--success\"\n        icon=\"circle-check\"\n        [headingLevel]=\"1\"\n        headingFocusable\n        [heading]=\"text().successHeading\"\n        [message]=\"text().successMessage\"\n      >\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          size=\"large\"\n          [text]=\"text().signIn\"\n          (clicked)=\"signIn.emit()\"\n        />\n      </gbt-empty-state>\n    }\n    @case ('invalid') {\n      <gbt-empty-state\n        class=\"gbt-auth-panel__status\"\n        tone=\"error\"\n        icon=\"shield-alert\"\n        [headingLevel]=\"1\"\n        headingFocusable\n        [heading]=\"text().invalidHeading\"\n        [message]=\"text().invalidMessage\"\n      >\n        <gbt-button\n          class=\"gbt-auth-panel__submit\"\n          block\n          size=\"large\"\n          [text]=\"text().signIn\"\n          (clicked)=\"signIn.emit()\"\n        />\n      </gbt-empty-state>\n    }\n  }\n</gbt-auth-panel>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -23129,6 +23203,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		chooseUsername: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chooseUsername",
+				required: false
+			}]
+		}],
+		usernamePattern: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "usernamePattern",
+				required: false
+			}]
+		}],
 		activated: [{
 			type: i0.Output,
 			args: ["activated"]
@@ -23370,6 +23460,7 @@ var AuthResetPassword = class AuthResetPassword {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],
@@ -23949,6 +24040,7 @@ var MfaSettings = class MfaSettings {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],
@@ -24537,6 +24629,7 @@ var PasskeySettings = class PasskeySettings {
 					"maxlength",
 					"min",
 					"max",
+					"combobox",
 					"showPasswordLabel",
 					"hidePasswordLabel"
 				],