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

package/assets/sass/components/charts.scss

@@ -245,8 +245,8 @@ input[type='radio']:not([value='none']):not([value='pie']):checked
       display: inline-block;
 
       vertical-align: bottom;
-      margin-bottom: rem(3);
-      margin-right: rem(6);
+      margin-bottom: 0.1875rem; /* 3 */
+      margin-right: 0.375rem; /* 6 */
     }
   }
 
@@ -1028,7 +1028,7 @@ input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrappe
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 1;
-    min-width: rem(200);
+    min-width: 12.5rem; /* 200 */
     flex: 1 1 auto;
     display: inline-block;
     max-width: var(--pie-size);

package/assets/sass/components/collapsible-side.scss

@@ -52,7 +52,7 @@
   left: 0;
   height: 100%;
   min-height: calc(100vh - var(--nav-height));
-  width: rem(70);
+  width: 4.375rem; /* 70 */
   height: calc(100% - var(--nav-height));
   padding: 0 2.5rem 0 0;
   transition: width 1s;
@@ -69,17 +69,17 @@
 
   @media screen and (min-width: 36em) {
     left: 0;
-    width: rem(80);
+    width: 5rem; /* 80 */
   }
 
   @media screen and (min-width: 62em) {
-    left: rem(84);
-    margin-left: #{rem(-84)};
+    left: 5.25rem; /* 84 */
+    margin-left: -5.25rem; /* -84 */
     position: fixed;
     top: var(--nav-height);
 
     &:not(.open).hover {
-      width: rem(344);
+      width: 21.5rem; /* 344 */
 
       .btn[class*='fa-']:before {
         content: '\f023' !important;
@@ -94,7 +94,7 @@
     top: 2rem;
     right: 2.5rem;
     margin-bottom: 0;
-    margin-right: rem(-20);
+    margin-right: -1.25rem; /* -20 */
     background-color: var(--colour-canvas-2);
     border: 2px solid var(--colour-border);
     z-index: 99;
@@ -125,10 +125,10 @@
     width: calc(100% - var(--container-padding-x) + 2.5rem);
 
     @media screen and (min-width: 36em) {
-      width: rem(422);
+      width: 26.375rem; /* 422 */
     }
     @media screen and (min-width: 62em) {
-      width: rem(344);
+      width: 21.5rem; /* 344 */
     }
   }
 
@@ -138,7 +138,7 @@
     top: 0;
     right: 2.5rem;
     padding: 2rem 2.5rem 2.5rem 0;
-    width: rem(351);
+    width: 21.9375rem; /* (351) */
     background-color: var(--colour-canvas);
     opacity: 0;
     transition: opacity 1s;
@@ -156,10 +156,10 @@
         padding-left: 2.5rem;
       }
 
-      width: rem(382);
+      width: 23.875rem; /* 283 */
     }
     @media screen and (min-width: 62em) {
-      width: rem(304);
+      width: 19rem; /* (304) */
 
       .h3 {
         padding-left: var(--container-padding-x);
@@ -182,7 +182,7 @@
   }
 }
 
-// links moved to links.scss
+// links moved to links
 // #endregion
 
 // #region main content
@@ -190,10 +190,10 @@
   position: relative;
   z-index: 10;
   padding-top: 1.5rem;
