Before you upgrade, please take note of any breaking changes and deprecation notices which may affect your site. View the Upgrade Guide to see examples of how to address breaking changes.

New features ✨

  • new Embed Aspect Ratio - the portrait variation displays media in an aspect ratio that fills the entire screen of a mobile device when in portrait mode #1075
<div class="embed embed--portrait">...</div>
  • you can now highlight a Tag with .tags__item--active #1052
<div class="tags">
  <ul class="tags__list">
    <li class="tags__item tags__item--active">...</li>
  • new Theme vars - Tags now change their colour depending on what Backgroud class its parent element uses #1081
    • --col-tags-bg
    • --col-tags-bg-active
    • --col-tags-bg-hover
    • --col-tags-text
    • --col-tags-text-hover
  • new Theme mixins - handle different colour palettes #1061
    • theme-light
    • theme-dark
    • theme-alt
  • new Background mixins - colour overrides to apply when using the .bg-x classes #1061
    • bg-secondary
    • bg-alt
    • bg-highlight
    • bg-accent

Bug fixes 🐛

  • fixed an issue introduced in v15.0.0 where images in Staff Listing lost their square aspect ratio #1083
  • fixed an issue where content inside .bg-secondary and .bg-accent failed to pass a11y #1061
  • Headers now have left and right spacing when used with the Left-aligned Jump Nav #1084
  • removed border from the alternate tabs colour Tabs variation #1071

Other changes

  • Accordion markup has been uplifted to comply with ally standards. Please note the new markup, as well as the unique IDs that link the button and panel #1065 #1077
<ul class="accordion">
  <li class="accordion__item">
    <h3 class="accordion__item-heading">
      <button aria-controls="accordion-panel-1" aria-expanded="false" class="accordion__button" id="accordion-button-1">
        <span class="accordion__title">...</span>
    <div aria-labelledby="accordion-button-1" role="region" id="accordion-panel-1" class="accordion__panel">...</div>
  • tidied up Tags component #1078 #1081
  • updated Jump Nav and Left-aligned Jump Nav #1082
    • title is now a paragraph using typography-level-5 and has a bottom border
    • gap between columns change on specific breakpoints
    • uses --sp-layout to control top and bottom container margin
  • added hover state to Filtered Listings #1069
  • removed border from Sidebar Tabs #1073
  • Table rows now inherit the background colour of its parent element #1074
  • Styled Table now changes the background color of even rows instead of odd #1074
  • removed the need for bg-primary mixin in Enquiry #1061
  • updated the following items to work with the alternate Background #1061
  • migrated assets/shared/_theme.css to theme-light #1061
  • renamed --col-listing-x variables to --col-listing-x-bg #1069
  • assets/shared/component-manager.js now binds true to mounted components instead of using cuid #1076
  • removed cuid package #1076

Documentation updates

  • tided up Embed Aspect Ratio documentation #1075
  • removed .zebra from Sortable Table #1074
  • added new variables to Listing Colours #1069
  • you can now preview four more Background colours #1061
    • the alternate background with ?preview=alternate-background
    • the secondary background with ?preview=secondary-background
    • the highlight background with ?preview=highlight-background
    • the accent background with ?preview=accent-background