Release v3.9.0

[hannalaakso]

3.9.0 (Feature release)

New features

Add a prefix or suffix to a text input component

You can now use prefixes and suffixes in the text input component to help users enter things like currencies and measurements.

This was added in pull request #1816: Add input prefix and suffix. Thanks to @simonwhatley and the GOV.UK Coronavirus Services Team.

Test if your HTML matches GOV.UK Frontend

You can now use our test fixtures to check you're outputting the same HTML that GOV.UK Frontend uses.

This was added in pull request #1925: Generate fixtures.json files for components on build:package. Thanks to everyone who fed back on our test fixtures proposal.

Customise navigation in the header component

If you use the header component with navigation, you can now:

• customise the section's aria-label text
• add navigation items without links

Customise aria-label text

You can use the new:

• navigationLabel option to set the aria-label text for the navigation section
• menuButtonLabel option to set the aria-label text for the button that hides or shows the navigation section on mobile

For example:

{{ govukHeader({
    navigationLabel: "Custom navigation section aria-label",
    menuButtonLabel: "Custom menu button aria-label"
}) }}

The default labels are now:

• Navigation menu for navigationLabel
• Show or hide navigation menu for menuButtonLabel

This was added in pull requests:

• #1905: Set navigation and mobile menu labels of the header component with new options
• #1943: Change header menu button label - thanks to @domoscargin for raising this issue

Add navigation items without links

To add a navigation item without a link, use the text or html option to add the item but do not use the href option.

For example:

{{ govukHeader({
    navigation: [
    {
      html: "<form method='post' action='url.com'>
              <input type='submit' class='app-logout-button-style' value='Log out' />
            </form>"
    }
  ]
}) }}

This was added in pull request #1921: Make it possible to exclude link from header navigation item.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

• #1918: Add new brand colour for FCDO - thanks to @deborahchua and @beccapearce for contributing this
• #1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads
• #1947 Add print styles for the panel component

Fixes #1944

[36degrees]

Changes to dist

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
index 0603aab1..cc1c8c91 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-3.8.1
+3.9.0
diff --git a/dist/govuk-frontend-3.8.1.min.css b/dist/govuk-frontend-3.9.0.min.css
similarity index 45%
rename from dist/govuk-frontend-3.8.1.min.css
rename to dist/govuk-frontend-3.9.0.min.css
index 4c3ef12e..7bc4b3da 100644
--- a/dist/govuk-frontend-3.8.1.min.css
+++ b/dist/govuk-frontend-3.9.0.min.css
@@ -2786,6 +2786,127 @@
     max-width: 5.4ex
 }
 
