@iamproperty/components 7.6.1 → 7.6.3--beta1

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

@@ -20,7 +20,7 @@
     &:before {
       font-family: var(--record-icon-font, 'Font Awesome 6 Pro');
       font-weight: normal;
-      font-size: rem(24);
+      font-size: 1.5rem;
       content: var(--record-icon);
       display: block;
       position: absolute;
@@ -53,7 +53,7 @@
   &:before {
     font-family: var(--font-body);
     font-weight: normal;
-    font-size: rem(32);
+    font-size: 2rem;
     content: attr(data-initials);
     display: block;
     position: absolute;
@@ -121,7 +121,7 @@
   display: block !important;
   font-weight: normal !important;
   font-size: rem(14) !important;
-  line-height: rem(24) !important;
+  line-height: 1.5rem !important;
 }
 
 ::slotted(span:not(.badge):not([class*='pt-'])) {
@@ -132,7 +132,7 @@
   display: block !important;
   font-weight: normal !important;
   font-size: rem(14) !important;
-  line-height: rem(24) !important;
+  line-height: 1.5rem !important;
 }
 
 :host([data-initials]) {

package/assets/sass/components/slider.scss

@@ -18,7 +18,7 @@
 }
 
 :host {
-  max-width: $input-max-width;
+  max-width: var(--input-max-width);
   display: block;
 }
 
@@ -87,7 +87,7 @@ input[type='range'] + input[type='range']::-moz-range-track {
 
   &[data-elements='2'] {
     justify-content: space-between;
-    --max-width: calc(50% - #{rem(48)});
+    --max-width: calc(50% - 3rem);
     --padding-top: 2rem;
     position: relative;
 
@@ -97,7 +97,7 @@ input[type='range'] + input[type='range']::-moz-range-track {
       width: rem(64);
       height: 2px;
       top: calc(50% - 1px);
-      left: calc(50% - #{rem(32)});
+      left: calc(50% - 2rem);
       background-color: var(--colour-border);
     }
 

package/assets/sass/components/snapshot.scss

@@ -11,13 +11,13 @@
     position: relative;
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     > .row > .col:nth-child(8) ~ .col {
       max-width: 25%;
     }
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     > .row > .col:nth-child(8) ~ .col {
       max-width: 12.5%;
     }

package/assets/sass/components/stepper.scss

@@ -8,7 +8,7 @@
   border: 1px solid var(--colour-canvas);
   overflow: hidden;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     flex-wrap: nowrap;
     overflow-x: auto;
   }
@@ -21,7 +21,7 @@
     width: 100%;
     overflow: auto;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       display: flex;
       flex-grow: 1;
       padding-right: calc(2rem + 1px);
@@ -31,7 +31,7 @@
       clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       overflow: initial;
     }
 
@@ -41,14 +41,14 @@
       background: var(--colour-canvas);
       padding: 1px;
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
+      @media screen and (min-width: 36em) {
         &:first-child a {
           padding-left: 1rem;
           clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
         }
       }
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         &:first-child a {
           padding-left: 2rem;
         }
@@ -64,7 +64,7 @@
         position: relative;
         color: var(--colour-primary);
 
-        @include media-breakpoint-up(sm, $mobileOnly) {
+        @media screen and (min-width: 36em) {
           margin-right: -2rem;
           padding: 2rem 3rem 2rem 3rem;
           clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%, 2rem 50%);
@@ -144,7 +144,7 @@
       display: none;
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       width: max-content;
       padding: 2rem 2rem;
 

package/assets/sass/components/table-basic.component.scss

@@ -1,8 +1,8 @@
 @use '../_func.scss' as *;
 
-@include max-height();
+@use '../utilities/max-height' as *;
+
 
-$darkMode: 'true' !default;
 
 // #region Table container - Add via JS if needed, provides a safe space to scroll
 :host {
@@ -12,14 +12,14 @@ $darkMode: 'true' !default;
 
 .table__container {
   
-  --wrapper-padding: #{rem(32)};
+  --wrapper-padding: 2rem;
   --bg-colour: #ffffff;
   display: block;
   background: var(--colour-canvas-2);
   padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
   border-radius: rem(10);
-  margin-bottom: rem(32);
+  margin-bottom: 2rem;
   overflow: hidden;
 
   &:before {

package/assets/sass/components/table-basic.global.scss

@@ -1,6 +1,6 @@
 @use '../_func.scss' as *;
 
-$darkMode: 'true' !default;
+
 
 $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
 
@@ -86,7 +86,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
         border: none;
         position: absolute;
         overflow: hidden;
-        --compact-size: #{rem(32)};
+        --compact-size: 2rem;
 
         &:before {
           font-family: 'Font Awesome 6 Pro';
@@ -129,11 +129,11 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       background: var(--row-bg);
       padding: var(--wrapper-padding);
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-      border-radius: rem(8);
+      border-radius: 0.5rem;
       height: auto;
 
       & + tr {
-        margin-top: rem(32);
+        margin-top: 2rem;
       }
 
       &:is(:hover, :focus, .hover) {
@@ -282,10 +282,10 @@ table {
       position: absolute;
       top: var(--status-pt, 1rem);
       left: 0;
-      font-size: rem(16);
+      font-size: 1rem;
       line-height: 1;
-      height: rem(16);
-      width: rem(16);
+      height: 1rem;
+      width: 1rem;
       display: inline-block;
     }
   }
@@ -406,7 +406,7 @@ table {
 .actionbar__sticky-wrapper {
   container-type: inline-size;
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     padding: 0 !important;
   }
 }
@@ -416,7 +416,7 @@ table {
     display: block;
     position: sticky;
     left: 0;
-    top: calc(var(--sticky-padding) + #{rem(16)});
+    top: calc(var(--sticky-padding) + 1rem);
     z-index: var(--index-menu);
     pointer-events: none;
 
@@ -440,11 +440,11 @@ table {
     background: var(--colour-canvas-2);
     //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     border-radius: 0.5rem;
-    margin-bottom: rem(24);
+    margin-bottom: 1.5rem;
   }
 }
 
-@include container-up(sm) {
+@container (width > 36em) {
   :is(#{$selector}).table--fullwidth iam-actionbar,
   :is(#{$selector}) iam-actionbar {
     margin-left: -2rem;

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

@@ -1,6 +1,6 @@
 @use '../_func.scss' as *;
 
-$darkMode: 'true' !default;
+
 
 @use './table-basic.component.scss';
 

package/assets/sass/components/table.global.scss

@@ -1,15 +1,13 @@
 @use '../_func.scss' as *;
 
 
-$darkMode: 'true' !default;
 
-@use './table-basic.global.scss' with (
-  $darkMode: $darkMode
-);
+
+@use './table-basic.global.scss';
 
 $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
 
-@include display();
+@use '../utilities/display' as *;
 
 // #region Tables are only stacked on mobile
 :is(#{$selector}):not(.table--fullwidth).table--cta {
@@ -132,7 +130,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
     .th--fixed + .th--fixed,
     .td--fixed + .td--fixed {
-      left: rem(48);
+      left: 3rem;
     }
 
     .th--fixed + .th--fixed + th:not(.th--fixed),
@@ -169,11 +167,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
 // #region sort by column header
 
-$icon-sort: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-96-96c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L128 370.7 128 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 306.7 41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-96 96zm352-333.3c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L448 141.3 448 448c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-306.7-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l96-96c12.5-12.5 32.8-12.5 45.3 0l96 96z'/></svg>");
-
-$icon-sort-asc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M209.4 39.4C204.8 34.7 198.6 32 192 32s-12.8 2.7-17.4 7.4l-168 176c-9.2 9.6-8.8 24.8 .8 33.9s24.8 8.8 33.9-.8L168 115.9 168 456c0 13.3 10.7 24 24 24s24-10.7 24-24l0-340.1L342.6 248.6c9.2 9.6 24.3 9.9 33.9 .8s9.9-24.3 .8-33.9l-168-176z'/></svg>");
-
-$icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M174.6 472.6c4.5 4.7 10.8 7.4 17.4 7.4s12.8-2.7 17.4-7.4l168-176c9.2-9.6 8.8-24.8-.8-33.9s-24.8-8.8-33.9 .8L216 396.1 216 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 340.1L41.4 263.4c-9.2-9.6-24.3-9.9-33.9-.8s-9.9 24.3-.8 33.9l168 176z'/></svg>");
 
 @mixin column-sort {
   th[data-sort] {
@@ -185,7 +178,7 @@ $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
 
     &:hover {
       background-color: var(--colour-light);
-      background-image: #{escape-svg($icon-sort)};
+      background-image: var(--icon-sort);
     }
   }
 
@@ -194,10 +187,10 @@ $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
   }
 
   th[data-sort][data-order-by='asc'] {
-    background-image: #{escape-svg($icon-sort-asc)};
+    background-image: var(--icon-sort-asc);
   }
   th[data-sort][data-order-by='desc'] {
-    background-image: #{escape-svg($icon-sort-desc)};
+    background-image: var(--icon-sort-desc);
   }
 }
 

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

@@ -1,8 +1,8 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
+
+
+
 
 *:not(main):has(> iam-tabs) {
   container-type: inline-size;
@@ -119,7 +119,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     --is-current: 0;
     font-weight: bold;
     font-family: var(--font-heading);
-    font-size: rem(18);
+    font-size: 1.125rem; /* 18/16 */
     cursor: pointer;
     margin: 0;
     padding: 1.5rem 1.5rem 0.5rem 1.5rem;
@@ -184,8 +184,8 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   padding: 0;
   margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
 
-  border-top-left-radius: rem(8);
-  border-top-right-radius: rem(8);
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid var(--colour-border);
@@ -196,14 +196,14 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     display: none;
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     flex-direction: row;
   }
 
   .link:not(.text-decoration-none):not(.btn) {
     margin: 0;
     //margin-left: calc(var(--wrapper-padding) * -1);
-    padding: #{rem(16)} var(--padding-x);
+    padding: 1rem var(--padding-x);
     width: 100%;
     position: relative;
     text-align: left;
@@ -227,7 +227,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
       display: none;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       margin: 0;
 
       &:not(:first-child) {
@@ -242,7 +242,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
 }
 
 // #endregion
-@include media-breakpoint-up(sm, $mobileOnly) {
+@media screen and (min-width: 36em) {
   :host(.tabs--inline) .tabs__links {
     margin: 0;
     justify-content: center;

package/assets/sass/components/testimonial.scss

@@ -4,7 +4,7 @@
   --testimonial-padding: 1rem;
   --testimonial-spacing: 1rem;
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     --testimonial-padding: 4rem;
     --testimonial-spacing: 2rem;
   }
@@ -32,10 +32,10 @@
     touch-action: pan-x;
     height: rem(230);
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       height: rem(340);
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       min-height: 100%;
       scroll-snap-type: y mandatory;
       flex-direction: column;
@@ -61,7 +61,7 @@
     left: 50%;
     transform: translate(-50%, 50%);
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       left: auto;
       bottom: auto;
       right: 0;
@@ -75,10 +75,10 @@
   h2 {
     padding: 2rem var(--testimonial-padding) 0 var(--testimonial-padding);
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       padding-top: 3rem;
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       padding-top: 9rem;
     }
   }
@@ -88,7 +88,7 @@
     margin: 0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
     position: relative;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       --display-none: block;
 
       blockquote:not(.largest) {

package/assets/sass/components/timeline.scss

@@ -10,7 +10,7 @@
   --img-order: 1;
 
   position: relative;
-  padding-top: rem(4);
+  padding-top: 0.25rem;
   padding-left: var(--pl);
   padding-bottom: 1rem;
   width: 100%;
@@ -23,7 +23,7 @@
   .timeline__container:not(.timeline--simple) & {
     align-items: center;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       --img-order: 0;
       --circle-pos: 50%;
       --line-length: 50%;

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

@@ -61,7 +61,7 @@
     max-width: #{rem(270)};
     background: var(--colour-primary);
     color: var(--colour-white);
-    padding: rem(24);
+    padding: 1.5rem;
     border: none;
     border-radius: 0.5rem;
     box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
@@ -74,11 +74,11 @@
       color: inherit;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       max-width: #{rem(335)};
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       max-width: #{rem(360)};
     }
 

package/assets/sass/core.scss

@@ -1,16 +1,4 @@
 @charset "UTF-8";
 
-$root: ':root' !default;
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-$optionalText: 'true' !default;
-
 @use '_fonts';
-@use '_corefiles.scss' with (
-  $root: $root,
-  $layers: $layers,
-  $mobileOnly: $mobileOnly,
-  $darkMode: $darkMode,
-  $optionalText: $optionalText
-);
+@use '_corefiles.scss';

package/assets/sass/elements/admin-panel.scss

@@ -1,22 +1,22 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+
+
+
+@layer elements {
   .admin-panel {
-    --padding-x: #{rem(24)};
-    --padding-top: #{rem(16)};
-    --padding-bottom: #{rem(16)};
+    --padding-x: 1.5rem;
+    --padding-top: 1rem;
+    --padding-bottom: 1rem;
     --mh-modifier: #{rem(56 + 16)};
     --mh-padding-inline: var(--padding-x);
     display: block;
     padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     background-color: var(--colour-canvas-2);
-    border-radius: rem(8);
-    margin-bottom: rem(24);
+    border-radius: 0.5rem;
+    margin-bottom: 1.5rem;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
     overflow: hidden;
 
@@ -45,24 +45,24 @@ $darkMode: 'true' !default;
 
       margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
       display: block;
-      border-top-left-radius: rem(8);
-      border-top-right-radius: rem(8);
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
     }
 
     > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child,
     .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead) {
-      font-size: rem(18);
-      line-height: rem(24);
+      font-size: 1.125rem; /* 18/16 */
+      line-height: 1.5rem;
       font-weight: bold;
-      padding: rem(16) rem(24);
+      padding: 1rem 1.5rem;
     }
 
     > :is(.admin-panel__heading):first-child {
-      display: flex;
+      display: flex!important;
       flex-wrap: wrap;
       gap: 1rem;
       align-items: center;
-      padding: rem(16) rem(24);
+      padding: 1rem 1.5rem;
 
       > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
         padding: 0;
@@ -92,7 +92,7 @@ $darkMode: 'true' !default;
     }
 
     :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax, .iam-table) {
-      margin: 0 0 rem(32) 0;
+      margin: 0 0 2rem 0;
       padding: 0;
       box-shadow: none;
       background: none;
@@ -108,7 +108,7 @@ $darkMode: 'true' !default;
 
     p {
       max-width: 100%;
-      padding-bottom: rem(24);
+      padding-bottom: 1.5rem;
     }
 
     > :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
@@ -164,7 +164,7 @@ $darkMode: 'true' !default;
       grid-template-columns: subgrid !important;
 
       > *:not(:first-child) {
-        grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+        grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
       }
     }
   }
@@ -172,7 +172,7 @@ $darkMode: 'true' !default;
   [class*='col'].admin-panel:first-child:last-child:not(
       :has(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid)
     ) {
-    min-height: calc(100% - #{rem(24)});
+    min-height: calc(100% - 1.5rem);
   }
 
   // #region Has actionbar
@@ -245,6 +245,10 @@ $darkMode: 'true' !default;
     }
   }
   // #endregion
+  .admin-panel:has(.admin-panel__footer){
+
+    container-type: inline-size;
+  }
   .admin-panel__footer:last-child {
     background-color: var(--wider-colour);
     padding-top: var(--padding-top);
@@ -252,18 +256,30 @@ $darkMode: 'true' !default;
     padding-inline: var(--padding-x);
     padding-bottom: var(--padding-bottom);
 
-    &:has(strong:last-child){
-      display: flex;
-      align-items: end;
-
-      p {
-        padding-bottom: 0;
-        padding-inline-end: var(--padding-x);
-      }
+    p br {
+      display: none;
+    }
 
-      strong {
-        white-space: nowrap;
-        margin-inline-start: auto;
+    strong:last-child {
+      white-space: nowrap;
+      padding-bottom: 0!important;
+      margin-inline-start: auto;
+    }
+    
+
+    @container (width > 36em) {
+      &:has(strong:last-child){
+        display: flex;
+        align-items: end;
+
+        p {
+          padding-bottom: 0;
+          padding-inline-end: var(--padding-x);
+          
+          br {
+            display: initial;
+          }
+        }
       }
     }
   }