katalyst-govuk-formbuilder 1.21.1 → 1.23.0

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

@@ -89,7 +89,7 @@
       cursor: pointer;
       -webkit-appearance: none;
 
-      @include govuk-media-query($from: tablet) {
+      @media #{govuk-from-breakpoint(tablet)} {
         margin-bottom: 14px;
       }
 
@@ -203,7 +203,7 @@
       cursor: pointer;
       -webkit-appearance: none;
 
-      @include govuk-media-query($from: tablet) {
+      @media #{govuk-from-breakpoint(tablet)} {
         padding-bottom: govuk-spacing(2);
       }
 
@@ -266,7 +266,7 @@
       padding-bottom: govuk-spacing(3);
       border-bottom: 0;
 
-      @include govuk-media-query($from: tablet) {
+      @media #{govuk-from-breakpoint(tablet)} {
         padding-bottom: govuk-spacing(4);
       }
     }
@@ -276,7 +276,7 @@
     .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
       padding-bottom: 3px;
 
-      @include govuk-media-query($from: desktop) {
+      @media #{govuk-from-breakpoint(desktop)} {
         padding-bottom: 2px;
       }
     }

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

@@ -97,7 +97,7 @@
   }
 
   .govuk-breadcrumbs--collapse-on-mobile {
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       .govuk-breadcrumbs__list-item {
         display: none;
 

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

@@ -82,7 +82,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
     cursor: pointer;
     -webkit-appearance: none;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: auto;
     }
 
@@ -247,7 +247,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
   .govuk-button__start-icon {
     margin-left: govuk-spacing(1);
 
-    @include govuk-media-query($from: desktop) {
+    @media #{govuk-from-breakpoint(desktop)} {
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;

data/node_modules/govuk-frontend/dist/govuk/components/exit-this-page/_index.scss

@@ -12,7 +12,7 @@
     left: 0;
     width: 100%;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: inline-block;
       right: 0;
       left: auto;

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/_index.scss

@@ -84,6 +84,7 @@
     padding: govuk-spacing(3) govuk-spacing(2);
     background-color: govuk-colour("white");
     text-align: left;
+    @include govuk-text-break-word;
   }
 
   // bugs documented with button using flex
@@ -103,7 +104,7 @@
     background-color: govuk-colour("light-grey");
     cursor: pointer;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width);
     }
 

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

@@ -59,7 +59,7 @@
 
   .govuk-footer__meta-item--grow {
     flex: 1; // Support: Flexbox
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       flex-basis: 320px; // Support: Flexbox
     }
   }
@@ -67,7 +67,7 @@
   .govuk-footer__licence-logo {
     display: inline-block;
     margin-right: govuk-spacing(2);
-    @include govuk-media-query($until: desktop) {
+    @media #{govuk-until-breakpoint(desktop)} {
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
@@ -141,7 +141,7 @@
     margin-bottom: govuk-spacing(6);
     padding-bottom: govuk-spacing(4);
 
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       padding-bottom: govuk-spacing(2);
     }
 
@@ -172,7 +172,7 @@
     column-gap: $govuk-gutter; // Support: Columns
   }
 
