@masmarino/gabarit 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masmarino/gabarit",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Angular design system — UI components and dataviz for self-hosted applications.",
   "license": "MIT",
   "homepage": "https://github.com/Masmarino/Gabarit",
@@ -23,7 +23,11 @@
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
-    "@angular/forms": "^22.0.0"
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/router": "^22.0.0",
+    "dompurify": "^3.2.0",
+    "marked": "^18.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -41,6 +45,21 @@
     ".": {
       "types": "./types/masmarino-gabarit.d.ts",
       "default": "./fesm2022/masmarino-gabarit.mjs"
+    },
+    "./docs": {
+      "types": "./types/masmarino-gabarit-docs.d.ts",
+      "default": "./fesm2022/masmarino-gabarit-docs.mjs"
+    }
+  },
+  "peerDependenciesMeta": {
+    "@angular/router": {
+      "optional": true
+    },
+    "dompurify": {
+      "optional": true
+    },
+    "marked": {
+      "optional": true
     }
   },
   "module": "fesm2022/masmarino-gabarit.mjs",

package/src/lib/tokens/_utilities.scss

@@ -85,6 +85,12 @@
   }
 }
 
+// Global, so it reaches the links the app projects: each piece of the rail keeps its height, and a rail taller than the
+// window scrolls rather than squeezing its links together.
+.gbt-app-shell__nav > * {
+  flex-shrink: 0;
+}
+
 .gbt-app-shell__link {
   position: relative;
   display: flex;

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

@@ -0,0 +1,385 @@
+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 pages are, both as files and as the reader's routes: `<root>/index.json`, `<root>/<section>/<page>.md`,
+   * and the page `<root>/<section>/<page>`. `/docs` by default.
+   */
+  root: string;
+  /**
+   * The quotes that become callouts: a quote whose first word, in bold, is one of these keys (`> **Note** …`), drawn
+   * in the tone it maps to. Case does not matter.
+   */
+  callouts: Readonly<Record<string, 'note' | 'warning'>>;
+}
+export declare const DEFAULT_DOCS_CONFIG: Readonly<DocsConfig>;
+export declare const DOCS_CONFIG: InjectionToken<DocsConfig>;
+/**
+ * Where the shown page's title goes, for an app that names its pages somewhere of its own (a header, a breadcrumb):
+ * called with the page's title, "not found" or the reader's name while loading. Without it the reader leaves the
+ * title alone.
+ */
+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;
+/**
+ * The documentation, shipped as static files under the configured root. The index and each page are fetched once
+ * and kept, since they only change with a new version of the app. A failure isn't kept, so it gets retried.
+ */
+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 body text of one page. Heading ids follow `gbt-markdown-view`: `user-content-<slug>` on every
+ * h1–h4, and `-2`, `-3`… on a repeated slug in document order.
+ */
+export declare function parseDocsPage(markdown: string): {
+  headings: {
+    id: string;
+    text: string;
+  }[];
+  body: string;
+};
+/**
+ * Search over the whole documentation, in the browser. Nothing is fetched until the first search (or `prepare()`),
+ * then every page once, kept by `DocsService`. Every word of the query must appear in the page; a word in the title
+ * ranks higher than one in a heading, and a heading higher than the 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>;
+}
+/**
+ * The root opens the first page of the index. If the index can't be read or is empty, the reader shows that itself,
+ * inside its own layout.
+ */
+export declare const docsHomeGuard: CanActivateFn;
+/**
+ * The reader's routes, to mount at the configured root: the root (to the first page), `<section>/<page>`, and any
+ * other depth, which gets the reader's own "not found". `page` is the routed component that shows the reader (often
+ * the app's own, wrapping `gbt-docs-page` in its layout).
+ */
+export declare function docsRoutes(page: () => Promise<unknown>): Routes;
+/**
+ * The documentation's left column: the search field, then every section with its pages. Only the current section
+ * starts open. On a narrow layout the sections fold behind a toggle and the search stays.
+ */
+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 long code block or a wide table scrolls sideways, which a keyboard can only do once it takes the focus (WCAG
+ * 2.1.1): each one becomes a named stop in the tab order. A table keeps its own role and gets only the stop and the
+ * name.
+ */
+export declare function makeScrollableBlocksFocusable(container: HTMLElement, names: {
+  codeBlock: string;
+  table: string;
+}): void;
+/**
+ * A task-list checkbox is named by its item's text, so a screen reader says what is done or still to do.
+ */
+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 (`/docs` → `/docs/install/configuration#variables`) go through the router instead of
+   * reloading the app. Off by default: a link in a README is left to the browser.
+   */
+  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();
+  /**
+   * In-content `#anchor` links would resolve against `<base href="/">` and load the home page, so a plain left click
+   * scrolls to the target inside this view and focuses it. Modified and middle clicks are left to the browser.
+   */
+  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;
+};
+/**
+ * One documentation page (`<root>/<section>/<page>`, read from the route): the navigation, the page with its
+ * breadcrumb and neighbours, and on a wide screen the outline beside it. An unknown address gets 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;
+/**
+ * The "On this page" panel beside rendered Markdown. Each entry links to `#user-content-…` on the current URL; the
+ * router does no anchor scrolling, so the click scrolls to the heading and focuses it itself.
+ */
+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 = "1.4.0";
 export declare class Icon {
   private readonly sanitizer;
   private readonly registry;
@@ -1064,6 +1064,18 @@ 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';
+/**
+ * The field as the combobox of a list of suggestions it does not render itself: the caller owns the
+ * listbox, the keys (`(keydown)` on the host) and the 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 +1097,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 +1221,11 @@ export declare class GbtInput implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "combobox": {
+      "alias": "combobox";
+      "required": false;
+      "isSignal": true;
+    };
     "showPasswordLabel": {
       "alias": "showPasswordLabel";
       "required": false;
@@ -5522,7 +5540,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 +5740,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 +5955,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 +6147,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 +6238,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 +6312,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 +6323,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 +6338,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 +6357,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 +6602,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 };