@masmarino/gabarit 1.3.0 → 2.0.0

package/src/lib/tokens/_utilities.scss

@@ -1,3 +1,5 @@
+@use 'a11y';
+
 .gbt-form-error {
   margin: 0 0 0.75rem;
   font-size: 0.875rem;
@@ -85,6 +87,11 @@
   }
 }
 
+// Global to reach the projected links: a rail taller than the window scrolls instead of squeezing them.
+.gbt-app-shell__nav > * {
+  flex-shrink: 0;
+}
+
 .gbt-app-shell__link {
   position: relative;
   display: flex;
@@ -95,6 +102,7 @@
   border-radius: var(--site-border-radius-sm);
   color: var(--text-secondary);
   font-size: 0.875rem;
+  font-weight: 500;
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
@@ -112,16 +120,15 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--gbt-focus-ring, var(--primary));
-    outline-offset: -2px;
+    @include a11y.focus-ring(-2px);
   }
 
   // An app can tone the current page down to a tint with a mark on its edge (--gbt-nav-active-*).
   &[aria-current] {
-    background: var(--gbt-nav-active-bg, var(--primary));
-    color: var(--gbt-nav-active-text, var(--text-on-primary));
+    background: var(--gbt-nav-active-bg, color-mix(in srgb, var(--text-primary) 9%, transparent));
+    color: var(--gbt-nav-active-text, var(--text-primary));
     font-weight: 600;
-    box-shadow: inset 2px 0 0 var(--gbt-nav-active-mark, transparent);
+    box-shadow: inset 2px 0 0 var(--gbt-nav-active-mark, var(--accent));
   }
 }
 
@@ -217,7 +224,7 @@
   gap: 0.5rem;
   width: 100%;
   padding: 8px 10px;
-  border-radius: var(--gbt-radius-menu, 8px);
+  border-radius: var(--gbt-radius-menu, 4px);
   color: var(--text-primary);
   font-size: 14px;
   text-align: left;
@@ -232,8 +239,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--gbt-focus-ring, var(--primary));
-    outline-offset: -2px;
+    @include a11y.focus-ring(-2px);
   }
 }
 

package/src/lib/tokens/index.scss

@@ -1,3 +1,6 @@
 @forward 'palette';
 @forward 'semantic';
+@forward 'themes';
+@forward 'a11y';
+@forward 'base';
 @forward 'utilities';

package/types/masmarino-gabarit-docs.d.ts

