@iamproperty/components 3.4.7 → 3.5.0

package/assets/js/tests/table.spec.js

@@ -9,7 +9,7 @@ const basicTable = `<thead>
     <th>Heading 3</th>
   </tr>
 </thead>
-<tbody
+<tbody>
   <tr>
     <td>Cell 1</td>
     <td>Low</td>
@@ -133,7 +133,9 @@ describe('populateDataQueries', () => {
     const form = document.createElement('form');
     form.innerHTML += `<div><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
     tableModule.addDataAttributes(table);
+    tableModule.filterTable(table, form, document.createElement('div'));
     tableModule.populateDataQueries(table, form);
+    console.log(table.outerHTML);
     test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
         expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');
         expect(form.querySelector('[data-query="Heading 2 == Low"]').textContent).toEqual('2');

package/assets/sass/_corefiles.scss

@@ -15,27 +15,27 @@
 @use "components/container.scss";
 @use "components/table.scss";
 @use "foundations/links.scss";
-@use "components/buttons";
-@use "components/panel.scss";
+@use "foundations/buttons";
+@use "components/admin-panel.scss";
 @use "components/dialog.scss";
 
 @use "components/pagination.scss";
 
 // Bootstrap elements
-@import "../../node_modules/bootstrap/scss/_transitions.scss";
-@import "../../node_modules/bootstrap/scss/_badge.scss";
+@import "../bootstrap/scss/_transitions.scss";
+@import "../bootstrap/scss/_badge.scss";
 
 // Helpers
-//@import "../../node_modules/bootstrap/scss/helpers";
-@import "../../node_modules/bootstrap/scss/helpers/clearfix";
-//@import "../../node_modules/bootstrap/scss/helpers/colored-links";
-@import "../../node_modules/bootstrap/scss/helpers/ratio";
-@import "../../node_modules/bootstrap/scss/helpers/position";
-@import "../../node_modules/bootstrap/scss/helpers/stacks";
-@import "../../node_modules/bootstrap/scss/helpers/visually-hidden";
-//@import "../../node_modules/bootstrap/scss/helpers/stretched-link";
-@import "../../node_modules/bootstrap/scss/helpers/text-truncation";
-//@import "../../node_modules/bootstrap/scss/helpers/vr";
+//@import "../bootstrap/scss/helpers";
+@import "../bootstrap/scss/helpers/clearfix";
+//@import "../bootstrap/scss/helpers/colored-links";
+@import "../bootstrap/scss/helpers/ratio";
+@import "../bootstrap/scss/helpers/position";
+@import "../bootstrap/scss/helpers/stacks";
+@import "../bootstrap/scss/helpers/visually-hidden";
+//@import "../bootstrap/scss/helpers/stretched-link";
+@import "../bootstrap/scss/helpers/text-truncation";
+//@import "../bootstrap/scss/helpers/vr";
 
 // Utilities
-@import "../../node_modules/bootstrap/scss/utilities/_api.scss";
+@import "../bootstrap/scss/utilities/_api.scss";

package/assets/sass/_forms.scss

@@ -1,10 +1,10 @@
 @use "_func" as *;
 
-@import "../../node_modules/bootstrap/scss/forms/labels";
-@import "../../node_modules/bootstrap/scss/forms/form-control";
-@import "../../node_modules/bootstrap/scss/forms/form-select";
-@import "../../node_modules/bootstrap/scss/forms/form-check";
-@import "../../node_modules/bootstrap/scss/forms/form-range";
-@import "../../node_modules/bootstrap/scss/forms/input-group";
-@import "../../node_modules/bootstrap/scss/forms/validation";
+@import "../bootstrap/scss/forms/_labels";
+@import "../bootstrap/scss/forms/_form-control";
+@import "../bootstrap/scss/forms/_form-select";
+@import "../bootstrap/scss/forms/_form-check";
+@import "../bootstrap/scss/forms/_form-range";
+@import "../bootstrap/scss/forms/_input-group";
+@import "../bootstrap/scss/forms/_validation";
 @import "components/forms.scss";

package/assets/sass/_functions/functions.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "sass:map";
 
