@govuk-one-login/frontend-ui 3.0.0 → 3.1.1

package/build/cjs/backend/index.cjs

@@ -76,7 +76,8 @@ var skipLink$1 = {
 var progressButton$1 = {
 	text: "Parhau",
 	waitingText: "Aros",
-	longWaitingText: "Parhau i aros"
+	longWaitingText: "Parhau i aros",
+	noJavascriptMessage: "Gall gymryd hyd at 10 eiliad i barhau i'r dudalen nesaf. Ar ôl i chi barhau, peidiwch ag ail-lwytho na chau'r dudalen hon."
 };
 var translationCy = {
 	cookieBanner: cookieBanner$1,
@@ -161,7 +162,8 @@ var skipLink = {
 var progressButton = {
 	text: "Continue",
 	waitingText: "Wait",
-	longWaitingText: "Keep waiting"
+	longWaitingText: "Keep waiting",
+	noJavascriptMessage: "It can take up to 10 seconds to continue to the next page. After you continue, do not reload or close this page."
 };
 var translationEn = {
 	cookieBanner: cookieBanner,

package/build/cjs/backend/index.d.cts

@@ -95,6 +95,7 @@ export declare const frontendUiTranslationEn: {
         text: string;
         waitingText: string;
         longWaitingText: string;
+        noJavascriptMessage: string;
     };
 };
 export declare const frontendUiTranslationCy: {
@@ -158,6 +159,7 @@ export declare const frontendUiTranslationCy: {
         text: string;
         waitingText: string;
         longWaitingText: string;
+        noJavascriptMessage: string;
     };
 };
 export {};

package/build/cjs/backend/index.d.ts

@@ -95,6 +95,7 @@ export declare const frontendUiTranslationEn: {
         text: string;
         waitingText: string;
         longWaitingText: string;
+        noJavascriptMessage: string;
     };
 };
 export declare const frontendUiTranslationCy: {
@@ -158,6 +159,7 @@ export declare const frontendUiTranslationCy: {
         text: string;
         waitingText: string;
         longWaitingText: string;
+        noJavascriptMessage: string;
     };
 };
 export {};

package/build/cjs/backend/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQ1D,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QACL,IAAI,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;SAAE,CAAC;KAClC,CAAC;CACH;AAED,UAAU,cAAe,SAAQ,OAAO;IACtC,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAGD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAER,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAaR,eAAO,MAAM,yBAAyB,GAAI,cAAc,OAAO,OAAO,SAerE,CAAC;AAGF,eAAO,MAAM,kCAAkC,GAC7C,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,MAAM,YAAY,SAUnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,UAU3D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,iBAkBhE;AAED,eAAO,MAAM,mBAAmB,GAC9B,cAAc,OAAO,OAAO,EAC5B,WAAW,MAAM,SASlB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EACd,WAAW,MAAM,KAChB,MAAM,CAAC,MAAM,EAAE,OAAO,CAuBxB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgB,CAAC;AACrD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQ1D,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QACL,IAAI,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;SAAE,CAAC;KAClC,CAAC;CACH;AAED,UAAU,cAAe,SAAQ,OAAO;IACtC,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAGD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAER,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAaR,eAAO,MAAM,yBAAyB,GAAI,cAAc,OAAO,OAAO,SAerE,CAAC;AAGF,eAAO,MAAM,kCAAkC,GAC7C,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,MAAM,YAAY,SAUnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,UAU3D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,iBAkBhE;AAED,eAAO,MAAM,mBAAmB,GAC9B,cAAc,OAAO,OAAO,EAC5B,WAAW,MAAM,SASlB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EACd,WAAW,MAAM,KAChB,MAAM,CAAC,MAAM,EAAE,OAAO,CAuBxB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgB,CAAC;AACrD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgB,CAAC"}

package/build/cjs/frontend/index.cjs

@@ -24,6 +24,7 @@ exports.PollResult = void 0;
     PollResult[PollResult["Success"] = 0] = "Success";
     PollResult[PollResult["Failure"] = 1] = "Failure";
     PollResult[PollResult["Pending"] = 2] = "Pending";
+    PollResult[PollResult["Backoff"] = 3] = "Backoff";
 })(exports.PollResult || (exports.PollResult = {}));
 var SpinnerState;
 (function (SpinnerState) {
@@ -35,6 +36,7 @@ var SpinnerState;
 class Spinner {
     constructor(domContainer, pollingFunction, onSuccess, onError) {
         this.state = SpinnerState.Waiting;
+        this.backOffCount = 0;
         this.handleAbort = () => {
             this.abortController.abort();
         };
@@ -172,6 +174,9 @@ class Spinner {
             hideSpinnerOnError: element.dataset.hideSpinnerOnError
                 ? (element.dataset.hideSpinnerOnError === 'true')
                 : false,
+            maxBackoffTries: element.dataset.maxBackoffTries
+                ? parseInt(element.dataset.maxBackoffTries)
+                : 3,
         };
     }
     createAbortController() {
@@ -230,12 +235,24 @@ class Spinner {
                 this.reflectError();
             }
             else if (!this.hasCompleted()) {
+                let timeToNextPoll = this.config.msBetweenRequests;
+                if (response === exports.PollResult.Backoff) {
+                    this.backOffCount++;
+                    if (this.backOffCount > this.config.maxBackoffTries) {
+                        this.reflectError();
+                        return;
+                    }
+                    timeToNextPoll = this.calculateBackoffTime(this.backOffCount);
+                }
+                else {
+                    this.backOffCount = 0;
+                }
                 setTimeout(async () => {
                     if (Date.now() - initTime >= this.config.msBeforeAbort) {
                         return;
                     }
                     await this.callPollingFunction(initTime);
-                }, this.config.msBetweenRequests);
+                }, timeToNextPoll);
             }
         })
             .catch((error) => {
@@ -248,6 +265,10 @@ class Spinner {
             this.updateDom();
         });
     }
