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

package/dist/cjs/uds-pattern-login-card_2.cjs.entry.js

@@ -0,0 +1,1662 @@
+'use strict';
+
+var index = require('./index-Dzm6P89U.js');
+var controlStrategy = require('./control-strategy-DhhYTbse.js');
+
+/**
+ * Base class for every slimmer.
+ *
+ * A slimmer owns exactly one responsibility lifted out of a component class —
+ * the workflow machine, OTP input behaviour, a throttle timer. It reaches back
+ * into its host component only through the two mapping decorators, which keeps
+ * the coupling declarative and greppable.
+ */
+class UdsSlimmer {
+}
+
+/** Narrows the `Object` a decorator is handed to something indexable. */
+const asBag = (target) => target;
+
+/**
+ * Internal markers used to attach slimmer wiring to component and slimmer
+ * instances without colliding with any real field name.
+ */
+/** On a slimmer prototype: the list of component methods it hooks into. */
+const SlimmerMappedMethod = Symbol('SlimmerMappedMethod');
+/** On a slimmer instance: the component that injected it. */
+const SlimmerConsumedBy = Symbol('SlimmerConsumedBy');
+/** On a component instance: the slimmers it has injected, keyed by field name. */
+const ConsumerSlimmers = Symbol('ConsumerSlimmers');
+
+/**
+ * Marks a component field as a slimmer injection point.
+ *
+ * ```ts
+ * class UdsPatternLoginCard {
+ *   @InjectSlimmer() private workflow = new WorkflowSlimmer();
+ * }
+ * ```
+ *
+ * The decorator replaces the field with an accessor pair, so assigning the
+ * instance in the field initialiser is what performs the injection: the slimmer
+ * is handed a back-reference to the component and any `@MapToComponentMethod`
+ * hooks it declares are attached.
+ *
+ * Note this relies on field initialisers compiling to assignment rather than
+ * `Object.defineProperty` — i.e. `useDefineForClassFields` must be off, which is
+ * the default below an ES2022 target. With define semantics the initialiser
+ * would shadow this accessor on the instance and nothing would be wired up.
+ */
+function InjectSlimmer() {
+    return function (componentPrototype, propertyKey) {
+        Object.defineProperty(componentPrototype, propertyKey, {
+            set: createSlimmerFieldSetter(propertyKey),
+            get: createSlimmerFieldGetter(propertyKey),
+            configurable: true,
+        });
+    };
+}
+function createSlimmerFieldSetter(fieldName) {
+    return function (slimmer) {
+        if (!this[ConsumerSlimmers]) {
+            this[ConsumerSlimmers] = new Map();
+        }
+        this[ConsumerSlimmers].set(fieldName, slimmer);
+        asBag(slimmer)[SlimmerConsumedBy] = this;
+        registerSlimmerMethods(slimmer, this);
+    };
+}
+function createSlimmerFieldGetter(fieldName) {
+    return function () {
+        return this[ConsumerSlimmers]?.get(fieldName);
+    };
+}
+/** Attaches every `@MapToComponentMethod` hook the slimmer declares. */
+function registerSlimmerMethods(slimmer, component) {
+    const slimmerPrototype = asBag(Object.getPrototypeOf(slimmer));
+    const entries = slimmerPrototype[SlimmerMappedMethod];
+    if (!entries) {
+        return;
+    }
+    for (const entry of entries) {
+        component[entry.componentMethodName] = chainSlimmerMethod(component, slimmer, component[entry.componentMethodName], entry);
+    }
+}
+/**
+ * Appends the slimmer method to the component method, preserving any hook that
+ * an earlier slimmer already attached so several slimmers can share a target.
+ *
+ * When the component method returns a promise the slimmer method is chained
+ * onto it, so an async `componentWillLoad` still completes in order.
+ */
+function chainSlimmerMethod(component, slimmer, originalMethod, mapEntry) {
+    return function (...args) {
+        const result = originalMethod?.apply(component, args);
+        const slimmerMethod = asBag(slimmer)[mapEntry.slimmerMethodName];
+        if (result && typeof result.then === 'function') {
+            return result.then(() => slimmerMethod.apply(slimmer, args));
+        }
+        return slimmerMethod.apply(slimmer, args);
+    };
+}
+
+/** Console wrapper carrying a GP prefix, so framework diagnostics are traceable. */
+class LogUtility {
+    static log(...message) {
+        console.log(`%c${this.PREFIX}`, this.PREFIX_STYLE, ...message);
+    }
+    static warn(...message) {
+        console.warn(`%c${this.PREFIX}`, this.PREFIX_STYLE, ...message);
+    }
+    static error(...message) {
+        console.error(`%c${this.PREFIX}`, this.PREFIX_STYLE, ...message);
+    }
+}
+LogUtility.PREFIX = '[GP]';
+LogUtility.PREFIX_STYLE = 'font-weight: bold';
+
+/**
+ * Binds a slimmer field to a field on the component that injected it:
+ *
+ * - reading the slimmer field returns the component's current value;
+ * - writing it updates the component (only when `writable` is set).
+ *
+ * The slimmer therefore holds no copy of the state. That matters inside a
+ * Stencil component, where the component's `@State()` fields are the values the
+ * renderer actually observes — a slimmer-local duplicate would drift and would
+ * not trigger re-renders.
+ *
+ * The slimmer field name is used as the component field name unless
+ * `componentFieldName` says otherwise.
+ */
+function MapToComponentField(options) {
+    return function (slimmerPrototype, propertyKey) {
+        Object.defineProperty(slimmerPrototype, propertyKey, {
+            get: createMappedFieldGetter(propertyKey, options),
+            set: createMappedFieldSetter(propertyKey, options),
+            configurable: true,
+        });
+    };
+}
+function createMappedFieldSetter(slimmerFieldName, options = {}) {
+    return function (value) {
+        if (!options.writable) {
+            LogUtility.error(`${String(slimmerFieldName)} is not writable`);
+            return;
+        }
+        const component = this[SlimmerConsumedBy];
+        component[options.componentFieldName ?? slimmerFieldName] = value;
+    };
+}
+function createMappedFieldGetter(slimmerFieldName, options = {}) {
+    return function () {
+        const component = this[SlimmerConsumedBy];
+        return component[options.componentFieldName ?? slimmerFieldName];
+    };
+}
+
+/**
+ * Hooks a slimmer method onto a component method of the given name.
+ *
+ * When the component method runs, the slimmer method runs after it and its
+ * return value becomes the result. The hook is one-way: calling the slimmer
+ * method directly does not invoke the component's.
+ *
+ * Typical targets are Stencil lifecycle methods (`componentWillLoad`,
+ * `disconnectedCallback`), `@Watch` handlers, and `@Method()` members.
+ */
+function MapToComponentMethod(componentMethodName) {
+    return function (slimmerPrototype, propertyKey) {
+        const bag = asBag(slimmerPrototype);
+        initMappedMethodList(bag);
+        bag[SlimmerMappedMethod].push({
+            componentMethodName,
+            slimmerMethodName: String(propertyKey),
+        });
+    };
+}
+/**
+ * Gives each prototype in an inheritance chain its own copy of the list, seeded
+ * from the parent's. Without the `hasOwnProperty` check a subclass would push
+ * onto the parent's array and every sibling would inherit its hooks.
+ */
+function initMappedMethodList(slimmerPrototype) {
+    if (!Object.prototype.hasOwnProperty.call(slimmerPrototype, SlimmerMappedMethod)) {
+        const inherited = slimmerPrototype[SlimmerMappedMethod];
+        slimmerPrototype[SlimmerMappedMethod] = inherited ? [...inherited] : [];
+    }
+}
+
+/**
+ * Runtime validation for the one boundary where data genuinely enters the
+ * pattern from outside: a provider's `UdsAuthResult`.
+ *
+ * ## Why validate here and nowhere else
+ *
+ * `UdsAuthResult` is a *DTO* in the strict sense — it crosses a trust boundary.
+ * An adapter is written by a consuming team, usually by mapping a vendor SDK's
+ * response, and TypeScript's guarantees stop at the seam: a compiled adapter
+ * can still hand back `{ status: 'otp_requred' }` from a mistyped mapping, or
+ * `{ status: 'mfa_required' }` with no `methods` because the vendor returned
+ * `null`.
+ *
+ * Unvalidated, those land as *silence*. The workflow's `switch` falls through,
+ * the card stays on its current step, no error is raised, and the user sees a
+ * button that does nothing. Debugging that means reading our source. Validated,
+ * the same mistake names itself at the point it was made.
+ *
+ * The view model deliberately has no equivalent: it never crosses a boundary,
+ * only moves between layers that are compiled together, so checking it at
+ * runtime would buy nothing the compiler has not already proven.
+ *
+ * ## Failure policy
+ *
+ * A malformed result is converted into an `unknown` error — the user always
+ * sees approved copy — and reported on the console with the offending value.
+ * The pattern never throws into a consumer's promise chain for this.
+ */
+const RESULT_STATUSES = [
+    'success',
+    'password_required',
+    'mfa_required',
+    'otp_required',
+    'password_reset_required',
+    'reset_link_sent',
+    'username_sent',
+    'locked',
+    'error',
+];
+const ERROR_CODES = [
+    'invalid_credentials',
+    'invalid_identifier',
+    'invalid_code',
+    'code_expired',
+    'account_locked',
+    'account_not_found',
+    'account_exists',
+    'password_policy',
+    'passwords_do_not_match',
+    'rate_limited',
+    'network',
+    'unknown',
+];
+/** Thrown only internally; never surfaces to a consumer. */
+class InvalidAuthResultError extends Error {
+}
+/**
+ * Validates a provider's response, returning it narrowed to `UdsAuthResult`.
+ *
+ * @param value what the adapter returned
+ * @param source the provider method called, for the diagnostic message
+ */
+function parseAuthResult(value, source) {
+    try {
+        return assertAuthResult(value, source);
+    }
+    catch (error) {
+        if (!(error instanceof InvalidAuthResultError)) {
+            throw error;
+        }
+        // eslint-disable-next-line no-console
+        console.error(`[uds-pattern-login-card] ${error.message}`, value);
+        return { status: 'error', code: 'unknown' };
+    }
+}
+function assertAuthResult(value, source) {
+    const result = value;
+    if (!result || typeof result !== 'object') {
+        throw new InvalidAuthResultError(`${source} resolved with ${describe(value)}, expected a UdsAuthResult object.`);
+    }
+    const status = result.status;
+    if (!RESULT_STATUSES.includes(status)) {
+        throw new InvalidAuthResultError(`${source} resolved with status ${describe(status)}. Expected one of: ${RESULT_STATUSES.join(', ')}.`);
+    }
+    switch (status) {
+        case 'mfa_required':
+            assertMethods(result.methods, source);
+            break;
+        case 'otp_required':
+            if (result.method !== undefined) {
+                assertMethod(result.method, source, 'method');
+            }
+            assertOptionalNumber(result.codeLength, source, 'codeLength');
+            assertOptionalNumber(result.resendAfterMs, source, 'resendAfterMs');
+            break;
+        case 'locked':
+            assertOptionalNumber(result.unlockAfterMs, source, 'unlockAfterMs');
+            break;
+        case 'error':
+            if (!ERROR_CODES.includes(result.code)) {
+                throw new InvalidAuthResultError(`${source} resolved with error code ${describe(result.code)}. Expected one of: ${ERROR_CODES.join(', ')}.`);
+            }
+            break;
+    }
+    return result;
+}
+function assertMethods(value, source) {
+    if (!Array.isArray(value) || value.length === 0) {
+        throw new InvalidAuthResultError(`${source} resolved with status 'mfa_required' but methods was ${describe(value)}. ` +
+            'Expected a non-empty array of UdsMfaMethod — the card has nothing to offer the user otherwise.');
+    }
+    value.forEach((method, index) => assertMethod(method, source, `methods[${index}]`));
+}
+function assertMethod(value, source, path) {
+    const method = value;
+    if (!method || typeof method !== 'object' || typeof method.id !== 'string' || typeof method.label !== 'string') {
+        throw new InvalidAuthResultError(`${source} resolved with ${path} = ${describe(value)}. Expected { id: string, label: string }.`);
+    }
+}
+function assertOptionalNumber(value, source, path) {
+    if (value !== undefined && (typeof value !== 'number' || !Number.isFinite(value))) {
+        throw new InvalidAuthResultError(`${source} resolved with ${path} = ${describe(value)}. Expected a finite number or undefined.`);
+    }
+}
+function describe(value) {
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return 'undefined';
+    if (typeof value === 'string')
+        return `'${value}'`;
+    if (Array.isArray(value))
+        return `an array of ${value.length}`;
+    return typeof value === 'object' ? 'an object' : String(value);
+}
+
+var __decorate$6 = (undefined && undefined.__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;
+};
+/**
+ * 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.
+ */
+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(controlStrategy.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(controlStrategy.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 = controlStrategy.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 = controlStrategy.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') {
+            controlStrategy.intercept(this.controlStrategy?.complete, { session: result.session }, () => this.udsLoginSuccess.emit({ session: result.session }));
+        }
+    }
+    defaultTransitionFor(result) {
+        switch (result.status) {
+            case 'success':
+                return controlStrategy.goTo('success');
+            case 'password_required':
+                return controlStrategy.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 ? controlStrategy.stay() : controlStrategy.goTo('mfa-method');
+            case 'otp_required':
+                return controlStrategy.goTo('otp');
+            case 'password_reset_required':
+                return controlStrategy.goTo('reset-password');
+            case 'reset_link_sent':
+            case 'username_sent':
+                return controlStrategy.goTo('check-email');
+            case 'locked':
+                return controlStrategy.goTo('locked');
+            case 'error':
+                return controlStrategy.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 = controlStrategy.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(() => controlStrategy.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$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "resend", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "memory", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "udsLoginStepChange", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "udsLoginError", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "udsLoginSuccess", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "auth", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "controlStrategy", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "initialStep", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "otpLength", void 0);
+__decorate$6([
+    MapToComponentField()
+], LoginWorkflowSlimmer.prototype, "copy", void 0);
+__decorate$6([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "step", void 0);
+__decorate$6([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "busy", void 0);
+__decorate$6([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "errorText", void 0);
+__decorate$6([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "methods", void 0);
+__decorate$6([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "otpMethodLabel", void 0);
+__decorate$6([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "destination", void 0);
+__decorate$6([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "unlockMinutes", void 0);
+__decorate$6([
+    MapToComponentField({ writable: true })
+], LoginWorkflowSlimmer.prototype, "values", void 0);
+__decorate$6([
+    MapToComponentMethod('componentWillLoad')
+], LoginWorkflowSlimmer.prototype, "start", null);
+__decorate$6([
+    MapToComponentMethod('reset')
+], LoginWorkflowSlimmer.prototype, "restart", null);
+
+var __decorate$5 = (undefined && undefined.__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;
+};
+/**
+ * The resend throttle and its countdown.
+ *
+ * Small, but exactly the kind of thing that disappears into a large component
+ * and then gets subtly broken: an interval that must be cleared on disconnect,
+ * and a tick that must drive a re-render.
+ */
+class ResendThrottleSlimmer extends UdsSlimmer {
+    constructor() {
+        super();
+    }
+    /** Begins a throttle window. A missing or non-positive duration clears it. */
+    start(resendAfterMs) {
+        this.stop();
+        if (!resendAfterMs || resendAfterMs <= 0) {
+            this.resendAt = undefined;
+            return;
+        }
+        this.resendAt = Date.now() + resendAfterMs;
+        this.nowTick = Date.now();
+        this.timer = setInterval(() => {
+            this.nowTick = Date.now();
+            if (this.resendAt !== undefined && this.nowTick >= this.resendAt) {
+                this.stop();
+                this.resendAt = undefined;
+            }
+        }, 1000);
+    }
+    stop() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    /** Seconds left on the throttle; zero when resending is allowed. */
+    get secondsRemaining() {
+        if (this.resendAt === undefined) {
+            return 0;
+        }
+        return Math.max(0, Math.ceil((this.resendAt - this.nowTick) / 1000));
+    }
+    get canResend() {
+        return this.secondsRemaining === 0;
+    }
+}
+__decorate$5([
+    MapToComponentField({ writable: true })
+], ResendThrottleSlimmer.prototype, "resendAt", void 0);
+__decorate$5([
+    MapToComponentField({ writable: true })
+], ResendThrottleSlimmer.prototype, "nowTick", void 0);
+__decorate$5([
+    MapToComponentMethod('disconnectedCallback')
+], ResendThrottleSlimmer.prototype, "stop", null);
+
+var __decorate$4 = (undefined && undefined.__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;
+};
+/**
+ * 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.
+ */
+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$4([
+    MapToComponentField()
+], IdentityMemorySlimmer.prototype, "rememberStorageKey", void 0);
+__decorate$4([
+    MapToComponentField()
+], IdentityMemorySlimmer.prototype, "identifier", void 0);
+
+/**
+ * The pattern's own `vega-form` validation rules.
+ *
+ * ## Why rules rather than a pre-submit check
+ *
+ * `vega-form` already gates submission: its submit handler awaits `valid()` and
+ * only emits `vegaFormSubmit` when every field passes. Anything the pattern
+ * checks *outside* that gate is a second, competing validation pass — it fires
+ * at a different moment, reports through a different surface (a card-level
+ * banner rather than the field at fault), and has to be kept in step by hand.
+ *
+ * Expressing the same checks as rules puts them inside the one flow. The field
+ * that is wrong is the field that says so, the error clears as the user fixes
+ * it, and the submit gate needs no pattern-specific code at all.
+ *
+ * ## Why these two, and nothing else
+ *
+ * Everything Vega already derives from a prop — `required`, `type="email"`,
+ * `minLength` — is left to Vega, including its wording. Restating "this field
+ * is required" here would fork copy that the design system maintains for every
+ * Global Payments product. Only checks Vega cannot express from a prop alone
+ * live here: one that needs a sibling field's value, and one that needs the
+ * configured code length.
+ *
+ * ## Why they read through callbacks
+ *
+ * A rule is handed to `vega-input` as a prop and re-read when its identity
+ * changes, so rebuilding the array on each render would churn Vega's watchers
+ * every time any unrelated state moved. These are built once and resolve their
+ * inputs — the value to compare against, the message to show — when they are
+ * evaluated, so a single stable instance always sees current state.
+ */
+/** Evaluated only once the field has a value; emptiness is `required`'s job. */
+class NonEmptyStringRule {
+    canEvaluate(input, status) {
+        if (typeof input !== 'string' || input.length === 0) {
+            return false;
+        }
+        return status ? !status.disabled && status.visible : true;
+    }
+    /**
+     * Mirrors Vega's built-in rules: say nothing until the user has engaged with
+     * the field, so a freshly rendered step is not pre-littered with errors.
+     */
+    shouldShowError(status) {
+        return status ? !status.disabled && status.visible && (status.touched || status.modified) : true;
+    }
+}
+/**
+ * Requires a field to equal another field's current value.
+ *
+ * Used for the "confirm new password" pairing, which no single-field rule can
+ * express: the answer depends on a sibling that may change after this field was
+ * last touched.
+ */
+class MatchesFieldRule extends NonEmptyStringRule {
+    constructor(expected, message) {
+        super();
+        this.expected = expected;
+        this.message = message;
+    }
+    evaluate(input) {
+        const isValid = input === this.expected();
+        return { isValid, message: isValid ? '' : this.message() };
+    }
+}
+/**
+ * Requires every character of a passcode to be present.
+ *
+ * `required` alone is not enough here. It only asks whether the value is
+ * non-empty, so a half-typed code — three boxes of six — satisfies it and
+ * reaches the provider, which then has to answer a question the pattern could
+ * have answered without a round trip.
+ */
+class CompleteCodeRule extends NonEmptyStringRule {
+    constructor(length, message) {
+        super();
+        this.length = length;
+        this.message = message;
+    }
+    evaluate(input) {
+        const expected = this.length();
+        const isValid = input.length >= expected;
+        return { isValid, message: isValid ? '' : this.message(expected) };
+    }
+}
+
+var __decorate$3 = (undefined && undefined.__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;
+};
+/**
+ * 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.
+ */
+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 => controlStrategy.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 (index.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 (index.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 (index.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 index.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 (index.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 (index.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 => (index.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$3([
+    MapToComponentField()
+], LoginFieldRenderer.prototype, "viewModel", void 0);
+__decorate$3([
+    MapToComponentField()
+], LoginFieldRenderer.prototype, "handlers", void 0);
+
+var __decorate$2 = (undefined && undefined.__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;
+};
+/**
+ * Renders the body of whichever step the workflow is on.
+ *
+ * ## Why a renderer slimmer
+ *
+ * This is the same Slimmer mechanism the stateful layer 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 the plain `view/` modules this replaces 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 do
+ * not use them. `@MapToComponentField()` reaches the component's `viewModel`
+ * and `handlers` directly, and types them by indexing the component class, so
+ * the 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.
+ */
+class LoginStepRenderer extends UdsSlimmer {
+    constructor() {
+        super();
+        this.fields = new LoginFieldRenderer();
+    }
+    render() {
+        const vm = this.viewModel;
+        switch (vm.step) {
+            case 'identifier':
+                return this.identifierStep(vm);
+            case 'password':
+                return this.passwordStep(vm);
+            case 'mfa-method':
+                return this.mfaMethodStep(vm);
+            case 'otp':
+                return this.otpStep(vm);
+            case 'forgot-password':
+            case 'forgot-username':
+                return this.forgotStep(vm);
+            case 'reset-password':
+                return this.resetPasswordStep(vm);
+            case 'sign-up':
+                return this.signUpStep(vm);
+            default:
+                return [];
+        }
+    }
+    identifierStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.textField({
+                name: 'identifier',
+                label: copy.identifierFieldLabel,
+                type: 'email',
+                autocomplete: 'username',
+            }),
+            this.fields.checkbox('rememberIdentifier', copy.rememberIdentifier),
+            this.fields.submit(copy.continue),
+            index.h("div", { class: "prose" }, index.h("p", { class: "prose__lead" }, copy.troubleSigningInPrompt), index.h("p", null, "Follow the steps in \u201C", this.fields.link(copy.troubleSigningIn, this.handlers.onAction('trouble-signing-in')), "\u201D."), vm.can.signUp && (index.h("p", null, copy.noAccountPrompt, " ", this.fields.link(copy.createAccount, this.handlers.onNavigate('sign-up'))))),
+        ];
+    }
+    passwordStep(vm) {
+        const { copy, can } = vm;
+        const recovery = [];
+        if (can.reset) {
+            recovery.push(this.fields.link(copy.forgotPassword, this.handlers.onNavigate('forgot-password')));
+        }
+        if (can.username) {
+            recovery.push(this.fields.link(copy.forgotUsername, this.handlers.onNavigate('forgot-username')));
+        }
+        return [
+            // `vega-input` carries its own password reveal control, so the card no
+            // longer renders — or tracks the state for — an eye toggle of its own.
+            this.fields.textField({
+                name: 'password',
+                label: copy.passwordFieldLabel,
+                type: 'password',
+                autocomplete: 'current-password',
+            }),
+            ...(recovery.length ? [index.h("div", { class: "inline-links" }, recovery)] : []),
+            this.fields.submit(copy.continue),
+        ];
+    }
+    mfaMethodStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.methodGroup(vm.methods, copy.mfaMethodHeading),
+            this.fields.submit(copy.continue),
+        ];
+    }
+    otpStep(vm) {
+        const { copy } = vm;
+        const tail = [];
+        if (vm.methods.length > 1) {
+            tail.push(this.fields.link(copy.changeMfaMethod, this.handlers.onNavigate('mfa-method')));
+        }
+        if (vm.can.resend) {
+            tail.push(vm.isResendThrottled ? (
+            // Rendered as text rather than a disabled link: a countdown is a
+            // status, and announcing it politely is more useful than offering a
+            // dead target.
+            index.h("span", { class: "countdown", "aria-live": "polite" }, vm.resendCountdownText)) : (this.fields.link(copy.resendCode, this.handlers.onResend)));
+        }
+        return [
+            // `vega-input-passcode` owns the whole multi-box entry: per-character
+            // focus advance, backspace retreat, paste distribution and masking. That
+            // replaces the card's own OTP slimmer outright.
+            this.fields.passcodeField(),
+            this.fields.submit(copy.otpSubmit),
+            ...(tail.length
+                ? [
+                    index.h("div", { class: "prose" }, index.h("p", null, copy.changeMfaMethodPrompt), index.h("p", { class: "inline-links" }, tail)),
+                ]
+                : []),
+        ];
+    }
+    forgotStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.textField({
+                name: vm.step === 'forgot-password' ? 'identifier' : 'email',
+                label: copy.identifierFieldLabel,
+                type: 'email',
+                autocomplete: 'username',
+            }),
+            this.fields.submit(copy.continue),
+            index.h("p", { class: "prose" }, this.fields.link(copy.back, this.handlers.onNavigate('identifier'))),
+        ];
+    }
+    resetPasswordStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.textField({
+                name: 'password',
+                label: copy.newPasswordFieldLabel,
+                type: 'password',
+                autocomplete: 'new-password',
+            }),
+            // The pairing is checked on the field that is wrong, inside the same
+            // `vega-form` gate as every other rule — not as a pre-submit test
+            // reported through the card-level banner.
+            this.fields.textField({
+                name: 'confirmPassword',
+                label: copy.confirmPasswordFieldLabel,
+                type: 'password',
+                autocomplete: 'new-password',
+                mustMatch: 'password',
+            }),
+            this.fields.submit(copy.continue),
+        ];
+    }
+    signUpStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.textField({ name: 'firstName', label: copy.firstNameFieldLabel, autocomplete: 'given-name' }),
+            this.fields.textField({ name: 'lastName', label: copy.lastNameFieldLabel, autocomplete: 'family-name' }),
+            this.fields.textField({
+                name: 'identifier',
+                label: copy.identifierFieldLabel,
+                type: 'email',
+                autocomplete: 'email',
+            }),
+            this.fields.submit(copy.signUpSubmit),
+            index.h("p", { class: "prose" }, copy.haveAccountPrompt, " ", this.fields.link(copy.signIn, this.handlers.onNavigate('identifier'))),
+        ];
+    }
+}
+__decorate$2([
+    InjectSlimmer()
+], LoginStepRenderer.prototype, "fields", void 0);
+__decorate$2([
+    MapToComponentField()
+], LoginStepRenderer.prototype, "viewModel", void 0);
+__decorate$2([
+    MapToComponentField()
+], LoginStepRenderer.prototype, "handlers", void 0);
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+/**
+ * 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.
+ */
+class LoginCardRenderer extends UdsSlimmer {
+    constructor() {
+        super();
+        this.steps = new LoginStepRenderer();
+    }
+    render() {
+        const vm = this.viewModel;
+        return [
+            index.h("h1", { class: "card__heading", id: "uds-pattern-login-heading", tabindex: "-1" }, vm.heading),
+            ...(vm.description ? [index.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
+                ? [index.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.
+        index.h("vega-form", { class: "form", useNativeForm: true, disableBlurValidation: true, onVegaFormSubmit: (event) => this.handlers.onSubmit(event) }, index.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 [
+            index.h("p", { class: "prose" }, index.h("vega-button-link", { class: "link", label: vm.copy.back, eventful: true, onVegaClick: (event) => this.handlers.onNavigate('identifier')(event) })),
+        ];
+    }
+}
+__decorate$1([
+    InjectSlimmer()
+], LoginCardRenderer.prototype, "steps", void 0);
+__decorate$1([
+    MapToComponentField()
+], LoginCardRenderer.prototype, "viewModel", void 0);
+__decorate$1([
+    MapToComponentField()
+], LoginCardRenderer.prototype, "handlers", void 0);
+
+/**
+ * The data a renderer needs to draw one step of the login workflow.
+ *
+ * ## Why this is a class with a factory, and not an inline object
+ *
+ * Deriving "what the user should see" from "what the workflow currently holds"
+ * is real logic: which affordances are available, what the heading says, which
+ * description variant applies, whether a countdown is running. Assembled inline
+ * inside `render()` that derivation is untestable and re-read on every change;
+ * named here it has one home, one test surface and one place to review.
+ *
+ * ## Why it carries no callbacks
+ *
+ * A view model is *data*. Handlers are supplied alongside it
+ * (`LoginCardHandlers`) rather than folded in, because a model that carries
+ * behaviour cannot be compared, snapshotted or reasoned about independently of
+ * the component that produced it. Keeping the two apart is what lets the
+ * renderers be checked as pure functions of their inputs.
+ *
+ * ## Pattern-library standard
+ *
+ * Every pattern component should follow this shape:
+ *
+ * - `view-model/<pattern>.view-model.ts` exporting a plain data class;
+ * - construction through a single `static from(state)` factory;
+ * - no inheritance, and no logic beyond derivation from the state passed in;
+ * - consumed by renderer slimmers, never mutated by them.
+ *
+ * Note this is a *view model*, not a DTO: it never crosses a process or
+ * serialisation boundary, only the boundary between the stateful layer
+ * (slimmers) and the rendering layer. DTO semantics — validation, wire format —
+ * belong at the provider seam, where data genuinely enters from outside.
+ */
+class LoginStepViewModel {
+    constructor(
+    /** The step being rendered. */
+    step, 
+    /** Resolved copy, after merging any consumer overrides. */
+    copy, 
+    /** Heading for this step. */
+    heading, 
+    /** Supporting description, when this step has one. */
+    description, 
+    /** Error copy to surface, already mapped to approved wording. */
+    errorText, 
+    /** Whether a provider call is in flight. */
+    busy, 
+    /** Which affordances the provider can service. */
+    can, 
+    /** MFA methods offered by the provider. */
+    methods, 
+    /** Values collected on the current step. */
+    values, 
+    /** How many characters the passcode entry expects. */
+    otpLength, 
+    /** Seconds left on the resend throttle; zero when resending is allowed. */
+    resendSeconds) {
+        this.step = step;
+        this.copy = copy;
+        this.heading = heading;
+        this.description = description;
+        this.errorText = errorText;
+        this.busy = busy;
+        this.can = can;
+        this.methods = methods;
+        this.values = values;
+        this.otpLength = otpLength;
+        this.resendSeconds = resendSeconds;
+    }
+    static from(state) {
+        const { step, copy } = state;
+        return new LoginStepViewModel(step, copy, headingFor(step, copy), descriptionFor(step, copy, state), state.errorText, state.busy, state.can, state.methods, state.values, state.otpLength, state.resendSeconds);
+    }
+    /** Steps that render no form: terminal outcomes and confirmations. */
+    get isTerminal() {
+        return this.step === 'success' || this.step === 'locked' || this.step === 'check-email';
+    }
+    /** Whether a resend is currently throttled. */
+    get isResendThrottled() {
+        return this.resendSeconds > 0;
+    }
+    /** Copy for the throttle countdown, with the remaining seconds applied. */
+    get resendCountdownText() {
+        return controlStrategy.formatLabel(this.copy.resendCodeIn, { seconds: this.resendSeconds });
+    }
+    /** The current value of a collected field, as a string. */
+    valueOf(name) {
+        const value = this.values[name];
+        return typeof value === 'string' ? value : '';
+    }
+    /** Whether a boolean field is set. */
+    isChecked(name) {
+        return this.values[name] === true;
+    }
+}
+function headingFor(step, copy) {
+    const headings = {
+        identifier: copy.identifierHeading,
+        password: copy.passwordHeading,
+        'mfa-method': copy.mfaMethodHeading,
+        otp: copy.otpHeading,
+        'forgot-password': copy.forgotPasswordHeading,
+        'forgot-username': copy.forgotUsernameHeading,
+        'reset-password': copy.resetPasswordHeading,
+        'sign-up': copy.signUpHeading,
+        'check-email': copy.checkEmailHeading,
+        locked: copy.lockedHeading,
+        success: copy.successHeading,
+    };
+    return headings[step];
+}
+function descriptionFor(step, copy, ctx) {
+    switch (step) {
+        case 'mfa-method':
+            return copy.mfaMethodDescription;
+        case 'otp':
+            return ctx.otpMethodLabel
+                ? controlStrategy.formatLabel(copy.otpDescriptionForMethod, { method: ctx.otpMethodLabel })
+                : copy.otpDescription;
+        case 'forgot-password':
+            return copy.forgotPasswordDescription;
+        case 'forgot-username':
+            return copy.forgotUsernameDescription;
+        case 'sign-up':
+            return copy.signUpDescription;
+        case 'check-email':
+            return ctx.destination
+                ? controlStrategy.formatLabel(copy.checkEmailDescriptionWithDestination, { destination: ctx.destination })
+                : copy.checkEmailDescription;
+        case 'locked':
+            return ctx.unlockMinutes
+                ? controlStrategy.formatLabel(copy.lockedDescriptionWithTime, { minutes: ctx.unlockMinutes })
+                : copy.lockedDescription;
+        default:
+            return undefined;
+    }
+}
+
+const udsPatternLoginCardCss = () => `:host{display:block;width:100%;max-width:var(--uds-pattern-login-card-max-width);box-sizing:border-box;--uds-pattern-login-card-max-width:35rem}:host *,:host *::before,:host *::after{box-sizing:inherit}.card{padding:var(--uds-pattern-space-2xl);background:var(--uds-pattern-color-surface);border-radius:var(--uds-pattern-radius-lg);box-shadow:var(--uds-pattern-shadow-card)}.card__heading{margin:0 0 var(--uds-pattern-space-sm);font-size:var(--uds-pattern-font-size-lg);font-weight:var(--uds-pattern-font-weight-bold);line-height:var(--uds-pattern-line-height-md)}.card__heading:focus,.card__heading:focus-visible{outline:none}.card__description{margin:0 0 var(--uds-pattern-space-lg);font-size:var(--uds-pattern-font-size-sm);color:var(--uds-pattern-color-text-subtle)}.card__footer{margin-top:var(--uds-pattern-space-xl);padding-top:var(--uds-pattern-space-xl);border-top:1px solid var(--uds-pattern-color-border);font-size:var(--uds-pattern-font-size-sm);color:var(--uds-pattern-color-text-subtle)}.card__footer p{margin:0}.form{margin-top:var(--uds-pattern-space-lg)}.form__body{display:flex;flex-direction:column;gap:var(--uds-pattern-space-xl);align-items:stretch}.alert{display:block;margin-bottom:var(--uds-pattern-space-md)}.options{display:block}.prose{margin:0;font-size:var(--uds-pattern-font-size-sm);color:var(--uds-pattern-color-text-subtle)}.prose p{margin:0 0 var(--uds-pattern-space-xs)}.prose p:last-child{margin-bottom:0}.prose__lead{font-weight:var(--uds-pattern-font-weight-bold);color:var(--uds-pattern-color-text)}.link{display:inline-block;vertical-align:baseline}.inline-links{display:flex;flex-wrap:wrap;gap:var(--uds-pattern-space-md)}.countdown{color:var(--uds-pattern-color-text-subtle)}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const UdsPatternLoginCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.udsLoginSuccess = index.createEvent(this, "udsLoginSuccess");
+        this.udsLoginStepChange = index.createEvent(this, "udsLoginStepChange");
+        this.udsLoginError = index.createEvent(this, "udsLoginError");
+        this.udsLoginAction = index.createEvent(this, "udsLoginAction");
+        // --- Slimmers -----------------------------------------------------------
+        // Each owns one responsibility and binds back to the state below.
+        this.workflow = new LoginWorkflowSlimmer();
+        this.resend = new ResendThrottleSlimmer();
+        this.memory = new IdentityMemorySlimmer();
+        this.renderer = new LoginCardRenderer();
+        // --- Props --------------------------------------------------------------
+        /**
+         * Everything that cannot be expressed as an attribute: the `auth` adapter,
+         * the `control` strategy and any `labels` overrides.
+         *
+         * The split is mechanical rather than a matter of taste — see
+         * `UdsLoginConfig`. Scalars below are attributes because they can be;
+         * objects and functions are gathered here because they cannot be.
+         *
+         * Also accepts a JSON string, so the `labels` member alone can be set from
+         * plain HTML markup.
+         */
+        this.config = {};
+        /** The step the workflow starts on. */
+        this.initialStep = 'identifier';
+        /** Pre-populates the identifier field, overriding any remembered value. */
+        this.identifier = '';
+        /** Default number of digit inputs, when the provider does not specify one. */
+        this.otpLength = 6;
+        /**
+         * Where the "Remember my email" value is persisted. Set to an empty string to
+         * disable persistence entirely.
+         */
+        this.rememberStorageKey = 'uds-pattern-login.identifier';
+        /** Renders the "Need help signing in?" footer. */
+        this.showHelpFooter = true;
+        // --- State --------------------------------------------------------------
+        // Written by the slimmers through `@MapToComponentField({ writable: true })`.
+        this.step = 'identifier';
+        this.busy = false;
+        this.methods = [];
+        this.nowTick = Date.now();
+        this.values = {};
+        /**
+         * The intents a renderer may raise. Held as one stable object — not rebuilt
+         * per render — so that binding to it from a slimmer is a fixed reference and
+         * the data half of the contract stays free of behaviour.
+         */
+        this.handlers = {
+            onSubmit: (event) => {
+                event.preventDefault();
+                void this.workflow.submit();
+            },
+            onNavigate: (step) => (event) => {
+                event.preventDefault();
+                this.workflow.navigateTo(step);
+            },
+            onAction: (action) => (event) => {
+                event.preventDefault();
+                this.udsLoginAction.emit({ action, step: this.step });
+            },
+            onResend: (event) => {
+                event.preventDefault();
+                void this.workflow.resendCode();
+            },
+            onValueChange: (name, value) => {
+                this.values = { ...this.values, [name]: value };
+            },
+        };
+    }
+    // --- Lifecycle ----------------------------------------------------------
+    // Bodies are intentionally empty: slimmers hook onto these by name via
+    // `@MapToComponentMethod`, and the hooks run after the method itself.
+    componentWillLoad() {
+        /* LoginWorkflowSlimmer.start */
+    }
+    disconnectedCallback() {
+        /* ResendThrottleSlimmer.stop */
+    }
+    componentDidRender() {
+        if (this.lastRenderedStep !== undefined && this.lastRenderedStep !== this.step) {
+            this.focusFirstControl();
+        }
+        this.lastRenderedStep = this.step;
+    }
+    /**
+     * Returns the workflow to its first step and clears all collected input.
+     * Useful after a sign-out, or to recover from a terminal step.
+     */
+    async reset() {
+        /* LoginWorkflowSlimmer.restart */
+    }
+    // --- Derived ------------------------------------------------------------
+    /** The resolved configuration, accepting a JSON string for HTML consumers. */
+    get resolvedConfig() {
+        return parseJsonProp(this.config, {});
+    }
+    /** The authentication seam. Read by the workflow slimmer. */
+    get auth() {
+        return this.resolvedConfig.auth;
+    }
+    /** The control seam. Read by the workflow slimmer at each checkpoint. */
+    get controlStrategy() {
+        return this.resolvedConfig.control;
+    }
+    /** Merged copy. Read by the slimmers as well, for error text. */
+    get copy() {
+        const overrides = this.resolvedConfig.labels ?? {};
+        return {
+            ...controlStrategy.DEFAULT_LOGIN_LABELS,
+            ...overrides,
+            errors: { ...controlStrategy.DEFAULT_LOGIN_LABELS.errors, ...(overrides.errors ?? {}) },
+        };
+    }
+    /**
+     * Everything the renderers need to draw the current step, and nothing else.
+     *
+     * Derivation happens in one place — `LoginStepViewModel.from` — rather than
+     * being assembled inline in `render()`, so it can be tested without a DOM and
+     * reviewed without reading JSX.
+     */
+    get viewModel() {
+        return LoginStepViewModel.from({
+            step: this.step,
+            copy: this.copy,
+            errorText: this.errorText,
+            busy: this.busy,
+            can: this.workflow.capabilities,
+            methods: this.methods,
+            values: this.values,
+            otpLength: this.workflow.codeLength,
+            resendSeconds: this.resend.secondsRemaining,
+            otpMethodLabel: this.otpMethodLabel,
+            destination: this.destination,
+            unlockMinutes: this.unlockMinutes,
+        });
+    }
+    focusFirstControl() {
+        // `shadow: true`, so a shadow root is always attached by the time a render
+        // has completed. The ambient type is nullable; the value is not.
+        const root = this.hostEl.shadowRoot;
+        // Vega fields are custom elements, so the focusable control is inside their
+        // own shadow root. Delegating to the element's own `focus()` lets Vega
+        // decide which of its internals should receive focus.
+        //
+        // Every step renders a heading, so the fallback always resolves — the
+        // first arm is the one that matters, moving focus into the form.
+        const target = root.querySelector('.form .field:not([disabled])') ??
+            root.querySelector('.card__heading');
+        target.focus();
+    }
+    // --- Rendering ----------------------------------------------------------
+    render() {
+        return (index.h(index.Host, { key: 'e8d37d2f818b9b2260fb2ccd3d784393a28385c4' }, index.h("section", { key: '1c0ce6ee5c73d24b06212d8a4b2f293c89e6cb70', class: "card", "aria-busy": String(this.busy) }, index.h("slot", { key: 'c87b3ceba0d974e15958aec53c19e76dc3996096', name: "brand" }), this.renderer.render(), this.showHelpFooter && (index.h("div", { key: '003268c5b8abf8755d55ba54e433fc8114171113', class: "card__footer" }, index.h("slot", { key: '376accf53b60a5cb489abde889ff74bf7fab3fe6', name: "footer" }, index.h("p", { key: 'a6834071896f9a3d988c089807fc6a77ee928ffc' }, this.copy.helpPrompt, ' ', index.h("vega-button-link", { key: '4645b67e1ccf70b0b386a516025659540a9308a9', class: "link", label: this.copy.help, eventful: true, onVegaClick: (event) => this.handlers.onAction('login-help')(event) }))))))));
+    }
+    get hostEl() { return index.getElement(this); }
+};
+__decorate([
+    InjectSlimmer()
+], UdsPatternLoginCard.prototype, "workflow", void 0);
+__decorate([
+    InjectSlimmer()
+], UdsPatternLoginCard.prototype, "resend", void 0);
+__decorate([
+    InjectSlimmer()
+], UdsPatternLoginCard.prototype, "memory", void 0);
+__decorate([
+    InjectSlimmer()
+], UdsPatternLoginCard.prototype, "renderer", void 0);
+/** Accepts either a parsed value or a JSON string (for plain-HTML consumers). */
+function parseJsonProp(value, fallback) {
+    if (typeof value !== 'string') {
+        return value ?? fallback;
+    }
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return fallback;
+    }
+}
+UdsPatternLoginCard.style = udsPatternLoginCardCss();
+
+const udsPatternLoginPageCss = () => `:host{display:flex;flex-direction:column;min-height:100vh;box-sizing:border-box;font-family:var(--uds-pattern-font-family);color:var(--uds-pattern-color-text);background:var(--uds-pattern-color-background)}.masthead{display:flex;justify-content:center;align-items:center;padding:var(--uds-pattern-space-md) var(--uds-pattern-space-lg);background:var(--uds-pattern-color-surface)}.masthead__logo{display:block;max-height:2rem}.content{display:flex;flex:1;justify-content:center;align-items:center;padding:var(--uds-pattern-space-xl) var(--uds-pattern-space-md)}.page-footer:not(:empty){padding:var(--uds-pattern-space-md) var(--uds-pattern-space-lg);text-align:center;font-size:var(--uds-pattern-font-size-sm);color:var(--uds-pattern-color-text-subtle)}`;
+
+const UdsPatternLoginPage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Accessible name for the masthead logo. */
+        this.logoAlt = '';
+    }
+    render() {
+        const logo = this.logoSrc ? index.h("img", { class: "masthead__logo", src: this.logoSrc, alt: this.logoAlt }) : null;
+        return (index.h(index.Host, { key: '7c2d0d6ae80dc7e52c0780c457de982738ef8faa' }, index.h("header", { key: '7eac231827e53a5e4018591506f7632aff8ddda5', class: "masthead" }, index.h("slot", { key: 'e80b31f6301079a15f45066189c646ed4c444e24', name: "brand" }, this.logoHref && logo ? index.h("a", { href: this.logoHref }, logo) : logo)), index.h("main", { key: '3081bf6ec017cff44900f6cd0d9c98b38baf5126', class: "content" }, index.h("slot", { key: '3c84048fae834578b00254e6bdbad4eecc74b5e2' })), index.h("footer", { key: 'dfb064a71e3f39c8e99212b523d043f9f9f20538', class: "page-footer" }, index.h("slot", { key: '5ea9ef897c20a96f3c42b2b4f54496155516a423', name: "footer" }))));
+    }
+};
+UdsPatternLoginPage.style = udsPatternLoginPageCss();
+
+exports.uds_pattern_login_card = UdsPatternLoginCard;
+exports.uds_pattern_login_page = UdsPatternLoginPage;