katalyst-govuk-formbuilder 1.22.0 → 1.23.0

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);
       }
     }

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

@@ -46,7 +46,7 @@
 
   // GOV.UK Frontend JavaScript enabled
   .govuk-frontend-supported {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-tabs__list {
         @include govuk-clearfix;
         margin-bottom: 0;

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

@@ -21,13 +21,7 @@
     -webkit-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` 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/warning-text/_index.scss

@@ -19,7 +19,7 @@
     min-height: 35px;
     margin-top: -7px;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-top: -5px;
     }
 

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.11.2";
+  --govuk-frontend-version: "5.13.0";
 
   // CSS custom property for each breakpoint
   @each $name, $value in $govuk-breakpoints {

data/node_modules/govuk-frontend/dist/govuk/core/_lists.scss

@@ -38,7 +38,7 @@
   %govuk-list--number > li {
     margin-bottom: 0;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(1);
     }
   }
@@ -46,7 +46,7 @@
   %govuk-list--spaced > li {
     margin-bottom: govuk-spacing(2);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
   }

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

@@ -77,7 +77,7 @@
     margin-bottom: govuk-spacing(1);
     color: $govuk-secondary-text-colour;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: 0;
     }
   }
@@ -161,7 +161,7 @@
   %govuk-body-l + %govuk-heading-l {
     padding-top: govuk-spacing(1);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding-top: govuk-spacing(2);
     }
   }
@@ -180,7 +180,7 @@
   %govuk-list + %govuk-heading-s {
     padding-top: govuk-spacing(1);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding-top: govuk-spacing(2);
     }
   }