@@ -0,0 +1,345 @@
+import * as i0 from "@angular/core";
+import { InjectionToken, Provider, Signal } from "@angular/core";
+import { Observable } from "rxjs";
+import { CanActivateFn, Routes } from "@angular/router";
+import { SafeHtml } from "@angular/platform-browser";
+import { AutocompleteSearchFn, PanelHeadingLevel } from "@masmarino/gabarit";
+interface DocsConfig {
+  /** Where the files (`<root>/index.json`, `<root>/<section>/<page>.md`) and the routes live. `/docs` by default. */
+  root: string;
+  /** A quote opening on one of these words in bold (`> **Note** …`) becomes a callout of that tone. Any case. */
+  callouts: Readonly<Record<string, 'note' | 'warning'>>;
+}
+export declare const DEFAULT_DOCS_CONFIG: Readonly<DocsConfig>;
+export declare const DOCS_CONFIG: InjectionToken<DocsConfig>;
+/**
+ * Gets the shown page's title (or "not found", or the reader's name while loading), for an app that shows titles in
+ * its own header. Optional.
+ */
+export declare const DOCS_TITLE: InjectionToken<(title: string) => void>;
+export declare function provideDocs(config?: Partial<DocsConfig>): Provider;
+/** Every string the documentation reader shows or announces. English by default. */
+interface DocsLabels {
+  /** The reader's name: the navigation's heading, its landmark and the breadcrumb's first step. */
+  documentation: string;
+  showContents: string;
+  hideContents: string;
+  searchLabel: string;
+  searchPlaceholder: string;
+  searching: string;
+  noResults: string;
+  searchFailed: string;
+  results: (count: number) => string;
+  onThisPage: string;
+  breadcrumb: string;
+  neighbours: string;
+  previous: string;
+  next: string;
+  notFoundHeading: string;
+  notFoundMessage: string;
+  toStart: string;
+  loadFailed: string;
+  retry: string;
+  loading: string;
+  /** The accessible names given to a code block and a table, which scroll sideways and so take the focus. */
+  codeBlock: string;
+  table: string;
+}
+export declare const DEFAULT_DOCS_LABELS: Readonly<DocsLabels>;
+export declare const DOCS_LABELS: InjectionToken<Partial<DocsLabels>>;
+/** The reader's strings, over the English defaults; the ones left out keep theirs. */
+export declare function provideDocsLabels(labels: Partial<DocsLabels>): Provider;
+export declare function docsLabels(): Signal<DocsLabels>;
+interface DocsPageEntry {
+  slug: string;
+  title: string;
+  description: string;
+}
+interface DocsSection {
+  slug: string;
+  title: string;
+  pages: DocsPageEntry[];
+}
+/** `<root>/index.json`: the sections and their pages, in reading order. */
+interface DocsIndex {
+  sections: DocsSection[];
+}
+interface DocsLink {
+  sectionTitle: string;
+  title: string;
+  commands: string[];
+}
+/** A page with its neighbours in reading order, across sections. */
+interface DocsLocation {
+  section: DocsSection;
+  page: DocsPageEntry;
+  previous: DocsLink | null;
+  next: DocsLink | null;
+}
+export declare function docsPageCommands(root: string, section: string, page: string): string[];
+/** Every page in reading order, each with its section. */
+export declare function docsReadingOrder(index: DocsIndex): {
+  section: DocsSection;
+  page: DocsPageEntry;
+}[];
+/** Where `<root>` leads: the first page of the first section, or `null` for an empty index. */
+export declare function firstDocsPage(root: string, index: DocsIndex): string[] | null;
+export declare function locateDocsPage(root: string, index: DocsIndex, section: string | null, page: string | null): DocsLocation | null;
+/** Fetches the index and each page once; they only change with a new app version. Failures aren't cached. */
+export declare class DocsService {
+  private readonly http;
+  readonly root: string;
+  private index$;
+  private readonly pages;
+  index(): Observable<DocsIndex>;
+  /** The page's Markdown. A missing file fails with a 404, including when the server answers with the app shell. */
+  page(section: string, page: string): Observable<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DocsService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export declare const isNotFound: (error: unknown) => boolean;
+export declare const DOCS_SEARCH_LIMIT = 8;
+interface DocsSearchHit {
+  sectionTitle: string;
+  pageTitle: string;
+  commands: string[];
+  /** Id of the best matching heading (`user-content-…`), so the result lands on it. */
+  fragment: string | null;
+  heading: string | null;
+  /** Body text around the first match, or the page's description when only the title or headings match. */
+  excerpt: {
+    before: string;
+    match: string;
+    after: string;
+  };
+}
+export declare function searchTokens(query: string): string[];
+/** Title, headings and text of a page. Heading ids must match gbt-markdown-view's (`-2`, `-3` on repeats). */
+export declare function parseDocsPage(markdown: string): {
+  headings: {
+    id: string;
+    text: string;
+  }[];
+  body: string;
+};
+/**
+ * Searches every page in the browser, fetching them on first use. All words must match; title beats heading beats
+ * text.
+ */
+export declare class DocsSearchService {
+  private docs;
+  private documents;
+  /** Starts loading the pages before the first search; the field calls it on focus. */
+  prepare(): void;
+  private load;
+  search(query: string): Promise<DocsSearchHit[]>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DocsSearchService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/** Sends the root to the first page. A broken or empty index is left for the reader to show. */
+export declare const docsHomeGuard: CanActivateFn;
+/** The reader's routes, for the configured root. `page` loads the component that shows it (often the app's). */
+export declare function docsRoutes(page: () => Promise<unknown>): Routes;
+/** The left column: search, then the sections and their pages, only the current one open. */
+export declare class DocsNav {
+  index: import("@angular/core").InputSignal<DocsIndex>;
+  section: import("@angular/core").InputSignal<string | null>;
+  page: import("@angular/core").InputSignal<string | null>;
+  private readonly root;
+  protected readonly labels: import("@angular/core").Signal<import("@masmarino/gabarit/docs").DocsLabels>;
+  protected readonly bodyId: string;
+  protected readonly navOpen: import("@angular/core").WritableSignal<boolean>;
+  private readonly toggled;
+  protected readonly sections: import("@angular/core").Signal<{
+    slug: string;
+    title: string;
+    open: boolean;
+    pages: {
+      slug: string;
+      title: string;
+      commands: string[];
+      current: boolean;
+    }[];
+  }[]>;
+  protected setOpen(slug: string, open: boolean): void;
+  protected close(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DocsNav, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DocsNav, "gbt-docs-nav", never, {
+    "index": {
+      "alias": "index";
+      "required": true;
+      "isSignal": true;
+    };
+    "section": {
+      "alias": "section";
+      "required": false;
+      "isSignal": true;
+    };
+    "page": {
+      "alias": "page";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** One heading of the rendered content, for an "On this page" outline. */
+interface MarkdownOutlineEntry {
+  /** The level as rendered, after `headingOffset`: 2, 3 or 4. */
+  level: number;
+  text: string;
+  id: string;
+}
+/** GitHub-like slug, accents kept. `section` when nothing is left, e.g. a title made only of emoji. */
+export declare function headingSlug(text: string): string;
+export declare function decodeFragment(rawFragment: string): string;
+/** The element a `#fragment` points at: the plain `id`, else the `user-content-` id or `<a name>` the sanitiser made. */
+export declare function findAnchorTarget(root: HTMLElement, rawFragment: string): HTMLElement | null;
+/** A keyboard only scrolls a wide code block or table it has focused (WCAG 2.1.1): each gets a tab stop. */
+export declare function makeScrollableBlocksFocusable(container: HTMLElement, names: {
+  codeBlock: string;
+  table: string;
+}): void;
+/** Names each task-list checkbox after its item, so a screen reader says what's done. */
+export declare function nameTaskCheckboxes(container: HTMLElement): void;
+/**
+ * Markdown rendered to sanitised HTML, with the reading styles of the design system: headings, lists, code, tables,
+ * quotes. Every heading gets a stable id, and the h2–h4 outline is emitted after each render.
+ */
+export declare class MarkdownView {
+  content: import("@angular/core").InputSignal<string>;
+  /** Levels added to every heading (up to h6), so a `# Title` under the page's own headings keeps the outline. */
+  headingOffset: import("@angular/core").InputSignal<number>;
+  /** Links under this prefix (say `/docs`) go through the router instead of reloading the app. Off by default. */
+  routedLinkPrefix: import("@angular/core").InputSignal<string | null>;
+  /** The h2–h4 headings, emitted after each render once their ids are in the DOM. */
+  outline: import("@angular/core").OutputEmitterRef<MarkdownOutlineEntry[]>;
+  private readonly sanitizer;
+  private readonly router;
+  private readonly labels;
+  private readonly container;
+  constructor();
+  /**
+   * A bare #anchor resolves against <base href="/"> and would load the home page, so a plain click scrolls here
+   * instead. Modified and middle clicks are the browser's.
+   */
+  protected onClick(event: MouseEvent): void;
+  /** The `href` of a clicked in-content link under `routedLinkPrefix`, or `null` when the browser should follow it. */
+  private routedHref;
+  protected readonly renderedHtml: import("@angular/core").Signal<SafeHtml>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownView, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<MarkdownView, "gbt-markdown-view", never, {
+    "content": {
+      "alias": "content";
+      "required": true;
+      "isSignal": true;
+    };
+    "headingOffset": {
+      "alias": "headingOffset";
+      "required": false;
+      "isSignal": true;
+    };
+    "routedLinkPrefix": {
+      "alias": "routedLinkPrefix";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "outline": "outline";
+  }, never, never, true, never>;
+}
+type DocsView = {
+  kind: 'loading';
+} | {
+  kind: 'failed';
+} | {
+  kind: 'not-found';
+  firstPage: string[] | null;
+} | {
+  kind: 'page';
+  location: DocsLocation;
+  content: string;
+};
+/** The routed page with its nav, breadcrumb, neighbours and outline, or a "not found" in the same frame. */
+export declare class DocsPage {
+  private readonly docs;
+  private readonly route;
+  private readonly setTitle;
+  private readonly callouts;
+  private readonly host;
+  protected readonly labels: import("@angular/core").Signal<import("@masmarino/gabarit/docs").DocsLabels>;
+  protected readonly root: string;
+  protected readonly skeletonRows: string[];
+  private readonly reload$;
+  protected readonly index: import("@angular/core").WritableSignal<DocsIndex | null>;
+  private readonly params;
+  protected readonly sectionSlug: import("@angular/core").Signal<string | null>;
+  protected readonly pageSlug: import("@angular/core").Signal<string | null>;
+  protected readonly view: import("@angular/core").Signal<DocsView>;
+  protected readonly page: import("@angular/core").Signal<{
+    kind: "page";
+    location: DocsLocation;
+    content: string;
+  } | null>;
+  protected readonly notFound: import("@angular/core").Signal<{
+    kind: "not-found";
+    firstPage: string[] | null;
+  } | null>;
+  protected readonly outline: import("@angular/core").WritableSignal<MarkdownOutlineEntry[]>;
+  protected readonly showOutline: import("@angular/core").Signal<boolean>;
+  private wanted;
+  private renderedKey;
+  constructor();
+  private load;
+  protected retry(): void;
+  protected sectionLink(location: DocsLocation): string[];
+  /** After each render: the outline, the callouts, then the pending navigation. */
+  protected onRendered(entries: MarkdownOutlineEntry[]): void;
+  private content;
+  /** Scrolls to the `#fragment` (an outline `user-content-…` id or the bare slug from a link), or to the top of a new page. */
+  private settle;
+  private focus;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DocsPage, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DocsPage, "gbt-docs-page", never, {}, {}, never, never, true, never>;
+}
+/** The search field above the documentation's navigation. Pages load on first focus, since most visits never search. */
+export declare class DocsSearch {
+  /** Emitted once a result is opened, so a folded navigation can close. */
+  opened: import("@angular/core").OutputEmitterRef<DocsSearchHit>;
+  private readonly searchService;
+  private readonly router;
+  private readonly field;
+  protected readonly labels: import("@angular/core").Signal<import("@masmarino/gabarit/docs").DocsLabels>;
+  protected readonly search: AutocompleteSearchFn<DocsSearchHit>;
+  protected readonly label: (hit: DocsSearchHit) => string;
+  protected readonly announce: (count: number) => string;
+  protected prepare(): void;
+  protected open(hit: DocsSearchHit): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DocsSearch, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DocsSearch, "gbt-docs-search", never, {}, {
+    "opened": "opened";
+  }, never, never, true, never>;
+}
+/** An outline is worth a panel from two headings on: one heading is no table of contents. */
+export declare function hasOutline(entries: readonly MarkdownOutlineEntry[]): boolean;
+/** "On this page" for rendered Markdown. The router doesn't scroll to anchors, so a click does it here. */
+export declare class MarkdownOutline {
+  entries: import("@angular/core").InputSignal<MarkdownOutlineEntry[]>;
+  headingLevel: import("@angular/core").InputSignal<PanelHeadingLevel>;
+  protected readonly labels: import("@angular/core").Signal<import("@masmarino/gabarit/docs").DocsLabels>;
+  protected readonly here: readonly string[];
+  protected goTo(id: string): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownOutline, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<MarkdownOutline, "gbt-markdown-outline", never, {
+    "entries": {
+      "alias": "entries";
+      "required": true;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type { DocsConfig, DocsIndex, DocsLabels, DocsLink, DocsLocation, DocsPageEntry, DocsSearchHit, DocsSection, MarkdownOutlineEntry };

package/types/masmarino-gabarit.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import { ElementRef, InjectionToken, Injector, OnDestroy, PipeTransform, Provider, Signal, TemplateRef, WritableSignal } from "@angular/core";
 import { ControlValueAccessor, FormControl } from "@angular/forms";
 import { Observable } from "rxjs";
-export declare const GABARIT_VERSION = "1.3.0";
+export declare const GABARIT_VERSION = "2.0.0";
 export declare class Icon {
   private readonly sanitizer;
   private readonly registry;
@@ -1064,6 +1064,15 @@ type InputSize = 'md' | 'sm';
 type InputInputmode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
 type InputAutocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
 type InputEnterkeyhint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+/** Makes the field the combobox of a suggestion list the caller renders, with its keys and active option. */
+interface InputCombobox {
+  /** Whether the listbox is shown. */
+  expanded: boolean;
+  /** The id of the listbox. */
+  controls: string;
+  /** The id of the highlighted option, `null` when none is. */
+  activeDescendant: string | null;
+}
 export declare class GbtInput implements ControlValueAccessor {
   id: import("@angular/core").InputSignal<string>;
   label: import("@angular/core").InputSignal<string>;
@@ -1085,6 +1094,7 @@ export declare class GbtInput implements ControlValueAccessor {
   maxlength: import("@angular/core").InputSignal<number | null>;
   min: import("@angular/core").InputSignal<string | number | null>;
   max: import("@angular/core").InputSignal<string | number | null>;
+  combobox: import("@angular/core").InputSignal<InputCombobox | null>;
   showPasswordLabel: import("@angular/core").InputSignal<string>;
   hidePasswordLabel: import("@angular/core").InputSignal<string>;
   committed: import("@angular/core").OutputEmitterRef<string>;
@@ -1208,6 +1218,11 @@ export declare class GbtInput implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "combobox": {
+      "alias": "combobox";
+      "required": false;
+      "isSignal": true;
+    };
     "showPasswordLabel": {
       "alias": "showPasswordLabel";
       "required": false;
@@ -4823,10 +4838,7 @@ export declare class ListCard {
   emptyMessage: import("@angular/core").InputSignal<string>;
   emptyIllustration: import("@angular/core").InputSignal<EmptyStateIllustration | null>;
   emptyIcon: import("@angular/core").InputSignal<string | null>;
-  /**
-   * What sits above the box: the projected `[list-card-header]` (ready), its placeholder (loading,
-   * unless `skeletonHeader` is off), or nothing (failed, empty).
-   */
+  /** The projected header when ready, its placeholder while loading (unless skeletonHeader is off), else nothing. */
   protected readonly header: import("@angular/core").Signal<"slot" | "skeleton" | null>;
   protected readonly placeholders: import("@angular/core").Signal<string[]>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ListCard, never>;
@@ -5522,7 +5534,8 @@ interface AuthPort {
   authConfig(): Observable<AuthConfig>;
   login(username: string, password: string): Observable<LoginResponse>;
   register(username: string, email: string, password: string): Observable<LoginResponse>;
-  activate(token: string, password: string): Observable<void>;
+  /** `username` is passed only when the page lets the invitee choose it (`chooseUsername`). */
+  activate(token: string, password: string, username?: string): Observable<void>;
   resetPassword(token: string, password: string): Observable<void>;
   verifyMfa(mfaToken: string, proof: MfaProof): Observable<void>;
   startPasskeyChallenge(mfaToken: string): Observable<PasskeyChallenge>;
@@ -5721,6 +5734,14 @@ export declare const DEFAULT_REGISTER_LABELS: Readonly<RegisterLabels>;
 interface ActivateLabels extends CommonFailureLabels {
   heading: string;
   intro: string;
+  /** The intro when the invitee chooses their username too (`chooseUsername`). */
+  introWithUsername: string;
+  username: string;
+  usernameHint: string;
+  usernameEmpty: string;
+  usernameInvalid: string;
+  usernameReserved: string;
+  usernameTaken: string;
   password: string;
   passwordHint: (minLength: number) => string;
   confirmation: string;
@@ -5928,7 +5949,7 @@ type PasswordGatedFailure = 'wrong-password' | 'rate-limited' | 'other';
 export declare function classifyPasswordFailure(err: unknown): PasswordGatedFailure;
 export declare function isTooManyPasskeys(err: unknown): boolean;
 type RegisterFailure = 'disabled' | 'invalid' | 'username-invalid' | 'email-invalid' | 'password-weak' | 'username-reserved' | 'username-taken' | 'email-taken' | 'rate-limited' | 'other';
-type ActivateFailure = 'invalid-link' | 'weak-password' | 'rate-limited' | 'other';
+type ActivateFailure = 'invalid-link' | 'weak-password' | 'username-invalid' | 'username-reserved' | 'username-taken' | 'rate-limited' | 'other';
 export declare function classifyRegisterFailure(err: unknown): RegisterFailure;
 export declare function classifyActivateFailure(err: unknown): ActivateFailure;
 export declare const MIN_PASSWORD_LENGTH = 8;
@@ -6120,6 +6141,8 @@ export declare class MfaEnrollment {
   choosePasskey(): void;
   createPasskey(): void;
   protected back(): void;
+  /** A server that issues no backup codes with this factor has nothing to show: the enrolment ends there. */
+  private enrolled;
   finish(): void;
   private goTo;
   private passkeyFailed;
@@ -6209,7 +6232,7 @@ export declare class AuthLogin {
     };
   }, {
     "loggedIn": "loggedIn";
-  }, ["registerLink"], ["[auth-logo]", "[gbtAuthFooterLink]"], true, never>;
+  }, ["registerLink"], ["[auth-logo]", "[auth-notice]", "[gbtAuthFooterLink]"], true, never>;
 }
 type Registration = 'loading' | 'open' | 'closed' | 'created';
 export declare class AuthRegister {
@@ -6283,6 +6306,9 @@ export declare class AuthActivate {
   token: import("@angular/core").InputSignal<string | null>;
   labels: import("@angular/core").InputSignal<Partial<ActivateLabels>>;
   minPasswordLength: import("@angular/core").InputSignal<number>;
+  /** The invitee chooses their username along with the password, for servers that let them. */
+  chooseUsername: import("@angular/core").InputSignal<boolean>;
+  usernamePattern: import("@angular/core").InputSignal<RegExp>;
   activated: import("@angular/core").OutputEmitterRef<void>;
   signIn: import("@angular/core").OutputEmitterRef<void>;
   protected readonly text: import("@angular/core").Signal<Readonly<ActivateLabels>>;
@@ -6291,11 +6317,14 @@ export declare class AuthActivate {
   protected readonly passwordHint: import("@angular/core").Signal<string>;
   private readonly spent;
   view: import("@angular/core").WritableSignal<View$3>;
+  protected username: import("@angular/core").WritableSignal<string>;
   protected password: import("@angular/core").WritableSignal<string>;
   protected confirmation: import("@angular/core").WritableSignal<string>;
   error: import("@angular/core").WritableSignal<string>;
   submitting: import("@angular/core").WritableSignal<boolean>;
   private attempted;
+  protected intro: import("@angular/core").Signal<string>;
+  protected usernameFieldError: import("@angular/core").Signal<string | null>;
   protected passwordFieldError: import("@angular/core").Signal<string | null>;
   protected confirmationFieldError: import("@angular/core").Signal<string | null>;
   constructor();
@@ -6303,6 +6332,7 @@ export declare class AuthActivate {
   private confirmationProblem;
   private clearPasswords;
   private show;
+  private firstField;
   private fail;
   static ɵfac: i0.ɵɵFactoryDeclaration<AuthActivate, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<AuthActivate, "gbt-auth-activate", never, {
@@ -6321,6 +6351,16 @@ export declare class AuthActivate {
       "required": false;
       "isSignal": true;
     };
+    "chooseUsername": {
+      "alias": "chooseUsername";
+      "required": false;
+      "isSignal": true;
+    };
+    "usernamePattern": {
+      "alias": "usernamePattern";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "activated": "activated";
     "signIn": "signIn";
@@ -6556,4 +6596,4 @@ export declare class PasskeySettings {
     "sessionRevoked": "sessionRevoked";
   }, never, never, true, never>;
 }
-export type { AccordionMode, ActivateFailure, ActivateLabels, AlertAppearance, AlertIconAlign, AlertLive, AlertSize, AlertVariant, Arc, AuthConfig, AuthLabels, AuthPort, AuthPortError, AutocompleteSearchFn, AvatarGroupItem, AvatarSize, AxisSpec, BackupCodesLabels, BackupCodesResult, BadgeAppearance, BadgeSize, BadgeVariant, BandScale, ButtonHaspopup, ButtonSize, ButtonVariant, CalendarDay, CardTone, CardVariant, ChartBox, ChartInterval, ChartMargin, ChartPoint, ChartReader, ChartSeries, CheckboxGroupOption, CheckboxGroupSection, ConfirmDangerModalTone, CopyButtonFeedback, CopyOutcome, CopyStatus, CopyValue, DateInput, DateRangeValue, DescriptionListEntry, DescriptionListLayout, DescriptionListResponsive, DescriptionListValueAlign, DimensionRow, DisclosureAppearance, DisclosureHeadingLevel, DividerOrientation, DrawerEdge, EmailProblem, EmptyStateHeadingLevel, EmptyStateIllustration, EmptyStateSize, EmptyStateTone, EnrolledFactor, FlatTreeNode, FormatBytesOptions, FormatDurationOptions, FormatRelativeTimeOptions, FunnelStep, GbtBytesPipeOptions, GbtDateTimePipeOptions, GbtPipeLocale, GbtRelativeTimePipeOptions, GbtToastKind, GbtToastOptions, IconMarkerAppearance, IconMarkerShape, IconMarkerSize, IconMarkerTone, JobGraphJob, JobGraphStage, JobGraphStatus, JobStatusValue, LegendEntry, LinearAxisSpec, ListCardState, ListRowTone, ListToolbarAccessors, ListToolbarDirection, ListToolbarSortOption, ListToolbarSortValue, ListToolbarState, ListToolbarStateConfig, LoginLabels, LoginResponse, MenuItemVariant, MfaEnrollmentLabels, MfaFailure, MfaFormOwner, MfaPort, MfaProof, MfaSettingsLabels, MfaSetupResult, MfaStatus, NavTabsOrientation, NotificationDotVariant, PageHeaderLevel, PageLayoutAsidePosition, PageLayoutAsideWidth, PageLayoutWidth, PanelHeadingLevel, Passkey, PasskeyChallenge, PasskeyFailure, PasskeyNameProblem, PasskeySettingsLabels, PasswordGatedFailure, PasswordProblem, PieSlice, Point, PointValue, PopoverAlign, RadioOption, RegisterFailure, RegisterLabels, ResetPasswordLabels, SaveStatusState, Scale, SearchBarCollapsible, SearchResultCategory, SegmentedControlOption, SegmentedControlSize, SelectOption, SkeletonListLeading, SkeletonVariant, SpinnerSize, StatGridColumns, StatTileTrend, StatTileTrendTone, StepperOrientation, StepperStatus, StepperStep, TableColumn, TimeTicks, TimeUnit, ToastItem, ToastVariant, ToasterPosition, TooltipPoint, TooltipPosition, TooltipRow, TotpEnrollment, TotpQrLabels, TotpQrRenderOptions, TotpQrRenderer, TreeNode, UserChipSize, UsernameProblem, WeekStartsOn };
+export type { AccordionMode, ActivateFailure, ActivateLabels, AlertAppearance, AlertIconAlign, AlertLive, AlertSize, AlertVariant, Arc, AuthConfig, AuthLabels, AuthPort, AuthPortError, AutocompleteSearchFn, AvatarGroupItem, AvatarSize, AxisSpec, BackupCodesLabels, BackupCodesResult, BadgeAppearance, BadgeSize, BadgeVariant, BandScale, ButtonHaspopup, ButtonSize, ButtonVariant, CalendarDay, CardTone, CardVariant, ChartBox, ChartInterval, ChartMargin, ChartPoint, ChartReader, ChartSeries, CheckboxGroupOption, CheckboxGroupSection, ConfirmDangerModalTone, CopyButtonFeedback, CopyOutcome, CopyStatus, CopyValue, DateInput, DateRangeValue, DescriptionListEntry, DescriptionListLayout, DescriptionListResponsive, DescriptionListValueAlign, DimensionRow, DisclosureAppearance, DisclosureHeadingLevel, DividerOrientation, DrawerEdge, EmailProblem, EmptyStateHeadingLevel, EmptyStateIllustration, EmptyStateSize, EmptyStateTone, EnrolledFactor, FlatTreeNode, FormatBytesOptions, FormatDurationOptions, FormatRelativeTimeOptions, FunnelStep, GbtBytesPipeOptions, GbtDateTimePipeOptions, GbtPipeLocale, GbtRelativeTimePipeOptions, GbtToastKind, GbtToastOptions, IconMarkerAppearance, IconMarkerShape, IconMarkerSize, IconMarkerTone, InputCombobox, JobGraphJob, JobGraphStage, JobGraphStatus, JobStatusValue, LegendEntry, LinearAxisSpec, ListCardState, ListRowTone, ListToolbarAccessors, ListToolbarDirection, ListToolbarSortOption, ListToolbarSortValue, ListToolbarState, ListToolbarStateConfig, LoginLabels, LoginResponse, MenuItemVariant, MfaEnrollmentLabels, MfaFailure, MfaFormOwner, MfaPort, MfaProof, MfaSettingsLabels, MfaSetupResult, MfaStatus, NavTabsOrientation, NotificationDotVariant, PageHeaderLevel, PageLayoutAsidePosition, PageLayoutAsideWidth, PageLayoutWidth, PanelHeadingLevel, Passkey, PasskeyChallenge, PasskeyFailure, PasskeyNameProblem, PasskeySettingsLabels, PasswordGatedFailure, PasswordProblem, PieSlice, Point, PointValue, PopoverAlign, RadioOption, RegisterFailure, RegisterLabels, ResetPasswordLabels, SaveStatusState, Scale, SearchBarCollapsible, SearchResultCategory, SegmentedControlOption, SegmentedControlSize, SelectOption, SkeletonListLeading, SkeletonVariant, SpinnerSize, StatGridColumns, StatTileTrend, StatTileTrendTone, StepperOrientation, StepperStatus, StepperStep, TableColumn, TimeTicks, TimeUnit, ToastItem, ToastVariant, ToasterPosition, TooltipPoint, TooltipPosition, TooltipRow, TotpEnrollment, TotpQrLabels, TotpQrRenderOptions, TotpQrRenderer, TreeNode, UserChipSize, UsernameProblem, WeekStartsOn };