@iamproperty/components 3.4.6 → 3.5.0

package/assets/sass/_functions/variables.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
-@import "../../../node_modules/bootstrap/scss/_variables.scss";
-@import "../../../node_modules/bootstrap/scss/_maps.scss";
+@import "../../bootstrap/scss/_variables.scss";
+@import "../../bootstrap/scss/_maps.scss";
 
 // #region Grid Breakpoints, layouts
 $grid-breakpoints: (
@@ -82,14 +82,15 @@ $success:       #b4e6a5;
 $info:          #1ebee6;
 $warning:       #ffa500;
 $danger:        #dc3545;
-$light:         #ffd2d2;
+$light:         #EEEEEE;
 $dark:          #46003c;
+$canvas:        #FCFCFC;
 
 
 // Functional/state variables 
 $colour-body: #595959;
 $colour-muted: #9d9d9d;
-$colour-border: #6f6f6f;
+$colour-border: #D8D8D8;
 $colour-link: $primary;
 $colour-focus: #000000;
 $colour-hover: #000000;
@@ -104,16 +105,23 @@ $grays: ();
 $theme-colors: ();
 $theme-colors: map-merge((
   "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
+  "secondary":    $secondary,
   "info":       $info,
   "warning":    $warning,
   "danger":     $danger,
-  "light":      $light,
+  "success":    $success,
   "dark":       $dark,
-  "admin":      #f0f0f0
+  "light":      $light,
+  "white":      $canvas
 ), $theme-colors);
 
+@each $color, $value in $theme-colors {
+
+  $vars: map-merge((
+    --colour-#{$color}-hex: $value
+  ), $vars);
+}
+
 
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 
@@ -121,7 +129,9 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 @each $color, $value in $theme-colors-rgb {
 
   $vars: map-merge((
-    --colour-#{$color}: rgba($value,var(--alpha, 1))
+    --colour-#{$color}-hex: $value,
+    --colour-#{$color}-rgb: $value,
+    --colour-#{$color}: rgba(var(--colour-#{$color}-rgb), var(--bg-opacity,1))
   ), $vars);
 }
 
@@ -132,7 +142,7 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
     @return #{map-get($theme-colors, #{$identifier})};
   }
 
