katalyst-govuk-formbuilder 1.10.1 → 1.11.0

data/node_modules/govuk-frontend/dist/govuk/components/panel/_index.scss

@@ -14,17 +14,21 @@
     @include govuk-media-query($until: tablet) {
       padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
 
-      // This is an if-all-else-fails attempt to stop long words from overflowing the container
-      // on very narrow viewports by forcing them to break and wrap instead. This
-      // overflowing is more likely to happen when user increases text size on a mobile eg. using
-      // iOS Safari text resize controls.
+      // This is an if-all-else-fails attempt to stop long words from
+      // overflowing the container on very narrow viewports by forcing them to
+      // break and wrap instead. This overflowing is more likely to happen when
+      // user increases text size on a mobile eg. using iOS Safari text resize
+      // controls.
       //
-      // The overflowing is a particular problem with the panel component since it uses white
-      // text: when the text overflows the container, it is invisible on the white (page)
-      // background. When the text in our other components overflow, the user might have to scroll
-      // horizontally to view it but the the text remains legible.
+      // The overflowing is a particular problem with the panel component since
+      // it uses white text: when the text overflows the container, it is
+      // invisible on the white (page) background. When the text in our other
+      // components overflow, the user might have to scroll horizontally to view
+      // it but the the text remains legible.
       overflow-wrap: break-word;
-      word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
+
+      // Support IE (autoprefixer doesn't add this as it's not a prefix)
+      word-wrap: break-word;
     }
   }
 

data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss

@@ -4,30 +4,33 @@
 @include govuk-exports("govuk/component/password-input") {
   .govuk-password-input__wrapper {
     // This element inherits styles from .govuk-input__wrapper, including:
-    // - being display: block with contents in a stacked column below the mobile breakpoint
+    // - being display: block with contents in a stacked column below the mobile
+    //   breakpoint
     // - being display: flex above the mobile breakpoint
 
     @include govuk-media-query($from: mobile) {
       flex-direction: row;
 
-      // The default of `stretch` makes the toggle button appear taller than the input, due to using
-      // box-shadow, which we don't particularly want in this situation
+      // The default of `stretch` makes the toggle button appear taller than the
+      // input, due to using box-shadow, which we don't particularly want in
+      // this situation
       align-items: flex-start;
     }
   }
 
   .govuk-password-input__input {
-    // IE 11 and Microsoft Edge comes with its own password reveal function. We want to hide it,
-    // so that there aren't two controls presented to the user that do the same thing but aren't in
-    // sync with one another. This doesn't affect the function that allows Edge users to toggle
-    // password visibility by pressing Alt+F8, which cannot be programmatically disabled.
+    // IE 11 and Microsoft Edge comes with its own password reveal function. We
+    // want to hide it, so that there aren't two controls presented to the user
+    // that do the same thing but aren't in sync with one another. This doesn't
+    // affect the function that allows Edge users to toggle password visibility
+    // by pressing Alt+F8, which cannot be programmatically disabled.
     &::-ms-reveal {
       display: none;
     }
   }
 
   .govuk-password-input__toggle {
-    // Add margin to the top so that the button doesn't obscure the input's focus style
+    // Add top margin so the button doesn't obscure the input's focus style
     margin-top: govuk-spacing(1);
 
     // Remove default margin-bottom from button
@@ -39,7 +42,7 @@
     }
 
     @include govuk-media-query($from: mobile) {
-      // Buttons are normally 100% width on this breakpoint, but we don't want that in this case
+      // Buttons are normally 100% wide on mobile, but we don't want that here
       width: auto;
       flex-shrink: 0;
       flex-basis: 5em;

data/node_modules/govuk-frontend/dist/govuk/components/phase-banner/_index.scss

@@ -25,14 +25,6 @@
         margin-right: govuk-spacing(2);
       }
     }
