vanilla-framework 4.17.1 → 4.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.17.1",
+  "version": "4.18.1",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

package/scss/_base_button.scss

@@ -98,6 +98,21 @@
         margin-right: -$sph--small;
       }
     }
+
+    &.is-small {
+      & [class*='p-icon'] {
+        margin-left: $sph--x-small;
+        margin-right: $sph--x-small;
+
+        &:first-child {
+          margin-left: -$sph--x-small;
+        }
+
+        &:last-child {
+          margin-right: -$sph--x-small;
+        }
+      }
+    }
   }
 }
 

package/scss/_base_forms-range.scss

@@ -15,8 +15,10 @@
     // stylelint-enable property-no-vendor-prefix
     background-color: $color-transparent;
     border-radius: $track-radius;
-    margin: $sp-small 0;
+    height: $track-height;
+    margin: ($spv--small - $track-height * 0.5) 0;
     padding: 0;
+    vertical-align: bottom;
     width: 100%;
 
     // Chrome

package/scss/_base_forms.scss

@@ -25,6 +25,7 @@
     border: 0 solid transparent;
     border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
     border-radius: 0;
+    border-top: $input-border-thickness solid transparent;
     color: $colors--theme--text-default;
     font-family: unquote($font-base-family);
     font-size: 1rem;
@@ -62,7 +63,8 @@
       color: $colors--theme--text-muted;
     }
 
-    &.is-dense {
+    &.is-dense,
+    .p-form-validation__select-wrapper.is-dense & {
       margin: 0 0 $spv-nudge-compensation 0;
       padding-bottom: calc($spv-nudge - $spv--x-small - $input-border-thickness);
       padding-top: calc($spv-nudge - $spv--x-small - $input-border-thickness);

package/scss/_base_grid-definitions.scss

@@ -29,6 +29,7 @@
     }
   }
 
+  // Deprecated, use new 4/4/8 grid %vf-grid-row instead
   %vf-row {
     @extend %fixed-width-container;
 
@@ -70,6 +71,47 @@
     }
   }
 
+  %vf-grid-row {
+    @extend %fixed-width-container;
+
+    @supports (display: grid) {
+      display: grid;
+      grid-gap: 0 map-get($grid-gutter-widths, small);
+      grid-template-columns: repeat($grid-8-columns-small, minmax(0, 1fr));
+      grid-template-rows: auto;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: $grid-max-width;
+
+      & > * {
+        grid-column-end: span $grid-8-columns-small;
+      }
+
+      [class*='#{$grid-8-column-prefix}'] {
+        grid-column-start: auto;
+      }
+
+      // set static gutter width per breakpoint
+      @media (min-width: $threshold-4-6-col) {
+        grid-gap: 0 map-get($grid-gutter-widths, default);
+        grid-template-columns: repeat($grid-8-columns-medium, minmax(0, 1fr));
+
+        & > * {
+          grid-column-end: span $grid-8-columns-medium;
+        }
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        grid-gap: 0 map-get($grid-gutter-widths, default);
+        grid-template-columns: repeat($grid-8-columns, minmax(0, 1fr));
+
+        & > * {
+          grid-column-end: span $grid-8-columns;
+        }
+      }
+    }
+  }
+
   %vf-grid-container-padding {
     // set static outside padding per breakpoint
     padding-left: map-get($grid-margin-widths, small);

package/scss/_base_hr.scss

@@ -17,6 +17,7 @@
   }
 
   .row &,
+  .grid-row &,
   .u-fixed-width & {
     width: 100%;
   }

package/scss/_base_icon-definitions.scss