+.govuk-input__wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex
+}
+
+.govuk-input__wrapper .govuk-input {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto
+}
+
+.govuk-input__wrapper .govuk-input:focus {
+    z-index: 1
+}
+
+@media (max-width:19.99em) {
+    .govuk-input__wrapper {
+        display: block
+    }
+
+    .govuk-input__wrapper .govuk-input {
+        max-width: 100%
+    }
+}
+
+.govuk-input__prefix,
+.govuk-input__suffix {
+    font-family: GDS Transport, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 40px;
+    min-width: 2.5rem;
+    height: 40px;
+    height: 2.5rem;
+    padding: 5px;
+    border: 2px solid #0b0c0c;
+    background-color: #f3f2f1;
+    text-align: center;
+    white-space: nowrap;
+    cursor: default;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto
+}
+
+@media print {
+
+    .govuk-input__prefix,
+    .govuk-input__suffix {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-input__prefix,
+    .govuk-input__suffix {
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.31579
+    }
+}
+
+@media print {
+
+    .govuk-input__prefix,
+    .govuk-input__suffix {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+@media (max-width:40.0525em) {
+
+    .govuk-input__prefix,
+    .govuk-input__suffix {
+        line-height: 1.6
+    }
+}
+
+@media (max-width:19.99em) {
+
+    .govuk-input__prefix,
+    .govuk-input__suffix {
+        display: block;
+        height: 100%;
+        white-space: normal
+    }
+}
+
+@media (max-width:19.99em) {
+    .govuk-input__prefix {
+        border-bottom: 0
+    }
+}
+
+@media (min-width:20em) {
+    .govuk-input__prefix {
+        border-right: 0
+    }
+}
+
+@media (max-width:19.99em) {
+    .govuk-input__suffix {
+        border-top: 0
+    }
+}
+
+@media (min-width:20em) {
+    .govuk-input__suffix {
+        border-left: 0
+    }
+}
+
 .govuk-date-input {
     font-size: 0
 }
@@ -3902,6 +4023,14 @@ only screen and (min-resolution:192dpi) {
     background: #00703c
 }
 
+@media print {
+    .govuk-panel--confirmation {
+        border-color: currentColor;
+        color: #000;
+        background: none
+    }
+}
+
 .govuk-panel__title {
     margin-top: 0;
     margin-bottom: 30px;
diff --git a/dist/govuk-frontend-3.8.1.min.js b/dist/govuk-frontend-3.9.0.min.js
similarity index 48%
rename from dist/govuk-frontend-3.8.1.min.js
rename to dist/govuk-frontend-3.9.0.min.js
index a94361a8..912b2410 100644
--- a/dist/govuk-frontend-3.8.1.min.js
+++ b/dist/govuk-frontend-3.9.0.min.js
@@ -11,7 +11,7 @@
     function n(t) {
         this.$module = t, this.moduleId = t.getAttribute("id"), this.$sections = t.querySelectorAll(".govuk-accordion__section"), this.$openAllButton = "", this.browserSupportsSessionStorage = e.checkForSessionStorage(), this.controlsClass = "govuk-accordion__controls", this.openAllClass = "govuk-accordion__open-all", this.iconClass = "govuk-accordion__icon", this.sectionHeaderClass = "govuk-accordion__section-header", this.sectionHeaderFocusedClass = "govuk-accordion__section-header--focused", this.sectionHeadingClass = "govuk-accordion__section-heading", this.sectionSummaryClass = "govuk-accordion__section-summary", this.sectionButtonClass = "govuk-accordion__section-button", this.sectionExpandedClass = "govuk-accordion__section--expanded"
     }(function(t) {
-        var a, l, c, u;
+        var a, c, l, u;
         "defineProperty" in Object && function() {
             try {
                 return Object.defineProperty({}, "test", {
@@ -20,7 +20,7 @@
             } catch (t) {
                 return !1
             }
-        }() || (a = Object.defineProperty, l = Object.prototype.hasOwnProperty("__defineGetter__"), c = "Getters & setters cannot be defined on this javascript engine", u = "A property cannot both have accessors and be writable or have a value", Object.defineProperty = function(t, e, n) {
+        }() || (a = Object.defineProperty, c = Object.prototype.hasOwnProperty("__defineGetter__"), l = "Getters & setters cannot be defined on this javascript engine", u = "A property cannot both have accessors and be writable or have a value", Object.defineProperty = function(t, e, n) {
             if (a && (t === window || t === document || t === Element.prototype || t instanceof Element)) return a(t, e, n);
             if (null === t || !(t instanceof Object || "object" == typeof t)) throw new TypeError("Object.defineProperty called on non-object");
             if (!(n instanceof Object)) throw new TypeError("Property description must be an object");
@@ -30,13 +30,13 @@
                 s = "set" in n && typeof n.set;
             if (r) {
                 if ("function" !== r) throw new TypeError("Getter must be a function");
-                if (!l) throw new TypeError(c);
+                if (!c) throw new TypeError(l);
                 if (i) throw new TypeError(u);
                 Object.__defineGetter__.call(t, o, n.get)
             } else t[o] = n.value;
             if (s) {
                 if ("function" !== s) throw new TypeError("Setter must be a function");
-                if (!l) throw new TypeError(c);
+                if (!c) throw new TypeError(l);
                 if (i) throw new TypeError(u);
                 Object.__defineSetter__.call(t, o, n.set)
             }
@@ -52,18 +52,18 @@
                         r = t.prototype,
                         s = function s() {},
                         a = i.toString,
-                        l = "function" == typeof Symbol && "symbol" == typeof Symbol.toStringTag,
-                        c = Function.prototype.toString,
+                        c = "function" == typeof Symbol && "symbol" == typeof Symbol.toStringTag,
+                        l = Function.prototype.toString,
                         u = function u(t) {
                             try {
-                                return c.call(t), !0
+                                return l.call(t), !0
                             } catch (e) {
                                 return !1
                             }
                         };
                     n = function n(t) {
                         if ("function" != typeof t) return !1;
-                        if (l) return u(t);
+                        if (c) return u(t);
                         var e = a.call(t);
                         return "[object Function]" === e || "[object GeneratorFunction]" === e
                     };
@@ -102,8 +102,8 @@
                 return function(i, r) {
                     var s = this,
                         a = [],
-                        l = {},
-                        c = 0,
+                        c = {},
+                        l = 0,
                         t = 0,
                         e = function(t) {
                             n(s, t, function() {
@@ -111,8 +111,8 @@
                             }, !1)
                         },
                         u = function() {
-                            if (t <= c)
-                                for (; t < c; ++t) e(t)
+                            if (t <= l)
+                                for (; t < l; ++t) e(t)
                         },
                         d = function() {
                             var t, e, n = arguments,
@@ -120,28 +120,28 @@
                             if (n.length)
                                 for (e = 0; e < n.length; ++e)
                                     if (o.test(n[e])) throw (t = new SyntaxError('String "' + n[e] + '" contains an invalid character')).code = 5, t.name = "InvalidCharacterError", t;
-                            for ("" === (a = "object" == typeof i[r] ? ("" + i[r].baseVal).replace(/^\s+|\s+$/g, "").split(o) : ("" + i[r]).replace(/^\s+|\s+$/g, "").split(o))[0] && (a = []), l = {}, e = 0; e < a.length; ++e) l[a[e]] = !0;
-                            c = a.length, u()
+                            for ("" === (a = "object" == typeof i[r] ? ("" + i[r].baseVal).replace(/^\s+|\s+$/g, "").split(o) : ("" + i[r]).replace(/^\s+|\s+$/g, "").split(o))[0] && (a = []), c = {}, e = 0; e < a.length; ++e) c[a[e]] = !0;
+                            l = a.length, u()
                         };
                     return d(), n(s, "length", function() {
-                        return d(), c
+                        return d(), l
                     }), s.toLocaleString = s.toString = function() {
                         return d(), a.join(" ")
                     }, s.item = function(t) {
                         return d(), a[t]
                     }, s.contains = function(t) {
-                        return d(), !!l[t]
+                        return d(), !!c[t]
                     }, s.add = function() {
                         d.apply(s, t = arguments);
-                        for (var t, e, n = 0, o = t.length; n < o; ++n) l[e = t[n]] || (a.push(e), l[e] = !0);
-                        c !== a.length && (c = a.length >>> 0, "object" == typeof i[r] ? i[r].baseVal = a.join(" ") : i[r] = a.join(" "), u())
+                        for (var t, e, n = 0, o = t.length; n < o; ++n) c[e = t[n]] || (a.push(e), c[e] = !0);
+                        l !== a.length && (l = a.length >>> 0, "object" == typeof i[r] ? i[r].baseVal = a.join(" ") : i[r] = a.join(" "), u())
                     }, s.remove = function() {
                         d.apply(s, t = arguments);
-                        for (var t, e = {}, n = 0, o = []; n < t.length; ++n) e[t[n]] = !0, delete l[t[n]];
+                        for (var t, e = {}, n = 0, o = []; n < t.length; ++n) e[t[n]] = !0, delete c[t[n]];
                         for (n = 0; n < a.length; ++n) e[a[n]] || o.push(a[n]);
-                        c = (a = o).length >>> 0, "object" == typeof i[r] ? i[r].baseVal = a.join(" ") : i[r] = a.join(" "), u()
+                        l = (a = o).length >>> 0, "object" == typeof i[r] ? i[r].baseVal = a.join(" ") : i[r] = a.join(" "), u()
                     }, s.toggle = function(t, e) {
-                        return d.apply(s, [t]), o !== e ? e ? (s.add(t), !0) : (s.remove(t), !1) : l[t] ? (s.remove(t), !1) : (s.add(t), !0)
+                        return d.apply(s, [t]), o !== e ? e ? (s.add(t), !0) : (s.remove(t), !1) : c[t] ? (s.remove(t), !1) : (s.add(t), !0)
                     }, s
                 }
             }()), "classList" in (n = document.createElement("span")) && (n.classList.toggle("x", !1), n.classList.contains("x") && (n.classList.constructor.prototype.toggle = function(t) {
@@ -177,31 +177,31 @@
                     var t, e = document.appendChild(document.createElement("body")),
                         n = e.appendChild(document.createElement("iframe")).contentWindow.document,
                         a = Element.prototype = n.appendChild(n.createElement("*")),
-                        l = {},
-                        c = function(t, e) {
+                        c = {},
+                        l = function(t, e) {
                             var n, o, i, r = t.childNodes || [],
                                 s = -1;
                             if (1 === t.nodeType && t.constructor !== Element)
-                                for (n in t.constructor = Element, l) o = l[n], t[n] = o;
-                            for (; i = e && r[++s];) c(i, e);
+                                for (n in t.constructor = Element, c) o = c[n], t[n] = o;
+                            for (; i = e && r[++s];) l(i, e);
                             return t
                         },
                         u = document.getElementsByTagName("*"),
                         o = document.createElement,
                         i = 100;
                     a.attachEvent("onpropertychange", function(t) {
-                        for (var e, n = t.propertyName, o = !l.hasOwnProperty(n), i = a[n], r = l[n], s = -1; e = u[++s];) 1 === e.nodeType && (!o && e[n] !== r || (e[n] = i));
-                        l[n] = i
+                        for (var e, n = t.propertyName, o = !c.hasOwnProperty(n), i = a[n], r = c[n], s = -1; e = u[++s];) 1 === e.nodeType && (!o && e[n] !== r || (e[n] = i));
+                        c[n] = i
                     }), a.constructor = Element, a.hasAttribute || (a.hasAttribute = function(t) {
                         return null !== this.getAttribute(t)
                     }), r() || (document.onreadystatechange = r, t = setInterval(r, 25)), document.createElement = function(t) {
                         var e = o(String(t).toLowerCase());
-                        return c(e)
+                        return l(e)
                     }, document.removeChild(e)
                 } else window.HTMLElement = window.Element;
 
                 function r() {
-                    return i-- || clearTimeout(t), !(!document.body || document.body.prototype || !/(complete|interactive)/.test(document.readyState)) && (c(document, !0), t && document.body.prototype && clearTimeout(t), !!document.body.prototype)
+                    return i-- || clearTimeout(t), !(!document.body || document.body.prototype || !/(complete|interactive)/.test(document.readyState)) && (l(document, !0), t && document.body.prototype && clearTimeout(t), !!document.body.prototype)
                 }
             }()
         }.call("object" == typeof window && window || "object" == typeof self && self || "object" == typeof global && global || {}),
@@ -220,19 +220,19 @@
                 } catch (e) {
                     u = !1
                 }
-                var h = function(t, l, c) {
-                    d(t.prototype, l, function() {
+                var h = function(t, c, l) {
+                    d(t.prototype, c, function() {
                         var t, e = this,
-                            n = "__defineGetter__DEFINE_PROPERTY" + l;
+                            n = "__defineGetter__DEFINE_PROPERTY" + c;
                         if (e[n]) return t;
                         if (!(e[n] = !0) === u) {
                             for (var o, i = h.mirror || document.createElement("div"), r = i.childNodes, s = r.length, a = 0; a < s; ++a)
                                 if (r[a]._R === e) {
                                     o = r[a];
                                     break
-                                } o = o || i.appendChild(document.createElement("div")), t = DOMTokenList.call(o, e, c)
-                        } else t = new DOMTokenList(e, c);
-                        return d(e, l, function() {
+                                } o = o || i.appendChild(document.createElement("div")), t = DOMTokenList.call(o, e, l)
+                        } else t = new DOMTokenList(e, l);
+                        return d(e, c, function() {
                             return t
                         }), delete e[n], t
                     }, !0)
@@ -262,16 +262,16 @@
                 s = document.createElement("button");
             s.setAttribute("type", "button"), s.setAttribute("id", this.moduleId + "-heading-" + (t + 1)), s.setAttribute("aria-controls", this.moduleId + "-content-" + (t + 1));
             for (var a = 0; a < o.attributes.length; a++) {
-                var l = o.attributes.item(a);
-                s.setAttribute(l.nodeName, l.nodeValue)
+                var c = o.attributes.item(a);
+                s.setAttribute(c.nodeName, c.nodeValue)
             }
             s.addEventListener("focusin", function(t) {
                 e.classList.contains(n.sectionHeaderFocusedClass) || (e.className += " " + n.sectionHeaderFocusedClass)
             }), s.addEventListener("blur", function(t) {
                 e.classList.remove(n.sectionHeaderFocusedClass)
             }), null != r && s.setAttribute("aria-describedby", this.moduleId + "-summary-" + (t + 1)), s.innerHTML = o.innerHTML, i.removeChild(o), i.appendChild(s);
-            var c = document.createElement("span");
-            c.className = this.iconClass, c.setAttribute("aria-hidden", "true"), s.appendChild(c)
+            var l = document.createElement("span");
+            l.className = this.iconClass, l.setAttribute("aria-hidden", "true"), s.appendChild(l)
         }, n.prototype.onSectionToggle = function(t) {
             var e = this.isExpanded(t);
             this.setExpanded(!e, t), this.storeState(t)
@@ -455,12 +455,12 @@
         this.$module = t, this.$inputs = t.querySelectorAll('input[type="checkbox"]')
     }
 
-    function l(t) {
+    function c(t) {
         this.$module = t
     }
 
-    function c(t) {
-        this.$module = t
+    function l(t) {
+        this.$module = t, this.$menuButton = t && t.querySelector(".govuk-js-header-toggle"), this.$menu = this.$menuButton && t.querySelector("#" + this.$menuButton.getAttribute("aria-controls"))
     }
 
     function u(t) {
@@ -544,8 +544,8 @@
                 i = this.maxLength,
                 r = i - o;
             o < i * (e.threshold ? e.threshold : 0) / 100 ? (n.classList.add("govuk-character-count__message--disabled"), n.setAttribute("aria-hidden", !0)) : (n.classList.remove("govuk-character-count__message--disabled"), n.removeAttribute("aria-hidden")), r < 0 ? (t.classList.add("govuk-textarea--error"), n.classList.remove("govuk-hint"), n.classList.add("govuk-error-message")) : (t.classList.remove("govuk-textarea--error"), n.classList.remove("govuk-error-message"), n.classList.add("govuk-hint"));
-            var s, a, l = "character";
-            e.maxwords && (l = "word"), l += -1 == r || 1 == r ? "" : "s", s = r < 0 ? "too many" : "remaining", a = Math.abs(r), n.innerHTML = "You have " + a + " " + l + " " + s
+            var s, a, c = "character";
+            e.maxwords && (c = "word"), c += -1 == r || 1 == r ? "" : "s", s = r < 0 ? "too many" : "remaining", a = Math.abs(r), n.innerHTML = "You have " + a + " " + c + " " + s
         }, s.prototype.handleFocus = function() {
             this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1e3)
         }, s.prototype.handleBlur = function() {
@@ -584,13 +584,13 @@
                 }
                 return null
             })
-        }.call("object" == typeof window && window || "object" == typeof self && self || "object" == typeof global && global || {}), l.prototype.init = function() {
+        }.call("object" == typeof window && window || "object" == typeof self && self || "object" == typeof global && global || {}), c.prototype.init = function() {
             var t = this.$module;
             t && (t.focus(), t.addEventListener("click", this.handleClick.bind(this)))
-        }, l.prototype.handleClick = function(t) {
+        }, c.prototype.handleClick = function(t) {
             var e = t.target;
             this.focusTarget(e) && t.preventDefault()
-        }, l.prototype.focusTarget = function(t) {
+        }, c.prototype.focusTarget = function(t) {
             if ("A" !== t.tagName || !1 === t.href) return !1;
             var e = this.getFragmentFromUrl(t.href),
                 n = document.getElementById(e);
@@ -599,9 +599,9 @@
             return !!o && (o.scrollIntoView(), n.focus({
                 preventScroll: !0
             }), !0)
-        }, l.prototype.getFragmentFromUrl = function(t) {
+        }, c.prototype.getFragmentFromUrl = function(t) {
             return -1 !== t.indexOf("#") && t.split("#").pop()
-        }, l.prototype.getAssociatedLegendOrLabel = function(t) {
+        }, c.prototype.getAssociatedLegendOrLabel = function(t) {
             var e = t.closest("fieldset");
             if (e) {
                 var n = e.getElementsByTagName("legend");
@@ -615,19 +615,13 @@
                 }
             }
             return document.querySelector("label[for='" + t.getAttribute("id") + "']") || t.closest("label")
-        }, c.prototype.init = function() {
-            var t = this.$module;
-            if (t) {
-                var e = t.querySelector(".govuk-js-header-toggle");
-                e && e.addEventListener("click", this.handleClick.bind(this))
-            }
-        }, c.prototype.toggleClass = function(t, e) {
-            0 < t.className.indexOf(e) ? t.className = t.className.replace(" " + e, "") : t.className += " " + e
-        }, c.prototype.handleClick = function(t) {
-            var e = this.$module,
-                n = t.target || t.srcElement,
-                o = e.querySelector("#" + n.getAttribute("aria-controls"));
-            n && o && (this.toggleClass(o, "govuk-header__navigation--open"), this.toggleClass(n, "govuk-header__menu-button--open"), n.setAttribute("aria-expanded", "true" !== n.getAttribute("aria-expanded")), o.setAttribute("aria-hidden", "false" === o.getAttribute("aria-hidden")))
+        }, l.prototype.init = function() {
+            this.$module && this.$menuButton && this.$menu && (this.syncState(this.$menu.classList.contains("govuk-header__navigation--open")), this.$menuButton.addEventListener("click", this.handleMenuButtonClick.bind(this)))
+        }, l.prototype.syncState = function(t) {
+            this.$menuButton.classList.toggle("govuk-header__menu-button--open", t), this.$menuButton.setAttribute("aria-expanded", t), this.$menu.setAttribute("aria-hidden", !t)
+        }, l.prototype.handleMenuButtonClick = function() {
+            var t = this.$menu.classList.toggle("govuk-header__navigation--open");
+            this.syncState(t)
         }, u.prototype.init = function() {
             var n = this.$module;
             r(this.$inputs, function(t) {
@@ -775,10 +769,10 @@
                 new s(t).init()
             }), r(e.querySelectorAll('[data-module="govuk-checkboxes"]'), function(t) {
                 new a(t).init()
-            }), new l(e.querySelector('[data-module="govuk-error-summary"]')).init(), new c(e.querySelector('[data-module="govuk-header"]')).init(), r(e.querySelectorAll('[data-module="govuk-radios"]'), function(t) {
+            }), new c(e.querySelector('[data-module="govuk-error-summary"]')).init(), new l(e.querySelector('[data-module="govuk-header"]')).init(), r(e.querySelectorAll('[data-module="govuk-radios"]'), function(t) {
                 new u(t).init()
             }), r(e.querySelectorAll('[data-module="govuk-tabs"]'), function(t) {
                 new d(t).init()
             })
-        }, t.Accordion = n, t.Button = o, t.Details = i, t.CharacterCount = s, t.Checkboxes = a, t.ErrorSummary = l, t.Header = c, t.Radios = u, t.Tabs = d
+        }, t.Accordion = n, t.Button = o, t.Details = i, t.CharacterCount = s, t.Checkboxes = a, t.ErrorSummary = c, t.Header = l, t.Radios = u, t.Tabs = d
 });
\ No newline at end of file
diff --git a/dist/govuk-frontend-ie8-3.8.1.min.css b/dist/govuk-frontend-ie8-3.9.0.min.css
similarity index 46%
rename from dist/govuk-frontend-ie8-3.8.1.min.css
rename to dist/govuk-frontend-ie8-3.9.0.min.css
index dc15c50c..dbbcf8d5 100644
--- a/dist/govuk-frontend-ie8-3.8.1.min.css
+++ b/dist/govuk-frontend-ie8-3.9.0.min.css
@@ -1651,6 +1651,51 @@
     max-width: 5.4ex
 }
 
+.govuk-input__wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex
+}
+
+.govuk-input__wrapper .govuk-input {
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto
+}
+
+.govuk-input__wrapper .govuk-input:focus {
+    z-index: 1
+}
+
+.govuk-input__prefix,
+.govuk-input__suffix {
+    font-family: GDS Transport, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    font-size: 19px;
+    font-size: 1.1875rem;
+    line-height: 1.31579;
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 40px;
+    min-width: 2.5rem;
+    height: 40px;
+    height: 2.5rem;
+    padding: 5px;
+    border: 2px solid #0b0c0c;
+    background-color: #f3f2f1;
+    text-align: center;
+    white-space: nowrap;
+    cursor: default;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto
+}
+
 .govuk-date-input {
     font-size: 0
 }