-@import "../../../node_modules/bootstrap/scss/_functions.scss";
+@import "../../bootstrap/scss/_functions";
 
 @function spacing($int){
   @return map.get($spacers, $int);

package/assets/sass/_functions/mixins.scss

@@ -1,4 +1,4 @@
-@import "../../../node_modules/bootstrap/scss/mixins";
+@import "../../bootstrap/scss/_mixins";
 
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   
@@ -134,20 +134,12 @@
 
 @mixin reset-colours($compatible:$compatible) {
   
-  --colour-body: var(--colour-body-theme);
-  --colour-heading: var(--colour-primary);
-  --colour-link: var(--colour-link-theme);
-  --colour-hover: var(--colour-hover-theme);
-  --colour-active: var(--colour-active-theme);
-  //--colour-underline: var(--colour-underline);
-  --colour-border: var(--colour-border-theme);
-  --colour-brand: var(--colour-primary);
-
-  --btn-bg: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-primary);
-  --btn-tertiary-bg: var(--colour-primary);
-  --btn-tertiary-hover-text: white;
+  @each $color, $value in $non-theme-colors {
+
+    --colour-#{$color}: #{$value};
+  }
+
+
 
   .text-primary {
     color: var(--colour-primary)!important;
@@ -156,16 +148,22 @@
 
 @mixin invert-colours($compatible:$compatible) {
   
+  @each $color, $value in $dark-mode-colors {
+
+    --colour-#{$color}: #{$value};
+  }
+
+  --btn-bg: var(--colour-inverted);
+  --btn-text: var(--colour-primary);
+  --btn-hover-text: var(--colour-heading);
+  --btn-tertiary-bg: var(--colour-inverted);;
+  --btn-tertiary-hover-text: var(--colour-primary);
+
+  
   --colour-body: #{$colour-inverted};
   --colour-heading: #{$colour-inverted};
   --colour-link: #{$colour-inverted};
   --colour-hover: #{$colour-inverted};
   --colour-border: #{$colour-inverted};
   --colour-brand: #{$colour-inverted};
-
-  --btn-bg: #{$colour-inverted};
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-heading);
-  --btn-tertiary-bg: #{$colour-inverted};
-  --btn-tertiary-hover-text: var(--colour-primary);
 }

package/assets/sass/_functions/utilities.scss

@@ -1,6 +1,6 @@
 @use "functions" as *;
 
-@import "../../../node_modules/bootstrap/scss/utilities";
+@import "../../bootstrap/scss/_utilities";
 
 // #region Sizing
 /* Enhance the max width utility to include fit-content which can come in handy for flex-box based layouts. */
@@ -104,7 +104,6 @@ $utilities: map-merge(
 //  #endregion
 
 // #region Gradient colours 
-
 $utilities: map-merge(
   $utilities,
   (
@@ -116,7 +115,7 @@ $utilities: map-merge(
       ),
       values:
       (
-        "secondary": linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%),
+        "success": linear-gradient(var(--gradient-direction), var(--colour-success) 0, transparent 100%),
         "primary": linear-gradient(var(--gradient-direction), var(--colour-primary) 0, transparent 100%),
         "info": linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)
       )
@@ -141,20 +140,63 @@ $utilities: map-merge(
 );
 $utilities: map-merge(
   $utilities,
-  (
+  ( 
     "gradient-direction": (
       css-var: true,
       class: gradient-direction,
       values:
       (
         "left": 90deg,
-        "right": -90deg,
-        "up": 360deg
+        "angle": 135deg
       )
     )
   )
 );
+// #endregion
 
-
-
-// #endregion
+// #region Tint helper classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "bg-opacity": (
+      css-var: true,
+      class: bg-opacity,
+      values:
+      (
+        "10": 0.1,
+        "20": 0.2,
+        "30": 0.3,
+        "40": 0.4,
+        "50": 0.5,
+        "60": 0.6,
+        "70": 0.7,
+        "80": 0.8,
+        "90": 0.9,
+        "100": 1
+      )
+    )
+  )
+);
+$utilities: map-merge(
+  $utilities,
+  (
+    "text-opacity": (
+      css-var: true,
+      class: text-opacity,
+      values:
+      (
+        "10": 0.1,
+        "20": 0.2,
+        "30": 0.3,
+        "40": 0.4,
+        "50": 0.5,
+        "60": 0.6,
+        "70": 0.7,
+        "80": 0.8,
+        "90": 0.9,
+        "100": 1
+      )
+    )
+  )
+);
+// #endregion

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,8 +82,9 @@ $success:       #b4e6a5;
 $info:          #1ebee6;
 $warning:       #ffa500;
 $danger:        #dc3545;
-$light:         #ffd2d2;
+$light:         #EEEEEE;
 $dark:          #46003c;
+$canvas:        #FCFCFC;
 
 
 // Functional/state variables 
@@ -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
@@ -413,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},
@@ -420,7 +459,8 @@ $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
 

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": #D8D8D8,
-  "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;
+    }
   }
 }