@@ -863,7 +863,7 @@
 
 // arrow-bottom-left
 @function vf-icon-arrow-bottom-left-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='M5.6 11.4h5.3v1.5H3V5.1h1.5v5.3l7.9-7.9 1.1 1.1-7.9 7.9Z'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M5.594 11.431h5.284v1.5H3.033V5.086h1.5v5.285l7.905-7.904 1.06 1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-bottom-left($color: $colors--light-theme--icon) {
@@ -876,7 +876,7 @@
 
 // arrow-bottom-right
 @function vf-icon-arrow-bottom-right-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='M10.4 11.5H5.1V13h7.8V5.2h-1.5v5.3l-7.8-8-1.1 1.1z'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M10.406 11.503H5.122v1.5h7.845V5.158h-1.5v5.285L3.563 2.538 2.503 3.6z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-bottom-right($color: $colors--light-theme--icon) {
@@ -889,7 +889,7 @@
 
 // arrow-down
 @function vf-icon-arrow-down-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M7.25 12.117 3.514 8.381l-1.06 1.06L7.47 14.46l.53.53.53-.53 5.018-5.017-1.061-1.06-3.737 3.736V.94h-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M7.25 12.117 3.514 8.381l-1.06 1.06L8 14.99l5.548-5.547-1.061-1.06-3.737 3.736V.94h-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-down($color: $colors--light-theme--icon) {
@@ -902,7 +902,7 @@
 
 // arrow-left
 @function vf-icon-arrow-left-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='m3.847 8.714 3.737 3.737-1.061 1.06-5.017-5.017-.53-.53.53-.53 5.017-5.017 1.06 1.06-3.736 3.737h11.178v1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='m3.847 8.714 3.736 3.737-1.06 1.06L.976 7.964l5.547-5.547 1.06 1.06-3.736 3.737h11.178v1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-left($color: $colors--light-theme--icon) {
@@ -915,7 +915,7 @@
 
 // arrow-right
 @function vf-icon-arrow-right-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='m12.154 8.714-3.737 3.737 1.06 1.06 5.018-5.017.53-.53-.53-.53-5.017-5.017-1.06 1.06 3.736 3.737H.976v1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='m12.154 8.714-3.737 3.737 1.06 1.06 5.548-5.547-5.547-5.547-1.06 1.06 3.736 3.737H.976v1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-right($color: $colors--light-theme--icon) {
@@ -928,7 +928,7 @@
 
 // arrow-top-left
 @function vf-icon-arrow-top-left-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='M5.6 4.5h5.3V3H3v7.8h1.5V5.5l7.9 7.9 1.1-1.1-7.9-7.9Z'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M5.594 4.497h5.284v-1.5H3.033v7.845h1.5V5.557l7.905 7.904 1.06-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-top-left($color: $colors--light-theme--icon) {
@@ -941,7 +941,7 @@
 
 // arrow-top-right
 @function vf-icon-arrow-top-right-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='M10.4 4.5H5.1V3h7.8v7.8h-1.5V5.5l-7.9 7.9-1.1-1.1 7.9-7.9Z'/%3Eą%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M10.406 4.497H5.122v-1.5h7.845v7.845h-1.5V5.557l-7.904 7.904-1.06-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-top-right($color: $colors--light-theme--icon) {
@@ -954,7 +954,7 @@
 
 // arrow-up
 @function vf-icon-arrow-up-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M7.25 3.811 3.514 7.547l-1.06-1.06L7.47 1.47 8 .94l.53.53 5.018 5.017-1.061 1.06L8.75 3.811v11.178h-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M7.25 3.811 3.514 7.547l-1.06-1.06L8 .94l5.548 5.547-1.061 1.06L8.75 3.811v11.178h-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-up($color: $colors--light-theme--icon) {
@@ -1006,7 +1006,7 @@
 
 // certification
 @function vf-icon-certification-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='m10.7 1.1.3.5c.2.3.5.5.8.6h.5c.6.3 1.1.9 1 1.6v.6c0 .4 0 .7.3 1l.3.4c.4.5.4 1.2 0 1.7l-.3.4c-.2.3-.3.6-.3 1v.6c0 .7-.4 1.2-1 1.4h-.5c-.3.2-.6.4-.8.6v4l-3-1.6-3 1.6v-3.9c-.2-.3-.5-.5-.8-.6h-.5c-.6-.3-1.1-.9-1-1.6v-.6c0-.4 0-.7-.3-1l-.3-.4c-.4-.5-.4-1.2 0-1.7l.3-.4c.2-.3.3-.6.3-1v-.6c0-.7.4-1.2 1-1.4h.5c.3-.2.6-.5.8-.8l.3-.5C5.7.5 6.3.2 7 .5l.5.2c.3.1.7.1 1 0L9 .5c.6-.2 1.3 0 1.7.5ZM9.5 2l-.4.2c-.6.2-1.3.2-1.9 0H7L6.5 2l-.3.4q-.6.75-1.5 1.2h-.2l-.5.2v.5c0 .6-.1 1.3-.5 1.8v.2c-.1 0-.4.4-.4.4l.3.4q.6.75.6 1.8v.7h.5c.6.3 1.2.7 1.6 1.2v.2c.1 0 .4.4.4.4l.5-.2c.6-.2 1.3-.2 1.9 0h.2l.4.2.3-.4q.6-.75 1.5-1.2h.2l.5-.2v-.5c0-.6.1-1.3.5-1.8v-.2c.1 0 .4-.4.4-.4l-.3-.4q-.6-.75-.6-1.8v-.7h-.5c-.6-.3-1.2-.7-1.6-1.2v-.2c-.1 0-.4-.4-.4-.4'/%3E%3Cpath d='m7.8 7.6 1.8-2.7-2.2 3.4L6 7.2l.7.6.7.5z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='m7.5 9.4-2-1.7 1-1.1.7.6L9 4.5l1.2.9z'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M6.488.475a1.4 1.4 0 0 0-1.193.627l-.307.462c-.199.3-.5.519-.847.616l-.536.15A1.404 1.404 0 0 0 2.58 3.742l.024.555c.015.36-.101.714-.325.996l-.343.436a1.4 1.4 0 0 0 0 1.744l.343.435c.224.282.34.637.325.996l-.024.555a1.404 1.404 0 0 0 1.025 1.412l.536.15c.346.097.648.316.847.616l.016.023v3.887l3-1.588 3 1.588v-3.899l.1-.134c.194-.237.458-.41.755-.493l.536-.15A1.404 1.404 0 0 0 13.42 9.46l-.024-.555c-.015-.36.101-.714.325-.996l.343-.435a1.4 1.4 0 0 0 0-1.744l-.343-.436a1.5 1.5 0 0 1-.325-.996l.024-.555a1.404 1.404 0 0 0-1.025-1.412l-.536-.15a1.5 1.5 0 0 1-.847-.616l-.307-.462a1.404 1.404 0 0 0-1.66-.54l-.522.194a1.5 1.5 0 0 1-1.046 0L6.955.563a1.4 1.4 0 0 0-.467-.088m.016 1.52.45.167.204.068a3 3 0 0 0 1.889-.068l.45-.168.265.4.127.176c.394.51.942.88 1.566 1.055l.463.129-.02.48-.002.215c.02.644.246 1.268.649 1.776l.297.375-.297.377-.127.173a3 3 0 0 0-.52 1.817l.02.478-.463.131-.205.065a3 3 0 0 0-1.488 1.166l-.266.398-.45-.166-.204-.068a3 3 0 0 0-1.889.068l-.45.166-.265-.398-.127-.176a3 3 0 0 0-1.566-1.055l-.465-.13.022-.48.002-.214a3 3 0 0 0-.649-1.775L3.156 6.6l.3-.375.128-.174a3 3 0 0 0 .518-1.817l-.022-.48.465-.129.205-.066a3 3 0 0 0 1.488-1.164ZM8.96 4.528 7.199 7.19l-.681-.59-.983 1.133.684.592 1.289 1.117.943-1.423 1.76-2.663Z'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-certification($color: $colors--light-theme--icon) {

package/scss/_base_placeholders.scss

@@ -132,6 +132,17 @@
   }
 
   // Utilities
+  %u-off-screen {
+    &:not(:focus):not(:active) {
+      clip-path: inset(50%);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+  }
+
   %vf-hide-text {
     overflow: hidden;
     // vw value necessary because text indent in % does not work with padding;

package/scss/_layouts_fluid-breakout.scss

@@ -69,6 +69,7 @@
         }
       }
 
+      // TODO implement new 4/4/8 grid (.grid-row)
       .row {
         max-width: 100%;
         padding-left: 0;

package/scss/_layouts_full-width.scss

@@ -19,7 +19,7 @@
     }
 
     .l-full-width__sidebar {
-      background: $color-light;
+      background: $colors--theme--background-alt;
 
       // height of top navigation, as padding applied to .p-navigation__link + line-heigh of the anchor text inside
       $navigation-top-height: $spv--large * 2 + map-get($line-heights, default-text);
@@ -65,6 +65,7 @@
         // grid should align to the left (no left margin)
         // TODO: ideally this should be applied to %fixed-width-container
         .row,
+        .grid-row,
         .u-fixed-width {
           margin-left: 0;
         }
@@ -84,6 +85,7 @@
 
       .l-main {
         .row,
+        .grid-row,
         .u-fixed-width {
           margin-left: auto;
         }

package/scss/_patterns_badge.scss

@@ -3,10 +3,10 @@
 @mixin vf-p-badge {
   %vf-badge {
     @extend %x-small-text;
-    background-color: $colors--light-theme--text-default;
+    background-color: $colors--theme--text-default; // inverse the theme by using the text color
     border-radius: 1rem;
     box-sizing: content-box;
-    color: $color-x-light;
+    color: $colors--theme--background-default; // inverse the theme by using the baackground color
     margin-bottom: 0;
     max-width: 4ch;
     overflow: hidden;
@@ -19,7 +19,8 @@
   }
 
   .p-badge--negative {
-    background-color: $color-negative;
+    background-color: $colors--theme--button-negative-default;
+    color: $colors--theme--button-negative-text;
   }
 
   .p-chip,

package/scss/_patterns_equal-height-row.scss

@@ -25,6 +25,7 @@
 @mixin vf-p-equal-height-row {
   .p-equal-height-row,
   .p-equal-height-row--wrap {
+    // TODO use new 4/4/8 grid (`%vf-grid-row`)
     @extend %vf-row;
 
     position: relative;
@@ -139,6 +140,7 @@
   // ADVANCED GRID SUPPORT
 
   // Support for 25-75 split on large screen size
+  // TODO implement with new 4/4/8 grid (.grid-row)
   .row--25-75-on-large > .col,
   .row > .col-9 {
     & .p-equal-height-row,

package/scss/_patterns_form-help-text.scss

@@ -7,6 +7,10 @@
     color: $colors--theme--text-muted;
     margin-top: -$sp-unit;
 
+    .is-dense + & {
+      margin-top: 0;
+    }
+
     &.is-tick-element {
       margin-left: $sph--large + $form-tick-box-size;
     }

package/scss/_patterns_form-validation.scss

@@ -15,6 +15,10 @@
     @extend %small-text;
     @extend %vf-validation-wrapper;
 
+    .is-dense + & {
+      margin-top: 0;
+    }
+
     margin-top: -$sp-unit;
   }
 

package/scss/_patterns_grid-8.scss

@@ -0,0 +1,167 @@
+@import 'settings';
+
+// CSS grid implementation of columns for all screens sizes
+@mixin vf-grid-8-column($col) {
+  @supports (display: grid) {
+    grid-column-end: span #{$col};
+
+    //nesting
+    @if $col > 1 {
+      & .grid-row {
+        grid-template-columns: repeat($col, minmax(0, 1fr));
+      }
+    }
+  }
+}
+
+@mixin vf-grid-8-column-reordering($label, $col-count, $reset: false) {
+  @for $i from 1 through $col-count {
+    .grid-row [class*='#{$grid-8-column-prefix}'].#{$grid-8-column-prefix}start-#{$label}-#{$i} {
+      @if $reset {
+        grid-column-start: initial;
+      } @else {
+        grid-column-start: #{$i};
+      }
+    }
+
+    .#{$grid-8-column-prefix}order-#{$label}-#{$i} {
+      @if $reset {
+        order: initial;
+      } @else {
+        order: #{$i};
+      }
+    }
+  }
+}
+
+@mixin vf-p-grid-8 {
+  // FIXME: this should be removed from framework SCSS
+  // (see https://github.com/canonical/vanilla-framework/issues/3199)
+  .grid-demo .grid-col,
+  .grid-demo [class*='#{$grid-8-column-prefix}'] {
+    background: $colors--theme--background-negative-default;
+    margin-bottom: $spv--small;
+  }
+
+  .grid-row {
+    @extend %vf-grid-row;
+  }
+
+  // mobile grid
+
+  // by default medium and large screen col classes should span full width on mobile (to match block level element behaviour)
+  %grid-8-span-on-mobile {
+    grid-column: auto / span $grid-8-columns-small;
+  }
+
+  @for $i from 1 through $grid-8-columns-medium {
+    .#{$grid-8-medium-col-prefix}#{$i} {
+      @extend %grid-8-span-on-mobile;
+      @extend %display-block;
+    }
+  }
+
+  @for $i from 1 through $grid-8-columns {
+    .#{$grid-8-large-col-prefix}#{$i} {
+      @extend %grid-8-span-on-mobile;
+      @extend %display-block;
+    }
+  }
+
+  // col-small-X classes define grid for small screen
+  @for $i from $grid-8-columns-small through 1 {
+    .#{$grid-8-small-col-prefix}#{$i} {
+      @extend %display-block;
+      @include vf-grid-8-column($i);
+
+      width: 100%;
+    }
+  }
+
+  // tablet grid
+
+  // on medium/tablet screens, small and large grid class names span full width (to match block level element behaviour)
+  %grid-8-span-on-tablet {
+    @media (min-width: $threshold-4-6-col) {
+      grid-column: auto / span $grid-8-columns-medium;
+    }
+  }
+
+  @for $i from 1 through $grid-8-columns-small {
+    .#{$grid-8-small-col-prefix}#{$i} {
+      @extend %grid-8-span-on-tablet;
+    }
+  }
+
+  @for $i from 1 through $grid-8-columns {
+    .#{$grid-8-large-col-prefix}#{$i} {
+      @extend %grid-8-span-on-tablet;
+    }
+  }
+
+  // col-medium-X classes define grid for medium screens
+  @media (min-width: $threshold-4-6-col) {
+    @for $i from $grid-8-columns-medium through 1 {
+      .#{$grid-8-medium-col-prefix}#{$i} {
+        @include vf-grid-8-column($i);
+
+        width: 100%;
+      }
+    }
+  }
+
+  // desktop grid
+
+  // on desktop screens small and medium grid class names span full width (to match block level element behaviour)
+  %grid-8-span-on-desktop {
+    @media (min-width: $threshold-6-12-col) {
+      grid-column: auto / span $grid-8-columns;
+    }
+  }
+
+  @for $i from 1 through $grid-8-columns-small {
+    .#{$grid-8-small-col-prefix}#{$i} {
+      @extend %grid-8-span-on-desktop;
+    }
+  }
+
+  @for $i from 1 through $grid-8-columns-medium {
+    .#{$grid-8-medium-col-prefix}#{$i} {
+      @extend %grid-8-span-on-desktop;
+    }
+  }
+
+  // col-X class names define grid on large/desktop screens
+  @media (min-width: $threshold-6-12-col) {
+    @for $i from $grid-8-columns through 1 {
+      // set col-* to span respective number of columns on desktop
+      .#{$grid-8-large-col-prefix}#{$i} {
+        // on smaller screens let them display full width one under another
+        @include vf-grid-8-column($i);
+      }
+    }
+  }
+
+  // column reordering
+  $offsets: (
+    (small, 0, $threshold-4-6-col, $grid-8-columns-small),
+    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-8-columns-medium),
+    (large, $threshold-6-12-col, false, $grid-8-columns)
+  );
+
+  @each $label, $breakpoint-min, $breakpoint-reset, $col-count in $offsets {
+    @if $breakpoint-min == 0 {
+      @include vf-grid-8-column-reordering($label, $col-count);
+    } @else {
+      @media (min-width: #{$breakpoint-min}) {
+        @include vf-grid-8-column-reordering($label, $col-count);
+      }
+    }
+
+    @if $breakpoint-reset {
+      @media (min-width: #{$breakpoint-reset}) {
+        @include vf-grid-8-column-reordering($label, $col-count, $reset: true);
+      }
+    }
+  }
+}

package/scss/_patterns_grid.scss

@@ -1,5 +1,6 @@
 @import 'settings';
 
+// Deprecated, use new 4/4/8 grid instead.
 // CSS grid implementation of columns for all screens sizes
 @mixin vf-grid-column($col) {
   @supports (display: grid) {
@@ -192,6 +193,7 @@
   }
 
   // Common grid patterns
+  // TODO implement the common grid patterns for the new 4/4/8 grid (.grid-row--)
   $col-50-medium: calc($grid-columns-medium / 2);
 
   $col-25: calc($grid-columns / 4);

package/scss/_patterns_icons.scss

@@ -89,6 +89,10 @@
       vertical-align: 0;
     }
   }
