@iamproperty/components 7.6.4--beta8 → 7.7.1--beta1

package/assets/sass/elements/container.scss

@@ -138,17 +138,17 @@
 
     // Default pattern
     &:not([class*='circle-pattern-']) > .circle {
-      font-size: rem(300);
-      top: rem(-75);
-      left: rem(-200);
+      font-size: 18.75rem; /* (300) */
+      top: -4.6875rem;
+      left: -12.5rem; /* -200 */
     }
 
     &:not([class*='circle-pattern-']) > .circle ~ .circle {
-      font-size: rem(350);
+      font-size: 21.875rem;
       top: auto;
       left: auto;
-      right: rem(-100);
-      bottom: rem(-200);
+      right: -6.25rem;
+      bottom: -12.5rem; /* -200 */
     }
   }
   // #endregion

package/assets/sass/elements/details.scss

@@ -15,7 +15,7 @@
 
     summary {
       font-size: 1.125rem; /* 18/16 */
-      line-height: rem(21);
+      line-height: 1.3125rem; /* 21 */ 
       font-weight: normal;
       color: var(--colour-heading);
       display: block;
@@ -26,7 +26,7 @@
         margin-left: 0.5em;
         line-height: 1em;
         font-size: 1em;
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
       }
     }
 
@@ -36,14 +36,14 @@
   }
 
   iam-accordion details {
-    --inline-padding: #{rem(2)};
+    --inline-padding: 0.125rem;
     --border-radius: 0.5rem 0.5rem 0 0;
     --icon-top: 0.875rem; /* 14/16 */
     --line-height: 1.5rem;
       --block-padding: 0.875rem; /* 14/16 */
 
     *:not(iam-tabs) > &:not([open]) {
-      padding-bottom: rem(42);
+      padding-bottom: 2.625rem; /* 42 */ 
     }
 
     @media screen and (min-width: 36em) {
@@ -54,18 +54,18 @@
 
       summary {
         &:has(.h2, h2, .h4, h4) {
-          --inline-padding: #{rem(22)};
-          --block-padding: #{rem(22)};
+          --inline-padding: 1.375rem; /* 22 */ 
+          --block-padding: 1.375rem; /* 22 */ 
         }
       }
 
       summary {
         &:has(.h2, h2) {
-          --line-height: #{rem(52)};
+          --line-height: 3.25rem; /* 52 */ 
         }
 
         &:has(.h4, h4) {
-          --line-height: #{rem(30)};
+          --line-height: 1.875rem; /* 30 */ 
         }
       }
     }
@@ -73,7 +73,7 @@
     summary {
       border-bottom: 1px solid var(--colour-border);
       padding-left: 0;
-      padding-inline-end: calc(#{var(--inline-padding)} + #{rem(27)} + 0.75rem);
+      padding-inline-end: calc(#{var(--inline-padding)} + 1.6875rem + 0.75rem);
       padding-block: var(--block-padding) !important;
       position: relative;
       color: var(--colour-heading);
@@ -107,12 +107,12 @@
           height: 1.5rem;
           line-height: 1.5rem;
           font-weight: 300;
-          font-family: 'Font Awesome 6 Pro';
+          font-family: 'Font Awesome 7 Pro';
         }
       }
 
       *:is(h4, .h4, h2, .h2):after {
-        top: calc((#{var(--line-height)} / 2) + #{var(--inline-padding)} - #{rem(14)});
+        top: calc((#{var(--line-height)} / 2) + #{var(--inline-padding)} - 0.875rem);
       }
 
       .badge {
@@ -155,14 +155,14 @@
         display: block;
         position: absolute;
         font-size: 1.5rem;
-        top: calc((#{var(--line-height)} / 2) - 0.75rem + #{rem(14)});
+        top: calc((#{var(--line-height)} / 2) - 0.75rem + 0.875rem);
         right: var(--inline-padding);
         width: 1.5rem;
         height: 1.5rem;
         margin: 0;
         line-height: 1.5rem;
         font-weight: 300;
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
       }
 
 

package/assets/sass/elements/dialog.scss

@@ -24,7 +24,7 @@
     overscroll-behavior: contain;
     background: var(--colour-canvas-2);
     box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-    border-radius: rem(10);
+    border-radius: 0.625rem; /* 10 */
     padding: var(--dialog-padding);
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
@@ -55,24 +55,24 @@
 
     overflow-y: auto;
     width: 90vw;
-    max-width: rem(324); // col-width*4
+    max-width: 20.25rem; // col-width*4
 
     //height: 90vh;
-    max-height: min(90vh, #{rem(752)});
+    max-height: min(90vh, 47rem);
     overscroll-behavior: contain;
 
     @media screen and (min-width: 36em) {
       //--dialog-padding: 2rem;
       //padding: var(--dialog-padding);
-      min-width: rem(335);
+      min-width: 20.9375rem;
       width: fit-content;
-      max-width: rem(686);
+      max-width: 42.875rem;
     }
 
     @media screen and (min-width: 62em) {
-      min-width: rem(454);
+      min-width: 28.375rem;
       width: fit-content;
-      max-width: rem(736);
+      max-width: 46rem;
     }
 
   }

package/assets/sass/elements/dropdown.scss

@@ -12,7 +12,7 @@
     margin: 0;
     z-index: 99;
     display: none;
-    max-height: rem(244) !important;
+    max-height: 15.25rem !important;
     overflow: auto;
 
     &:before {

package/assets/sass/elements/feature.scss

@@ -7,12 +7,13 @@
 
     --padding: 1rem;
     background-color: var(--colour-canvas-2);
-    border: 1px solid var(--colour-border);
+    border: 1px solid var(--colour-muted);
     border-radius: 0.5rem;
     padding: var(--padding);
     margin-bottom: 1.5rem;
     display: inline-block;
-    min-height: 2rem;
+    min-height: 4.75rem;
+    width: 100%;
 
     &:not(.d-flex) > strong:first-child {
       display: block;
@@ -47,10 +48,10 @@
       position: absolute;
       inset: var(--padding);
       content: var(--fa);
-      font-family: "Font Awesome 6 Pro";
+      font-family: "Font Awesome 7 Pro";
       display: block;
 
-      background-color: var(--colour-success);
+      background-color: var(--colour, var(--colour-success));
       color: var(--colour-primary-theme);
       border-radius: 50%;
       padding: 0;
@@ -61,12 +62,119 @@
     }
   }
 
-  .feature[class*="fa-rocket"] {
+  :is(.feature--danger, .feature--warning, .feature--success, .feature--complete, .feature--loading, .feature--missing) {
+    padding-left: calc(5.5rem + 1rem);
+    position: relative;
+    overflow: hidden;
 
     &:before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      display: block;
+      font-weight: 900;
+      font-size: 2rem;
+      //border-radius: 50%;
+      width: 4.8rem; /* TODO unmagic this number, should be 1 column width */
+      padding: 0;
+      height: 100%;
+      text-align: center;
+      color: var(--colour-white);
+      border-right: 1px solid var(--colour-muted);
+    }
+
+    &:after {
+      position: absolute;
+      top: calc(50% - 0.75rem);
+
+      left: calc(2.4rem - 0.75rem);
+      font-family: "Font Awesome 7 Pro";
+      display: block;
+      font-weight: 900;
+      font-size: 1.5rem;
       
-      padding-right: 0.1rem;
+      width: 1.5rem;
+      padding: 0;
+      height: 1.5rem;
+      line-height: 1;
+      text-align: center;
+      color: var(--colour-white);
+      z-index: 2;
     }
   }
+  .feature--danger {
+    
+    &:before {
+      background: var(--colour, var(--colour-danger));
+    }
+    &:after {
+      content: '\f06a';
+    }
+  }
+  .feature--warning {
+    
+    &:before {
+      background: var(--colour, var(--colour-warning));
+    }
+    &:after {
+      content: '\f071';
+    }
+  }
+  :is(.feature--success,.feature--success) {
+    
+    &:before {
+      background: var(--colour, var(--colour-complete));
+    }
+    &:after {
+      content: '\f058';
+    }
+  }
+
+
+
+  .feature--loading {
+    
+    &:before {
+      background: var(--colour, var(--colour-border));
+    }
+    &:after {
+      content: '\f3f4';
+      color: var(--colour-primary-theme);
+      animation: spin 1s infinite steps(10);
+    }
+  }
+  .feature--missing {
+    
+    &:before {
+      background: var(--colour, var(--colour-border));
+    }
+    &:after {
+      content: '\f059';
+      color: var(--colour-primary-theme);
+    }
+  }
+  .feature--error {
+    
+      background: var(--colour, var(--colour-danger));
+    
+      border: none;
+      color-scheme: light;
+      --colour-heading: var(--colour-white);
+      --colour-body: var(--colour-white);
+      --colour-underline: var(--colour-white);
+      --colour-link: var(--colour-white);
+      color: var(--colour-white);
+
+      padding-right: 6.5rem;
+      position: relative;
+
+      button {
+        position: absolute!important;
+        top: 50%;
+        right: 0;
+        left: auto;
+        translate: 0 -50%;
+      }
+  }
 
 }

package/assets/sass/elements/forms.scss

@@ -219,14 +219,14 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   *:has(> :is(.form-control-sm, .input--sm)) {
     --input-fs: 0.875rem; /* 14/16 */
     --input-lh: 1rem;
-    --input-padding-block: #{rem(10)};
+    --input-padding-block: #{0.625rem};
     --input-padding-inline: 0.875rem; /* 14/16 */
   }
   *:has(> :is(.form-control-lg, .input--lg)) {
     --input-fs: 1.5rem;
-    --input-lh: #{rem(29)};
+    --input-lh: 1.8125rem; /* 29 */ 
     --input-padding-block: 1.25rem;
-    --input-padding-inline: #{rem(22)};
+    --input-padding-inline: 1.375rem; /* 22 */ 
   }
 
   *:has(> label:first-child):has(> input):has(> :is(.form-control-inline, .input--inline)) {
@@ -247,7 +247,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     max-width: var(--input-max-width);
 
     &:after {
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       font-weight: 300;
       content: '\f023';
       position: absolute;
@@ -413,8 +413,8 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       font-size: 1rem;
       line-height: 1.25rem;
       padding-left: 2.5rem;
-      padding-top: rem(10);
-      padding-bottom: rem(10);
+      padding-top: 0.625rem; /* 10 */
+      padding-bottom: 0.625rem; /* 10 */
       margin-bottom: 1.5rem;
       margin-right: 1.5rem;
       cursor: pointer;
@@ -440,7 +440,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
         width: var(--radio-size, 1.5rem);
         display: inline-block;
         position: absolute;
-        top: rem(10 - 2);
+        top: 0.5rem;
         left: var(--outline-width);
       }
 
@@ -458,13 +458,13 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
         height: 0.875rem; /* 14/16 */
         width: 0.875rem; /* 14/16 */
 
-        height: var(--radio-inner-size, #{rem(14)});
-        width: var(--radio-inner-size, #{rem(14)});
+        height: var(--radio-inner-size, 0.875rem);
+        width: var(--radio-inner-size, 0.875rem);
 
         display: none;
         position: absolute;
-        top: var(--radio-inner-top, #{rem(15 - 2)});
-        left: var(--radio-inner-left, calc(#{rem(5)} + var(--outline-width)));
+        top: var(--radio-inner-top, 0.8125rem);
+        left: var(--radio-inner-left, calc(0.3125rem + var(--outline-width)));
       }
 
       &.radio--tick {
@@ -474,7 +474,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
           font-size: 1.5em;
           line-height: 1;
           color: var(--tick-colour);
-          font-family: 'Font Awesome 6 Pro';
+          font-family: 'Font Awesome 7 Pro';
 
           background: none !important;
           border: none !important;
@@ -544,15 +544,15 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
         font-size: var(--checkbox-tick-size, 1em);
         line-height: 1;
         color: var(--colour-primary-theme);
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
         font-weight: bold;
         height: var(--checkbox-inner-size, 1.5rem);
         width: var(--checkbox-inner-size, 1.5rem);
-        line-height: rem(26);
+        line-height: 1.625rem; /* 26 */
         background: none !important;
         border: none !important;
         outline: none !important;
-        top: var(--checkbox-inner-top, #{rem(10 - 2)});
+        top: var(--checkbox-inner-top, 0.5rem);
         left: var(--checkbox-inner-left, var(--outline-width));
         text-align: center;
       }
@@ -571,15 +571,15 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
         font-size: var(--checkbox-tick-size, 1em);
         line-height: 1;
         color: var(--colour-primary-theme);
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
         font-weight: bold;
         height: var(--checkbox-inner-size, 1.5rem);
         width: var(--checkbox-inner-size, 1.5rem);
-        line-height: rem(26);
+        line-height: 1.625rem; /* 26 */
         background: none !important;
         border: none !important;
         outline: none !important;
-        top: var(--checkbox-inner-top, #{rem(10 - 2)});
+        top: var(--checkbox-inner-top, 0.5rem);
         left: var(--checkbox-inner-left, var(--outline-width));
         text-align: center;
       }
@@ -801,7 +801,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       font-size: 0.8em;
       line-height: 1em;
       content: '\f078';
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       position: absolute;
       top: 40%;
       transform: translate(0, -50%);
@@ -935,7 +935,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none; /* Override default look */
     appearance: none;
-    margin-top: rem(-8); /* Centers thumb on the track */
+    margin-top: -0.5rem; /* Centers thumb on the track */
     background-color: var(--thumb-colour);
     height: var(--thumb-size);
     width: var(--thumb-size);
@@ -1029,7 +1029,6 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     padding-right: 3rem;
   }
 
-
   .empty {
     position: absolute;
     bottom: 0.5rem;
@@ -1049,7 +1048,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     }
 
     i {
-      font-size: 1.5rem;
+      font-size: 1.2rem;
     }
   }
   
@@ -1125,7 +1124,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     font-weight: inherit !important;
     font-family: inherit !important;
     font-size: 1rem !important;
-    line-height: rem(24) !important;
+    line-height: 1.5rem !important;
     margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
     padding-block: var(--menu-item-padding, 0.25rem) !important;
     width: 100% !important;
@@ -1270,7 +1269,7 @@ iam-address-lookup [slot="preloadedList"]{
       font-weight: inherit !important;
       font-family: inherit !important;
       font-size: 1rem !important;
-      line-height: rem(19) !important;
+      line-height: 1.1875rem !important;
       padding-block: var(--menu-item-padding, 0.5rem) !important;
       display: block;
     }
@@ -1285,7 +1284,7 @@ iam-address-lookup [slot="preloadedList"]{
 
     &:before {
       content: "\f021";
-      font-family: "Font Awesome 6 Pro";
+      font-family: "Font Awesome 7 Pro";
       font-size: 1.75rem;
       font-weight: 300;
       display: block;

package/assets/sass/elements/icons.css

@@ -1,7 +1,7 @@
 @layer elements {
   .icon {
     font-size: 1rem;
-    font-family: "Font Awesome 6 Pro";
+    font-family: "Font Awesome 7 Pro";
     font-weight: 400;
     font-style: normal;
 

package/assets/sass/elements/links.scss

@@ -234,7 +234,7 @@ iam-collapsible-side {
 
   hr {
     border-bottom: 2px solid var(--colour-border) !important;
-    margin-right: rem(-40) !important;
+    margin-right: -2.5rem !important;
   }
 }
 
@@ -250,7 +250,7 @@ iam-collapsible-side [class*='link'] {
   text-decoration: none !important;
   border-bottom: 2px solid var(--colour-border) !important;
   border-right: 2px solid var(--colour-border) !important;
-  margin-right: rem(-40) !important;
+  margin-right: -2.5rem !important;
   z-index: 2;
 
   &::after {
@@ -305,7 +305,7 @@ iam-collapsible-side {
           position: absolute;
           display: block;
           content: '\f055';
-          font-family: 'Font Awesome 6 Pro';
+          font-family: 'Font Awesome 7 Pro';
           right: 20px;
           font-weight: 300;
         }
@@ -317,7 +317,7 @@ iam-collapsible-side {
 
       a {
         background-color: var(--colour-light) !important;
-        padding-left: rem(90) !important;
+        padding-left: 5.625rem !important;
       }
     }
 
@@ -339,7 +339,7 @@ iam-collapsible-side {
     .parent {
       li:not(:first-of-type) {
         a {
-          padding-left: rem(90) !important;
+          padding-left: 5.625rem !important;
         }
       }
     }

package/assets/sass/elements/lists--tick-list.scss

@@ -8,46 +8,73 @@
     padding-left: 0;
 
     li {
+      --fa-family: var(--fa-family-duotone);
       position: relative;
       list-style: none;
       padding-bottom: 1rem;
-      padding-left: 2.25rem;
+      padding-left: 1.5em;
 
-      &:before {
-        content: '\f00c';
+      &:before  {
+        content: var(--fa,'\f058');
         position: absolute;
         top: 0;
         left: 0;
-        width: 1.25em;
-        height: 1.25em;
-        font-size: 1.25em;
-        line-height: 1;
+        width: 1em;
+        height: 1em;
+        font-size: 1em;
+        //color: var(--tick-colour, var(--colour-complete));
+        font-family: var(--fa-family,'Font Awesome 7 Pro');
+        font-weight: var(--icon-weight, 900);
+        color: var(--colour-white);
+      }
 
-        color: var(--tick-colour, var(--colour-complete));
-        font-family: 'Font Awesome 6 Pro';
-        font-size: 400;
+      &:after {
+        content: var(--fa,'\f058');
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1em;
+        height: 1em;
+        font-size: 1em;
+        color: var(--tick-colour, var(--colour-success));
+        font-family: var(--fa-family,'Font Awesome 7 Pro');
+        font-weight: var(--icon-weight, 900);
+        font-feature-settings: "ss01";
       }
     }
 
-    .tick--warning:before {
-      content: '\f071';
-      font-weight: 300;
-      color: var(--colour-warning);
+    .tick--warning {
+      --fa: '\f071';
+      --tick-colour: var(--colour-warning);
     }
-
-    .tick--danger:before {
-      content: '\f06a';
-      font-weight: 300;
-      color: var(--colour-danger);
+    
+    .tick--danger {
+      --fa: '\f06a';
+      --tick-colour: var(--colour-danger);
     }
 
     .tick--incomplete:before {
+      font-family: 'Font Awesome 7 Pro';
       background: var(--colour-admin);
       mask-image: none;
       -webkit-mask-image: none;
       border-radius: 50%;
       transform: scale(0.8);
     }
+    .tick--incomplete:after {
+      display: none;
+    }
+    .tick--loading:before {
+      font-family: 'Font Awesome 7 Pro';
+      content: '\f3f4';
+      font-weight: var(--icon-weight, 900);
+      color: var(--colour-heading);
+      animation: spin 1.5s infinite steps(10);
+      font-size: 1em;
+    }
+    .tick--loading:after {
+      display: none;
+    }
 
     li[class*='bg-'] {
       padding: 1rem;
@@ -76,6 +103,10 @@
     }
   }
 
+  .bg-primary .tick-list {
+    
+    --icon-weight: 900;
+  }
   /* #endregion */
 
 }