-  @return var(--colour-#{$identifier});
+  @return rgba(var(--colour-#{$identifier}-rgb),var(--bg-opacity));
 }
 @function show-css-var-text($identifier) {
 
@@ -140,16 +150,16 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
     @return #{map-get($theme-colors, #{$identifier})};
   }
 
-  @return var(--colour-#{$identifier});
+  @return rgba(var(--colour-#{$identifier}-rgb),var(--text-opacity));
 }
 
 $utilities-colors: $theme-colors-rgb;
 
-$utilities-colors: map-merge(
+$utilities-text: map-merge(
   $utilities-colors,
   (
     "black": to-rgb($black),
-    "white": to-rgb($white),
+    "muted": to-rgb($colour-muted),
     "body": to-rgb($body-color)
   )
 );
@@ -162,39 +172,63 @@ $utilities-text-colors: map-loop($utilities-text, show-css-var-text, "$key");
 // Colours that we want setting but not used for Bootstraps mixins, i.e. .text-primary, .bg-muted
 $non-theme-colors: ();
 $non-theme-colors: map-merge((
-  "black":      #000000,
-  "white":      #ffffff,
   "muted":      $colour-muted,
-  "border":           $colour-border,
-  "border-light":     #eeeeee,
-  "link":             $colour-link,
-  "focus":            $colour-focus,
-  "hover":            $colour-hover,
-  "active":           $colour-active,
-  "selected":         $colour-selected,
-  "body": $colour-body,
-  "inverted": $colour-inverted
+  "body":       $body-color,
+  "border":     $colour-border,
+  "link":       var(--colour-primary),
+  "brand":      var(--colour-primary),
+  "underline":  var(--colour-secondary),
+  "heading":    var(--colour-primary),
+  "focus":      var(--colour-primary),
+  "hover":      var(--colour-primary),
+  "active":     var(--colour-primary),
+  "selected":   var(--colour-info),
+  "inverted":   $canvas,
+  "canvas":     $canvas,
+  "btn": var(--colour-primary),
+  "btn-bg": var(--colour-warning),
+  "btn-border": var(--colour-warning),
+  "btn-bg-hover": transparent,
+  "btn-hover": var(--colour-primary),
+  "btn-secondary": var(--colour-primary),
+  "btn-secondary-border": var(--colour-primary),
+  "btn-secondary-bg": transparent,
+  "btn-secondary-bg-hover": var(--colour-primary),
+  "btn-secondary-hover": var(--colour-inverted)
 ), $non-theme-colors);
 
 @each $color, $value in $non-theme-colors {
 
   $vars: map-merge((
-    --colour-#{$color}-theme: #{$value},
-    --colour-#{$color}: #{'var(--colour-'+$color+'-theme)'}
+    --colour-#{$color}: #{$value}
   ), $vars);
 }
 
-$vars: map-merge((
-  "--colour-white-theme": rgba(to-rgb(#ffffff),var(--alpha,1)),
-  "--colour-black-theme": rgba(to-rgb(#000000),var(--alpha,1)),
-  "--colour-body":  rgba(to-rgb($colour-body),var(--alpha,1)),
-  "--colour-white": rgba(to-rgb(#ffffff),var(--alpha,1)),
-  "--colour-black": rgba(to-rgb(#000000),var(--alpha,1)),
-  "--colour-admin-theme":      #f0f0f0
-), $vars);
-
-$gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
-
+$dark-mode-colors: map-merge($non-theme-colors, (
+  "link": var(--colour-inverted),
+  "body": var(--colour-inverted),
+  "heading": var(--colour-inverted),
+  "hover": var(--colour-inverted),
+  "active": var(--colour-inverted),
+  "border": var(--colour-inverted),
+  "brand": var(--colour-inverted),
+  "underline": var(--colour-inverted),
+  "canvas": var(--colour-primary),
+  "light": $light,
+
+  
+  "btn": #{$primary},
+  "btn-border": #{$colour-inverted},
+  "btn-bg": #{$colour-inverted},
+  "btn-hover": #{$colour-inverted},
+
+  
+  "btn-secondary": var(--colour-inverted),
+  "btn-secondary-border": var(--colour-inverted),
+  "btn-secondary-bg": transparent,
+  "btn-secondary-bg-hover": var(--colour-inverted),
+  "btn-secondary-hover": var(--colour-primary)
+));
 // #endregion
 
 // #region aspect ratios
@@ -331,7 +365,8 @@ $input-line-height: 1.5;
 $input-padding-y: 0.75em;
 $input-padding-x: 1em;
 $input-border-radius: rem(10);
-$input-border-color: var(--colour-border);
+$input-border-color: var(--colour-primary);
+$input-border-width: 2px;
 
 // sm
 $input-height-sm: null;
@@ -357,8 +392,9 @@ $input-group-addon-border-color: var(--colour-border);
 $form-select-padding-y: $input-padding-y;
 //$form-select-indicator-padding
 $form-select-padding-x: #{$input-padding-x};
-$form-select-border-color: var(--colour-border);
+$form-select-border-color: var(--colour-primary);
 $form-select-border-radius: $input-border-radius;
+$form-select-border-width: 2px;
 
 // Checkbox
 $form-check-input-width: 1.5rem;
@@ -369,13 +405,13 @@ $form-check-margin-bottom: #{rem(16)};
 $form-check-input-border: 1px solid var(--colour-border);
 
 $form-check-input-checked-color:          $primary;
-$form-check-input-checked-bg-color:       var(--colour-success);
+$form-check-input-checked-bg-color:       var(--colour-info);
 $form-check-input-checked-border-color:   var(--colour-border);
 $form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>");
 
 $form-check-input-indeterminate-color:          $primary;
-$form-check-input-indeterminate-bg-color:       var(--colour-success);
-$form-check-input-indeterminate-border-color:   var(--colour-success);
+$form-check-input-indeterminate-bg-color:       var(--colour-info);
+$form-check-input-indeterminate-border-color:   var(--colour-info);
 $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>");
 
 $form-switch-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-border}'/></svg>");
@@ -403,7 +439,7 @@ $card-cap-bg: transparent;
 // #endregion card-variables
 
 // #region Icons
-$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='2px'></path></svg>");
+$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='4px'></path></svg>");
 $icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
 $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
 $icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
@@ -411,6 +447,11 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 $icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
 $icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM14 21.484v-2.969c0-0.281-0.219-0.516-0.484-0.516h-3c-0.281 0-0.516 0.234-0.516 0.516v2.969c0 0.281 0.234 0.516 0.516 0.516h3c0.266 0 0.484-0.234 0.484-0.516zM13.969 16.109l0.281-9.703c0-0.109-0.047-0.219-0.156-0.281-0.094-0.078-0.234-0.125-0.375-0.125h-3.437c-0.141 0-0.281 0.047-0.375 0.125-0.109 0.063-0.156 0.172-0.156 0.281l0.266 9.703c0 0.219 0.234 0.391 0.531 0.391h2.891c0.281 0 0.516-0.172 0.531-0.391z'></path></svg>");
 
+
+$icon-filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'><path d='M0,28.5a.5.5,0,0,0,.5.5H2.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H7.45a2.5,2.5,0,0,0-4.9,0H.5A.5.5,0,0,0,0,28.5Zm3.5,0A1.5,1.5,0,1,1,5,30,1.5,1.5,0,0,1,3.5,28.5Zm6-5A1.5,1.5,0,1,1,11,25a1.5,1.5,0,0,1-1.5-1.5ZM11,21a2.5,2.5,0,0,0-2.45,2H.5a.5.5,0,0,0,0,1H8.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H13.45A2.5,2.5,0,0,0,11,21ZM6,20a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,6,20Zm2.45-2a2.5,2.5,0,0,0-4.9,0H.5a.5.5,0,0,0,0,1H3.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1Z' transform='translate(0 -16)'/></svg>");
+
+
+
 $vars: map-merge((
   --icon-blank: #{escape-svg($icon-blank)},
   --icon-sort: #{$icon-sort},
@@ -418,33 +459,33 @@ $vars: map-merge((
   --icon-close: #{escape-svg($icon-close)},
   --icon-tick: #{escape-svg($icon-tick)},
   --icon-question: #{escape-svg($icon-question)},
-  --icon-warning: #{escape-svg($icon-warning)}
+  --icon-warning: #{escape-svg($icon-warning)},
+  --icon-filter: #{escape-svg($icon-filter)}
 ), $vars);
 // #endregion
 
 // #region pagination
 // Default
 $pagination-color: var(--colour-heading);
-$pagination-disabled-color: var(--colour-muted);
+$pagination-disabled-color: var(--colour-border);
 $pagination-bg: transparent;
 $pagination-border-width: 1px;
-$pagination-border-color: var(--colour-border);
+$pagination-border-color: var(--colour-primary);
 
 // Hover and focus
 $pagination-hover-color: var(--colour-heading);
-$pagination-hover-bg: var(--colour-muted);
-$pagination-hover-border-color: var(--colour-border);
-$pagination-focus-color: var(--colour-hover);
-$pagination-focus-bg: var(--colour-muted);
+$pagination-hover-bg: var(--colour-info);
+$pagination-hover-border-color: var(--colour-info);
+$pagination-focus-color: var(--colour-heading);
+$pagination-focus-bg: var(--colour-info);
 
 // Active
-$pagination-active-color: var(--body-bg);
-$pagination-active-bg: var(--colour-heading);
-$pagination-active-border-color: var(--colour-heading);
-
+$pagination-active-color: var(--colour-primary);
+$pagination-active-bg: var(--colour-info);
+$pagination-active-border-color: var(--colour-info);
 // Disabled
 $pagination-disabled-bg: $pagination-bg;
-$pagination-disabled-border-color: $pagination-border-color;
+$pagination-disabled-border-color: var(--colour-border);
 // #endregion
 
 // #region Accordion
@@ -493,4 +534,17 @@ $zindex-modal-backdrop:             var(--index-overlay);
 $zindex-modal:                      var(--index-overlay);
 $zindex-popover:                    var(--index-above);
 $zindex-tooltip:                    var(--index-above);
+// #endregion
+
+// #region Table
+$td-mw-px: 120;
+$td-mw: #{rem($td-mw-px)};
+$table-padding-px: 32;
+$table-padding: #{rem($table-padding-px)};
+$table-mh-sm-px: 200;
+$table-mh-sm: #{rem($table-mh-sm-px)};
+$table-mh-md-px: 400;
+$table-mh-md: #{rem($table-mh-md-px)};
+$table-mh-lg-px: 600;
+$table-mh-lg: #{rem($table-mh-lg-px)};
 // #endregion

package/assets/sass/_tests/colours.spec.scss

@@ -3,28 +3,14 @@
 
 $test_colors: ();
 $test_colors: map-merge((
-  "primary": rgba(0, 49, 60, var(--alpha, 1)),
-  "secondary": rgba(180, 230, 165, var(--alpha, 1)),
-  "success": rgba(180, 230, 165, var(--alpha, 1)),
-  "info": rgba(30, 190, 230, var(--alpha, 1)),
-  "warning":  rgba(255, 165, 0, var(--alpha, 1)),
-  "danger": rgba(220, 53, 69, var(--alpha, 1)),
-  "light": rgba(255, 210, 210, var(--alpha, 1)),
-  "dark": rgba(70, 0, 60, var(--alpha, 1)),
-  "muted-theme": #9d9d9d,
-  "muted": var(--colour-muted-theme),
-  "border-theme": #6f6f6f,
-  "border": var(--colour-border-theme),
-  "link-theme": #00313c,
-  "link": var(--colour-link-theme),
-  "focus-theme": #000000,
-  "focus": var(--colour-focus-theme),
-  "hover-theme": #000000,
-  "hover": var(--colour-hover-theme),
-  "active-theme": #b4e6a5,
-  "active": var(--colour-active-theme),
-  "selected-theme": #1ebee6,
-  "selected": var(--colour-selected-theme)
+  "primary-hex":#00313c,
+  "secondary-hex":#b4e6a5,
+  "success-hex":#b4e6a5,
+  "info-hex":#1ebee6,
+  "warning-hex":#ffa500,
+  "danger-hex":#dc3545,
+  "light-hex":#EEEEEE,
+  "dark-hex":#46003c
 ), $test_colors);
 
 

package/assets/sass/components/accordion.scss

@@ -27,6 +27,9 @@
   @include transition($accordion-transition);
 
   --marker-bg: var(--colour-secondary);
+
+
+
   cursor: pointer;
   position: relative;
   max-width: 100%;
@@ -57,6 +60,8 @@
     overflow: hidden;
     background: var(--marker-bg);
     border-radius: 100%;
+
+
   }
 
   // Accordion icon
@@ -74,6 +79,14 @@
 
     @include transition($accordion-icon-transition);
     transform: rotate(90deg);
+
+
+    @media (forced-colors: active) {
+      content: "\25BA";
+      mask-image: none;
+      -webkit-mask-image: none;
+    }
+
   }
 
   &:hover,

package/assets/sass/components/admin-panel.scss

@@ -0,0 +1,106 @@
+@use "../_func" as *;
+
+.admin-panel {
+  --wrapper-padding: #{rem(32)};
+  display: block;
+  padding: var(--wrapper-padding);
+  box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
+  background-color: white;
+  border-radius: rem(8);
+  margin-bottom: rem(32);
+
+  &.bg-secondary{
+
+    background-color: rgba(#b4e6a5,0.3) !important;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
+    
+    background-color: var(--colour-info);
+    background-image: linear-gradient(90deg, var(--colour-success) 0, transparent 100%);
+
+    font-size: rem(18);
+    line-height: rem(24);
+    padding: rem(16) var(--wrapper-padding);
+    margin: calc(var(--wrapper-padding) * -1) calc(var(--wrapper-padding) * -1) rem(32) calc(var(--wrapper-padding) * -1);
+    display: block;
+    border-top-left-radius: rem(8);
+    border-top-right-radius: rem(8);
+  }
+
+  :is(iam-table, .iam-table) {
+    margin: 0 0 rem(32) 0;
+    padding: 0;
+    box-shadow: none;
+    background: none;
+  }
+
+  > *:last-child{
+    margin-bottom: 0!important;
+  }
+
+  > *:is(p):last-child{
+    padding-bottom: 0!important;
+  }
+}
+
+[class*="col"] .admin-panel:first-child:last-child {
+
+  min-height: calc(100% - 2rem);
+}
+
+.admin-panel .admin-panel__links {
+
+  padding: 0 var(--wrapper-padding);
+  margin: calc(var(--wrapper-padding) * -1) calc(var(--wrapper-padding) * -1) rem(32) calc(var(--wrapper-padding) * -1);
+
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--colour-border);
+
+  @include media-breakpoint-up(sm) {
+
+    flex-direction: row;
+  }
+
+  :is(a, label) {
+    margin: 0;
+    margin-left: calc(var(--wrapper-padding) * -1);
+    padding: #{rem(8)} var(--wrapper-padding);
+    width: 100%;
+    border-left: 3px solid var(--panel-tab-border, transparent);
+    position: relative;
+
+    &:after {
+      display: none;
+    }
+
+    @include media-breakpoint-up(sm) {
+
+      margin: 0;
+      padding: rem(24) rem(16) rem(8) rem(16);
+      width: auto;
+      border-left: none!important;
+      
+      border-bottom: 2px solid var(--panel-tab-border, transparent);
+
+      &:first-child {
+        margin-left: rem(-16);
+      }
+      &:last-child {
+        margin-right: rem(-16);
+      }
+    }
+  }
+
+  .current {
+    
+    --is-current: 1;
+    --panel-tab-border: var(--colour-secondary);
+    pointer-events: none;
+  }
+}

package/assets/sass/components/alert.scss

@@ -31,6 +31,14 @@
     transform: translate(-50%,0);
     bottom: 0;
   }
+
+  @media (forced-colors: active) {
+    
+    .alert__inner {
+      border: 1px solid CanvasText;
+      color: CanvasText;
+    }
+  }
 }
 
 // Dismissible alerts
@@ -53,6 +61,20 @@
     mask-size: 100%;
     mask-repeat: no-repeat;
     mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-close);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+
+    @media (forced-colors: active) {
+
+      &:before {
+        content: "X";
+      }
+      border: 1px solid CanvasText;
+      mask-image: none;
+      -webkit-mask-image: none;
+    }
   }
 }
 

package/assets/sass/components/applied-filters.scss

@@ -0,0 +1,65 @@
+@use "../_func.scss" as *;
+
+.applied-filters {
+
+  &:not(.applied-filters--compact):not(:empty):before {
+    content: "Applied filters";
+    font-weight: bold;
+    font-size: rem(18);
+    line-height: rem(22);
+    color: var(--colour-header);
+    margin-bottom: rem(16);
+    display: block;
+  }
+
+  &:not(:empty) {
+    margin-bottom: 1rem;
+  }
+}
+
+.applied-filters .filter {
+  
+  border: 1px solid var(--colour-border);
+  padding: 1rem rem(24) 1rem rem(24);
+  background: transparent;
+  margin-right: 0.5rem!important;
+  margin-bottom: 0.5rem!important;
+  line-height: rem(24);
+  white-space: nowrap;
+
+  &:after {
+    content: "";
+    display: inline-block;
+    height: rem(20);
+    width: rem(20);
+    padding:0;
+    margin-left: rem(24);
+    margin-bottom: -0.25rem;
+    border: none;
+    z-index: var(--index-focus);
+    background: currentColor;
+    mask-image: var(--icon-close);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-close);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+}
+
+.applied-filters--compact .filter {
+  background-color: var(--colour-light);
+  border: none;
+  padding: rem(10);
+  line-height: rem(16);
+    border-radius: rem(5);
+
+  &:after {
+    margin-left: rem(10);
+    height: rem(16);
+    width: rem(16);
+    margin-bottom: -0.1rem;
+  }
+}