@iamproperty/components 7.6.4--beta7 → 7.7.0

package/assets/sass/components/header.scss

@@ -1,27 +1,27 @@
 @use '../_func' as *;
-@use '../elements/container.scss' as *;
+@use '../elements/container' as *;
+@use '../elements/admin-panel' as *;
 
 *, *::before, *::after {
     box-sizing: border-box;
 }
 
 .container {
-    box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 4;
 }
 
 :host {
   padding-top: 0 !important;
   margin-bottom: 2rem;
-  background-color: transparent !important;
   display: block !important;
 }
 
 .header-banner {
-  padding-top: rem(44);
-
-  max-width: rem(1920);
-
-  min-height: rem(400);
+  padding-top: 2.75rem; /* 44*/
+  max-width: 120rem; /* 1920 */
+  min-height: 25rem; /* 400 */
   margin-inline: auto;
   display: block;
 
@@ -29,7 +29,7 @@
   height: auto;
 
   @media screen and (min-width: 62em) {
-    padding-top: rem(84);
+    //padding-top: 5.25rem; /* 84 */
   }
 
   > picture {
@@ -41,30 +41,32 @@
     width: 100%;
     pointer-events: none;
     overflow: hidden;
-    min-height: rem(400);
-    max-height: rem(400);
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      z-index: -1;
-      inset: 0;
-      background: linear-gradient(300deg, rgba(30, 190, 230, 1) 0%, rgba(0, 49, 60, 1) 100%);
-      opacity: 0.85;
-    }
+    min-height: 25rem; /* 400 */
+    max-height: 25rem; /* 400 */
+    z-index: 3;
 
     img {
       display: block;
       position: absolute;
-      z-index: -2;
+      z-index: 1;
       inset: 0;
       object-fit: cover;
       object-position: 50% 50%;
       width: 100%;
       height: 100%;
     }
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      z-index: 2;
+      inset: 0;
+      background: linear-gradient(300deg, rgba(30, 190, 230, 1) 0%, rgba(0, 49, 60, 1) 100%);
+      opacity: 0.85;
+    }
   }
+
 }
 
 :host(.header--contain) {
@@ -88,7 +90,103 @@
   }
 }
 
-::slotted(*:last-child) {
+::slotted(*:not(.btn__group):last-child) {
   padding-bottom: 0 !important;
   margin-bottom: 0 !important;
 }
+
+
+// #region badge
+
+slot[name="badge"] {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+// #endregion
+
+// #region panel 
+:host(.has-panel) .admin-panel{
+
+  display: block;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+::slotted([slot="panel"]) {
+  
+  color-scheme: light !important;
+  --colour-heading: var(--colour-primary-theme);
+  --colour-body: var(--colour-primary-theme);
+  --colour-underline: var(--colour-secondary-theme);
+  color: var(--colour-primary-theme);
+}
+
+::slotted(img[slot="panel"]) {
+  
+  max-width: 4.75rem!important; /* TODO: magic number 1 column */
+}
+
+:host(.has-panel) slot[name="panel"]{
+  container-type: inline-size;
+    anchor-name: --anchor;
+}
+
+:host(.has-panel) slot[name="badge"] {
+  
+  position-anchor: --anchor;
+  top: calc(anchor(top) + 1rem);
+  left: calc(anchor(left) + 1rem);
+  z-index: 999;
+}
+
+@media screen and (min-width: 62em) {
+      
+  :host(.has-panel) {
+    .container {
+      display: grid;
+      column-gap: var(--gap);
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+  :host(.has-panel) slot:not([name]){
+
+    display: block;
+    grid-column-start: 1;
+    grid-column-end: 7;
+  }
+
+  :host(.has-panel) slot[name="before"]{
+
+    display: block;
+    grid-column-start: 1;
+    grid-column-end: 13;
+  }
+  :host(.has-panel) slot[name="panel"]{
+
+    display: block;
+    grid-column-start: 8;
+    grid-column-end: 13;
+  }
+
+  :host(.has-panel) .admin-panel{
+
+    text-align: center;
+  }
+}
+// #endregion
+
+// #region gradient background
+:host {
+  overflow: hidden;
+}
+.gradient-background {
+  position: absolute;
+  left: 75%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  width: 54rem; /* 874px */
+  aspect-ratio: 1 / 1;
+}
+// #endregion

package/assets/sass/components/inline-edit.preload.scss

@@ -77,7 +77,7 @@
       opacity: 0;
       white-space: nowrap;
       font-size: 1rem;
-      line-height: rem(26);
+      line-height: 1.625rem; /* 26 */
       pointer-events: none;
       color: var(--colour-heading);
     }

package/assets/sass/components/inline-edit.scss

@@ -1,5 +1,5 @@
 @use '../_func' as *;
-@use '../elements/buttons--action.scss' as *;
+@use '../elements/buttons--action' as *;
 
 @use '../utilities/display' as *;
 

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

@@ -1,5 +1,6 @@
 @use '../func' as *;
-@use '../elements/prefix.scss' as *;
+@use '../elements/prefix' as *;
+@use '../utilities/font-awesome-iso-fallbacks';
 
 *,
 *::before,

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 $isComponent: 'true' !default;
 

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 :host {
   //all: unset;
@@ -41,20 +41,20 @@
 }
 
 :host(.menu--sm) {
-  width: rem(160);
+  width: 10rem;
 }
 :host(.menu--md) {
-  width: rem(240);
+  width: 15rem; /* 240 */
 }
 :host(.menu--lg) {
-  width: rem(320);
+  width: 20rem; /* 320 */
 }
 
 :host(.menu--height-sm) {
-  max-height: rem(200);
+  max-height: 12.5rem; /* 200 */
 }
 :host(.menu--height-lg) {
-  max-height: rem(400);
+  max-height: 25rem; /* 400 */
 }
 
 ::slotted(*:is(button, a, label, span)) {
@@ -65,7 +65,7 @@
   font-weight: inherit !important;
   font-family: inherit !important;
   font-size: 1rem !important;
-  line-height: rem(19) !important;
+  line-height: 1.1875rem !important;
   display: block !important;
   margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
   padding-block: var(--menu-item-padding, 0.5rem) !important;
@@ -97,10 +97,10 @@
   --radio-inner-left: 0.75rem;
 
   --checkbox-tick-size: 0.75rem;
-  --checkbox-inner-size: #{rem(10)};
-  --checkbox-inner-top: #{rem(6)};
+  --checkbox-inner-size: #{0.625rem};
+  --checkbox-inner-top: 0.375rem; /* 6 */
   --checkbox-inner-left: 0.5rem;
-  padding-left: rem(36) !important;
+  padding-left: 2.25rem; /* 36 */
 }
 
 // States

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);