@iamproperty/components 4.1.0-beta-3 → 4.1.0

package/assets/sass/components/forms.scss

@@ -1,7 +1,11 @@
 @use "../_func" as *;
 
+$icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
+
+$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
+
 // #region Form label
-label {
+:is(label,.label) {
   font-size: rem(18);
   line-height: rem(21);
   margin-bottom: rem(8);
@@ -16,10 +20,9 @@ label {
 // #endregion
 
 // #region input field
-:is(input:not([type="checkbox"]):not([type="radio"]),textarea,output,select) {
+:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output,select:not(.select--minimal)) {
   display: block;
   width: 100%;
-  max-width: $content-max-width;
   display: block;
   width: 100%;
   padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-inline, #{rem(16)});
@@ -56,16 +59,19 @@ label {
     opacity: 0.4;
     cursor: not-allowed;
   }
+}
+
+:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"])){
 
+  max-width: $input-max-width;
 }
 
 textarea {
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px);
-  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px);
+  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
+  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
 }
 // #endregion
 
-
 // #region legend
 fieldset {
   width: 100%;
@@ -92,36 +98,25 @@ legend {
 // #region wrappers
 div:has(> label:first-child):has(> input) {
   position: relative;
-  max-width: $content-max-width;
+  max-width: $input-max-width;
   margin-bottom: rem(24);
 
-  &:has(input[readonly]):after{
-    font-family: "Font Awesome 6 Pro";
-    font-weight: 300;
-    content: "\f023";
-    position: absolute;
-    font-size: var(--input-lh, #{rem(20)});
-    height: var(--input-lh, #{rem(20)});
-    width: var(--input-lh, #{rem(20)});
-    bottom: calc(var(--input-padding-block, #{rem(12)}) + 2px);
-    right: calc(var(--input-padding-block, #{rem(16)}) + 2px);
-    text-align: center;
-  }
 
-  input:not([type="checkbox"]):not([type="radio"]), output, .prefix, .suffix {
-    margin-bottom: 0;
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), output, .prefix, .suffix {
+    margin-bottom: 0!important;
   }
 
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 
-  > *:not(input:not([type="checkbox"]):not([type="radio"])):not(output):not(.prefix):not(.suffix) {
+
+  > *:not(input:not([type="checkbox"]):not([type="radio"]):not([type="file"])):not(output):not(.prefix):not(.suffix) {
     flex-shrink: 0;
     width: 100%;
   }
 
-  :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
+  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output) {
     flex-shrink: 1;
     flex-grow: 1;
     width: 0;
@@ -189,7 +184,29 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 }
 // #endregion
 
+// #region readonly
+*:has( > input[readonly]) {
 
+  position: relative;
+  
+  max-width: $input-max-width;
+
+    
+  &:after{
+    font-family: "Font Awesome 6 Pro";
+    font-weight: 300;
+    content: "\f023";
+    position: absolute;
+    font-size: var(--input-lh, #{rem(20)});
+    height: var(--input-lh, #{rem(20)});
+    width: var(--input-lh, #{rem(20)});
+    bottom: calc(var(--input-padding-block, #{rem(12)}) + 2px);
+    right: calc(var(--input-padding-block, #{rem(16)}) + 2px);
+    text-align: center;
+  }
+}
+
+// #endregion
 
 // #region prefix
 :is(.prefix, .suffix) {
@@ -207,6 +224,7 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     background-color: var(--colour-primary-theme);
     border: 2px solid var(--colour-primary);
     color: var(--colour-white);
+    margin-top: 0!important;
     margin-bottom: 1rem;
     border-end-start-radius: rem(8);
     border-start-start-radius: rem(8);
@@ -219,7 +237,7 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     
     min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
     max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-
+    flex-shrink: 0;
 
     &:after {
       display: inline-block;
@@ -292,13 +310,14 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     }
   }
 
-  .prefix ~ :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
+  .prefix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output) {
     
     border-end-start-radius: 0!important;
     border-start-start-radius: 0!important;
   }
 
-  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
+  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output),
+  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),textarea,output):has(~ .suffix) {
     order: 1;
     
     border-start-end-radius: 0!important;
@@ -329,24 +348,20 @@ input[maxlength] + span {
 
 // #region Form validation
 
-$icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
 
-$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
-
-
-.was-validated *:not(button):is(:invalid, .is-invalid):not(.is-valid) {
+.was-validated *:not(button):is(:invalid, .is-invalid):not(.is-valid) + label,
+.was-validated label:has(*:not(button):is(:invalid, .is-invalid):not(.is-valid)) {
 
   --colour-check-border: var(--colour-danger);
+  --colour-check-bg: #FCEBEC;
   border-color: var(--colour-danger);
 }
 
-.was-validated *:not(button):is(:invalid, .is-invalid):not(.is-valid) + label {
+.was-validated *:not(button):is(:invalid, .is-invalid,:-internal-autofill-selected) {
 
-  --colour-check-border: var(--colour-danger);
-  --colour-check-bg: #FCEBEC;
+  border-color: var(--colour-danger)!important;
 }
-
-.was-validated input:is(:invalid, .is-invalid) {
+.was-validated input:is(:invalid, .is-invalid,:-internal-autofill-selected) {
 
   background-image: escape-svg($icon-error);
   background-repeat: no-repeat;
@@ -380,9 +395,21 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   display: none;
 }
 
-.was-validated:has(*:is(:invalid, .is-invalid)) .invalid-feedback {
+// Postcode lookup validation
+iam-address-lookup:has([required]){
+  
+  --req-display: none;
+}
+
+.was-validated :is(:invalid, .is-invalid) ~ .invalid-feedback {
   display: block;
 }
+
+.was-validated iam-address-lookup:has([required]:invalid) {
+  --error-border: var(--colour-danger);
+  --error-display: block;
+}
+
 // #endregion
 
 // #region radio/checkbox field 
@@ -399,24 +426,25 @@ input:is([type="radio"],[type="checkbox"]) {
   pointer-events: none;
 }
 
-:is(div,fieldset):has(> input:is([type="radio"],[type="checkbox"])) {
+:is(div,fieldset,label):has(> input:is([type="radio"],[type="checkbox"])):not(:has(label input)) {
   position: relative;
   margin-bottom: rem(24);
 }
 
-:is(div,fieldset):has( > input[type="radio"]){
+:is(div,fieldset,label):has( > input[type="radio"]){
 
   --border-radius: 50%;
   --outline-width: #{rem(8)};
 }
 
-:is(div,fieldset):has( > input[type="checkbox"]) {
+:is(div,fieldset,label):has( > input[type="checkbox"]) {
 
   --border-radius: #{rem(4)};
   --outline-width: #{rem(4)};
 }
 
-input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)) {
+input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)),
+label:has(input:is([type="radio"],[type="checkbox"])):not(:has(> iam-card)){
 
   --tick-colour: transparent;
 
@@ -458,7 +486,8 @@ input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)) {
   }
 }
 
-input[type="radio"] + label:not(:has(> iam-card)) {
+input[type="radio"] + label:not(:has(> iam-card)),
+label:has(input[type="radio"]):not(:has(> iam-card)) {
 
   &:after {
     content: ""!important;
@@ -469,7 +498,7 @@ input[type="radio"] + label:not(:has(> iam-card)) {
     display: none;
     position: absolute;
     top: rem(15 - 2);
-    left: rem(5);
+    left: calc(#{rem(5)} + var(--outline-width));
   }
 
   &.radio--tick {
@@ -495,7 +524,8 @@ input[type="radio"] + label:not(:has(> iam-card)) {
 
 @media (forced-colors: active) {
 
-  input:is([type="radio"],[type="checkbox"]):not(:checked) + label.radio--tick:not(:has(> iam-card)) {
+  input:is([type="radio"],[type="checkbox"]):not(:checked) + label.radio--tick:not(:has(> iam-card)),
+  label:has(input:is([type="radio"],[type="checkbox"]):not(:checked)).radio--tick:not(:has(> iam-card)) {
 
     &:before {
     
@@ -504,13 +534,15 @@ input[type="radio"] + label:not(:has(> iam-card)) {
   }
 }
 
-div:has(> :is(input[type="radio"],input[type="checkbox"]):nth-of-type(2)) {
+// multiple radio's together
+:is(div,fieldset):has(> :is(input[type="radio"],input[type="checkbox"]):nth-of-type(2)) {
   label:not(:has(> iam-card)) {
     margin-bottom: 0rem;
   }
 }
 
-input:is([type="radio"],[type="checkbox"]):checked + label {
+input:is([type="radio"],[type="checkbox"]):checked + label,
+label:has(input:is([type="radio"],[type="checkbox"]):checked) {
 
   --tick-colour: var(--colour-info);
 
@@ -527,13 +559,16 @@ input:is([type="radio"],[type="checkbox"]):checked + label {
   }
 }
 
-input[type="checkbox"]:not([disabled]):checked + label {
+input[type="checkbox"]:not([disabled]):checked + label,
+label:has(input[type="checkbox"]:not([disabled]):checked) {
 
   &:before {
     background: var(--colour-info)!important;
   }
 }
-input[type="checkbox"]:checked + label {
+
+input[type="checkbox"]:checked + label,
+label:has(input[type="checkbox"]:checked) {
 
   &:after {
     content: "\f00c";
@@ -555,7 +590,8 @@ input[type="checkbox"]:checked + label {
   }
 }
 
-input[type="checkbox"]:indeterminate + label {
+input[type="checkbox"]:indeterminate + label,
+label:has(input[type="checkbox"]:indeterminate) {
 
   &:before {
     background: var(--colour-info) !important;
@@ -583,11 +619,14 @@ input[type="checkbox"]:indeterminate + label {
 }
 
 
-input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus) + label {
+input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus) + label,
+label:has(input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus)) {
 
   --tick-colour: var(--colour-info);
 }
-input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label {
+
+input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label,
+label:has(input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus)) {
 
   --tick-colour: var(--colour-muted);
 
@@ -596,7 +635,8 @@ input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label {
     outline: var(--outline-width) solid var(--colour-light);
   }
 }
-input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label {
+input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label,
+label:has(input:is([type="radio"],[type="checkbox"]):is(:active,.active)) {
 
   --tick-colour: var(--colour-light);
 
@@ -607,7 +647,8 @@ input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label {
 }
 
 // Disabled
-input:is([type="radio"],[type="checkbox"]):disabled + label {
+input:is([type="radio"],[type="checkbox"]):disabled + label,
+label:has(input:is([type="radio"],[type="checkbox"]):disabled)  {
 
   opacity: 0.4;
   cursor: not-allowed;
@@ -623,14 +664,16 @@ input:is([type="radio"],[type="checkbox"]):disabled + label {
   }
 }
 
-input[type="radio"][disabled]:checked + label {
+input[type="radio"][disabled]:checked + label,
+label:has(input[type="radio"][disabled]:checked) {
   
   &:after {
     background-color: var(--colour-primary)!important;
   }
 }
 
-input[type="checkbox"][disabled]:checked + label {
+input[type="checkbox"][disabled]:checked + label,
+label:has(input[type="checkbox"][disabled]:checked) {
 
   &:before {
     background: #E0E0E0!important;
@@ -686,6 +729,7 @@ select[multiple]::-webkit-scrollbar-thumb {
 
 // #region Select
 
+
 select {
   $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
 
@@ -693,9 +737,11 @@ select {
               linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top/calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) no-repeat;
   
   padding-right: calc(var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem));
-  
   option {font-size: 1.2em;}
 
+  
+  max-width: $select-max-width;
+
   &[multiple],
   &[size]:not([size="1"]) {
     background: none;
@@ -714,6 +760,54 @@ select {
     text-shadow: 0 0 0 $form-select-color;
   }
 }
+
+div:has(> select){
+
+  margin-bottom: rem(24);
+
+  select {
+    margin-bottom: 0!important;
+  }
+}
+
+.select--minimal {
+
+  all: unset;
+  font-size: inherit;
+  background: none;
+  border: none;
+  display: inline-block;
+  margin: 0;
+  padding: 0 calc(1.25em + 0.8ch) 0 0.25em;
+  height: auto;
+  cursor: pointer;
+
+  option {
+    background-color: var(--colour-canvas);
+    padding-left: 1em;
+  }
+
+
+  &:is(:hover,:focus) {
+    outline: 1px solid var(--colour-info);
+  }
+}
+
+*:has(> .select--minimal){
+  position: relative;
+
+  &:after {
+    font-size: 0.8em;
+    line-height: 1em;
+    content: "\f078";
+    font-family: "Font Awesome 6 Pro";
+    position: absolute;
+    top: 50%;
+    transform: translate(0,-50%);
+    right: calc(0.25em + 0.8ch);
+    pointer-events: none;
+  }
+}
 // #endregion
 
 // #region file upload
@@ -724,5 +818,71 @@ iam-fileupload {
   }
 
 }
+// #endregion
 
-// #endregion
+
+// #region label with input field in 
+:is(label, .label):has(:is(input,select)){
+
+  display: block;
+  margin-bottom: rem(24);
+
+  :is(input,select) {
+    margin-top: rem(8);
+    margin-bottom: 0!important;
+  }
+
+  :is(input,select) ~ span:not(:is(.suffix,.prefix,.invalid-feedback)) {
+    all: initial;
+    font-family: var(--font-body);
+    color: var(--colour-body);
+    margin-top: rem(8);
+    display: block;
+    line-height: 1.2;
+  }
+  .invalid-feedback {
+    font-size: 1rem;
+    font-weight: normal;
+    line-height: 1.2;
+  }
+
+  span:has(:is(input,select)) {
+    display: flex;
+    width: 100%;
+  }
+
+  :is(.suffix,.prefix) {
+    margin: rem(8) 0 0 0!important;
+  }
+}
+
+.was-validated label:has(:is(input:not([type="radio"]):not([type="checkbox"]),select)),
+.was-validated fieldset:has(label input:is([type="radio"],[type="checkbox"]):invalid){
+  
+  margin-bottom: 1.5rem;
+
+  &:has(:invalid):after {
+    content: "This field is required";
+    color: var(--colour-danger);
+    margin-top: rem(8);
+    background-image: escape-svg($icon-error);
+    background-repeat: no-repeat;
+    background-position: left top 1px;
+    background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
+    padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
+    display: block;
+    width: 100%;
+    font-size: 1rem;
+    line-height: 1.2;
+  }
+
+  &[data-error]:has(:invalid):after {
+    content: attr(data-error)!important;
+  }
+
+  &.error-nowrap:after {
+    white-space: nowrap;
+  }
+}
+
+// #endregion

package/assets/sass/components/lists.scss

@@ -169,4 +169,122 @@
 }
 .list__wrapper--large {
   max-height: 37.5rem;
-}
+}
+
+// #region Step list
+*:has(> .list--steps){
+  container-type: inline-size;
+}
+
+.list--steps {
+
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  padding: 0 0 rem(6) 0;
+  gap: rem(12);
+  counter-reset: pages;
+  color: var(--colour-heading);
+  position: relative;
+  margin-bottom: rem(6);
+
+  li {
+    position: relative;
+    display: block;
+    padding-top: 2rem;
+    width: rem(24);
+    flex-grow: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-indent: -300px;
+
+
+    &:before {
+      counter-increment: pages;
+      content: counter(pages);
+      position: absolute;
+      top: 0;
+      left: 50%;
+      margin-left: rem(-12);
+      width: rem(24);
+      height: rem(24);
+      font-size: rem(18);
+      line-height: rem(24);
+      text-align: center;
+      font-weight: bold;;
+      border: 1px solid currentColor;
+      border-radius: 1rem;
+      text-indent: 0;
+    }
+
+  }
+
+  li.step--current:before {
+    background-color: var(--colour-primary-theme);
+    border-color: var(--colour-primary-theme);
+    color: var(--colour-white);
+  }
+  li.step--complete:before {
+    background-color: var(--colour-success);
+    border-color: var(--colour-success);
+
+    @include dark-mode {
+      
+    background-color: var(--colour-complete);
+    border-color: var(--colour-complete);
+    }
+    //color: var(--colour-white);
+  } 
+  
+  &::after {
+    content: attr(data-mobile-text);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    display: block;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    font-weight: bold;
+  }
+
+  @include container-up(sm){
+
+    padding: 0;
+
+    margin-bottom: rem(24);
+
+    &::after {
+      display: none;
+    }
+
+    li {
+      width: 100%;
+      flex-grow: 1;
+      text-indent: 0;
+      overflow: visible;
+
+      &:not(:last-child):after {
+        content: "";
+        position: absolute;
+        top: rem(12);
+        left: calc(50% + 2rem);
+        
+        width: calc(100% - 2.5rem);
+        height: 2px;
+        font-size: rem(18);
+        background-color: var(--colour-heading);
+      }
+    }
+  }
+
+  
+  @include container-up(md){
+
+    li {
+      max-width: 20%;
+    }
+  }
+}
+// #endregion

package/assets/sass/components/nav-global.scss

@@ -114,6 +114,7 @@ iam-nav {
     height: rem(48);
     padding: 0;
     text-decoration: none;
+    min-width: min(var(--svg-width), 14rem);
   }
 
   a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {

package/assets/sass/components/notification.scss

@@ -9,7 +9,12 @@
   margin-bottom: 1rem;
   font-size: rem(15);
   border: rem(2) solid var(--colour,var(--colour-info));
-  background: #e9f9fd;
+
+  @include light-mode(){
+      
+    background: #e9f9fd;
+  }
+
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
   ::slotted(i),