+    calculateBackoffTime(backOffCount) {
+        const extraDelay = Math.pow(2, backOffCount - 2) * this.config.msBetweenRequests;
+        return this.config.msBetweenRequests + extraDelay;
+    }
     createAriaLiveContainer() {
         // For the Aria alert to work reliably we need to create its container once and then update the contents
         // https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
@@ -268,4 +289,109 @@ class Spinner {
     }
 }
 
+function initialiseProgressButtons(document = window.document) {
+    const progressButtons = Array.prototype.slice.call(document.querySelectorAll('[data-frontendui="di-progress-button"]'));
+    function findClosestForm(element) {
+        let el = element;
+        while (el && el.nodeName !== 'FORM') {
+            el = el.parentElement;
+        }
+        return el;
+    }
+    progressButtons.forEach(function (button) {
+        const form = findClosestForm(button);
+        let isSubmitting = false;
+        button.addEventListener('click', function (event) {
+            if (isSubmitting) {
+                event.preventDefault();
+                return;
+            }
+            const waitingText = button.getAttribute('data-waiting-text');
+            const longWaitingText = button.getAttribute('data-long-waiting-text');
+            const errorPage = button.getAttribute('data-error-page');
+            const isInput = button.tagName.toLowerCase() === 'input';
+            if (!waitingText || !longWaitingText || !errorPage) {
+                console.error('Progress button is missing required data attributes.');
+                return;
+            }
+            isSubmitting = true;
+            // Always handle the button click, regardless of form presence
+            handleProgressButtonClick(button, waitingText, longWaitingText, errorPage, isInput);
+            // If no form, we're done. If there is a form, the form submit handler will take over
+            if (!form) {
+                return;
+            }
+            // For form buttons, let the click propagate to trigger form submission
+        });
+        if (form) {
+            form.addEventListener('submit', function (event) {
+                // The button click handler has already set isSubmitting and handled the button state
+                if (isSubmitting) {
+                    // Allow the first submission, prevent subsequent ones
+                    if (event.target === form && event.submitter === button) {
+                        return; // Allow the first submission to proceed
+                    }
+                    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
+                    return;
+                }
+                // If the form is submitted through another method (not our button),
+                // prevent double submission but don't show progress state
+                isSubmitting = true;
+            });
+        }
+    });
+}
+function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput) {
+    var originalText = isInput && element instanceof HTMLInputElement ? element.value : element.innerText;
+    if (typeof element.blur === 'function') {
+        element.blur();
+    }
+    element.setAttribute('data-prevent-double-click', 'true');
+    var classes = element.className.split(' ');
+    if (classes.indexOf('govuk-button--progress-loading') === -1) {
+        classes.push('govuk-button--progress-loading');
+        element.className = classes.join(' ');
+    }
+    if (isInput && element instanceof HTMLInputElement) {
+        element.value = waitingText;
+    }
+    else {
+        element.innerText = waitingText;
+    }
+    element.setAttribute('aria-label', waitingText);
+    var longWaitTimeout = window.setTimeout(function () {
+        if (isInput && element instanceof HTMLInputElement) {
+            element.value = longWaitingText;
+        }
+        else {
+            element.innerText = longWaitingText;
+        }
+        element.setAttribute('aria-label', longWaitingText);
+    }, 5000);
+    var errorTimeout = window.setTimeout(function () {
+        window.location.href = errorPage;
+    }, 10000);
+    function resetButton() {
+        var classes = element.className.split(' ');
+        var loadingIndex = classes.indexOf('govuk-button--progress-loading');
+        if (loadingIndex !== -1) {
+            classes.splice(loadingIndex, 1);
+            element.className = classes.join(' ');
+        }
+        element.setAttribute('data-prevent-double-click', 'false');
+        if (isInput && element instanceof HTMLInputElement) {
+            element.value = originalText;
+        }
+        else {
+            element.innerText = originalText;
+        }
+        element.setAttribute('aria-label', originalText);
+        window.clearTimeout(errorTimeout);
+        window.clearTimeout(longWaitTimeout);
+    }
+    element.resetProgressButton = resetButton;
+    return resetButton;
+}
+
+exports.initialiseProgressButtons = initialiseProgressButtons;
 exports.useSpinner = useSpinner;