-  padding-left: rem(60);
+  padding-left: 3.75rem; /* 60 */
 
   @media screen and (min-width: 36em) {
-    padding-left: rem(80);
+    padding-left: 5rem; /* 80 */
   }
 
   @media screen and (min-width: 62em) {
@@ -294,10 +294,10 @@
 
   .main-content {
     padding-left: var(--container-padding-x);
-    padding-right: rem(60);
+    padding-right: 3.75rem; /* 60 */
 
     @media screen and (min-width: 36em) {
-      padding-right: rem(80);
+      padding-right: 5rem; /* 80 */
     }
 
     @media screen and (min-width: 62em) {

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 @use '../_grid' as *;
 
@@ -9,10 +9,10 @@
 @use '../elements/buttons' as *;
 @use '../utilities/margins';
 @use '../utilities/paddings';
-@use '../utilities/colours.scss';
-@use '../utilities/visually-hidden.scss';
+@use '../utilities/colours';
+@use '../utilities/visually-hidden';
 
-@use '../utilities/font-awesome-iso-fallbacks.scss';
+@use '../utilities/font-awesome-iso-fallbacks';
 
 *,
 *::before,
@@ -55,7 +55,7 @@
   &:before {
     content: var(--fa);
     font-weight: 600;
-    font-family: "Font Awesome 6 Pro";
+    font-family: "Font Awesome 7 Pro";
   }
 }
 // #endregion

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

@@ -1,5 +1,5 @@
 @use '../_func' as *;
-@use '../elements/buttons.scss' as *;
+@use '../elements/buttons' as *;
 
 *,
 *::before,

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 ::slotted(.toggle):after {

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

@@ -1,6 +1,6 @@
-@use '../_func.scss' as *;
-@use 'charts.module.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../_func' as *;
+@use 'charts.module' as *;
+@use '../elements/buttons' as *;
 
 .d-block {
   display: block;
@@ -24,7 +24,7 @@
 
   .btn-action {
     font-size: 0.75rem;
-    margin-right: rem(-6) !important;
+    margin-right: -0.375rem !important; /* -6 */
     border-color: transparent !important;
   }
 
@@ -35,6 +35,7 @@
 }
 // #endregion
 
+
 // #region Horizontal
 :host(.chart--horizontal) {
   .chart__outer {
@@ -46,8 +47,8 @@
       overflow: visible;
 
       .btn-action {
-        margin-right: rem(0) !important;
-        margin-bottom: rem(-12) !important;
+        margin-right: 0 !important;
+        margin-bottom: -0.75 !important; /* -12 */
       }
     }
   }
@@ -81,15 +82,15 @@
 
 // #region doughnut chart
 :host(.chart--lg) {
-  --doughnut-size: #{rem(286)};
+  --doughnut-size: 17.875rem; /* 286 */
 }
 
 :host {
-  --doughnut-size: #{rem(236)};
+  --doughnut-size: 14.75rem; /* 236 */
 }
 
 :host(.chart--sm) {
-  --doughnut-size: #{rem(190)};
+  --doughnut-size: 11.875rem; /* 190 */;
 }
 
 .chart__outer {
@@ -115,7 +116,7 @@
   .doughnut {
     position: relative;
     aspect-ratio: 1 / 1;
-    min-width: rem(190);
+    min-width: 11.875rem; /* 190 */;
     flex: 1 1 auto;
     display: inline-block;
     max-width: var(--doughnut-size);

package/assets/sass/components/fileupload.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../_func' as *;
-@use '../elements/forms.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
 
 @use '../utilities/display' as *;
 
@@ -20,7 +20,7 @@ hr {
 // #region file upload field
 
 .file-upload {
-  max-width: rem(400) !important;
+  max-width: 25rem !important; /* 400 */
   padding-bottom: 1rem;
 
   .drop-area > input {
@@ -46,7 +46,7 @@ hr {
   }
 
   .helper-text {
-    max-width: rem(270);
+    max-width: 16.875rem; /* (270); */
   }
 }
 
@@ -64,7 +64,7 @@ hr {
     color: var(--colour-primary);
     border-color: #d8d8d8;
     background: #d8d8d8;
-    max-width: rem(400) !important;
+    max-width: 25rem!important; /*(400) */
     position: relative;
 
     @media (forced-colors: active) {
@@ -83,7 +83,7 @@ hr {
 
     button {
       position: absolute;
-      top: calc(50% - #{rem(9)});
+      top: calc(50% - 0.5625rem);
       right: 0.875rem; /* 14/16 */
       z-index: var(--index-floating);
       text-indent: 300%;
@@ -118,15 +118,15 @@ hr {
 }
 
 :host(.fileupload--drag-drop) .file-upload {
-  max-width: rem(800) !important;
+  max-width: 50rem !important; /* 800 */
 
   .helper-text {
-    max-width: rem(800) !important;
+    max-width: 50rem !important; /* 800 */
   }
 
   .drop-area > input {
     display: block;
-    min-height: rem(200);
+    min-height: 12.5rem; /* 200 */
     border: 2px dashed var(--colour-primary-theme);
     color: transparent;
     position: relative;

package/assets/sass/components/filter-card.component.scss

@@ -1,5 +1,5 @@
-@use '../_func.scss' as *;
-@use 'card.module.scss' as *;
+@use '../_func' as *;
+@use 'card.module' as *;
 
 :host {
   --top-padding: 1.5rem;
@@ -69,7 +69,7 @@
 
   &:after {
     content: var(--card-flag-icon, '\f024');
-    font-family: 'Font Awesome 6 Pro';
+    font-family: 'Font Awesome 7 Pro';
     position: absolute;
     top: 1rem;
     right: 1rem;

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,10 +29,17 @@
   height: auto;
 
   @media screen and (min-width: 62em) {
-    padding-top: rem(84);
+    //padding-top: 5.25rem; /* 84 */
   }
 
-  > picture {
+  > .picture-overflow {
+    overflow: hidden;
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+  }
+      
+  > .picture-overflow picture {
     display: block;
     position: absolute;
     top: 0;
@@ -41,30 +48,31 @@
     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 */
 
     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 +96,161 @@
   }
 }
 
-::slotted(*:last-child) {
-  padding-bottom: 0 !important;
-  margin-bottom: 0 !important;
+::slotted(*:not(.btn__group):last-child) {
+  //padding-bottom: 0 !important;
+  //margin-bottom: 0 !important;
+}
+
+// #region Breadcrumbs
+:host(.has-breadcrumbs) {
+
+  .header-banner {
+    padding-top: 1rem;
+  }
+
+  ::slotted(.breadcrumbs) {
+    margin-bottom: 2rem!important;
+  }
+}
+// #endregion
+
+// #region badge
+
+slot[name="badge"] {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+// #endregion
+
+// #region panel 
+:host(.has-panel) [name="panel"]{
+
+  display: block;
+  text-align: center;
+  margin-bottom: 1rem;
+  max-height: fit-content;
+}
+
+::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 toolbox 
+:host(.has-toolbox) {
+
+  margin-bottom: 4rem;
+}
+:host(.has-toolbox) [name="toolbox"]{
+
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  margin-bottom: -3rem;
+  width: fit-content;
+  margin-inline: auto;
+
+  gap: 0.5rem;
+}
+
+::slotted([slot="toolbox"]) {
+
+  margin: 0!important;
+  
+  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(hr[slot="toolbox"]) {
+
+  display: inline-block;
+  vertical-align: top !important;
+  margin-top: -0.25rem !important;
+  margin-bottom: -0.25rem !important;
+  background-color: var(--colour-muted) !important;
+  width: 1px !important;
+  height: 2.5rem !important;
+}
+
+// #endregion
+
+// #region gradient background
+.gradient-overflow {
+  overflow: hidden;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+.gradient-background {
+  position: absolute;
+  left: 75%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  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;
     }