@iamproperty/components 3.5.0 → 3.6.0

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

@@ -131,11 +131,10 @@ describe('populateDataQueries', () => {
     const table = document.createElement('table');
     table.innerHTML = basicTable;
     const form = document.createElement('form');
-    form.innerHTML += `<div><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
+    form.innerHTML += `<div><input name="heading" value="Low" data-filter="Heading 2" /><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

@@ -14,6 +14,7 @@
 @use "components/tooltips.scss";
 @use "components/container.scss";
 @use "components/table.scss";
+@use "components/tabs.scss";
 @use "foundations/links.scss";
 @use "foundations/buttons";
 @use "components/admin-panel.scss";
@@ -37,5 +38,7 @@
 @import "../bootstrap/scss/helpers/text-truncation";
 //@import "../bootstrap/scss/helpers/vr";
 
+@import "helpers/max-height.scss";
+
 // Utilities
 @import "../bootstrap/scss/utilities/_api.scss";

package/assets/sass/_functions/functions.scss

@@ -86,9 +86,8 @@
 	@return $colour;
 }
 
-@function tint($colour, $percent)
-{
-	@return $colour;
+@function tint($colour, $percentage) {
+  @return mix(white, $colour, $percentage);
 }
 @function shade($colour, $percent)
 {

package/assets/sass/_functions/mixins.scss

@@ -139,8 +139,6 @@
     --colour-#{$color}: #{$value};
   }
 
-
-
   .text-primary {
     color: var(--colour-primary)!important;
   }
@@ -148,22 +146,8 @@
 
 @mixin invert-colours($compatible:$compatible) {
   
-  @each $color, $value in $dark-mode-colors {
+  @each $color, $value in $dark-mode-functional-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};
-}
+}

package/assets/sass/_functions/utilities.scss

@@ -115,9 +115,9 @@ $utilities: map-merge(
       ),
       values:
       (
-        "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%)
+        "success": linear-gradient(var(--gradient-direction), var(--colour-success-theme) 0, transparent 100%),
+        "primary": linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, transparent 100%),
+        "info": linear-gradient(var(--gradient-direction), var(--colour-info-theme) 0, transparent 100%)
       )
     ),
     "colour": (
@@ -200,3 +200,35 @@ $utilities: map-merge(
   )
 );
 // #endregion
+
+// #region Max height classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "max-heights": (
+      property: max-height,
+      class: mh,
+      values: (
+        "sm": #{rem(200)},
+        "md": #{rem(400)},
+        "lg": #{rem(600)}
+      )
+    )
+  )
+);
+// #endregion
+
+// #region Max height classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "container": (
+      property: container-type,
+      class: ct,
+      values: (
+        "inline": inline-size
+      )
+    )
+  )
+);
+// #endregion

package/assets/sass/_functions/variables.scss

