dxw_govuk_frontend_rails 3.12.0 → 3.13.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e42e5531caedbe80f014557b076fc609f16ca85d666bdcc86bfb4e7c280e28a1
-  data.tar.gz: c712317b305d72d5960a65a1d4dbf0e7b0ebaf4bd482b057f32c6518d4fc90cc
+  metadata.gz: d13df6b5f41f50ed1be07dbd4e157072e6cdc64537df5d5fb2f807ca846a59bc
+  data.tar.gz: 79da91fc77c60ed37047d26a770491aa83a717a619ae2e0e45373c5fe3472061
 SHA512:
-  metadata.gz: 5f6a004060916897d45767e91565c3cdc6322d860814f2acbc027d35eca9a22f2d328e955095e4c9d0b14b478de12c259f064d88bdc5468bc0ffda3dcd325085
-  data.tar.gz: 3c4a6afe51e11a479d23a3e1ec51e17660511e4dba977af9a89545f5a55be39ac0cffb0cc82626e053323841efdf4976858b4fecf2f11f2664af4341e755e44b
+  metadata.gz: 555d823ff0083d5603ba327eaf385579658a75c2596ce0d734cf649483d210661e5fe4dca8677e0cc220fb578e0761c75c95ff5f7c002c61c59e3a6466c17cc8
+  data.tar.gz: 85551726cc81c6721b9588796611e5bca8b573c32a88df7adcff020cbdb7279567a86e403fe4a5a6ab346971358cb7749ec23e14bb5f32b45e213bbec90e7061

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.12.0)
+    dxw_govuk_frontend_rails (3.13.1)
 
 GEM
   remote: https://rubygems.org/

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.12.0"
+  VERSION = "3.13.1"
 end

data/package-lock.json

@@ -9,13 +9,13 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "govuk-frontend": "3.12.0"
+        "govuk-frontend": "3.13.1"
       }
     },
     "node_modules/govuk-frontend": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.12.0.tgz",
-      "integrity": "sha512-+mM8BqEUqsBVSV/ud0dEhE8OmMdhkK53eEUp5YyPN+y3mwcdRnwwP2A2B5qFdFi6E6j/2AYuCG8l5kXD+JXNxA==",
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.13.1.tgz",
+      "integrity": "sha512-OlbAVVpJfZ8tEhkScVoNFA+27RUfMDslN4uxtJyASfXwg4QZYHTX8RqmKBbgVJWaybpa5RsYDuRKQNJe3qN8gw==",
       "engines": {
         "node": ">= 4.2.0"
       }
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.12.0.tgz",
-      "integrity": "sha512-+mM8BqEUqsBVSV/ud0dEhE8OmMdhkK53eEUp5YyPN+y3mwcdRnwwP2A2B5qFdFi6E6j/2AYuCG8l5kXD+JXNxA=="
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.13.1.tgz",
+      "integrity": "sha512-OlbAVVpJfZ8tEhkScVoNFA+27RUfMDslN4uxtJyASfXwg4QZYHTX8RqmKBbgVJWaybpa5RsYDuRKQNJe3qN8gw=="
     }
   }
 }

data/package.json

@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/mec/dxw_govuk_frontend_rails#readme",
   "dependencies": {
-    "govuk-frontend": "3.12.0"
+    "govuk-frontend": "3.13.1"
   }
 }

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -1751,6 +1751,47 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
   }
 };
 