-  @include govuk-media-query($from: desktop) {
+  @media #{govuk-from-breakpoint(desktop)} {
     .govuk-footer__list--columns-2 {
       column-count: 2; // Support: Columns
     }

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

@@ -31,7 +31,7 @@
   }
 
   .govuk-header--with-js-navigation {
-    @include govuk-media-query($until: desktop) {
+    @media #{govuk-until-breakpoint(desktop)} {
       .govuk-header__logo {
         // Protect the absolute positioned menu button from overlapping with the
         // logo with right padding using the button's width
@@ -117,7 +117,7 @@
     fill: #00ffe0;
 
     // Override Dot colour when printing
-    @include govuk-media-query($media-type: print) {
+    @media print {
       fill: currentcolor;
     }
 
@@ -152,7 +152,7 @@
     // Align vertically with logo when not wrapped
     vertical-align: top;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-top: $product-name-offset-tablet;
       @-moz-document url-prefix() {
         margin-top: $product-name-offset-tablet - 0.5px;
@@ -184,11 +184,11 @@
       }
 
       // Remove top margin on the breakpoints too
-      @include govuk-media-query($from: tablet) {
+      @media #{govuk-from-breakpoint(tablet)} {
         margin-top: 0;
       }
 
-      @include govuk-media-query($from: desktop) {
+      @media #{govuk-from-breakpoint(desktop)} {
         margin-top: 0;
       }
     }
@@ -227,7 +227,7 @@
     margin-right: govuk-spacing(2);
     font-size: 30px; // We don't have a mixin that produces 30px font size
 
-    @include govuk-media-query($from: desktop) {
+    @media #{govuk-from-breakpoint(desktop)} {
       display: inline;
     }
 
@@ -277,7 +277,7 @@
       // Apply margins to internal elements to emulate padding
       margin-bottom: govuk-spacing(3);
 
-      @include govuk-media-query($from: desktop) {
+      @media #{govuk-from-breakpoint(desktop)} {
         // Magic number to align service name baseline with the GOV.UK logo
         $service-name-offset: 4px;
 
@@ -294,7 +294,7 @@
   .govuk-header__logo {
     @include govuk-responsive-margin($govuk-header-vertical-spacing-value, "bottom");
 
-    @include govuk-media-query($from: desktop) {
+    @media #{govuk-from-breakpoint(desktop)} {
       width: 33.33%;
       padding-right: $govuk-gutter-half;
       float: left;
@@ -319,7 +319,7 @@
   }
 
   .govuk-header__content {
-    @include govuk-media-query($from: desktop) {
+    @media #{govuk-from-breakpoint(desktop)} {
       width: 66.66%;
       padding-left: $govuk-gutter-half;
       float: left;
@@ -361,7 +361,7 @@
       @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
     }
 
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       position: absolute;
       // calculate top offset by:
       // - getting the vertical spacing for the top and the bottom of the header
@@ -374,7 +374,7 @@
       margin: 0;
     }
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       top: govuk-spacing(3);
     }
 
@@ -389,13 +389,13 @@
   }
 
   .govuk-header__navigation {
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       @include _govuk-rebrand {
         padding-bottom: govuk-spacing(3);
       }
     }
 
-    @include govuk-media-query($from: desktop) {
+    @media #{govuk-from-breakpoint(desktop)} {
       margin-bottom: govuk-spacing(2);
 
       @include _govuk-rebrand {
@@ -412,7 +412,7 @@
 
   .govuk-header__service-name + .govuk-header__navigation {
     @include _govuk-rebrand {
-      @include govuk-media-query($from: desktop) {
+      @media #{govuk-from-breakpoint(desktop)} {
         // If there's both a service name and navigation,
         // remove the extra padding between them on desktop
         padding-top: 0;
@@ -434,14 +434,14 @@
     }
 
     @include _govuk-rebrand {
-      @include govuk-media-query($from: mobile, $until: desktop) {
+      @media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} {
         padding-bottom: govuk-spacing(3);
       }
     }
   }
 
   .govuk-header__navigation--end {
-    @include govuk-media-query($from: desktop) {
+    @media #{govuk-from-breakpoint(desktop)} {
       margin: 0;
       padding: govuk-spacing(1) 0;
       text-align: right;
@@ -452,7 +452,7 @@
     padding: govuk-spacing(2) 0;
     border-bottom: 1px solid $govuk-header-nav-item-border-color;
 
-    @include govuk-media-query($from: desktop) {
+    @media #{govuk-from-breakpoint(desktop)} {
       display: inline-block;
       margin-right: govuk-spacing(3);
       padding: govuk-spacing(1) 0;
@@ -470,7 +470,7 @@
       padding-top: govuk-spacing(3);
 
       // ...except on desktop
-      @include govuk-media-query($from: desktop) {
+      @media #{govuk-from-breakpoint(desktop)} {
         padding-top: govuk-spacing(1);
       }
 
@@ -503,7 +503,7 @@
 
       // When printing, use the normal blue as this contrasts better with the
       // white printing header
-      @include govuk-media-query($media-type: print) {
+      @media print {
         color: $govuk-brand-colour;
       }
 
@@ -524,7 +524,7 @@
     border-bottom: 0;
   }
 
-  @include govuk-media-query($media-type: print) {
+  @media print {
     .govuk-header {
       border-bottom-width: 0;
       color: govuk-colour("black");

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

@@ -23,15 +23,7 @@
             appearance: none;
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      // Ensure outline appears outside of the element
-      outline-offset: 0;
-      // Double the border by adding its width again. Use `box-shadow` for this
-      // instead of changing `border-width` - this is for consistency with
-      // components such as textarea where we avoid changing `border-width` as
-      // it will change the element size. Also, `outline` cannot be utilised
-      // here as it is already used for the yellow focus state.
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+      @include govuk-focused-form-input;
     }
 
     &:disabled {
@@ -109,7 +101,7 @@
     }
 
     // Split prefix/suffix onto separate lines on narrow screens
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       display: block;
 
       .govuk-input {
@@ -138,7 +130,7 @@
     cursor: default;
     flex: 0 0 auto;
     // Split prefix/suffix onto separate lines on narrow screens
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       display: block;
       height: 100%;
       white-space: normal;
@@ -146,20 +138,20 @@
   }
 
   .govuk-input__prefix {
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       border-bottom: 0;
     }
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       border-right: 0;
     }
   }
 
   // Split prefix/suffix onto separate lines on narrow screens
   .govuk-input__suffix {
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       border-top: 0;
     }
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       border-left: 0;
     }
   }

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

@@ -19,7 +19,7 @@
     // text in high contrast mode
     border-bottom: 1px solid transparent;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: 2px govuk-spacing(4) govuk-spacing(1);
     }
   }
@@ -41,7 +41,7 @@
 
     background-color: $govuk-body-background-colour;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: $padding-tablet;
     }
 

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

@@ -8,7 +8,7 @@
     align-items: center;
     flex-wrap: wrap;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       flex-direction: row;
       align-items: flex-start;
     }
@@ -45,7 +45,7 @@
     // visually sit in the middle of their touch area
     text-align: center;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: block;
     }
   }
@@ -72,6 +72,7 @@
 
   // Only show first, last and non-link items on mobile
   .govuk-pagination__item--current,
+  .govuk-pagination__item--ellipsis,
   .govuk-pagination__item--ellipses,
   .govuk-pagination__item:first-child,
   .govuk-pagination__item:last-child {
@@ -92,6 +93,7 @@
     }
   }
 
