@iamproperty/components 7.6.4--beta8 → 7.7.0

package/assets/sass/components/milestone.scss

@@ -51,7 +51,7 @@ iam-milestone-group {
 
     &:before {
       content: '\f06e';
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       position: absolute;
       left: auto;
       right: 0;
@@ -145,7 +145,7 @@ iam-milestone {
       height: 1rem;
       border: 2px solid var(--colour-primary);
       border-radius: 50%;
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       color: #fff;
       font-size: 0.7rem;
     }

package/assets/sass/components/modal.component.scss

@@ -1,6 +1,6 @@
-@use '../_func.scss' as *;
-@use '../elements/dialog.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../_func' as *;
+@use '../elements/dialog' as *;
+@use '../elements/buttons' as *;
 
 :host{
   
@@ -23,24 +23,24 @@
   dialog[open] {
     //overflow-y: hidden;
     width: 90vw;
-    max-width: rem(324); // col-width*4
+    max-width: 20.25rem; /* col-width*4 324px */
 
     //height: 90vh;
-    max-height: min(90vh, #{rem(752)});
+    max-height: min(90vh, 47rem);
     overscroll-behavior: contain;
     overflow-y: hidden;
 
     @media screen and (min-width: 36em) {
       --dialog-padding: 2rem;
-      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;
     }
 
     &::before {
@@ -113,7 +113,7 @@
     }
 
     &.dialog--fullwidth {
-      max-width: rem(1112);
+      max-width: 69.5rem;
     }
 
     .btn__group {
@@ -126,18 +126,18 @@
 
     :host(.modal--sm) dialog[open] {
       
-        min-width: rem(335);
-        width: rem(335);
-        max-width: rem(335);
+        min-width: 20.9375rem;
+        width: 20.9375rem;
+        max-width: 20.9375rem;
     }
   }
 
   @media screen and (min-width: 62em) {
 
     :host(.modal--sm) dialog[open] {
-        min-width: rem(454);
-        width: rem(454);
-        max-width: rem(454);
+        min-width: 28.375rem;
+        width: 28.375rem;
+        max-width: 28.375rem;
     }
   }
 
@@ -145,18 +145,18 @@
   @media screen and (min-width: 36em) {
 
     :host(.modal--lg) dialog[open] {
-        min-width: rem(686);
-        width: rem(686);
-        max-width: rem(686);
+        min-width: 42.875rem;
+        width: 42.875rem;
+        max-width: 42.875rem;
     }
   }
 
   @media screen and (min-width: 62em) {
 
     :host(.modal--lg) dialog[open] {
-        min-width: rem(736);
-        width: rem(736);
-        max-width: rem(736);
+        min-width: 46rem;
+        width: 46rem;
+        max-width: 46rem;
     }
   }
 

package/assets/sass/components/multi-step-modal.component.scss

@@ -1,7 +1,7 @@
-@use '../_func.scss' as *;
-@use '../elements/dialog.scss' as *;
+@use '../_func' as *;
+@use '../elements/dialog' as *;
 
-@use '../elements/buttons.scss' as *;
+@use '../elements/buttons' as *;
 
 
 
@@ -25,7 +25,7 @@ dialog[open] {
 
   @media screen and (min-width: 62em) {
     padding-top: var(--dialog-padding);
-    padding-left: calc(var(--dialog-padding) + #{rem(282)}) !important;
+    padding-left: calc(var(--dialog-padding) + 17.625rem) !important;
     //display: flex;
     flex-direction: column;
   }
@@ -48,20 +48,20 @@ dialog[open] {
     padding: 6rem 1.5rem 0 1.5rem;
 
     @media screen and (min-width: 36em) {
-      min-width: rem(452);
-      width: rem(452);
-      max-width: rem(452);
+      min-width: 28.25rem;
+      width: 28.25rem;
+      max-width: 28.25rem;
     }
 
     @media screen and (min-width: 62em) {
-      min-width: rem(924);
-      width: rem(924);
-      max-width: rem(924);
+      min-width: 57.75rem;
+      width: 57.75rem;
+      max-width: 57.75rem;
     padding: 0;
 
-      @media (min-height: #{rem(500)}) {
-        height: rem(478);
-        max-height: rem(478);
+      @media (min-height: 31.25rem) {
+        height: 29.875rem;
+        max-height: 29.875rem;
       }
     }
 
@@ -107,7 +107,7 @@ dialog[open] {
       }
 
       .btn--wrapper {
-        padding-top: rem(64);
+        padding-top: 4rem; /* 64 */
       }
     }
 
@@ -232,7 +232,7 @@ dialog[open] {
   }
 
   @media screen and (min-width: 62em) {
-    width: rem(282);
+    width: 17.625rem;
     height: 100%;
     flex-direction: column;
     justify-content: center;

package/assets/sass/components/multi-step-modal.global.scss

@@ -69,7 +69,7 @@
         padding-right: calc(var(--dialog-padding) - 10px);
         margin-right: calc((var(--dialog-padding) * -1) + 10px);
 
-        max-height: rem(370);
+        max-height: 23.125rem; /* 370 */
 
         &::before {
           content: '';

package/assets/sass/components/multi-step.component.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 
@@ -22,7 +22,7 @@
 
   @media screen and (min-width: 62em) {
     padding-top: var(--dialog-padding);
-    padding-left: calc(var(--dialog-padding) + #{rem(282)}) !important;
+    padding-left: calc(var(--dialog-padding) + 17.625rem) !important;
     display: flex;
     flex-direction: column;
   }
@@ -121,7 +121,7 @@
   }
 
   @media screen and (min-width: 62em) {
-    width: rem(282);
+    width: 17.625rem;
     height: 100%;
     flex-direction: column;
     justify-content: center;

package/assets/sass/components/multiselect.scss

@@ -1,11 +1,11 @@
 @use '../_func' as *;
 
 
-@use '../elements/forms.scss' as *;
-@use '../elements/admin-panel.scss' as *;
-@use '../elements/buttons.scss' as *;
-@use '../elements/buttons--action.scss' as *;
-@use '../elements/dropdown.scss' as *;
+@use '../elements/forms' as *;
+@use '../elements/admin-panel' as *;
+@use '../elements/buttons' as *;
+@use '../elements/buttons--action' as *;
+@use '../elements/dropdown' as *;
 
 @use '../utilities/visually-hidden' as *;
 @use '../utilities/display' as *;
@@ -83,7 +83,7 @@
     flex-wrap: wrap;
     align-items: flex-start;
     min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
-    padding: 0.5rem 2rem 0 #{rem(13)};
+    padding: 0.5rem 2rem 0 0.8125rem;
     font-size: var(--input-fs, 1rem);
     line-height: var(--input-lh, 1.25rem);
     color: var(--colour-body);
@@ -100,12 +100,12 @@
     input {
       all: unset;
       font-size: 1rem;
-      line-height: rem(26);
+      line-height: 1.625rem; /* 26 */
       display: var(--search-display,inline-block);
       width: 0;
       flex-grow: 1;
       padding: 0 0.5rem 0 0 !important;
-      margin-inline: rem(3);
+      margin-inline: 0.1875rem; /* 3 */
       order: 999;
       margin-bottom: 0.5rem;
     }
@@ -228,7 +228,7 @@
   ::slotted([slot='checked']) {
     margin-bottom: 0.5rem;
     order: var(--order, 1);
-    margin-inline: rem(3);
+    margin-inline: 0.1875rem; /* 3 */
   }
 
   ::slotted([slot='checked'])::after {

package/assets/sass/components/nav.component.scss

@@ -4,21 +4,21 @@
 
 @use '../bs_grid' as *;
 
-@use '../elements/forms.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
 
 @use '../elements/brand.css';
 
-@use '../elements/dialog.scss' as *;
-@use '../elements/modal.scss' as *;
-@use '../elements/container.scss' as *;
+@use '../elements/dialog' as *;
+@use '../elements/modal' as *;
+@use '../elements/container' as *;
 
 
-@use '../utilities/colours.scss' as *;
-@use '../utilities/margins.scss' as *;
-@use '../utilities/paddings.scss' as *;
-@use '../utilities/sizes.scss' as *;
-@use '../utilities/display.scss' as *;
+@use '../utilities/colours' as *;
+@use '../utilities/margins' as *;
+@use '../utilities/paddings' as *;
+@use '../utilities/sizes' as *;
+@use '../utilities/display' as *;
 
 *, *::before, *::after {
     box-sizing: border-box;
@@ -111,7 +111,7 @@
   @media screen and (min-width: 36em) {
     margin: 0 0 0 3rem;
     width: auto;
-    padding-right: rem(24 + 6);
+    padding-right: 1.875rem; /* 24 + 6 */
     text-indent: 0;
 
     &[aria-expanded] {
@@ -170,10 +170,10 @@
 
   .menu__outer {
     position: absolute;
-    top: rem(96);
+    top: 6rem; /* 96 */
     left: 0;
     width: 100%;
-    height: calc(100vh - #{rem(96)});
+    height: calc(100vh - 6rem);
     overflow: hidden;
     pointer-events: none;
     transition: background 0.5s;
@@ -200,10 +200,10 @@
 
     
     overscroll-behavior: contain;
-    width: calc(#{rem(375)} - var(--scrollbar-width));
+    width: calc(23.4375rem - var(--scrollbar-width));
     background-color: var(--colour-canvas-2);
     position: absolute;
-    height: calc(100vh - #{rem(96)});
+    height: calc(100vh - 6rem);
     left: 100%;
     top: 0;
     padding: 0 1.5rem 0 1.5rem;
@@ -242,7 +242,7 @@
     }
 
     &.open {
-      left: calc(100% - (#{rem(375)} - var(--scrollbar-width)));
+      left: calc(100% - (23.4375rem - var(--scrollbar-width)));
       -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
       box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
       pointer-events: all;
@@ -346,7 +346,7 @@
   }
 
   .has-secondary .menu__secondary {
-    margin-right: rem(-40) !important;
+    margin-right: -2.5rem !important;
     padding-right: 2.5rem !important;
 
     &:before {
@@ -375,7 +375,7 @@
     align-items: center;
 
     &:has(.has-secondary) {
-      padding-top: rem(24 + 40) !important;
+      padding-top: 4rem !important; /* 24 + 40 */
     }
 
     > * {
@@ -425,7 +425,7 @@
   }
 
   ::slotted(a[slot='secondary']) {
-    font-size: rem(14) !important;
+    font-size: 0.875rem !important;
 
     &:after {
       top: calc(100% - 0.25em) !important;
@@ -551,10 +551,10 @@
 ::slotted(.nav--menu) {
   pointer-events: all;
   overscroll-behavior: contain;
-  width: calc(#{rem(375)} - var(--scrollbar-width));
+  width: calc(23.4375rem - var(--scrollbar-width));
   background-color: var(--colour-canvas-2);
   position: absolute;
-  height: calc(100vh - #{rem(96)});
+  height: calc(100vh - 6rem);
   left: 100%;
   top: 0;
   padding: 0 1.5rem 0 1.5rem;
@@ -618,7 +618,7 @@ slot[name='menus'] {
   height: 100vh;
   overflow: hidden;
   pointer-events: none;
-  width: calc(#{rem(375)} - var(--scrollbar-width));
+  width: calc(23.4375rem - var(--scrollbar-width));
 }
 
 ::slotted(.nav--menu[data-open-title]) {
@@ -628,8 +628,8 @@ slot[name='menus'] {
 }
 
 ::slotted(.nav--menu.open) {
-  width: calc(#{rem(375)} - var(--modifier, 0px));
-  left: calc(100% - (#{rem(375)} - var(--scrollbar-width, 0px) - var(--modifier, 0px)));
+  width: calc(23.4375rem - var(--modifier, 0px));
+  left: calc(100% - (23.4375rem - var(--scrollbar-width, 0px) - var(--modifier, 0px)));
   -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
   pointer-events: all;

package/assets/sass/components/nav.docs.scss

@@ -33,7 +33,7 @@
     //position: relative;
     position: absolute;
     --scrollbar-width: 17px;
-    top: rem(96);
+    top: 6rem; /* 96 */
     left: auto;
     right: 0;
     -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);