@@ -108,49 +108,32 @@ $theme-colors: map-merge((
   "secondary":    $secondary,
   "info":       $info,
   "warning":    $warning,
-  "danger":     $danger,
   "success":    $success,
+  "danger":     $danger,
   "dark":       $dark,
   "light":      $light,
-  "white":      $canvas
+  "canvas":     $canvas,
+  "white":      #FCFCFC,
 ), $theme-colors);
 
 @each $color, $value in $theme-colors {
 
   $vars: map-merge((
-    --colour-#{$color}-hex: $value
+    --colour-#{$color}: $value,
+    --colour-#{$color}-theme: $value
   ), $vars);
 }
 
 
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-
-
-@each $color, $value in $theme-colors-rgb {
-
-  $vars: map-merge((
-    --colour-#{$color}-hex: $value,
-    --colour-#{$color}-rgb: $value,
-    --colour-#{$color}: rgba(var(--colour-#{$color}-rgb), var(--bg-opacity,1))
-  ), $vars);
-}
 
 //  RGB Theme colours
 @function show-css-var($identifier) {
 
-  @if $compatible == "true" {
-    @return #{map-get($theme-colors, #{$identifier})};
-  }
-
-  @return rgba(var(--colour-#{$identifier}-rgb),var(--bg-opacity));
+  @return var(--colour-#{$identifier});
 }
 @function show-css-var-text($identifier) {
 
-  @if $compatible == "true" {
-    @return #{map-get($theme-colors, #{$identifier})};
-  }
-
-  @return rgba(var(--colour-#{$identifier}-rgb),var(--text-opacity));
+  @return var(--colour-#{$identifier});
 }
 
 $utilities-colors: $theme-colors-rgb;
@@ -158,9 +141,9 @@ $utilities-colors: $theme-colors-rgb;
 $utilities-text: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
-    "muted": to-rgb($colour-muted),
-    "body": to-rgb($body-color)
+    "black": $black,
+    "muted": $colour-muted,
+    "body": $body-color
   )
 );
 
@@ -175,26 +158,26 @@ $non-theme-colors: map-merge((
   "muted":      $colour-muted,
   "body":       $body-color,
   "border":     $colour-border,
-  "link":       var(--colour-primary),
+  "link":       var(--colour-primary-theme),
   "brand":      var(--colour-primary),
   "underline":  var(--colour-secondary),
   "heading":    var(--colour-primary),
-  "focus":      var(--colour-primary),
-  "hover":      var(--colour-primary),
-  "active":     var(--colour-primary),
+  "focus":      var(--colour-primary-theme),
+  "hover":      var(--colour-primary-theme),
+  "active":     var(--colour-primary-theme),
   "selected":   var(--colour-info),
   "inverted":   $canvas,
-  "canvas":     $canvas,
-  "btn": var(--colour-primary),
+  "btn": var(--colour-primary-theme),
   "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-hover": var(--colour-primary-theme),
+  "btn-secondary": var(--colour-primary-theme),
+  "btn-secondary-border": var(--colour-primary-theme),
   "btn-secondary-bg": transparent,
-  "btn-secondary-bg-hover": var(--colour-primary),
-  "btn-secondary-hover": var(--colour-inverted)
+  "btn-secondary-bg-hover": var(--colour-primary-theme),
+  "btn-secondary-hover": var(--colour-inverted),
+  "canvas-2":     var(--colour-canvas)
 ), $non-theme-colors);
 
 @each $color, $value in $non-theme-colors {
@@ -204,31 +187,45 @@ $non-theme-colors: map-merge((
   ), $vars);
 }
 
-$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),
+
+$dark-mode-colors: (
+
+  "primary": #B3C1C5,
+  "warning": #ffb733,
+  "info": #35C5E9,
+  "success": #B4E6A5,
+  "danger": #E7727D,
+  "dark": #B599B1,
   "light": $light,
+);
 
-  
+$dark-mode-functional-colors: (
+
+  "canvas": #262626,
+  "canvas-2": #313131,
+  "body": #BFBFBF,
+  "heading": var(--colour-white),
+  "link": var(--colour-white),
+  "hover": var(--colour-white),
+  "active": var(--colour-white),
+  "border": var(--colour-white),
+  "brand": var(--colour-white),
   "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-border": var(--colour-white),
+  "btn-bg": var(--colour-white),
+  "btn-hover": var(--colour-white),
+  "btn-secondary": var(--colour-white),
+  "btn-secondary-border": var(--colour-white),
   "btn-secondary-bg": transparent,
-  "btn-secondary-bg-hover": var(--colour-inverted),
-  "btn-secondary-hover": var(--colour-primary)
-));
+  "btn-secondary-bg-hover": var(--colour-white),
+  "btn-secondary-hover": var(--colour-primary-theme)
+);
+
+
+// Kill bootstrap colors
+$colors: ();
+$theme-colors-rgb: ();
+
 // #endregion
 
 // #region aspect ratios
@@ -354,7 +351,7 @@ $btn-padding-x-md: $btn-padding-x;
 
 // #region Forms
 // label
-$form-label-font-size: $h5-font-size;
+$form-label-font-size: rem(18);
 $form-label-font-weight: bold;
 $form-label-color: var(--colour-heading);
 $form-label-margin-bottom: 0.25rem;
@@ -445,11 +442,20 @@ $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' wid
 $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>");
 $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM13.52 23.383l-7.362-7.363 2.828-2.828 4.533 4.535 9.617-9.617 2.828 2.828-12.444 12.445z'/></svg>");
 $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-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/></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>");
 
+$icon-low: url("data:image/svg+xml,<svg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'><path d='M20 12.1429H2C1.42857 12.1429 1 11.5714 1 11C1 10.4286 1.42857 9.85715 2.14286 9.85715H20C20.5714 9.85715 21 10.4286 21 11C21 11.5714 20.5714 12.1429 20 12.1429Z' /></svg>");
+
+$icon-medium: url("data:image/svg+xml,<svg viewBox='0 0 20 8' xmlns='http://www.w3.org/2000/svg'><path d='M19.0001 2.28572H1.14286C0.428573 2.28572 0 1.71429 0 1.14286C0 0.571431 0.428573 0 1.14286 0H19.0001C19.5715 0 20.0001 0.571431 20.0001 1.14286C20.0001 1.71429 19.5715 2.28572 19.0001 2.28572ZM20.0001 6.85716C20.0001 6.28573 19.5715 5.7143 18.8572 5.7143H1.14286C0.428573 5.7143 0 6.28573 0 6.85716C0 7.42859 0.428573 8.00002 1.14286 8.00002H19.0001C19.5715 8.00002 20.0001 7.42859 20.0001 6.85716Z'/></svg>");
+
+$icon-high: url("data:image/svg+xml,<svg viewBox='0 0 20 22' xmlns='http://www.w3.org/2000/svg'><path d='M17.4648 11.7747L10 4.30985L2.53522 11.7747C1.97184 12.338 0.985918 12.338 0.422536 11.7747C-0.140845 11.2113 -0.140845 10.3662 0.422536 9.80282L8.87326 1.3521C9.43664 0.78872 10.2817 0.78872 10.8451 1.3521L19.4367 9.94367C20 10.5071 20 11.3521 19.4367 11.9155C19.0141 12.338 18.0282 12.338 17.4648 11.7747Z' /><path d='M17.4649 20.6479L10 13.0422L2.53524 20.5071C1.97186 21.0704 1.12679 21.0704 0.563405 20.5071C2.37375e-05 19.9437 2.37375e-05 19.0986 0.563405 18.5352L9.01413 10.0845C9.57751 9.52111 10.4226 9.52111 10.986 10.0845L19.5775 18.6761C20.1409 19.2394 20.1409 20.0845 19.5775 20.6479C19.0142 21.2113 18.0282 21.2113 17.4649 20.6479Z' /></svg>");
+
+
+$icon-flag: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M15.578.242a1.287,1.287,0,0,0-1.3-.034,8.118,8.118,0,0,1-3.369.873A7.341,7.341,0,0,1,8.537.609,7.826,7.826,0,0,0,5.788.057,11.873,11.873,0,0,0,1,1.261V.548A.477.477,0,0,0,.5.076.477.477,0,0,0,0,.548v15a.5.5,0,0,0,1,0V12.269a11.324,11.324,0,0,1,4.65-1.217,11.982,11.982,0,0,1,3.1.5,12.171,12.171,0,0,0,3.1.5,9.326,9.326,0,0,0,3.472-.722,1,1,0,0,0,.637-.931L16,1.058A.943.943,0,0,0,15.578.242Zm-.587,10.149a8.588,8.588,0,0,1-3.134.653A11.219,11.219,0,0,1,9,10.579a12.948,12.948,0,0,0-3.35-.525,11.152,11.152,0,0,0-4.559,1.081L1,11.175V2.34l.875-.355a10.676,10.676,0,0,1,3.912-.928,7.465,7.465,0,0,1,2.444.476,8.261,8.261,0,0,0,2.678.519A9.943,9.943,0,0,0,15,1.048Z'/></svg>");
+
 
 
 $vars: map-merge((
@@ -460,7 +466,11 @@ $vars: map-merge((
   --icon-tick: #{escape-svg($icon-tick)},
   --icon-question: #{escape-svg($icon-question)},
   --icon-warning: #{escape-svg($icon-warning)},
-  --icon-filter: #{escape-svg($icon-filter)}
+  --icon-filter: #{escape-svg($icon-filter)},
+  --icon-high: #{escape-svg($icon-high)},
+  --icon-medium: #{escape-svg($icon-medium)},
+  --icon-low: #{escape-svg($icon-low)},
+  --icon-flag: #{escape-svg($icon-flag)}
 ), $vars);
 // #endregion
 
@@ -541,10 +551,13 @@ $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
+// #endregion
+
+// #region UT vars
+$ut-mh-sm-px: 200;
+$ut-mh-sm: #{rem($ut-mh-sm-px)};
+$ut-mh-md-px: 400;
+$ut-mh-md: #{rem($ut-mh-md-px)};
+$ut-mh-lg-px: 600;
+$ut-mh-lg: #{rem($ut-mh-lg-px)};
+// #endregion

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

@@ -3,14 +3,14 @@
 
 $test_colors: ();
 $test_colors: map-merge((
-  "primary-hex":#00313c,
-  "secondary-hex":#b4e6a5,
-  "success-hex":#b4e6a5,
-  "info-hex":#1ebee6,
-  "warning-hex":#ffa500,
-  "danger-hex":#dc3545,
-  "light-hex":#EEEEEE,
-  "dark-hex":#46003c
+  "primary":#00313c,
+  "secondary":#b4e6a5,
+  "success":#b4e6a5,
+  "info":#1ebee6,
+  "warning":#ffa500,
+  "danger":#dc3545,
+  "light":#EEEEEE,
+  "dark":#46003c
 ), $test_colors);
 
 

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

@@ -178,7 +178,7 @@
         color: tint(#ffffff, 50);
       }
       @include expect {
-        color: #ffffff;
+        color: white;
       }
     }
   }

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

@@ -1,18 +1,22 @@
 @use "../_func" as *;
 
 .admin-panel {
-  --wrapper-padding: #{rem(32)};
+  --padding-x: #{rem(32)};
+  --padding-top: #{rem(16)};
+  --padding-bottom: #{rem(24)};
   display: block;
-  padding: var(--wrapper-padding);
+  padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
   box-shadow: 0px 6px 12px rgba(0,0,0,0.11);
-  background-color: white;
+  background-color: var(--colour-canvas-2);
   border-radius: rem(8);
-  margin-bottom: rem(32);
+  margin-bottom: rem(24);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
-  &.bg-secondary{
-
-    background-color: rgba(#b4e6a5,0.3) !important;
-  }
+  @media screen and (prefers-color-scheme: dark) {
+    
+    background-color: var(--colour-canvas-2);
+    color: var(--colour-body);
+  }  
 
   &:empty {
     display: none;
@@ -20,13 +24,18 @@
 
   > :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%);
+    --gradient-direction: -90deg;
+    background-color:var(--colour-success);
 
+    &:not([class*="bg-"]){
+      color: var(--colour-primary-theme);
+      background-image: linear-gradient(var(--gradient-direction),  var(--colour-info) 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);
+    padding: rem(16) var(--padding-x);
+    margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
     display: block;
     border-top-left-radius: rem(8);
     border-top-right-radius: rem(8);
@@ -46,34 +55,102 @@
   > *:is(p):last-child{
     padding-bottom: 0!important;
   }
+
+  p {
+    max-width: 100%;
+    padding-bottom: rem(24);
+  }
+
+  > :is(.mh-sm,.mh-md,.mh-lg){
+    overflow: auto;
+    
+    padding: 0 var(--padding-x);
+    margin: 0 calc(var(--padding-x) * -1) rem(24) calc(var(--padding-x) * -1);
+
+    &:before {
+      content: "";
+      top: 100%;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1.5rem;
+      position: sticky;
+      display: block;
+      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+      z-index: 2;
+      margin-bottom: -1.5rem;
+    }
+  }
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child + :is(.mh-sm,.mh-md,.mh-lg){
+    padding-top: var(--padding-top);
+    margin-top: calc(var(--padding-top) * -1);
+  }
+  
+  > :is(.mh-sm,.mh-md,.mh-lg):last-child{
+    padding-bottom: var(--padding-bottom);
+    margin-bottom: calc(var(--padding-bottom) * -1)!important;
+
+    > *:last-child{
+      margin-bottom: 0!important;
+    }
+  
+    > *:is(p):last-child{
+      padding-bottom: 0!important;
+    }
+  }
 }
 
-[class*="col"] .admin-panel:first-child:last-child {
+[class*="col"] .admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg)) {
 
-  min-height: calc(100% - 2rem);
+  min-height: calc(100% - #{rem(24)});
 }
 
-.admin-panel .admin-panel__links {
+// #region panel links 
+.admin-panel :is(.admin-panel__links, .tabs__links) {
 
-  padding: 0 var(--wrapper-padding);
-  margin: calc(var(--wrapper-padding) * -1) calc(var(--wrapper-padding) * -1) rem(32) calc(var(--wrapper-padding) * -1);
+  padding: 0;
+  margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
 
+  border-top-left-radius: rem(8);
+  border-top-right-radius: rem(8);
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid var(--colour-border);
+  overflow: hidden;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
+  &:after {
+    display: none;
+  }
+  
   @include media-breakpoint-up(sm) {
 
     flex-direction: row;
   }
 
-  :is(a, label) {
+  .link:not(.text-decoration-none):not(.btn) {
     margin: 0;
-    margin-left: calc(var(--wrapper-padding) * -1);
-    padding: #{rem(8)} var(--wrapper-padding);
+    //margin-left: calc(var(--wrapper-padding) * -1);
+    padding: #{rem(16)} var(--padding-x);
     width: 100%;
-    border-left: 3px solid var(--panel-tab-border, transparent);
     position: relative;
+    text-align: left;
+    flex-grow: 1;
+    --gradient-direction: -90deg;
+    background-color:var(--colour-success);
+
+    &:not([class*="bg-"]){
+      background-image: linear-gradient(var(--gradient-direction),  var(--colour-info) 0, transparent 100%);
+    }
+
+    &:is(.current, [aria-pressed="true"]){
+      color: var(--colour-primary-theme);
+    }
+
+    &:not(.current, [aria-pressed="true"]){
+      background: var(--colour-canvas-2)!important;
+    }
 
     &:after {
       display: none;
@@ -82,25 +159,16 @@
     @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);
+
+      &:not(:first-child){
+          
+        border-left: 1px solid var(--colour-border)!important;
       }
     }
   }
 
-  .current {
-    
-    --is-current: 1;
-    --panel-tab-border: var(--colour-secondary);
+  .link:is(.current,[aria-pressed="true"]) {
     pointer-events: none;
   }
-}
+}
+// #endregion

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

@@ -17,6 +17,10 @@
   }
 }
 
+::slotted(*:last-child) {
+  margin-bottom: 0;
+}
+
 .applied-filters .filter {
   
   border: 1px solid var(--colour-border);

package/assets/sass/components/card.scss

@@ -21,7 +21,9 @@
   display: block;
   overflow: hidden;
   z-index: 0;
-  background: #ffffff;
+  background: var(--colour-canvas-2);
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+  outline-offset: -1px;
 
   &.border-0 {
     box-shadow: none;
@@ -30,7 +32,6 @@
   }
 
   &__body {
-    
     position: relative;
     padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
     z-index: -1;
@@ -49,7 +50,7 @@
   }
 
   &:after {
-    background: var(--colour-primary);
+    background: var(--colour-primary-theme);
     mask-image: var(--icon-arrow);
     mask-size: 50%;
     mask-repeat: no-repeat;
@@ -124,16 +125,19 @@
 
 
 ::slotted(i){
-  
-  font-size: rem(18)!important;
+  font-size: rem(24);
+  margin: -3px var(--icon-right) 0 0;
+  font-weight: 400;
+  vertical-align: middle;
+}
+
+.card--filter ::slotted(i) {
+  display: block !important;
   height: rem(18)!important;
   margin: 0 0 0.5rem 0!important;
-  font-weight: 400!important;
-  display: block!important;
 }
 
 ::slotted(span){
-  
   display: block;
   font-weight: normal;
   padding-top: rem(24);