+  .govuk-pagination__item--ellipsis,
   .govuk-pagination__item--ellipses {
     @include govuk-typography-weight-bold;
     color: $govuk-secondary-text-colour;

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

@@ -11,7 +11,7 @@
 
     text-align: center;
 
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(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
@@ -36,7 +36,7 @@
     color: govuk-colour("white");
     background: govuk-colour("green");
 
-    @include govuk-media-query($media-type: print) {
+    @media print {
       border-color: currentcolor;
       color: $govuk-print-text-colour;
       background: none;

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

@@ -8,7 +8,7 @@
     //   breakpoint
     // - being display: flex above the mobile breakpoint
 
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       flex-direction: row;
 
       // The default of `stretch` makes the toggle button appear taller than the
@@ -41,7 +41,7 @@
       display: none;
     }
 
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       // Buttons are normally 100% wide on mobile, but we don't want that here
       width: auto;
       flex-shrink: 0;

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

@@ -21,7 +21,7 @@
     margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
 
     @if $govuk-new-typography-scale {
-      @include govuk-media-query($from: tablet) {
+      @media #{govuk-from-breakpoint(tablet)} {
         margin-right: govuk-spacing(2);
       }
     }

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

@@ -145,7 +145,7 @@
   // =========================================================
 
   .govuk-radios--inline {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;

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

@@ -24,13 +24,7 @@
     background-color: govuk-colour("white");
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      // 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.
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+      @include govuk-focused-form-input;
     }
 
     &:disabled {

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

@@ -27,7 +27,7 @@
     flex-direction: column;
     align-items: start;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       flex-direction: row;
       flex-wrap: wrap;
     }
@@ -41,7 +41,7 @@
     margin: govuk-spacing(2) 0;
     border: 0 solid $govuk-service-navigation-link-colour;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       // inline-block is used as a fallback for browsers that don't support flexbox
       display: inline-block;
 
@@ -78,7 +78,7 @@
   }
 
   .govuk-service-navigation__item--active {
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(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);
@@ -86,7 +86,7 @@
       border-left-width: $govuk-service-navigation-active-link-border-width;
     }
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       @include _govuk-rebrand(
         "padding-bottom",
         $from: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width,
@@ -184,7 +184,7 @@
     //   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) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       flex-wrap: wrap;
       margin-bottom: 0;

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

@@ -2,7 +2,7 @@
   .govuk-summary-list {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table;
       width: 100%;
       table-layout: fixed; // Required to allow us to wrap words that overflow.
@@ -15,10 +15,10 @@
   .govuk-summary-list__row {
     border-bottom: 1px solid $govuk-border-colour;
 
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table-row;
     }
   }
@@ -31,7 +31,7 @@
   // Provide an empty 'cell' for rows that don't have actions – otherwise the
   // bottom border is not drawn for that part of the row in some browsers.
   .govuk-summary-list__row--no-actions {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       &::after {
         content: "";
         display: table-cell;
@@ -45,7 +45,7 @@
   .govuk-summary-list__actions {
     margin: 0; // Reset default user agent styles
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table-cell;
       padding-top: govuk-spacing(2);
       padding-right: govuk-spacing(4);
@@ -55,7 +55,7 @@
 
   .govuk-summary-list__actions {
     margin-bottom: govuk-spacing(3);
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 20%;
       text-align: right;
     }
@@ -71,13 +71,13 @@
   .govuk-summary-list__key {
     margin-bottom: govuk-spacing(1);
     @include govuk-typography-weight-bold;
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 30%;
     }
   }
 
   .govuk-summary-list__value {
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
   }
@@ -101,7 +101,7 @@
     display: inline-block;
   }
 
-  @include govuk-media-query($until: tablet) {
+  @media #{govuk-until-breakpoint(tablet)} {
     .govuk-summary-list__actions-list-item,
     .govuk-summary-card__action {
       margin-right: govuk-spacing(2);
@@ -117,7 +117,7 @@
     }
   }
 
-  @include govuk-media-query($from: tablet) {
+  @media #{govuk-from-breakpoint(tablet)} {
     .govuk-summary-list__actions-list-item,
     .govuk-summary-card__action {
       margin-left: govuk-spacing(2);
@@ -153,7 +153,7 @@
     }
 
     // Increase padding by 1px to compensate for 'missing' border
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
@@ -167,7 +167,7 @@
     border: 0;
 
     // Increase padding by 1px to compensate for 'missing' border
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
@@ -190,7 +190,7 @@
     border-bottom: 1px solid transparent;
     background-color: govuk-colour("light-grey");
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       justify-content: space-between;
       flex-wrap: nowrap;
@@ -203,7 +203,7 @@
     @include govuk-text-colour;
     margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(1);
     }
   }
@@ -218,7 +218,7 @@
     padding: 0;
     list-style: none;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       justify-content: right;
       text-align: right;
     }
@@ -251,7 +251,7 @@
   .govuk-summary-card__content {
     padding: govuk-spacing(3) govuk-spacing(3) 0;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: govuk-spacing(3) govuk-spacing(4);
     }
 

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

@@ -13,7 +13,7 @@
     // Modifier for tables with a lot of data. Tables with lots of data benefit
     // from a smaller font size on small screens.
     .govuk-table--small-text-until-tablet {
-      @include govuk-media-query($until: tablet) {
+      @media #{govuk-until-breakpoint(tablet)} {
         @include govuk-font-size($size: 16);
       }
     }