@globalpayments-private/gpds-pattern-web 0.0.0-stage → 0.1.0-pr.7.gdcb74cd

package/dist/collection/collection-manifest.json

@@ -0,0 +1,14 @@
+{
+  "entries": [
+    "components/uds-pattern-login-card/uds-pattern-login-card.js",
+    "components/uds-pattern-login-page/uds-pattern-login-page.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.45.2",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/uds-pattern-login-card/slimmers/identity-memory.slimmer.js

@@ -0,0 +1,63 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UdsSlimmer, MapToComponentField } from "../../../slimmer";
+/**
+ * Persistence of the remembered identifier.
+ *
+ * Isolated because it is the one place the pattern touches storage, and storage
+ * can fail for reasons that have nothing to do with signing in — private
+ * browsing, blocked cookies, a strict enterprise policy. Those failures are
+ * swallowed deliberately: remembering an email address is a convenience, never
+ * a precondition for authenticating.
+ */
+export class IdentityMemorySlimmer extends UdsSlimmer {
+    constructor() {
+        super();
+    }
+    /** The identifier the card should start with. */
+    initialIdentifier() {
+        return this.identifier || this.read() || '';
+    }
+    read() {
+        if (!this.rememberStorageKey) {
+            return '';
+        }
+        try {
+            return globalThis.localStorage?.getItem(this.rememberStorageKey) ?? '';
+        }
+        catch {
+            return '';
+        }
+    }
+    /** Stores or clears the identifier according to the user's choice. */
+    remember(identifier, remember) {
+        if (!this.rememberStorageKey) {
+            return;
+        }
+        try {
+            if (remember) {
+                globalThis.localStorage?.setItem(this.rememberStorageKey, identifier);
+            }
+            else {
+                globalThis.localStorage?.removeItem(this.rememberStorageKey);
+            }
+        }
+        catch {
+            // See the class comment: persistence is best-effort by design.
+        }
+    }
+}
+__decorate([
+    MapToComponentField()
+], IdentityMemorySlimmer.prototype, "rememberStorageKey", void 0);
+__decorate([
+    MapToComponentField()
+], IdentityMemorySlimmer.prototype, "identifier", void 0);

package/dist/collection/components/uds-pattern-login-card/slimmers/login-workflow.slimmer.js

@@ -0,0 +1,357 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UdsSlimmer, MapToComponentField, MapToComponentMethod } from "../../../slimmer";
+import { fail, goTo, intercept, stay, } from "../../../providers/control-strategy";
+import { parseAuthResult } from "../../../providers/parse-auth-result";
+/**
+ * The login state machine.
+ *
+ * This is the pattern's core asset: the translation from "what the identity
+ * platform needs next" into "what the user sees next". Keeping it in one class,
+ * away from markup and input plumbing, is what makes the sequencing reviewable.
+ *
+ * Every decision it makes passes through the host's `controlStrategy` first, so
+ * a consumer can redirect the flow without reimplementing it.
+ */
+export class LoginWorkflowSlimmer extends UdsSlimmer {
+    constructor() {
+        super();
+        /** The identifier being authenticated, carried across steps. */
+        this.pendingIdentifier = '';
+    }
+    // --- Lifecycle ----------------------------------------------------------
+    start() {
+        this.step = this.initialStep;
+        this.pendingIdentifier = this.memory.initialIdentifier();
+        this.resetStepState();
+    }
+    /** Returns the workflow to its first step and clears all collected input. */
+    async restart() {
+        this.methods = [];
+        this.errorText = undefined;
+        this.destination = undefined;
+        this.unlockMinutes = undefined;
+        this.otpCount = undefined;
+        this.resend.stop();
+        this.applyTransition(goTo(this.initialStep), 'reset');
+    }
+    // --- Capabilities -------------------------------------------------------
+    /**
+     * Which affordances to render. The presence of an optional provider method
+     * *is* the configuration, so a route can never be offered for something the
+     * backend cannot service.
+     */
+    get capabilities() {
+        const a = this.auth;
+        return {
+            signUp: typeof a?.signUp === 'function',
+            reset: typeof a?.requestPasswordReset === 'function',
+            username: typeof a?.requestUsernameReminder === 'function',
+            resend: typeof a?.resendOtp === 'function',
+        };
+    }
+    // --- Navigation ---------------------------------------------------------
+    /** In-workflow navigation, triggered by a link in the card. */
+    navigateTo(step) {
+        this.errorText = undefined;
+        this.applyTransition(goTo(step), 'link');
+    }
+    /**
+     * Performs a transition, giving the strategy its say on every step change —
+     * including the ones the workflow initiates for itself.
+     */
+    applyTransition(transition, cause) {
+        if (transition.type === 'stay') {
+            return;
+        }
+        if (transition.type === 'fail') {
+            this.showError(transition.code, transition.message);
+            return;
+        }
+        const decided = intercept(this.controlStrategy?.navigate, { from: this.step, to: transition.step, cause }, () => transition);
+        // A strategy may answer a navigation with a different kind of outcome
+        // entirely — stay put, or surface a failure instead of moving.
+        if (decided.type === 'stay') {
+            return;
+        }
+        if (decided.type === 'fail') {
+            this.showError(decided.code, decided.message);
+            return;
+        }
+        this.setStep(decided.step);
+    }
+    setStep(next) {
+        const previousStep = this.step;
+        this.step = next;
+        this.resetStepState();
+        if (previousStep !== next) {
+            this.udsLoginStepChange.emit({ step: next, previousStep });
+        }
+    }
+    /** Clears per-step input, seeding the identifier field where appropriate. */
+    resetStepState() {
+        const seedsIdentifier = this.step === 'identifier' || this.step === 'forgot-password';
+        this.values = seedsIdentifier && this.pendingIdentifier ? { identifier: this.pendingIdentifier } : {};
+    }
+    /** How many characters the passcode entry should render. */
+    get codeLength() {
+        return Math.max(1, this.otpCount ?? this.otpLength);
+    }
+    // --- Result translation -------------------------------------------------
+    /**
+     * Translates a provider result into the next step. This inversion is what
+     * makes the pattern a pattern: the identity platform reports what it needs,
+     * and the card — not the consumer — decides what that looks like.
+     */
+    applyResult(result) {
+        this.errorText = undefined;
+        const transition = intercept(this.controlStrategy?.transition, { result, from: this.step }, () => this.defaultTransitionFor(result));
+        // Side effects that belong to the result rather than the destination are
+        // staged before the move, so the step renders with its data already in place.
+        this.stageResultState(result);
+        if (result.status === 'mfa_required' && this.methods.length === 1 && transition.type === 'stay') {
+            // A single option is not a choice — skip the picker.
+            void this.selectMfaMethod(this.methods[0].id);
+            return;
+        }
+        this.applyTransition(transition, 'auto');
+        if (result.status === 'success' && transition.type === 'goto' && transition.step === 'success') {
+            intercept(this.controlStrategy?.complete, { session: result.session }, () => this.udsLoginSuccess.emit({ session: result.session }));
+        }
+    }
+    defaultTransitionFor(result) {
+        switch (result.status) {
+            case 'success':
+                return goTo('success');
+            case 'password_required':
+                return goTo('password');
+            case 'mfa_required':
+                // Staying signals "the picker is not needed"; `applyResult` turns that
+                // into an auto-selection when the provider offered exactly one method.
+                return result.methods.length === 1 ? stay() : goTo('mfa-method');
+            case 'otp_required':
+                return goTo('otp');
+            case 'password_reset_required':
+                return goTo('reset-password');
+            case 'reset_link_sent':
+            case 'username_sent':
+                return goTo('check-email');
+            case 'locked':
+                return goTo('locked');
+            case 'error':
+                return fail(result.code, result.message);
+        }
+    }
+    /** Captures the data a result carries, independent of where the flow goes. */
+    stageResultState(result) {
+        switch (result.status) {
+            case 'mfa_required':
+                this.methods = result.methods;
+                return;
+            case 'otp_required':
+                this.otpMethodLabel = result.method?.label;
+                this.otpCount = result.codeLength ?? this.otpLength;
+                this.resend.start(result.resendAfterMs);
+                return;
+            case 'reset_link_sent':
+            case 'username_sent':
+                this.destination = result.destination;
+                return;
+            case 'locked':
+                this.unlockMinutes = result.unlockAfterMs ? Math.ceil(result.unlockAfterMs / 60000) : undefined;
+                return;
+            default:
+                return;
+        }
+    }
+    // --- Failures -----------------------------------------------------------
+    showError(code, message) {
+        const outcome = intercept(this.controlStrategy?.failure, { code, step: this.step, message }, () => ({
+            text: this.copy.errors[code] ?? this.copy.errors.unknown,
+        }));
+        this.errorText = outcome.text;
+        this.udsLoginError.emit({ code, step: this.step, message });
+        if (outcome.transition) {
+            this.applyTransition(outcome.transition, 'auto');
+        }
+    }
+    // --- Provider calls -----------------------------------------------------
+    /**
+     * Wraps a provider call with the in-flight guard and the network catch.
+     *
+     * `busy` is released *before* the result is applied, because applying a
+     * result may legitimately chain another provider call (auto-selecting a lone
+     * MFA method, for example). Holding the guard across `applyResult` would make
+     * that continuation a no-op and strand the user on the previous step. The
+     * chained call re-acquires the guard synchronously, so no un-busy frame is
+     * ever painted.
+     *
+     * Every provider response is validated here, at the one point where data
+     * crosses into the pattern from a consumer's adapter. See `parseAuthResult`.
+     */
+    async run(call, source) {
+        if (this.busy) {
+            return;
+        }
+        this.busy = true;
+        let result;
+        try {
+            result = parseAuthResult(await call(), `auth.${source}`);
+        }
+        catch {
+            this.busy = false;
+            this.showError('network');
+            return;
+        }
+        this.busy = false;
+        this.applyResult(result);
+    }
+    async selectMfaMethod(methodId) {
+        if (!this.auth?.selectMfaMethod) {
+            this.showError('unknown');
+            return;
+        }
+        await this.run(() => this.auth.selectMfaMethod({ methodId }), 'selectMfaMethod');
+    }
+    async resendCode() {
+        if (!this.resend.canResend || !this.auth?.resendOtp) {
+            return;
+        }
+        await this.run(() => this.auth.resendOtp(), 'resendOtp');
+    }
+    // --- Submission ---------------------------------------------------------
+    /**
+     * Submits the current step.
+     *
+     * The strategy wraps the whole provider call, so a consumer can gate it
+     * (CAPTCHA, device check, consent) or answer it outright without the pattern
+     * needing a dedicated prop for each case.
+     */
+    async submit() {
+        if (this.busy) {
+            return;
+        }
+        const step = this.step;
+        const values = { ...this.values };
+        this.rememberIdentifierIfRequested(step);
+        await this.run(() => intercept(this.controlStrategy?.submit, { step, values, identifier: this.pendingIdentifier }, () => this.callProvider(step)), `submit(${step})`);
+    }
+    rememberIdentifierIfRequested(step) {
+        if (step !== 'identifier') {
+            return;
+        }
+        const identifier = this.str('identifier').trim();
+        this.pendingIdentifier = identifier;
+        this.memory.remember(identifier, this.values.rememberIdentifier === true);
+    }
+    callProvider(step) {
+        const auth = this.auth;
+        if (!auth) {
+            return Promise.resolve({ status: 'error', code: 'unknown' });
+        }
+        const unsupported = Promise.resolve({ status: 'error', code: 'unknown' });
+        switch (step) {
+            case 'identifier':
+                return auth.signIn({
+                    identifier: this.pendingIdentifier,
+                    rememberIdentifier: this.values.rememberIdentifier === true,
+                });
+            case 'password': {
+                const password = this.str('password');
+                const identifier = this.pendingIdentifier;
+                return auth.verifyPassword
+                    ? auth.verifyPassword({ identifier, password })
+                    : auth.signIn({ identifier, password });
+            }
+            case 'mfa-method':
+                return auth.selectMfaMethod?.({ methodId: this.str('mfaMethod') }) ?? unsupported;
+            case 'otp':
+                return auth.verifyOtp?.({ code: this.str('code') }) ?? unsupported;
+            case 'forgot-password':
+                return auth.requestPasswordReset?.({ identifier: this.str('identifier').trim() }) ?? unsupported;
+            case 'forgot-username':
+                return auth.requestUsernameReminder?.({ email: this.str('email').trim() }) ?? unsupported;
+            case 'reset-password':
+                return auth.resetPassword?.({ password: this.str('password') }) ?? unsupported;
+            case 'sign-up':
+                return (auth.signUp?.({
+                    firstName: this.str('firstName'),
+                    lastName: this.str('lastName'),
+                    identifier: this.str('identifier').trim(),
+                }) ?? unsupported);
+            default:
+                return unsupported;
+        }
+    }
+    str(name) {
+        return String(this.values[name] ?? '');
+    }
+}
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "resend", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "memory", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "udsLoginStepChange", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "udsLoginError", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "udsLoginSuccess", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "auth", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "controlStrategy", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "initialStep", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "otpLength", void 0);
+__decorate([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "copy", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "step", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "busy", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "errorText", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "methods", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "otpMethodLabel", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "destination", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "unlockMinutes", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "values", void 0);
+__decorate([
+    MapToComponentMethod('componentWillLoad')
+], LoginWorkflowSlimmer.prototype, "start", null);
+__decorate([
+    MapToComponentMethod('reset')
+], LoginWorkflowSlimmer.prototype, "restart", null);

package/dist/collection/components/uds-pattern-login-card/slimmers/renderers/login-card-renderer.js

@@ -0,0 +1,100 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { UdsSlimmer, InjectSlimmer, MapToComponentField } from "../../../../slimmer";
+import { LoginStepRenderer } from "./login-step-renderer";
+/**
+ * Renders the card's body — heading, description, error, form and the terminal
+ * outcome — and delegates the step's own controls to {@link LoginStepRenderer}.
+ *
+ * ## Why a renderer slimmer, and not the `view/` modules this replaces
+ *
+ * This is the same Slimmer mechanism the stateful layer already uses, pointed
+ * at rendering: one class, one responsibility, bound to the component by field
+ * mapping rather than by parameter passing. Vega applies the convention the
+ * same way — `slimmers/renderers/<name>-renderer.tsx`, a class ending in
+ * `Renderer`, exposing `render()` — so a reader moving between the design
+ * system and the pattern library meets one structure, not two.
+ *
+ * The gain over free functions is the binding. A free function has to be handed
+ * everything it needs on each call, so its signature grows with its appetite
+ * and callers thread arguments through layers that never use them — which is
+ * exactly what the old `StepViewModel` parameter had become.
+ * `@MapToComponentField()` reaches the component's `viewModel` and `handlers`
+ * directly, and types them by indexing the component class, so a renderer
+ * cannot drift out of step with what the component actually exposes: rename the
+ * getter and this stops compiling.
+ *
+ * Renderers only read. Every mutation goes back through `handlers`, into the
+ * workflow slimmer, and through the control strategy's checkpoints.
+ *
+ * ## What stays behind in the component
+ *
+ * `render()` itself and both `<slot>` elements remain in `UdsPatternLoginCard`. Stencil
+ * reads slots out of the component's source statically when it compiles, so a
+ * slot that only existed inside a slimmer would never be registered.
+ */
+export class LoginCardRenderer extends UdsSlimmer {
+    constructor() {
+        super();
+        this.steps = new LoginStepRenderer();
+    }
+    render() {
+        const vm = this.viewModel;
+        return [
+            h("h1", { class: "card__heading", id: "uds-pattern-login-heading", tabindex: "-1" }, vm.heading),
+            ...(vm.description ? [h("p", { class: "card__description" }, vm.description)] : []),
+            // `vega-banner` carries the design system's error presentation — icon,
+            // colour, contrast and live-region semantics — so the pattern does not
+            // maintain a parallel version that can drift away from it.
+            ...(vm.errorText
+                ? [h("vega-banner", { class: "alert", type: "error", content: vm.errorText, isOpen: true, showCloseButton: false })]
+                : []),
+            ...(vm.isTerminal ? this.terminalBody(vm) : [this.form()]),
+        ];
+    }
+    form() {
+        return (
+        // `vega-form` rather than a native `<form>`: a `vega-button[type=submit]`
+        // lives in its own shadow root, so it cannot submit a native ancestor
+        // form — the click would silently do nothing. Vega's fields and buttons
+        // coordinate submission and validation through this element instead.
+        //
+        // It is also the validation gate. Its submit handler awaits `valid()`
+        // across every field it controls and only emits `vegaFormSubmit` once
+        // they all pass, so the step below never has to pre-check anything.
+        //
+        // `disableBlurValidation` suppresses validation on blur specifically.
+        // Without it, clicking Submit blurs the field underneath it, an error
+        // message appears, the button moves down and the click lands on whatever
+        // took its place — so the first click is swallowed. Errors still appear
+        // on submit, and still clear as the user types.
+        h("vega-form", { class: "form", useNativeForm: true, disableBlurValidation: true, onVegaFormSubmit: (event) => this.handlers.onSubmit(event) }, h("div", { class: "form__body" }, this.steps.render())));
+    }
+    /** Terminal steps render no form; `check-email` still offers a way back. */
+    terminalBody(vm) {
+        if (vm.step !== 'check-email') {
+            return [];
+        }
+        return [
+            h("p", { class: "prose" }, h("vega-button-link", { class: "link", label: vm.copy.back, eventful: true, onVegaClick: (event) => this.handlers.onNavigate('identifier')(event) })),
+        ];
+    }
+}
+__decorate([
+    InjectSlimmer()
+], LoginCardRenderer.prototype, "steps", void 0);
+__decorate([
+    MapToComponentField()
+], LoginCardRenderer.prototype, "viewModel", void 0);
+__decorate([
+    MapToComponentField()
+], LoginCardRenderer.prototype, "handlers", void 0);

package/dist/collection/components/uds-pattern-login-card/slimmers/renderers/login-field-renderer.js

@@ -0,0 +1,129 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { UdsSlimmer, MapToComponentField } from "../../../../slimmer";
+import { CompleteCodeRule, MatchesFieldRule } from "../../validation/login-validation-rules";
+import { formatLabel } from "../../../../utils/labels";
+/**
+ * Renders the individual form controls, composed from Vega design-system
+ * elements rather than raw HTML.
+ *
+ * ## Why these are Vega elements and not our own markup
+ *
+ * A pattern's job is workflow choreography; the look, the focus ring, the label
+ * association, the error presentation and the contrast ratios are the design
+ * system's job. Hand-rolling an `<input>` here would fork all of that: the DS
+ * could ship an accessibility fix to `vega-input` and this card would never
+ * receive it. Composing the DS element instead means the pattern inherits those
+ * guarantees — and keeps inheriting them.
+ *
+ * It is the same principle that led us to withdraw `::part` (ADR 0003), applied
+ * from the inside: we do not override design-system guardrails, and we do not
+ * quietly re-implement them either.
+ *
+ * Note how much behaviour this removes. `vega-input` carries its own password
+ * reveal affordance, so the card no longer tracks a `revealSecret` flag or
+ * renders an eye icon.
+ */
+export class LoginFieldRenderer extends UdsSlimmer {
+    constructor() {
+        super();
+        /**
+         * Rule instances are built once and kept.
+         *
+         * `validationRules` is a watched Vega prop, so handing it a freshly built
+         * array on every render would re-register the rules each time any unrelated
+         * state moved. These close over `this.viewModel`, which the slimmer re-reads
+         * from the component, so a single stable instance always evaluates against
+         * current state.
+         */
+        this.matchRules = new Map();
+        this.completeCode = [
+            new CompleteCodeRule(() => this.viewModel.otpLength, count => formatLabel(this.viewModel.copy.otpIncomplete, { count })),
+        ];
+    }
+    /** One rule per pairing, memoised so the array identity is stable per field. */
+    matchRuleFor(sibling) {
+        let rule = this.matchRules.get(sibling);
+        if (!rule) {
+            rule = [
+                new MatchesFieldRule(() => this.viewModel.valueOf(sibling), () => this.viewModel.copy.errors.passwords_do_not_match),
+            ];
+            this.matchRules.set(sibling, rule);
+        }
+        return rule;
+    }
+    /** A labelled text input bound to a collected value. */
+    textField(options) {
+        const vm = this.viewModel;
+        const { name, label, type = 'text', autocomplete, mustMatch } = options;
+        return (h("vega-input", { key: name, class: "field", name: name, label: label, type: type, autocomplete: autocomplete, value: vm.valueOf(name), disabled: vm.busy, showClearIcon: false,
+            // `required` and `type="email"` are the whole of this field's
+            // validation: Vega derives the rules, the messages and the error
+            // presentation from them, and `vega-form` will not submit until they
+            // pass. `autoValidation` is what keeps the form's own `isValid` current
+            // between submits, and lets an error clear as the user corrects it.
+            required: true, autoValidation: true, validationRules: mustMatch ? this.matchRuleFor(mustMatch) : undefined, onVegaChange: (event) => this.handlers.onValueChange(name, event.detail) }));
+    }
+    /** The passcode entry for the OTP step. */
+    passcodeField() {
+        const vm = this.viewModel;
+        return (h("vega-input-passcode", { class: "field", name: "code", label: vm.copy.otpFieldLabel, length: vm.otpLength, inputType: "numeric", disabled: vm.busy,
+            // `required` only asks whether the value is non-empty, so a half-typed
+            // code would pass it; `CompleteCodeRule` is what holds the submit until
+            // every box is filled.
+            required: true, autoValidation: true, validationRules: this.completeCode, value: vm.valueOf('code'), onVegaChange: (event) => this.handlers.onValueChange('code', event.detail) }));
+    }
+    /** A checkbox bound to a collected boolean. */
+    checkbox(name, label) {
+        const vm = this.viewModel;
+        return (h("vega-checkbox", { class: "field", name: name, identifier: name, checked: vm.isChecked(name), disabled: vm.busy, onVegaUserChange: (event) => this.handlers.onValueChange(name, event.detail !== false) }, label));
+    }
+    /** The step's primary action. */
+    submit(label) {
+        const vm = this.viewModel;
+        return h("vega-button", { class: "submit", type: "submit", variant: "primary", block: true, label: label, loading: vm.busy });
+    }
+    /**
+     * An inline textual action.
+     *
+     * `eventful` stops `vega-button-link` from navigating on its own so the
+     * workflow — not the browser — decides what the click means.
+     */
+    link(label, onClick) {
+        return (h("vega-button-link", { class: "link", label: label, eventful: true, disabled: this.viewModel.busy, onVegaClick: (event) => onClick(event) }));
+    }
+    /**
+     * The MFA method chooser, as a design-system selection-tile group.
+     *
+     * The group — not the individual tiles — is the component Vega expects to be
+     * composed: it owns the radio `name`, the selected `value`, the change event
+     * and the group's accessible labelling. Rendering loose `vega-selection-tile`
+     * elements inside a plain `role="radiogroup"` div looked correct and even
+     * behaved correctly, but threw inside Vega's runtime when the tiles
+     * unmounted, because each tile reaches for a group ancestor that was not
+     * there.
+     */
+    methodGroup(methods, label) {
+        const vm = this.viewModel;
+        return (h("vega-selection-tile-group", { class: "options", name: "mfaMethod", label: label, selectType: "radio", layout: "vertical", disabled: vm.busy,
+            // No `autoValidation` counterpart on the group — a tile selection has
+            // no intermediate state to validate against, so the submit gate is
+            // the only moment the rule can fire.
+            required: true, value: vm.valueOf('mfaMethod'), onVegaChange: (event) => this.handlers.onValueChange('mfaMethod', event.detail) }, methods.map(method => (h("vega-selection-tile", { key: method.id, class: "option", value: method.id, titleText: method.label, note: method.description, selectType: "radio", checked: vm.valueOf('mfaMethod') === method.id, disabled: method.disabled === true || vm.busy })))));
+    }
+}
+__decorate([
+    MapToComponentField()
+], LoginFieldRenderer.prototype, "viewModel", void 0);
+__decorate([
+    MapToComponentField()
+], LoginFieldRenderer.prototype, "handlers", void 0);