package/build/cjs/frontend/index.d.cts

@@ -1,3 +1,4 @@
 export { useSpinner, PollResult } from "./spinner/spinner";
 export type { PollingFunction } from "./spinner/spinner";
+export { initialiseProgressButtons } from "./progress-button/progress-button";
 //# sourceMappingURL=index.d.ts.map

package/build/cjs/frontend/index.d.ts

@@ -1,3 +1,4 @@
 export { useSpinner, PollResult } from "./spinner/spinner";
 export type { PollingFunction } from "./spinner/spinner";
+export { initialiseProgressButtons } from "./progress-button/progress-button";
 //# sourceMappingURL=index.d.ts.map

package/build/cjs/frontend/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../frontend-src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../frontend-src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC"}

package/build/cjs/frontend/progress-button/progress-button.d.ts

@@ -0,0 +1,2 @@
+export declare function initialiseProgressButtons(document?: Document): void;
+//# sourceMappingURL=progress-button.d.ts.map

package/build/cjs/frontend/progress-button/progress-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,QAgE7E"}

package/build/cjs/frontend/spinner/spinner.d.ts

@@ -3,7 +3,8 @@ export type PollingFunction = (abortSignal: AbortSignal) => Promise<PollResult>;
 export declare enum PollResult {
     Success = 0,
     Failure = 1,
-    Pending = 2
+    Pending = 2,
+    Backoff = 3
 }
 declare enum SpinnerState {
     Waiting = 0,
@@ -18,6 +19,7 @@ type SpinnerConfig = {
     msBetweenDomUpdate: number;
     ariaAlertCompletionText?: string;
     hideSpinnerOnError: boolean;
+    maxBackoffTries: number;
 };
 export declare class Spinner {
     container: HTMLDivElement;
@@ -33,6 +35,7 @@ export declare class Spinner {
     updateDomTimer?: NodeJS.Timeout;
     abortController: AbortController;
     config: SpinnerConfig;
+    backOffCount: number;
     pollingFunction: PollingFunction;
     onSuccess: VoidFunction;
     onError: VoidFunction;
@@ -53,6 +56,7 @@ export declare class Spinner {
     private updateDom;
     private cloneAndAddIfExists;
     private callPollingFunction;
+    private calculateBackoffTime;
     private createAriaLiveContainer;
     private updateAriaAlert;
 }

package/build/cjs/frontend/spinner/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../frontend-src/spinner/spinner.ts"],"names":[],"mappings":"AAAA,wBAAsB,UAAU,CAAC,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,iBAoBjJ;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;AAEhF,oBAAY,UAAU;IACpB,OAAO,IAAA;IACP,OAAO,IAAA;IACP,OAAO,IAAA;CACR;AAED,aAAK,YAAY;IACf,OAAO,IAAA;IACP,WAAW,IAAA;IACX,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED,KAAK,aAAa,GAAG;IACnB,2BAA2B,EAAE,MAAM,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,qBAAa,OAAO;IAClB,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,iBAAiB,EAAE,cAAc,CAAC;IAElC,wBAAwB,EAAE,cAAc,CAAC;IAEzC,KAAK,EAAE,YAAY,CAAwB;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,MAAM,EAAE,aAAa,CAAC;IAEtB,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;gBAGpB,YAAY,EAAE,cAAc,EAC5B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,YAAY;IA2CjB,IAAI;IAUV,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,SAAS;IAuBjB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iCAAiC,CAWvC;IAEF,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,SAAS,CAkDf;IAEF,OAAO,CAAC,mBAAmB;YASb,mBAAmB;IA8BjC,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,eAAe;CAWxB"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../frontend-src/spinner/spinner.ts"],"names":[],"mappings":"AAAA,wBAAsB,UAAU,CAAC,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,iBAoBjJ;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;AAEhF,oBAAY,UAAU;IACpB,OAAO,IAAA;IACP,OAAO,IAAA;IACP,OAAO,IAAA;IACP,OAAO,IAAA;CACR;AAED,aAAK,YAAY;IACf,OAAO,IAAA;IACP,WAAW,IAAA;IACX,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED,KAAK,aAAa,GAAG;IACnB,2BAA2B,EAAE,MAAM,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,qBAAa,OAAO;IAClB,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,iBAAiB,EAAE,cAAc,CAAC;IAElC,wBAAwB,EAAE,cAAc,CAAC;IAEzC,KAAK,EAAE,YAAY,CAAwB;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,MAAM,EAAE,aAAa,CAAC;IACtB,YAAY,EAAE,MAAM,CAAK;IAEzB,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;gBAGpB,YAAY,EAAE,cAAc,EAC5B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,YAAY;IA2CjB,IAAI;IAUV,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iCAAiC,CAWvC;IAEF,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,SAAS,CAkDf;IAEF,OAAO,CAAC,mBAAmB;YASb,mBAAmB;IA2CjC,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,eAAe;CAWxB"}

package/build/components/progress-button/template.njk

@@ -1,5 +1,15 @@
 {% set progressButton = params.translations %}
-
+<noscript>
+  <style>
+    .noscript {
+      border: #F3F3F3 3px solid;
+      padding-top: 28px;
+      padding-left: 12px;
+      padding-right: 12px;
+      margin-bottom: 12px;
+    }
+  </style>
+</noscript>
 
 {# Set classes for this component #}
 {%- set classNames = "govuk-button govuk-button--progress" -%}
@@ -23,98 +33,83 @@
 
 {% if params.isStartButton %}
   {% set iconHtml %}
-{#- The SVG needs `focusable="false"` so that Internet Explorer does not
+  {#- The SVG needs `focusable="false"` so that Internet Explorer does not
 treat it as an interactive element - without this it will be
 'focusable' when using the keyboard to navigate. #}
-<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
-  <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
-</svg>
+  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
+  </svg>
   {% endset %}
   {% set classNames = classNames + " govuk-button--start" %}
 {% endif %}
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
+{%- set commonAttributes %} data-module="govuk-button"{% for attribute, value in params.attributes %}
+  {{attribute}}="{{value}}"{% endfor %}
+{% if params.id %} id="{{ params.id }}"{% endif %}
+{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 
-{%- set buttonAttributes %}{% if params.name %} name="{{ params.name }}"{% endif %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{params.preventDoubleClick}}"{% endif %}{% endset %}
-
+{%- set buttonAttributes %}
+{% if params.name %} name="{{ params.name }}"{% endif %}
+{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}
+{% if params.preventDoubleClick !== undefined %} data-prevent-double-click="{{params.preventDoubleClick}}"{% endif %}{% endset %}
 
 {%- if element == 'a' %}
-<a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }}
-aria-live="assertive"
-onclick="
-    this.blur();
-    this.dataPreventDoubleClick = 'true';
-    this.classList.add('govuk-button--progress-loading');
-    this.innerText = '{{ progressButton.waitingText }}';
-    this.ariaLabel = '{{ progressButton.waitingText }}';
-    setTimeout(() => {
-      this.innerText = '{{ progressButton.longWaitingText }}';
-      this.ariaLabel = '{{ progressButton.longWaitingText }}';
-    }, 5000);
-    setTimeout(() => {
-      window.location.href = '{{ params.errorPage | default('#') }}';
-    }, 10000);
-  ">
-  {% if params.html %}
-    {{ params.html | safe }}
-  {% elseif params.text %}
-    {{ params.text | safe }}
-  {% else %}
-    {{ progressButton.text }}
-  {% endif %}
-  {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
-</a>
+  <div class="noscript">
+    <noscript>
+      <div class="govuk-body" >
+        {{ progressButton.noJavascriptMessage }}
+      </div>
+    </noscript>
+
+    <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {{- commonAttributes | safe }} class = "{{ classNames }}"
+aria-live="assertive" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+      {% if params.html %}
+        {{ params.html | safe }}
+      {% elseif params.text %}
+        {{ params.text | safe }}
+      {% else %}
+        {{ progressButton.text }}
+      {% endif %}
+      {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+    </a>
+  </div>
 
 {%- elseif element == 'button' %}
-<button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}
-aria-live="assertive"
-onclick="
-    this.blur();
-    this.dataPreventDoubleClick = 'true';
-    this.classList.add('govuk-button--progress-loading');
-    this.innerText = '{{ progressButton.waitingText }}';
-    this.ariaLabel = '{{ progressButton.waitingText }}';
-    setTimeout(() => {
-      this.innerText = '{{ progressButton.longWaitingText }}';
-      this.ariaLabel = '{{ progressButton.longWaitingText }}';
-    }, 5000);
-    setTimeout(() => {
-      window.location.href = '{{ params.errorPage | default('#') }}';
-    }, 10000);
-  ">
-  {% if params.html %}
-    {{ params.html | safe }}
-  {% elseif params.text %}
-    {{ params.text | safe }}
-  {% else %}
-    {{ progressButton.text }}
-  {% endif %}
-  {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+  <div class="noscript">
+    <noscript>
+      <div class="govuk-body" >
+        {{ progressButton.noJavascriptMessage }}
+      </div>
+    </noscript>
+
+    <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}"
+aria-live="assertive" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+      {% if params.html %}
+        {{ params.html | safe }}
+      {% elseif params.text %}
+        {{ params.text | safe }}
+      {% else %}
+        {{ progressButton.text }}
+      {% endif %}
+      {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
 
-</button>
+    </button>
+  </div>
 
 {%- elseif element == 'input' %}
-<input value="{{ params.value }}" type="{{ params.type if params.type else 'submit'}}"{{- buttonAttributes | safe }} {{- commonAttributes | safe }}
-  aria-live="assertive"
-  onclick="
-    this.blur();
-    this.dataPreventDoubleClick = 'true';
-    this.classList.add('govuk-button--progress-loading');
-    this.value = '{{ progressButton.waitingText }}';
-    this.ariaLabel = '{{ progressButton.waitingText }}';
-    setTimeout(() => {
-      this.value = '{{ progressButton.longWaitingText }}';
-      this.ariaLabel = '{{ progressButton.longWaitingText }}';
-    }, 5000);
-    setTimeout(() => {
-      window.location.href = '{{ params.errorPage | default('#') }}';
-    }, 10000);
-    return false;
-  "
->
-{{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
-{% endif %}
+  <div class="noscript">
+    <noscript>
+      <div class="govuk-body" >
+        {{ progressButton.noJavascriptMessage }}
+      </div>
+    </noscript>
+    <input value="{{ params.value }}" type="{{ params.type if params.type else 'submit'}}"{{- buttonAttributes | safe }} {{- commonAttributes | safe }} class = "{{ classNames }}"
+  aria-live="assertive" data-frontendui="di-progress-button" data-waiting-text="{{ progressButton.waitingText }}" data-long-waiting-text="{{ progressButton.longWaitingText }}" data-error-page="{{ params.errorPage | default('#') }}" >
+    {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+  </div>
+
+{% endif %}

package/build/components/spinner/README.md

@@ -25,6 +25,7 @@ For the spinner to perform correctly it requires the following:
 - An optional data attribute `data-ms-between-dom-update` to set the amount of time between updates to the spinner UI
 - An optional data attribute `data-ms-between-requests` to set the amount of time between calls to the `pollingFunction`
 - An optional data attribute `data-hide-spinner-on-error` to hide the spinner graphic on error (defaults to false)
+- An optional data attribute `data-max-backoff-tries` to set the number of times in a row the polling function can return `backoff` before the error content is displayed (defaults to 3)
 - An optional data attribute `aria-alert-completion-text`. If supplied this text will be set as an aria alert if the spinner completes successfully
 
 For example:
@@ -36,6 +37,7 @@ For example:
      data-ms-between-dom-update="1000"
      data-ms-between-requests="2000"
      data-hide-spinner-on-error="true"
+     data-max-backoff-tries="3"
      data-aria-alert-completion-text="Task completed successfully, you may now continue">
   <div id="no-js-content"><p class="centre govuk-body">JS is disabled</p></div>
   <div id="wait-content" style="display:none"><p class="centre govuk-body">Waiting</p></div>
@@ -70,6 +72,9 @@ If a call to the polling function returns `success` the spinner will stop animat
 If a call to the polling function returns `failure` the spinner will stop animating, display the `error-content` content, and call the `errorFunction` (if specified)
 If the spinner waits past the `long-wait` duration while the polling function keeps returning `pending` the spinner will display the `long-wait-content` content
 If the spinner waits past the `abort` duration while the polling function keeps returning `pending` the spinner will stop animating, display the `error-content` content, and call the `errorFunction` (if specified)
+The polling function can optionally return `backoff` if it should be tried again but after a delay (e.g. to account for network instability). On receiving `backoff` the spinner will exponentially increase the time before the
+next call to the polling function. If the polling function returns `backoff` more times than the `max-backoff-tries` value in a row then the final call is treated as if had returned `failure` instead. If a call to the polling
+function returns `pending` then the backoff counter resets. 
 
 ### Page refreshes
 

package/build/esm/backend/index.d.ts

@@ -95,6 +95,7 @@ export declare const frontendUiTranslationEn: {
         text: string;
         waitingText: string;
         longWaitingText: string;
+        noJavascriptMessage: string;
     };
 };
 export declare const frontendUiTranslationCy: {
@@ -158,6 +159,7 @@ export declare const frontendUiTranslationCy: {
         text: string;
         waitingText: string;
         longWaitingText: string;
+        noJavascriptMessage: string;
     };
 };
 export {};

package/build/esm/backend/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQ1D,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QACL,IAAI,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;SAAE,CAAC;KAClC,CAAC;CACH;AAED,UAAU,cAAe,SAAQ,OAAO;IACtC,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAGD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAER,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAaR,eAAO,MAAM,yBAAyB,GAAI,cAAc,OAAO,OAAO,SAerE,CAAC;AAGF,eAAO,MAAM,kCAAkC,GAC7C,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,MAAM,YAAY,SAUnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,UAU3D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,iBAkBhE;AAED,eAAO,MAAM,mBAAmB,GAC9B,cAAc,OAAO,OAAO,EAC5B,WAAW,MAAM,SASlB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EACd,WAAW,MAAM,KAChB,MAAM,CAAC,MAAM,EAAE,OAAO,CAuBxB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgB,CAAC;AACrD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQ1D,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QACL,IAAI,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;SAAE,CAAC;KAClC,CAAC;CACH;AAED,UAAU,cAAe,SAAQ,OAAO;IACtC,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,MAAM,EAAE;QACN,YAAY,EAAE,OAAO,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAGD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,cAAc,EACnB,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAER,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,YAAY,EACjB,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,YAAY,GACjB,IAAI,CAAC;AAaR,eAAO,MAAM,yBAAyB,GAAI,cAAc,OAAO,OAAO,SAerE,CAAC;AAGF,eAAO,MAAM,kCAAkC,GAC7C,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,MAAM,YAAY,SAUnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,UAU3D;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,iBAkBhE;AAED,eAAO,MAAM,mBAAmB,GAC9B,cAAc,OAAO,OAAO,EAC5B,WAAW,MAAM,SASlB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EACd,WAAW,MAAM,KAChB,MAAM,CAAC,MAAM,EAAE,OAAO,CAuBxB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgB,CAAC;AACrD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgB,CAAC"}

package/build/esm/backend/index.js

@@ -74,7 +74,8 @@ var skipLink$1 = {
 var progressButton$1 = {
 	text: "Parhau",
 	waitingText: "Aros",
-	longWaitingText: "Parhau i aros"
+	longWaitingText: "Parhau i aros",
+	noJavascriptMessage: "Gall gymryd hyd at 10 eiliad i barhau i'r dudalen nesaf. Ar ôl i chi barhau, peidiwch ag ail-lwytho na chau'r dudalen hon."
 };
 var translationCy = {
 	cookieBanner: cookieBanner$1,
@@ -159,7 +160,8 @@ var skipLink = {
 var progressButton = {
 	text: "Continue",
 	waitingText: "Wait",
-	longWaitingText: "Keep waiting"
+	longWaitingText: "Keep waiting",
+	noJavascriptMessage: "It can take up to 10 seconds to continue to the next page. After you continue, do not reload or close this page."
 };
 var translationEn = {
 	cookieBanner: cookieBanner,

package/build/esm/frontend/index.d.ts

@@ -1,3 +1,4 @@
 export { useSpinner, PollResult } from "./spinner/spinner";
 export type { PollingFunction } from "./spinner/spinner";
+export { initialiseProgressButtons } from "./progress-button/progress-button";
 //# sourceMappingURL=index.d.ts.map

package/build/esm/frontend/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../frontend-src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../frontend-src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC"}

package/build/esm/frontend/index.js

@@ -22,6 +22,7 @@ var PollResult;
     PollResult[PollResult["Success"] = 0] = "Success";
     PollResult[PollResult["Failure"] = 1] = "Failure";
     PollResult[PollResult["Pending"] = 2] = "Pending";
+    PollResult[PollResult["Backoff"] = 3] = "Backoff";
 })(PollResult || (PollResult = {}));
 var SpinnerState;
 (function (SpinnerState) {
@@ -33,6 +34,7 @@ var SpinnerState;
 class Spinner {
     constructor(domContainer, pollingFunction, onSuccess, onError) {
         this.state = SpinnerState.Waiting;
+        this.backOffCount = 0;
         this.handleAbort = () => {
             this.abortController.abort();
         };
@@ -170,6 +172,9 @@ class Spinner {
             hideSpinnerOnError: element.dataset.hideSpinnerOnError
                 ? (element.dataset.hideSpinnerOnError === 'true')
                 : false,
+            maxBackoffTries: element.dataset.maxBackoffTries
+                ? parseInt(element.dataset.maxBackoffTries)
+                : 3,
         };
     }
     createAbortController() {
@@ -228,12 +233,24 @@ class Spinner {
                 this.reflectError();
             }
             else if (!this.hasCompleted()) {
+                let timeToNextPoll = this.config.msBetweenRequests;
+                if (response === PollResult.Backoff) {
+                    this.backOffCount++;
+                    if (this.backOffCount > this.config.maxBackoffTries) {
+                        this.reflectError();
+                        return;
+                    }
+                    timeToNextPoll = this.calculateBackoffTime(this.backOffCount);
+                }
+                else {
+                    this.backOffCount = 0;
+                }
                 setTimeout(async () => {
                     if (Date.now() - initTime >= this.config.msBeforeAbort) {
                         return;
                     }
                     await this.callPollingFunction(initTime);
-                }, this.config.msBetweenRequests);
+                }, timeToNextPoll);
             }
         })
             .catch((error) => {
@@ -246,6 +263,10 @@ class Spinner {
             this.updateDom();
         });
     }
+    calculateBackoffTime(backOffCount) {
+        const extraDelay = Math.pow(2, backOffCount - 2) * this.config.msBetweenRequests;
+        return this.config.msBetweenRequests + extraDelay;
+    }
     createAriaLiveContainer() {
         // For the Aria alert to work reliably we need to create its container once and then update the contents
         // https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
@@ -266,4 +287,108 @@ class Spinner {
     }
 }
 
-export { PollResult, useSpinner };
+function initialiseProgressButtons(document = window.document) {
+    const progressButtons = Array.prototype.slice.call(document.querySelectorAll('[data-frontendui="di-progress-button"]'));
+    function findClosestForm(element) {
+        let el = element;
+        while (el && el.nodeName !== 'FORM') {
+            el = el.parentElement;
+        }
+        return el;
+    }
+    progressButtons.forEach(function (button) {
+        const form = findClosestForm(button);
+        let isSubmitting = false;
+        button.addEventListener('click', function (event) {
+            if (isSubmitting) {
+                event.preventDefault();
+                return;
+            }
+            const waitingText = button.getAttribute('data-waiting-text');
+            const longWaitingText = button.getAttribute('data-long-waiting-text');
+            const errorPage = button.getAttribute('data-error-page');
+            const isInput = button.tagName.toLowerCase() === 'input';
+            if (!waitingText || !longWaitingText || !errorPage) {
+                console.error('Progress button is missing required data attributes.');
+                return;
+            }
+            isSubmitting = true;
+            // Always handle the button click, regardless of form presence
+            handleProgressButtonClick(button, waitingText, longWaitingText, errorPage, isInput);
+            // If no form, we're done. If there is a form, the form submit handler will take over
+            if (!form) {
+                return;
+            }
+            // For form buttons, let the click propagate to trigger form submission
+        });
+        if (form) {
+            form.addEventListener('submit', function (event) {
+                // The button click handler has already set isSubmitting and handled the button state
+                if (isSubmitting) {
+                    // Allow the first submission, prevent subsequent ones
+                    if (event.target === form && event.submitter === button) {
+                        return; // Allow the first submission to proceed
+                    }
+                    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
+                    return;
+                }
+                // If the form is submitted through another method (not our button),
+                // prevent double submission but don't show progress state
+                isSubmitting = true;
+            });
+        }
+    });
+}
+function handleProgressButtonClick(element, waitingText, longWaitingText, errorPage, isInput) {
+    var originalText = isInput && element instanceof HTMLInputElement ? element.value : element.innerText;
+    if (typeof element.blur === 'function') {
+        element.blur();
+    }
+    element.setAttribute('data-prevent-double-click', 'true');
+    var classes = element.className.split(' ');
+    if (classes.indexOf('govuk-button--progress-loading') === -1) {
+        classes.push('govuk-button--progress-loading');
+        element.className = classes.join(' ');
+    }
+    if (isInput && element instanceof HTMLInputElement) {
+        element.value = waitingText;
+    }
+    else {
+        element.innerText = waitingText;
+    }
+    element.setAttribute('aria-label', waitingText);
+    var longWaitTimeout = window.setTimeout(function () {
+        if (isInput && element instanceof HTMLInputElement) {
+            element.value = longWaitingText;
+        }
+        else {
+            element.innerText = longWaitingText;
+        }
+        element.setAttribute('aria-label', longWaitingText);
+    }, 5000);
+    var errorTimeout = window.setTimeout(function () {
+        window.location.href = errorPage;
+    }, 10000);
+    function resetButton() {
+        var classes = element.className.split(' ');
+        var loadingIndex = classes.indexOf('govuk-button--progress-loading');
+        if (loadingIndex !== -1) {
+            classes.splice(loadingIndex, 1);
+            element.className = classes.join(' ');
+        }
+        element.setAttribute('data-prevent-double-click', 'false');
+        if (isInput && element instanceof HTMLInputElement) {
+            element.value = originalText;
+        }
+        else {
+            element.innerText = originalText;
+        }
+        element.setAttribute('aria-label', originalText);
+        window.clearTimeout(errorTimeout);
+        window.clearTimeout(longWaitTimeout);
+    }
+    element.resetProgressButton = resetButton;
+    return resetButton;
+}
+
+export { PollResult, initialiseProgressButtons, useSpinner };

package/build/esm/frontend/progress-button/progress-button.d.ts

@@ -0,0 +1,2 @@
+export declare function initialiseProgressButtons(document?: Document): void;
+//# sourceMappingURL=progress-button.d.ts.map

package/build/esm/frontend/progress-button/progress-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../../frontend-src/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CAAC,QAAQ,GAAE,QAA0B,QAgE7E"}

package/build/esm/frontend/spinner/spinner.d.ts

@@ -3,7 +3,8 @@ export type PollingFunction = (abortSignal: AbortSignal) => Promise<PollResult>;
 export declare enum PollResult {
     Success = 0,
     Failure = 1,
-    Pending = 2
+    Pending = 2,
+    Backoff = 3
 }
 declare enum SpinnerState {
     Waiting = 0,
@@ -18,6 +19,7 @@ type SpinnerConfig = {
     msBetweenDomUpdate: number;
     ariaAlertCompletionText?: string;
     hideSpinnerOnError: boolean;
+    maxBackoffTries: number;
 };
 export declare class Spinner {
     container: HTMLDivElement;
@@ -33,6 +35,7 @@ export declare class Spinner {
     updateDomTimer?: NodeJS.Timeout;
     abortController: AbortController;
     config: SpinnerConfig;
+    backOffCount: number;
     pollingFunction: PollingFunction;
     onSuccess: VoidFunction;
     onError: VoidFunction;
@@ -53,6 +56,7 @@ export declare class Spinner {
     private updateDom;
     private cloneAndAddIfExists;
     private callPollingFunction;
+    private calculateBackoffTime;
     private createAriaLiveContainer;
     private updateAriaAlert;
 }

package/build/esm/frontend/spinner/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../frontend-src/spinner/spinner.ts"],"names":[],"mappings":"AAAA,wBAAsB,UAAU,CAAC,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,iBAoBjJ;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;AAEhF,oBAAY,UAAU;IACpB,OAAO,IAAA;IACP,OAAO,IAAA;IACP,OAAO,IAAA;CACR;AAED,aAAK,YAAY;IACf,OAAO,IAAA;IACP,WAAW,IAAA;IACX,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED,KAAK,aAAa,GAAG;IACnB,2BAA2B,EAAE,MAAM,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,qBAAa,OAAO;IAClB,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,iBAAiB,EAAE,cAAc,CAAC;IAElC,wBAAwB,EAAE,cAAc,CAAC;IAEzC,KAAK,EAAE,YAAY,CAAwB;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,MAAM,EAAE,aAAa,CAAC;IAEtB,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;gBAGpB,YAAY,EAAE,cAAc,EAC5B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,YAAY;IA2CjB,IAAI;IAUV,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,SAAS;IAuBjB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iCAAiC,CAWvC;IAEF,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,SAAS,CAkDf;IAEF,OAAO,CAAC,mBAAmB;YASb,mBAAmB;IA8BjC,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,eAAe;CAWxB"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../frontend-src/spinner/spinner.ts"],"names":[],"mappings":"AAAA,wBAAsB,UAAU,CAAC,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,iBAoBjJ;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;AAEhF,oBAAY,UAAU;IACpB,OAAO,IAAA;IACP,OAAO,IAAA;IACP,OAAO,IAAA;IACP,OAAO,IAAA;CACR;AAED,aAAK,YAAY;IACf,OAAO,IAAA;IACP,WAAW,IAAA;IACX,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED,KAAK,aAAa,GAAG;IACnB,2BAA2B,EAAE,MAAM,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,qBAAa,OAAO;IAClB,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,iBAAiB,EAAE,cAAc,CAAC;IAElC,wBAAwB,EAAE,cAAc,CAAC;IAEzC,KAAK,EAAE,YAAY,CAAwB;IAC3C,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,MAAM,EAAE,aAAa,CAAC;IACtB,YAAY,EAAE,MAAM,CAAK;IAEzB,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;gBAGpB,YAAY,EAAE,cAAc,EAC5B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,YAAY;IA2CjB,IAAI;IAUV,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iCAAiC,CAWvC;IAEF,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,SAAS,CAkDf;IAEF,OAAO,CAAC,mBAAmB;YASb,mBAAmB;IA2CjC,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,eAAe;CAWxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govuk-one-login/frontend-ui",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "",
   "main": "build/cjs/backend/index.cjs",
   "module": "build/esm/backend/index.js",
@@ -22,7 +22,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/govuk-one-login/govuk-one-login-frontend.git"
+    "url": "git+https://github.com/govuk-one-login/govuk-one-login-frontend.git",
+    "directory": "packages/frontend-ui"
   },
   "keywords": [
     "govuk-one-login",