+
+  p > [class*='p-icon'] {
+    vertical-align: middle;
+  }
   // stylelint-enable selector-max-type
 }
 

package/scss/_patterns_image.scss

@@ -84,6 +84,11 @@ $aspect-ratios: (
     justify-content: center;
     text-align: center;
 
+    // If there is a child element that is not the image, don't let it affect the layout
+    & > *:not(.p-image-container__image) {
+      display: contents;
+    }
+
     &.is-highlighted {
       background: $colors--theme--background-alt;
     }
@@ -110,7 +115,7 @@ $aspect-ratios: (
   // Deprecated; will be removed in v5
   .p-image--bordered {
     border: {
-      color: $color-mid-light;
+      color: $colors--theme--border-low-contrast;
       style: solid;
       width: 1px;
     }
@@ -118,6 +123,6 @@ $aspect-ratios: (
 
   // Deprecated; will be removed in v5
   .p-image--shadowed {
-    box-shadow: 0 1px 5px 1px color.scale($color-mid-light, $alpha: -80%);
+    box-shadow: $box-shadow;
   }
 }

package/scss/_patterns_lists.scss

@@ -428,6 +428,7 @@ $list-step-bullet-margin: $sph--x-large;
 
     .p-stepped-list__item {
       @extend %numbered-step-item;
+      // TODO use new grid (`%vf-grid-row`)
       @extend %vf-row;
       @include vf-b-row-reset;
 

package/scss/_patterns_navigation.scss

@@ -213,6 +213,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
   .p-navigation__row--25-75 {
     // ideally we'd like to extend row only on large screens,
     // but that's not possible to use @extend inside media query
+    // TODO implement with new 4/4/8 grid (`%vf-grid-row`)
     @extend %vf-row;
 
     // when mobile navigation is displayed, remove default row padding
@@ -788,6 +789,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
 
     // rows think they are nested (because they are inside of navigation row)
     // we need to reset them back to original state
+    // TODO add support for new 4/4/8 grid (.grid-row)
     .row,
     [class*='row--'] {
       @extend %fixed-width-container--common-properties;

package/scss/_patterns_search-and-filter.scss

@@ -18,15 +18,15 @@
 
   // When the search and filter is not expanded, but is overflowing with chips, we need to
   // specify a height that matches that of a standard input element. This height is a combination
-  // of an input's line-height, its vertical padding, and a nudge.
-  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - $input-border-thickness);
+  // of an input's line-height, its vertical padding, and the (top transparent) border.
+  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $input-vertical-padding + $input-border-thickness);
 
   .p-search-and-filter {
     border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
     position: relative;
 
     .p-search-and-filter__search-container {
-      align-items: center;
+      align-items: flex-start;
       background-color: $colors--theme--background-inputs;
       display: flex;
       flex-wrap: wrap;
@@ -47,7 +47,7 @@
       }
 
       .p-chip {
-        margin-bottom: $spv--x-small;
+        margin-bottom: 0;
         margin-top: $spv--x-small;
       }
 
@@ -116,14 +116,31 @@
     }
 
     .p-search-and-filter__box {
+      align-items: center;
       display: inline-flex;
       flex: 1;
+      height: 100%;
       margin: 0;
       position: relative;
     }
 
+    // tab-selectable search button
+    .p-search-and-filter__search-button {
+      // Hide the search button unless it is focused
+      @extend %u-off-screen;
+      // Prevents the bottom margin of the search button from growing the height of the search container
+      @extend %u-no-margin--bottom;
+      // Make the button dense to ensure it fits vertically in the search box
+      @extend %vf-button-dense-vertical-padding;
+
+      // Make sure the hidden search button appears on top of the input field
+      &:focus {
+        z-index: 1;
+      }
+    }
+
     .p-search-and-filter__input {
-      border: 0;
+      border-bottom: 0; // only remove bottom border (replaced by component border), as the top transparent border is still needed for correct alignment
       box-shadow: none;
       flex-grow: 1;
       margin-bottom: 0;

package/scss/_patterns_search-box.scss

@@ -34,12 +34,7 @@
       @extend %transparent-button;
     }
 
-    // Theme set on body element
     .p-search-box__input {
-      background-color: $colors--theme--background-inputs;
-      border-color: $colors--theme--border-high-contrast;
-
-      color: $colors--theme--text-default;
       flex: 1 1 100%;
       margin-bottom: 0;
       padding-right: calc(2 * (2 * $spv-nudge + map-get($line-heights, default-text)));

package/scss/_patterns_table-expanding.scss

@@ -39,7 +39,8 @@
           display: none;
         }
 
-        .row {
+        .row,
+        .grid-row {
           max-width: 100%;
           padding: 0;
           width: 100%;

package/scss/_settings_grid.scss

@@ -29,3 +29,13 @@ $l-fluid-breakout-max-width: $grid-max-width !default;
 $l-fluid-breakout-aside-width: 14rem !default;
 $l-fluid-breakout-main-child-width: 13rem !default;
 $l-fluid-breakout-3-col-threshold: calc($grid-max-width + $l-fluid-breakout-aside-width);
+
+// New 4/4/8 grid
+
+$grid-8-columns-small: 4 !default;
+$grid-8-columns-medium: 4 !default;
+$grid-8-columns: 8 !default;
+$grid-8-column-prefix: 'grid-#{$grid-column-prefix}' !default;
+$grid-8-small-col-prefix: 'grid-#{$grid-small-col-prefix}' !default;
+$grid-8-medium-col-prefix: 'grid-#{$grid-medium-col-prefix}' !default;
+$grid-8-large-col-prefix: 'grid-#{$grid-large-col-prefix}' !default;

package/scss/_settings_placeholders.scss

@@ -3,7 +3,6 @@
 @import 'settings_colors';
 
 // Global placeholder settings
-$input-border-thickness: 1.5px;
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $colors--theme--border-default !default;

package/scss/_settings_spacing.scss

@@ -117,8 +117,11 @@ $sp-after: (
 // commonly occuring calculations available as variables
 $spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
+
+// form input spacing variables
 $input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
-$input-vertical-padding: calc($spv-nudge - 1px);
+$input-border-thickness: 1.5px;
+$input-vertical-padding: calc($spv-nudge - $input-border-thickness);
 
 // tick element variables
 $form-tick-box-size: 1rem;

package/scss/_utilities_equal-height.scss

@@ -7,7 +7,8 @@
     @media (min-width: $threshold-6-12-col) {
       display: flex;
 
-      &.row {
+      &.row,
+      &.grid-row {
         display: grid;
       }
     }

package/scss/_utilities_off-screen.scss

@@ -2,12 +2,7 @@
 
 // Positions element out of flow & off screen for screen readers
 @mixin vf-u-off-screen {
-  .u-off-screen:not(:focus):not(:active) {
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
+  .u-off-screen {
+    @extend %u-off-screen;
   }
 }

package/scss/_vanilla.scss

@@ -20,6 +20,7 @@
 @import 'patterns_form-validation';
 @import 'patterns_forms';
 @import 'patterns_grid';
+@import 'patterns_grid-8';
 @import 'patterns_heading-icon';
 @import 'patterns_headings';
 @import 'patterns_icons';
@@ -113,6 +114,7 @@
   @include vf-p-form-validation;
   @include vf-p-forms;
   @include vf-p-grid;
+  @include vf-p-grid-8;
   @include vf-p-heading-icon;
   @include vf-p-headings;
   @include vf-p-section;

package/templates/_macros/vf_quote-wrapper.jinja

@@ -0,0 +1,186 @@
+{#
+  Params
+  - title_text (string) (optional): The text to be displayed as the heading
+  - quote_size (string) (required): The size of the quote. Possible values are 'small', 'medium', 'large'. Default is 'medium'.
+  - quote_text (string) (required): The text of the quote. The macro will surround it with quotes, so there is no need to quote it yourself.
+  - citation_source_name_text (string) (optional): The name of the source being quoted
+  - citation_source_title_text (string) (optional): The title of the source being quoted
+  - citation_source_organisation_text (string) (optional): The organisation associated with the source being quoted.
+  - is_shallow (boolean) (optional): Whether the quote wrapper pattern should be displayed in a shallow section. Defaults to false.
+  Slots
+  - signpost_image (optional): The signpost_image of the source being quoted
+  - heading_link (optional): Link to be displayed beside the heading text
+  - cta (optional): Contents of the call to action block to be displayed below the quote
+  - image (optional): An image to be displayed below the quote
+#}
+{%- macro vf_quote_wrapper(
+  title_text="",
+  quote_size="medium",
+  quote_text="",
+  citation_source_name_text="",
+  citation_source_title_text="",
+  citation_source_organisation_text="",
+  is_shallow=False
+) -%}
+  {% set heading_link_content = caller('heading_link') %}
+  {% set has_heading_link =  heading_link_content|trim|length > 0 %}
+  {% set has_title = title_text|length > 0 %}
+  {% set has_heading_row = has_title or has_heading_link %}
+  {% set signpost_image_content = caller('signpost_image') %}
+  {% set has_signpost_image = signpost_image_content|trim|length > 0 %}
+  {% set has_citation_source_name = citation_source_name_text|trim|length > 0 %}
+  {% set has_citation_source_title = citation_source_title_text|trim|length > 0 %}
+  {% set has_citation_source_organisation = citation_source_organisation_text|trim|length > 0 %}
+  {% set has_citation = has_citation_source_name or has_citation_source_title or has_citation_source_organisation %}
+  {% set cta_content = caller('cta') %}
+  {% set has_cta = cta_content|trim|length > 0 %}
+  {% set image_content = caller('image') %}
+  {% set has_image = image_content|trim|length > 0 %}
+  {% set quote_size = quote_size|trim|lower %}
+
+  {# Translate quote size param to quote heading level #}
+  {% if quote_size == 'large' %}
+    {% set quote_heading_level = 2 %}
+  {% elif quote_size == 'small' %}
+    {% set quote_heading_level = 6 %}
+  {% else %}
+    {% set quote_heading_level = 4 %}
+  {% endif %}
+
+  {%- macro _quote_body() -%}
+    <div class="p-section--shallow">
+      <p class="p-heading--{{ quote_heading_level }}">
+        <i>
+          &#8220;{{ quote_text }}&#8221;
+        </i>
+      </p>
+    </div>
+  {%- endmacro %}
+
+  {%- macro _citation_block() -%}
+    {%- if has_citation -%}
+      {#- Optional citation block -#}
+      <p>
+        {% if has_citation_source_name -%}
+          {#- Optional citation source name -#}
+          <strong>{{ citation_source_name_text }}</strong>
+          {% if has_citation_source_title or has_citation_source_organisation -%}
+            {#- If the citation name is followed by title and/or organisation, add a line break -#}
+            <br>
+          {% endif -%}
+        {% endif -%}
+        {% if has_citation_source_title or has_citation_source_organisation -%}
+          {#- Optional citation source title and/or organisation -#}
+          <span class="u-text--muted">
+            {% if has_citation_source_title -%}
+              {#- Optional citation source title -#}
+              {{ citation_source_title_text }}
+              {%- if has_citation_source_organisation %}
+                {#- Add a line break between the title and org if both are present -#}
+                <br>
+              {%- endif %}
+            {% endif %}
+            {%- if has_citation_source_organisation -%}
+              {#- Optional citation source organisation -#}
+              {{ citation_source_organisation_text }}
+            {%- endif %}
+          </span>
+        {%- endif %}
+      </p>
+    {% endif %}
+  {%- endmacro -%}
+
+  {%- macro _heading_block() %}
+    {% if has_heading_row -%}
+      {#- Optional heading -#}
+      <div class="p-section--shallow">
+        <hr class="p-rule--highlight is-fixed-width">
+        <div class="row">
+          {%- if has_title %}
+            {#- Optional heading text -#}
+            <div class="col-3 col-medium-2">
+              <p class="p-muted-heading">{{ title_text }}</p>
+            </div>
+          {%- endif -%}
+
+          {%- if has_heading_link %}
+            {#- Optional heading link  -#}
+            <div class="col-3 col-medium-4 col-start-large-10 col-start-medium-3">
+              <p class="p-text--default">
+                {{ heading_link_content }}
+              </p>
+            </div>
+          {% endif -%}
+        </div>
+      </div>
+    {% endif -%}
+  {%- endmacro %}
+
+  <div class="p-section{% if is_shallow %}--shallow{% endif %}">
+    {{- _heading_block() -}}
+    <div class="row">
+      {% if has_signpost_image -%}
+        {% if not has_heading_row %}
+          {#- 
+            If a signpost is present, but no heading row, the signpost is the first piece of content in the pattern on small.
+            So, we place a standard rule above the signpost to separate it from the preceding section.
+          -#}
+          <hr class="p-rule u-hide--medium u-hide--large">
+        {% endif %}
+        {#- Optional signpost image -#}
+        <div class="col-3 col-medium-2">
+          <div class="p-section--shallow">
+            {{ signpost_image_content }}
+          </div>
+        </div>
+      {% endif -%}
+      
+      <div class="col-9 col-start-large-4 col-medium-4 col-start-medium-3">
+        {% if has_heading_row %}
+          {#- If a heading is present, a muted rule separates the heading from the quote, and can be used on all breakpoints. -#}
+          <hr class="p-rule--muted">
+        {% elif has_signpost_image %}
+          {#- 
+            If a heading is not present, we use a standard rule to separate the pattern from preceding content on large and medium.
+            On small, the signpost is stacked above the quote, so we use a muted rule to separate the signpost from the quote.
+          -#}
+          <hr class="p-rule u-hide--small">
+          <hr class="p-rule--muted u-hide--large u-hide--medium">
+        {% else %}
+          {#- If neither heading nor signpost image is present, use a standard rule on all screen sizes to separate from preceding section -#}
+          <hr class="p-rule">
+        {% endif %}
+        {% if has_citation -%}
+          {#-  When a citation is present, wrap the quote and citation in a nested grid to space them properly  -#}
+          <div class="row">
+            <div class="col-6">
+              {{ _quote_body() }}
+            </div>
+            <div class="col-3">
+              <hr class="p-rule--muted u-hide--large">
+              {{ _citation_block() }}
+            </div>
+          </div>
+        {% else -%}
+          {#-  When no citation is present, display quote body without a nested grid  -#}
+          {{ _quote_body() }}
+        {% endif -%}
+
+        {%- if has_cta or has_image -%}
+          {#-  Optional CTA and/or image block  -#}
+          {%- if has_cta %}
+            {#-  Optional CTA block -#}
+            <div class="p-cta-block">
+              {{ cta_content }}
+            </div>
+          {% endif -%}
+
+          {% if has_image -%}
+            {#-  Optional image block  -#}
+            {{ image_content }}
+          {% endif -%}
+        {% endif -%}
+      </div>
+    </div>
+  </div>
+{% endmacro -%}

package/templates/_macros/vf_rich-vertical-list.jinja

@@ -0,0 +1,127 @@
+# Params
+# title_text (string) (required): Title of the rich vertical list
+# list_item_tick_style (string) (optional): Type of list item tick styling. Options are "bullet", "tick", "number".
+# is_flipped (boolean) (optional): Whether the list items are flipped so image is on the left and the text is on the right. Defaults to false.
+# Slots
+# description: Paragraph-style description content
+# logo_section Logo section block
+# list_item_[1-7]: List item content, assumed to be li.p-list__item
+# image (required)
+{% macro vf_rich_vertical_list(
+  title_text,
+  list_item_tick_style="",
+  is_flipped=false
+) -%}
+  {% set description_content = caller('description') %}
+  {% set has_description = description_content|trim|length > 0 %}
+  {% set logo_section_content = caller('logo_section') %}
+  {% set has_logo_section = logo_section_content|trim|length > 0 %}
+  {% set cta_content = caller('cta') %}
+  {% set has_cta = cta_content|trim|length > 0 %}
+  {% set has_list = caller('list_item_1')|trim|length > 0 %}
+  {% set image_content = caller('image') %}
+  {% set max_list_items = 7 %}
+
+  {% set list_item_tick_style=list_item_tick_style|trim|lower %}
+  {% if list_item_tick_style|length > 0 and list_item_tick_style not in ['bullet', 'tick', 'number'] %}
+    {% set list_item_tick_style = '' %}
+  {% endif %}
+
+  {% if list_item_tick_style == "bullet" %}
+    {% set list_item_tick_class = "has-bullet" %}
+  {% elif list_item_tick_style == "tick" %}
+    {% set list_item_tick_class = "is-ticked" %}
+  {% endif %}
+
+  {% set list_element_type = "ul" %}
+  {% if list_item_tick_style == "number" %}
+    {% set list_element_type = "ol" %}
+  {% endif %}
+
+  {#-
+    Construct list of list items using caller in the top-level macro
+    The _text_column_contents macro will not have access to the caller block, so we need to extract the list items here.
+  -#}
+  {% set list_items = [] %}
+  {% if has_list %}
+    {% for list_item_index in range(1, max_list_items + 1) %}
+      {% set list_item_content = caller('list_item_' + list_item_index|string) %}
+      {% set has_list_item_content = list_item_content|trim|length > 0 %}
+      {% if has_list_item_content %}
+        {{ list_items.append(list_item_content) or ""}}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+
+  {%- macro _text_column_contents(list_items) %}
+    {#- Mandatory title -#}
+    <div class="p-section--shallow">
+      <h2>{{ title_text }}</h2>
+    </div>
+
+    {%- if has_logo_section %}
+      {#- Optional logo section -#}
+      <div class="p-section--shallow">
+        <div class="u-fixed-width">
+        {{- logo_section_content -}}
+        </div>
+      </div>
+    {%- endif -%}
+
+    {%- if has_description %}
+      {#- Optional description -#}
+      <div class="p-section--shallow">
+        {{- description_content -}}
+      </div>
+    {%- endif -%}
+
+    {%- if list_items|length > 0 %}
+      {#- Optional list -#}
+      <{{ list_element_type }} class="p-list--divided">
+       {% for list_item in list_items %}
+         <li class="p-list__item {{ list_item_tick_class }}">
+           {{- list_item -}}
+         </li>
+        {% endfor %}
+      </{{ list_element_type }}>
+    {%- endif -%}
+
+    {%- if has_cta %}
+      {#- Optional CTA block -#}
+      <div class="p-cta-block">
+        {{- cta_content -}}
+      </div>
+    {%- endif -%}
+
+  {%- endmacro -%}
+
+  {%- macro _image_column_contents() %}
+    {#- Mandatory image -#}
+    <div class="p-section--shallow">
+      {{- image_content -}}
+    </div>
+  {%- endmacro -%}
+
+  <div class="p-section">
+    <div class="row--50-50-on-large">
+      <hr>
+      {% if not is_flipped -%}
+        <div class="col">
+          {{- _text_column_contents(list_items) -}}
+        </div>
+        <div class="col">
+          {{- _image_column_contents() -}}
+        </div>
+      {%- else -%}
+        {#- For flipped layout, place the image contents in the first column and the text in the second column -#}
+        <div class="col">
+          {{- _image_column_contents() -}}
+        </div>
+        <div class="col">
+          {{- _text_column_contents(list_items) -}}
+        </div>
+      {%- endif -%}
+    </div>
+  </div>
+
+{%- endmacro %}