+/**
+ * Uncheck other checkboxes
+ *
+ * Find any other checkbox inputs with the same name value, and uncheck them.
+ * This is useful for when a “None of these" checkbox is checked.
+ */
+Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
+  var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]');
+
+  nodeListForEach(allInputsWithSameName, function ($inputWithSameName) {
+    var hasSameFormOwner = ($input.form === $inputWithSameName.form);
+    if (hasSameFormOwner && $inputWithSameName !== $input) {
+      $inputWithSameName.checked = false;
+    }
+  });
+
+  this.syncAllConditionalReveals();
+};
+
+/**
+ * Uncheck exclusive inputs
+ *
+ * Find any checkbox inputs with the same name value and the 'exclusive' behaviour,
+ * and uncheck them. This helps prevent someone checking both a regular checkbox and a
+ * "None of these" checkbox in the same fieldset.
+ */
+Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
+  var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
+    'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
+  );
+
+  nodeListForEach(allInputsWithSameNameAndExclusiveBehaviour, function ($exclusiveInput) {
+    var hasSameFormOwner = ($input.form === $exclusiveInput.form);
+    if (hasSameFormOwner) {
+      $exclusiveInput.checked = false;
+    }
+  });
+
+  this.syncAllConditionalReveals();
+};
+
 /**
  * Click event handler
  *
@@ -1762,12 +1803,29 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
 Checkboxes.prototype.handleClick = function (event) {
   var $target = event.target;
 
-  // If a checkbox with aria-controls, handle click
-  var isCheckbox = $target.getAttribute('type') === 'checkbox';
+  // Ignore clicks on things that aren't checkbox inputs
+  if ($target.type !== 'checkbox') {
+    return
+  }
+
+  // If the checkbox conditionally-reveals some content, sync the state
   var hasAriaControls = $target.getAttribute('aria-controls');
-  if (isCheckbox && hasAriaControls) {
+  if (hasAriaControls) {
     this.syncConditionalRevealWithInputState($target);
   }
+
+  // No further behaviour needed for unchecking
+  if (!$target.checked) {
+    return
+  }
+
+  // Handle 'exclusive' checkbox behaviour (ie "None of these")
+  var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive');
+  if (hasBehaviourExclusive) {
+    this.unCheckAllInputsExcept($target);
+  } else {
+    this.unCheckExclusiveInputs($target);
+  }
 };
 
 (function(undefined) {

data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss

@@ -129,6 +129,7 @@
 
       .govuk-breadcrumbs__list {
         display: -webkit-box;
+        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
       }

data/vendor/assets/stylesheets/components/button/_index.scss

@@ -158,10 +158,6 @@
       cursor: default;
     }
 
-    &:focus {
-      outline: none;
-    }
-
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@@ -241,6 +237,8 @@
 
     display: -webkit-inline-box;
 
+    display: -webkit-inline-flex;
+
     display: -ms-inline-flexbox;
 
     display: inline-flex;
@@ -248,6 +246,8 @@
 
     -webkit-box-pack: center;
 
+    -webkit-justify-content: center;
+
         -ms-flex-pack: center;
 
             justify-content: center;
@@ -260,10 +260,15 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -ms-flex-item-align: center;
-        align-self: center;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   @if $govuk-use-legacy-font {

data/vendor/assets/stylesheets/components/checkboxes/_index.scss

@@ -73,47 +73,49 @@
         touch-action: manipulation;
   }
 
-  // [ ] Check box
-  .govuk-checkboxes__label:before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $govuk-checkboxes-size;
-    height: $govuk-checkboxes-size;
-    border: $govuk-border-width-form-element solid currentColor;
-    background: transparent;
-  }
+  @include govuk-not-ie8 {
+    // [ ] Check box
+    .govuk-checkboxes__label:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $govuk-checkboxes-size;
+      height: $govuk-checkboxes-size;
+      border: $govuk-border-width-form-element solid currentColor;
+      background: transparent;
+    }
 
-  // ✔ Check mark
-  //
-  // The check mark is a box with a border on the left and bottom side (└──),
-  // rotated 45 degrees
-  .govuk-checkboxes__label:after {
-    content: "";
-    box-sizing: border-box;
+    // ✔ Check mark
+    //
+    // The check mark is a box with a border on the left and bottom side (└──),
+    // rotated 45 degrees
+    .govuk-checkboxes__label:after {
+      content: "";
+      box-sizing: border-box;
 
-    position: absolute;
-    top: 11px;
-    left: 9px;
-    width: 23px;
-    height: 12px;
+      position: absolute;
+      top: 11px;
+      left: 9px;
+      width: 23px;
+      height: 12px;
 
-    -webkit-transform: rotate(-45deg);
+      -webkit-transform: rotate(-45deg);
 
-        -ms-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
 
-            transform: rotate(-45deg);
-    border: solid;
-    border-width: 0 0 5px 5px;
-    // Fix bug in IE11 caused by transform rotate (-45deg).
-    // See: alphagov/govuk_elements/issues/518
-    border-top-color: transparent;
+              transform: rotate(-45deg);
+      border: solid;
+      border-width: 0 0 5px 5px;
+      // Fix bug in IE11 caused by transform rotate (-45deg).
+      // See: alphagov/govuk_elements/issues/518
+      border-top-color: transparent;
 
-    opacity: 0;
+      opacity: 0;
 
-    background: transparent;
+      background: transparent;
+    }
   }
 
   .govuk-checkboxes__hint {
@@ -125,6 +127,20 @@
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 
@@ -143,6 +159,19 @@
     opacity: .5;
   }
 
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-checkboxes__divider {
+    $govuk-divider-size: $govuk-checkboxes-size !default;
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
   // =========================================================
   // Conditional reveals
   // =========================================================

data/vendor/assets/stylesheets/components/details/_index.scss

@@ -71,7 +71,8 @@
   }
 
   .govuk-details__text {
-    padding: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
     padding-left: govuk-spacing(4);
     border-left: $govuk-border-width solid $govuk-border-colour;
   }

data/vendor/assets/stylesheets/components/file-upload/_index.scss

@@ -8,6 +8,7 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
+    max-width: 100%;
     margin-left: -$component-padding;
     padding: $component-padding;
 

data/vendor/assets/stylesheets/components/footer/_index.scss

@@ -68,16 +68,20 @@
 
   .govuk-footer__meta {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
     -webkit-box-align: end;
+    -webkit-align-items: flex-end;
         -ms-flex-align: end;
             align-items: flex-end; // Support: Flexbox
     -webkit-box-pack: center;
+    -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center; // Support: Flexbox
   }
@@ -90,11 +94,13 @@
 
   .govuk-footer__meta-item--grow {
     -webkit-box-flex: 1;
+    -webkit-flex: 1;
         -ms-flex: 1;
             flex: 1; // Support: Flexbox
     @include govuk-media-query ($until: tablet) {
-      -ms-flex-preferred-size: 320px;
-          flex-basis: 320px; // Support: Flexbox
+      -webkit-flex-basis: 320px;
+          -ms-flex-preferred-size: 320px;
+              flex-basis: 320px; // Support: Flexbox
     }
   }
 
@@ -105,6 +111,9 @@
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   .govuk-footer__licence-description {
@@ -153,12 +162,14 @@
 
   .govuk-footer__navigation {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
   }
 
   .govuk-footer__section {
@@ -169,15 +180,18 @@
     vertical-align: top;
     // Ensure columns take up equal width (typically one-half:one-half)
     -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; // Support: Flexbox
-    -ms-flex-negative: 1;
-        flex-shrink: 1; // Support: Flexbox
+    -webkit-flex-shrink: 1;
+        -ms-flex-negative: 1;
+            flex-shrink: 1; // Support: Flexbox
     @include govuk-media-query ($until: desktop) {
       // Make sure columns do not drop below 200px in width
       // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -ms-flex-preferred-size: 200px;
-          flex-basis: 200px; // Support: Flexbox
+      -webkit-flex-basis: 200px;
+          -ms-flex-preferred-size: 200px;
+              flex-basis: 200px; // Support: Flexbox
     }
   }
 
@@ -187,6 +201,7 @@
     // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
     .govuk-footer__section:first-child:nth-last-child(2) {
       -webkit-box-flex: 2;
+      -webkit-flex-grow: 2;
           -ms-flex-positive: 2;
               flex-grow: 2; // Support: Flexbox
     }

data/vendor/assets/stylesheets/components/header/_index.scss

@@ -36,15 +36,19 @@
   .govuk-header__logotype {
     display: inline-block;
 
-    // Add a gap between logo and any product name
+    // Add a gap after the logo in case it's followed by a product name. This
+    // gets removed later if the logotype is a :last-child.
     margin-right: govuk-spacing(1);
 
-    // Prevent readability backplate from obscuring underline in Windows
-    // High Contrast Mode
-    forced-color-adjust: none;
+    // Prevent readability backplate from obscuring underline in Windows High
+    // Contrast Mode
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      color: linktext;
+    }
 
-    // But remove it if there's nothing after the logo to keep hover and focus
-    // states neat
+    // Remove the gap after the logo if there's no product name to keep hover
+    // and focus states neat
     &:last-child {
       margin-right: 0;
     }
@@ -62,7 +66,7 @@
     width: 36px;
     height: 32px;
     border: 0;
-    vertical-align: middle;
+    vertical-align: bottom;
   }
 
   .govuk-header__product-name {

data/vendor/assets/stylesheets/components/input/_index.scss

@@ -95,11 +95,13 @@
 
   .govuk-input__wrapper {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 
     .govuk-input {
       -webkit-box-flex: 0;
+      -webkit-flex: 0 1 auto;
           -ms-flex: 0 1 auto;
               flex: 0 1 auto;
     }
@@ -150,6 +152,8 @@
 
     -webkit-box-flex: 0;
 
+    -webkit-flex: 0 0 auto;
+
         -ms-flex: 0 0 auto;
 
             flex: 0 0 auto;

data/vendor/assets/stylesheets/components/radios/_index.scss

@@ -121,6 +121,20 @@
   // Focused state
   .govuk-radios__input:focus + .govuk-radios__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
   }
 

data/vendor/assets/stylesheets/components/skip-link/_index.scss

@@ -11,7 +11,9 @@
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (padding: unquote("max(calc(0px))")) {
+      $padding-safe-area-right: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
       $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
+      $padding-safe-area-left: -webkit-calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
       $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
 
       // Use max() to pick largest padding, default or with safe area

data/vendor/assets/stylesheets/components/warning-text/_index.scss

@@ -43,7 +43,6 @@
     // Prevent the exclamation mark from being included when the warning text
     // is copied, for example.
     -webkit-user-select: none;
-       -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
 

data/vendor/assets/stylesheets/core/_template.scss

@@ -15,7 +15,6 @@
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.
     -webkit-text-size-adjust: 100%;
-       -moz-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
             text-size-adjust: 100%;
 

data/vendor/assets/stylesheets/helpers/_colour.scss

@@ -75,7 +75,7 @@
 /// Make a colour darker by mixing it with black
 ///
 /// @param {Colour} $colour - colour to shade
-/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @param {Number} $percentage - percentage of `$colour` in returned colour
 /// @return {Colour}
 /// @access public
 
@@ -86,7 +86,7 @@
 /// Make a colour lighter by mixing it with white
 ///
 /// @param {Colour} $colour - colour to tint
-/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @param {Number} $percentage - percentage of `$colour` in returned colour
 /// @return {Colour}
 /// @access public
 

data/vendor/assets/stylesheets/helpers/_links.scss

@@ -52,6 +52,12 @@
 @mixin govuk-link-hover-decoration {
   @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
     text-decoration-thickness: $govuk-link-hover-underline-thickness;
+    // Disable ink skipping on underlines on hover. Browsers haven't
+    // standardised on this part of the spec yet, so set both properties
+    -webkit-text-decoration-skip-ink: none;
+            text-decoration-skip-ink: none; // Chromium, Firefox
+    -webkit-text-decoration-skip: none;
+            text-decoration-skip: none; // Safari
   }
 }
 

data/vendor/assets/stylesheets/objects/_button-group.scss

@@ -30,13 +30,16 @@
     // doesn't play nicely with it
     // (https://github.com/w3c/csswg-drafts/issues/3559)
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-align: center;
+    -webkit-align-items: center;
         -ms-flex-align: center;
             align-items: center;
 
@@ -72,12 +75,16 @@
 
       -webkit-box-direction: normal;
 
+      -webkit-flex-direction: row;
+
           -ms-flex-direction: row;
 
               flex-direction: row;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
+      -webkit-flex-wrap: wrap;
+          -ms-flex-wrap: wrap;
+              flex-wrap: wrap;
       -webkit-box-align: baseline;
+      -webkit-align-items: baseline;
           -ms-flex-align: baseline;
               align-items: baseline;
 

data/vendor/assets/stylesheets/objects/_width-container.scss

@@ -28,7 +28,9 @@
 
   // Respect 'display cutout' safe area (avoids notches and rounded corners)
   @supports (margin: unquote("max(calc(0px))")) {
+    $gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
     $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+    $gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
     $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
 
     // Use max() to pick largest margin, default or with safe area
@@ -44,7 +46,9 @@
 
     // Respect 'display cutout' safe area (avoids notches and rounded corners)
     @supports (margin: unquote("max(calc(0px))")) {
+      $gutter-safe-area-right: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
       $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
+      $gutter-safe-area-left: -webkit-calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
       $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
 
       // Use max() to pick largest margin, default or with safe area

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dxw_govuk_frontend_rails
 version: !ruby/object:Gem::Version
-  version: 3.12.0
+  version: 3.13.1
 platform: ruby
 authors:
 - mec