-
-    // When forced colour mode is active, for example to provide high contrast,
-    // the background colour of the tag is the same as the rest of the page. To ensure
-    // that the tag is perceived as separate to the rest of the text in the phase banner,
-    // it is made bold.
-    @media screen and (forced-colors: active) {
-      font-weight: bold;
-    }
   }
 
   .govuk-phase-banner__text {

data/node_modules/govuk-frontend/dist/govuk/components/radios/_index.scss

@@ -9,8 +9,9 @@
   $govuk-touch-target-size: ($govuk-radios-size + $govuk-touch-target-gutter);
   $govuk-small-radios-size: 24px;
   $govuk-radios-label-padding-left-right: govuk-spacing(3);
-  // When the default focus width is used on a curved edge it looks visually smaller.
-  // So for the circular radios we bump the default to make it look visually consistent.
+  // When the default focus width is used on a curved edge it looks visually
+  // smaller. So for the circular radios we bump the default to make it look
+  // visually consistent.
   $govuk-radios-focus-width: $govuk-focus-width + 1px;
 
   .govuk-radios__item {
@@ -173,10 +174,11 @@
   // =========================================================
 
   // The narrow border is used in the conditional reveals because the border has
-  // to be an even number in order to be centred under the 40px checkbox or radio.
+  // to be an even number in order to be centred under the 40px checkbox radio.
   $conditional-border-width: $govuk-border-width-narrow;
-  // Calculate the amount of padding needed to keep the border centered against the radios.
-  $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
+  // Calculate the amount of padding needed to keep the border centered against
+  // the radios.
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the radios
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label

data/node_modules/govuk-frontend/dist/govuk/components/select/_index.scss

@@ -6,16 +6,16 @@
   .govuk-select {
     @include govuk-font($size: 19, $line-height: 1.25);
 
-    box-sizing: border-box; // should this be global?
+    box-sizing: border-box;
 
     // This min-width was chosen because:
-    // - it makes the Select noticeably wider than it is taller (which is what users expect)
+    // - it makes the Select wider than it is tall (which is what users expect)
     // - 11.5em matches the 'length-10' variant of the input component
     // - it fits comfortably on screens as narrow as 240px wide
     min-width: 11.5em;
     max-width: 100%;
     height: govuk-px-to-rem(40px);
-    padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
+    padding: govuk-spacing(1);
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 
     // Default user agent colours for selects can have low contrast,
@@ -28,8 +28,8 @@
       // Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
-      // this instead of changing `border-width` (which changes element size) and
-      // since `outline` is already used for the yellow focus state.
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` is already used for the yellow focus state.
       box-shadow: inset 0 0 0 $govuk-border-width-form-element;
     }
 

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_index.scss

@@ -0,0 +1,162 @@
+@include govuk-exports("govuk/component/service-navigation") {
+  $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
+  $govuk-service-navigation-background: $govuk-canvas-background-colour;
+  $govuk-service-navigation-border-colour: $govuk-border-colour;
+
+  // We make the link colour a little darker than normal here so that it has
+  // better perceptual contrast with the navigation background.
+  $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
+
+  .govuk-service-navigation {
+    border-bottom: 1px solid $govuk-service-navigation-border-colour;
+    background-color: $govuk-service-navigation-background;
+  }
+
+  .govuk-service-navigation__container {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+
+    @include govuk-media-query($from: tablet) {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  // These styles are shared between nav items and the service name, they
+  // ensure that both of them remain vertically aligned with one another
+  .govuk-service-navigation__item,
+  .govuk-service-navigation__service-name {
+    position: relative;
+    margin: govuk-spacing(2) 0;
+    border: 0 solid $govuk-service-navigation-link-colour;
+
+    @include govuk-media-query($from: tablet) {
+      margin-top: 0;
+      margin-bottom: 0;
+      padding: govuk-spacing(4) 0;
+
+      &:not(:last-child) {
+        @include govuk-responsive-margin(6, $direction: right);
+      }
+    }
+  }
+
+  .govuk-service-navigation__item--active {
+    @include govuk-media-query($until: tablet) {
+      // Negative offset the left margin so we can place a current page indicator
+      // to the left without misaligning the list item text.
+      margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
+      padding-left: govuk-spacing(2);
+      border-left-width: $govuk-service-navigation-active-link-border-width;
+    }
+
+    @include govuk-media-query($from: tablet) {
+      padding-bottom: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width;
+      border-bottom-width: $govuk-service-navigation-active-link-border-width;
+    }
+  }
+
+  .govuk-service-navigation__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-underline;
+    @include govuk-link-style-no-visited-state;
+
+    &:not(:hover):not(:focus) {
+      // We set the colour here as we don't want to override the hover or
+      // focus colours
+      color: $govuk-service-navigation-link-colour;
+    }
+  }
+
+  //
+  // Service name specific code
+  //
+
+  .govuk-service-navigation__service-name {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // Annoyingly this requires a compound selector in order to overcome the
+  // specificity of the other link colour override we're doing
+  .govuk-service-navigation__service-name .govuk-service-navigation__link {
+    @include govuk-link-style-text;
+  }
+
+  //
+  // Navigation list specific code
+  //
+
+  .govuk-service-navigation__toggle {
+    @include govuk-font($size: 19, $weight: bold);
+    display: inline-flex;
+    margin: 0 0 govuk-spacing(2);
+    padding: 0;
+    border: 0;
+    color: $govuk-service-navigation-link-colour;
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+    align-items: center;
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+
+    &::after {
+      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+      content: "";
+      margin-left: govuk-spacing(1);
+    }
+
+    &[aria-expanded="true"]::after {
+      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
+    // Ensure the button stays hidden if the hidden attribute is present
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .govuk-service-navigation__list {
+    @include govuk-font($size: 19);
+    margin: 0;
+    margin-bottom: govuk-spacing(3);
+    padding: 0;
+    list-style: none;
+
+    // Make the navigation list a flexbox. Doing so resolves a couple of
+    // accessibility problems caused by the list items being inline-blocks:
+    // - Removes the extra whitespace from between each list item that screen
+    //   readers would pointlessly announce.
+    // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
+    //   all of the links as a run-on sentence.
+    @include govuk-media-query($from: tablet) {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      // However... IE11 totally trips over flexbox and doesn't wrap anything,
+      // making all of the items into a single, horizontally scrolling row,
+      // which is no good. This CSS hack removes the flexbox definition for
+      // IE 10 & 11, reverting it to the flawed, but OK, non-flexbox version.
+      //
+      // CSS hack taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
+      // which also includes an explanation of why this works
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+        display: block;
+      }
+    }
+  }
+
+  // This is a <strong> element that is used as a fallback mechanism for
+  // visually indicating the current page in scenarios where CSS isn't
+  // available. We don't actually want it to be bold normally, so set it to
+  // inherit the parent font-weight.
+  .govuk-service-navigation__active-fallback {
+    font-weight: inherit;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_service-navigation.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_service-navigation.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/skip-link/_index.scss

@@ -35,11 +35,13 @@
 
   .govuk-skip-link-focused-element {
     &:focus {
-      // Remove the native visible focus indicator when the element is programmatically focused.
+      // Remove the native visible focus indicator when the element is
+      // programmatically focused.
       //
-      // We set the focus on the linked element (this is usually the <main> element) when the skip
-      // link is activated to improve screen reader announcements. However, we remove the visible
-      // focus indicator from the linked element because the user cannot interact with it.
+      // We set the focus on the linked element (this is usually the <main>
+      // element) when the skip link is activated to improve screen reader
+      // announcements. However, we remove the visible focus indicator from the
+      // linked element because the user cannot interact with it.
       //
       // A related discussion: https://github.com/w3c/wcag/issues/1001
       outline: none;

data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss

@@ -179,7 +179,8 @@
   .govuk-summary-card__title-wrapper {
     padding: govuk-spacing(3);
 
-    // Ensures the card header appears separate to the summary list in forced colours mode
+    // Ensures the card header appears separate to the summary list in forced
+    // colours mode
     border-bottom: 1px solid transparent;
     background-color: govuk-colour("light-grey");
 

data/node_modules/govuk-frontend/dist/govuk/components/tag/_index.scss

@@ -12,11 +12,12 @@
     // where to break off of.
     max-width: $govuk-tag-max-width;
 
-    // These negative margins make sure that the tag component doesn’t increase the
-    // size of its container. Otherwise, for example, a table row containing a tag
-    // will be taller than one containing plain text.
+    // These negative margins make sure that the tag component doesn’t increase
+    // the size of its container. Otherwise, for example, a table row containing
+    // a tag will be taller than one containing plain text.
     //
-    // The negative margin added to the top and bottom matches the extra padding added.
+    // The negative margin added to the top and bottom matches the extra padding
+    // added.
     margin-top: -2px;
     margin-bottom: -3px;
 
@@ -30,11 +31,13 @@
     overflow-wrap: break-word;
 
     // When forced colour mode is active, for example to provide high contrast,
-    // the background colour of the tag is the same as the rest of the page. To ensure
-    // that the tag is perceived as separate from any surround text, it is made bold.
+    // the background colour of the tag is the same as the rest of the page. To
+    // ensure that the tag is perceived as separate from any surround text, it
+    // is made bold.
     //
-    // Transparent outlines are no longer added, as they make the Tag look indistinguishable
-    // from a button – but the tag is not interactive in the same way.
+    // Transparent outlines are no longer added, as they make the Tag look
+    // indistinguishable from a button – but the tag is not interactive in the
+    // same way.
     @media screen and (forced-colors: active) {
       font-weight: bold;
     }

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss

@@ -11,11 +11,13 @@
     list-style-type: none;
   }
 
-  // This uses table layout so that the task name and status always appear side-by-side, with the width of
-  // each 'column' being flexible depending upon the length of the task names and statuses.
+  // This uses table layout so that the task name and status always appear
+  // side-by-side, with the width of each 'column' being flexible depending upon
+  // the length of the task names and statuses.
   //
-  // The position is set to 'relative' so than an absolutely-positioned transparent element box
-  // can be added within the link so that the whole row can be clickable.
+  // The position is set to 'relative' so than an absolutely-positioned
+  // transparent element box can be added within the link so that the whole row
+  // can be clickable.
   .govuk-task-list__item {
     display: table;
     position: relative;
@@ -30,9 +32,9 @@
     border-top: 1px solid $govuk-border-colour;
   }
 
-  // This class is added to the <li> elements where the task name is a link.
-  // The background hover colour is added to help indicate that the whole row is clickable, rather
-  // than just the visible link text.
+  // This class is added to the <li> elements where the task name is a link. The
+  // background hover colour is added to help indicate that the whole row is
+  // clickable, rather than just the visible link text.
   .govuk-task-list__item--with-link:hover {
     background: $govuk-task-list-hover-colour;
   }
@@ -55,9 +57,9 @@
     color: $govuk-secondary-text-colour;
   }
 
-  // This adds an empty transparent box covering the whole row, including the task status and
-  // any hint text. Because this is generated within the link element, this allows the whole area
-  // to be clickable.
+  // This adds an empty transparent box covering the whole row, including the
+  // task status and any hint text. Because this is generated within the link
+  // element, this allows the whole area to be clickable.
   .govuk-task-list__link::after {
     content: "";
     display: block;

data/node_modules/govuk-frontend/dist/govuk/components/textarea/_index.scss

@@ -6,7 +6,7 @@
   .govuk-textarea {
     @include govuk-font($size: 19, $line-height: 1.25);
 
-    box-sizing: border-box; // should this be global?
+    box-sizing: border-box;
     display: block;
     width: 100%;
     min-height: 40px;
@@ -25,8 +25,8 @@
       // Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
-      // this instead of changing `border-width` (which changes element size) and
-      // since `outline` is already used for the yellow focus state.
+      // this instead of changing `border-width` (which changes element size)
+      // and since `outline` is already used for the yellow focus state.
       box-shadow: inset 0 0 0 $govuk-border-width-form-element;
     }
 

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss

@@ -25,8 +25,8 @@
       margin-top: -5px;
     }
 
-    // When a user customises their colours the background colour will often be removed.
-    // Adding a border to the component keeps it's shape as a circle.
+    // When a user customises their colours the background colour will often be
+    // removed. Adding a border to the component keeps it's shape as a circle.
     border: 3px solid $govuk-text-colour;
     border-radius: 50%;
 

data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss

@@ -1,7 +1,7 @@
 :root {
   // This variable is automatically overwritten during builds and releases.
   // It doesn't need to be updated manually.
-  --govuk-frontend-version: "5.4.0";
+  --govuk-frontend-version: "5.6.0";
 
   // CSS custom property for each breakpoint
   @each $name, $value in $govuk-breakpoints {

data/node_modules/govuk-frontend/dist/govuk/helpers/_colour.scss

@@ -42,25 +42,61 @@
 /// Get the colour for a government organisation
 ///
 /// @param {String} $organisation - Organisation name, lowercase, hyphenated
-/// @param {Boolean} $websafe [true] - By default a 'websafe' version of the
-///   colour will be returned which meets contrast requirements . If you want to
-///   use the non-websafe version you can set this to `false` but your should
-///   ensure that you still meets contrast requirements for accessibility - for
-///   example, do not use the non-websafe version for text.
+/// @param {Boolean} $websafe - Deprecated. Use $contrast-safe instead.
+/// @param {Boolean} $contrast-safe [true] - By default a version of the colour
+///   will be returned which has a minimum 4.5:1 contrast ratio when used with
+///   white, as per the WCAG 2.1 Level AA guidelines. If you want to use the
+///   non-contrast safe version you can set this to `false` but your should
+///   ensure that you still meets contrast requirements for accessibility -
+///   for example, do not use the non-contrast safe version for text.
 ///
 /// @return {Colour} Representation of colour for organisation
 /// @throw if `$organisation` is not a known organisation
 /// @access public
 
-@function govuk-organisation-colour($organisation, $websafe: true) {
+@function govuk-organisation-colour($organisation, $websafe: null, $contrast-safe: true) {
+  // Check if the $organisation exists in the aliases map. If so, change the
+  // value of $organisation to the aliased value.
+  @if map-has-key($_govuk_colours-organisations-aliases, $organisation) {
+    $organisation: map-get($_govuk_colours-organisations-aliases, $organisation);
+  }
+
+  // Check to see if the organisation exists
   @if not map-has-key($govuk-colours-organisations, $organisation) {
     @error "Unknown organisation `#{$organisation}`";
   }
 
+  // Output a warning if $websafe is set.
+  @if $websafe and not index($govuk-suppressed-warnings, "organisation-colour-websafe-param") {
+    @warn _warning-text("organisation-colour-websafe-param",
+      "The `$websafe` parameter of `govuk-organisation-colour` has been " +
+      "renamed to `$contrast-safe`. The old parameter name will be removed in " +
+      "the next major version."
+    );
+  }
+
   $org-colour: map-get($govuk-colours-organisations, $organisation);
 
-  @if $websafe and map-has-key($org-colour, colour-websafe) {
-    @return map-get($org-colour, colour-websafe);
+  @if map-has-key($org-colour, deprecation-message) and not index($govuk-suppressed-warnings, "organisation-colours") {
+    @warn _warning-text(
+      "organisation-colours",
+      map-get($org-colour, deprecation-message)
+    );
+  }
+
+  // If the $websafe parameter is being used (it has been explicitly set as true
+  // or false), assume the user hasn't updated to use $contrast-safe yet and map
+  // the old parameter's value onto the new parameter.
+  @if type-of($websafe) != "null" {
+    $contrast-safe: $websafe;
+  }
+
+  // Determine the contrast-safe key to use depending on whether it's the new
+  // palette or the legacy palette
+  $safe-key: if($govuk-new-organisation-colours, "contrast-safe", "colour-websafe");
+
+  @if $contrast-safe and map-has-key($org-colour, $safe-key) {
+    @return map-get($org-colour, $safe-key);
   } @else {
     @return map-get($org-colour, colour);
   }

data/node_modules/govuk-frontend/dist/govuk/helpers/_grid.scss

@@ -37,7 +37,7 @@
 ///   }
 ///
 /// @example scss - Customising the breakpoint where width percentage is applied
-///   .govuk-grid-column-one-half-at-desktop {
+///   .govuk-grid-column-one-half-from-desktop {
 ///     @include govuk-grid-column(one-half, $at: desktop);
 ///   }
 ///

data/node_modules/govuk-frontend/dist/govuk/helpers/_links.scss

@@ -229,7 +229,7 @@
   }
 
   // Force a colour change on hover to work around a bug in Safari
-  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  // https://webkit.org/b/224483
   &:hover {
     @if type-of($govuk-text-colour) == color {
       color: rgba($govuk-text-colour, 0.99);
@@ -265,7 +265,7 @@
   }
 
   // Force a colour change on hover to work around a bug in Safari
-  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  // https://webkit.org/b/224483
   &:hover,
   &:active {
     color: rgba(govuk-colour("white"), 0.99);

data/node_modules/govuk-frontend/dist/govuk/helpers/_shape-arrow.scss

@@ -54,7 +54,7 @@
     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
             clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 3
 
-    border-width: 0 $perpendicular $height $perpendicular;
+    border-width: 0 $perpendicular $height;
     border-bottom-color: inherit; // 2
   } @else if $direction == "right" {
     -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);

data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss

@@ -79,6 +79,23 @@
   font-variant-numeric: tabular-nums if($important, !important, null);
 }
 
+/// Word break helper
+///
+/// Forcibly breaks long words that lack spaces, such as email addresses,
+/// across multiple lines when they wouldn't otherwise fit.
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally used to create override classes.
+/// @access public
+
+@mixin govuk-text-break-word($important: false) {
+  // IE 11 and Edge 16–17 only support the non-standard `word-wrap` property
+  word-wrap: break-word if($important, !important, null);
+
+  // All other browsers support `overflow-wrap`
+  overflow-wrap: break-word if($important, !important, null);
+}
+
 /// Convert line-heights specified in pixels into a relative value, unless
 /// they are already unit-less (and thus already treated as relative values)
 /// or the units do not match the units used for the font size.