@iamproperty/components 7.6.1 → 7.6.3--beta1

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

@@ -1,10 +1,10 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+
+
+
+@layer components {
   $menuPadding: 0.5rem !default;
 
   iam-menu:defined {
@@ -25,8 +25,8 @@ $darkMode: 'true' !default;
     &:after {
       content: '';
       height: var(--btn-line-height);
-      width: rem(16);
-      height: rem(16);
+      width: 1rem;
+      height: 1rem;
       display: inline-block;
       background: currentColor;
       mask-image: var(--icon-arrow);

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

@@ -29,14 +29,14 @@ dialog[open] {
   overscroll-behavior: contain;
   overflow-y: hidden;
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    --dialog-padding: #{rem(32)};
+  @media screen and (min-width: 36em) {
+    --dialog-padding: 2rem;
     min-width: rem(335);
     width: fit-content;
     max-width: rem(686);
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     min-width: rem(454);
     width: fit-content;
     max-width: rem(736);
@@ -121,7 +121,7 @@ dialog[open] {
 
 // Size variants
 // small
-@include media-breakpoint-up(sm, $mobileOnly) {
+@media screen and (min-width: 36em) {
 
   :host(.modal--sm) dialog[open] {
     
@@ -131,7 +131,7 @@ dialog[open] {
   }
 }
 
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
 
   :host(.modal--sm) dialog[open] {
       min-width: rem(454);
@@ -141,7 +141,7 @@ dialog[open] {
 }
 
 // large
-@include media-breakpoint-up(sm, $mobileOnly) {
+@media screen and (min-width: 36em) {
 
   :host(.modal--lg) dialog[open] {
       min-width: rem(686);
@@ -150,7 +150,7 @@ dialog[open] {
   }
 }
 
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
 
   :host(.modal--lg) dialog[open] {
       min-width: rem(736);
@@ -205,12 +205,12 @@ dialog::backdrop {
     height: 3rem;
     width: 3rem;
     margin-top: 0;
-    margin-bottom: rem(24);
+    margin-bottom: 1.5rem;
     line-height: 1;
     color: var(--colour-heading);
         margin-inline: auto;
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       font-size: 4rem;
       height: 4rem;
       width: 4rem;

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

@@ -3,7 +3,7 @@
 
 @use '../elements/buttons.scss' as *;
 
-$darkMode: 'true' !default;
+
 
 *,
 *:before,
@@ -23,7 +23,7 @@ dialog[open] {
   //min-height: 100%;
   padding-left: var(--dialog-padding);
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     padding-top: var(--dialog-padding);
     padding-left: calc(var(--dialog-padding) + #{rem(282)}) !important;
     //display: flex;
@@ -45,15 +45,15 @@ dialog[open] {
 // #region Multi step modal
 
   dialog[open] {
-    padding: 6rem rem(24) 0 rem(24);
+    padding: 6rem 1.5rem 0 1.5rem;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       min-width: rem(452);
       width: rem(452);
       max-width: rem(452);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       min-width: rem(924);
       width: rem(924);
       max-width: rem(924);
@@ -77,7 +77,7 @@ dialog[open] {
         background-color: Canvas;
       }
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
 
         top: calc(var(--dialog-padding) - 0.75rem);
         right: calc(var(--dialog-padding) - 0.75rem);
@@ -175,9 +175,9 @@ dialog[open] {
     background: transparent;
     border: none;
     color: rgba($color: #ffffff, $alpha: 0.5);
-    height: rem(24);
-    line-height: rem(24);
-    width: rem(24);
+    height: 1.5rem;
+    line-height: 1.5rem;
+    width: 1.5rem;
     text-indent: 300%;
     overflow: hidden;
     z-index: 2;
@@ -193,9 +193,9 @@ dialog[open] {
       content: counter(section);
 
       border: 1px solid currentColor;
-      height: rem(24);
-      line-height: rem(24);
-      width: rem(24);
+      height: 1.5rem;
+      line-height: 1.5rem;
+      width: 1.5rem;
       text-align: center;
       display: inline-block;
       text-indent: 0;
@@ -231,7 +231,7 @@ dialog[open] {
     }
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     width: rem(282);
     height: 100%;
     flex-direction: column;
@@ -247,7 +247,7 @@ dialog[open] {
       text-indent: 0;
       text-align: left;
       padding-left: 2rem;
-      font-size: rem(18);
+      font-size: 1.125rem; /* 18/16 */
       outline-width: 1px;
     }
   }

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

@@ -32,7 +32,7 @@
       display: none;
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
 
 
       .btn--wrapper {
@@ -47,7 +47,7 @@
       }
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
 
       form {
         display: flex;

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

@@ -1,6 +1,6 @@
 @use '../_func.scss' as *;
 
-$darkMode: 'true' !default;
+
 
 *,
 *:before,
@@ -20,7 +20,7 @@ $darkMode: 'true' !default;
   min-height: 100%;
   padding-left: var(--dialog-padding);
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     padding-top: var(--dialog-padding);
     padding-left: calc(var(--dialog-padding) + #{rem(282)}) !important;
     display: flex;
@@ -64,9 +64,9 @@ $darkMode: 'true' !default;
     background: transparent;
     border: none;
     color: rgba($color: #ffffff, $alpha: 0.5);
-    height: rem(24);
-    line-height: rem(24);
-    width: rem(24);
+    height: 1.5rem;
+    line-height: 1.5rem;
+    width: 1.5rem;
     text-indent: 300%;
     overflow: hidden;
     z-index: 2;
@@ -82,9 +82,9 @@ $darkMode: 'true' !default;
       content: counter(section);
 
       border: 1px solid currentColor;
-      height: rem(24);
-      line-height: rem(24);
-      width: rem(24);
+      height: 1.5rem;
+      line-height: 1.5rem;
+      width: 1.5rem;
       text-align: center;
       display: inline-block;
       text-indent: 0;
@@ -120,7 +120,7 @@ $darkMode: 'true' !default;
     }
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     width: rem(282);
     height: 100%;
     flex-direction: column;
@@ -136,7 +136,7 @@ $darkMode: 'true' !default;
       text-indent: 0;
       text-align: left;
       padding-left: 2rem;
-      font-size: rem(18);
+      font-size: 1.125rem; /* 18/16 */
       outline-width: 1px;
     }
   }

package/assets/sass/components/multiselect.preload.scss

@@ -1,12 +1,12 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+
+
+
+@layer components {
   iam-multiselect .tag[slot='checked'] {
-    margin-bottom: rem(8);
+    margin-bottom: 0.5rem;
     order: var(--order, 1);
     margin-inline: rem(3);
   }

package/assets/sass/components/multiselect.scss

@@ -6,13 +6,8 @@
 @use '../elements/buttons.scss' as *;
 @use '../elements/buttons--action.scss' as *;
 
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-@include visually-hidden();
-@include display();
+@use '../utilities/visually-hidden' as *;
+@use '../utilities/display' as *;
 
 *,
 *::before,
@@ -22,7 +17,7 @@
 
 :host {
 
-  margin-bottom: rem(24);
+  margin-bottom: 1.5rem;
 }
 
 .outer {
@@ -54,7 +49,7 @@ label {
   }
 
   input {
-    margin-bottom: rem(8);
+    margin-bottom: 0.5rem;
   }
 
   .feedback {
@@ -86,13 +81,13 @@ label {
   flex-wrap: wrap;
   align-items: flex-start;
   min-height: calc(0.75rem + 0.75rem + 1.25rem + 4px);
-  padding: #{rem(8)} #{rem(32)} #{rem(0)} #{rem(13)};
-  font-size: var(--input-fs, #{rem(16)});
-  line-height: var(--input-lh, #{rem(20)});
+  padding: 0.5rem 2rem 0 #{rem(13)};
+  font-size: var(--input-fs, 1rem);
+  line-height: var(--input-lh, 1.25rem);
   color: var(--colour-body);
   background-color: var(--colour-canvas-2);
   border: 2px solid var(--colour-primary);
-  border-radius: rem(8);
+  border-radius: 0.5rem;
 
   &:is(:focus-within, .focus-within):not(:disabled) {
     border-color: var(--colour-info);
@@ -102,15 +97,15 @@ label {
 
   input {
     all: unset;
-    font-size: rem(16);
+    font-size: 1rem;
     line-height: rem(26);
     display: var(--search-display,inline-block);
     width: 0;
     flex-grow: 1;
-    padding: 0 rem(8) 0 0 !important;
+    padding: 0 0.5rem 0 0 !important;
     margin-inline: rem(3);
     order: 999;
-    margin-bottom: rem(8);
+    margin-bottom: 0.5rem;
   }
 
   .feedback {

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

@@ -7,26 +7,26 @@
 @use '../elements/forms.scss' as *;
 @use '../elements/buttons.scss' as *;
 
-@use '../elements/brand.scss' as *;
+@use '../elements/brand.css';
 
 @use '../elements/dialog.scss' as *;
 @use '../elements/modal.scss' as *;
 @use '../elements/container.scss' as *;
 
 
-@include colours();
-@include margins();
-@include paddings();
-@include sizes();
-@include display();
+@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 *;
 
 *, *::before, *::after {
     box-sizing: border-box;
 }
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
+
+
+
 
 :host {
   display: flex !important;
@@ -52,28 +52,28 @@ $darkMode: 'true' !default;
 
 .btn-menu {
   padding: 0;
-  margin: 0 0 0 rem(32);
+  margin: 0 0 0 2rem;
   text-align: center;
-  height: rem(48);
-  padding-block: rem(12);
-  line-height: rem(24);
+  height: 3rem;
+  padding-block: 0.75rem;
+  line-height: 1.5rem;
   overflow: hidden;
   position: relative;
   background: none;
   border: none;
-  width: rem(24);
+  width: 1.5rem;
   text-indent: -1000%;
   color: var(--menu-btn-colour);
 
   i {
-    font-size: rem(24);
-    line-height: rem(24);
+    font-size: 1.5rem;
+    line-height: 1.5rem;
     position: absolute;
     text-indent: 0px;
 
-    width: rem(24);
+    width: 1.5rem;
     text-align: center;
-    top: rem(12);
+    top: 0.75rem;
     right: 0;
     margin: 0 !important;
     transition: none !important;
@@ -108,8 +108,8 @@ $darkMode: 'true' !default;
     }
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    margin: 0 0 0 rem(48);
+  @media screen and (min-width: 36em) {
+    margin: 0 0 0 3rem;
     width: auto;
     padding-right: rem(24 + 6);
     text-indent: 0;
@@ -119,7 +119,7 @@ $darkMode: 'true' !default;
     }
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     width: fit-content;
     height: auto;
     margin: 0 0 0 3rem;
@@ -206,7 +206,7 @@ $darkMode: 'true' !default;
     height: calc(100vh - #{rem(96)});
     left: 100%;
     top: 0;
-    padding: 0 rem(24) 0 rem(24);
+    padding: 0 1.5rem 0 1.5rem;
     z-index: var(--index-menu);
     overflow: auto;
     transition: all 1s ease-out;
@@ -275,8 +275,8 @@ $darkMode: 'true' !default;
 
   ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
     display: block !important;
-    line-height: rem(20) !important;
-    padding: rem(24) 0 !important;
+    line-height: 1.25rem !important;
+    padding: 1.5rem 0 !important;
     margin: 0 !important;
     flex-shrink: 0;
     font-size: 1rem !important;
@@ -294,17 +294,17 @@ $darkMode: 'true' !default;
 
   *:is(.has-search, .has-actions) .menu__primary {
     display: block;
-    padding-bottom: rem(48);
+    padding-bottom: 3rem;
   }
 
   .menu:not(.has-secondary) .menu__primary {
     display: block;
-    padding-bottom: rem(48);
+    padding-bottom: 3rem;
   }
 
   ::slotted(.btn:not(.btn-compact):not(.btn-primary)) {
     display: block !important;
-    margin: 0 0 rem(24) 0 !important;
+    margin: 0 0 1.5rem 0 !important;
     width: 100% !important;
     max-width: 100% !important;
     text-align: center !important;
@@ -313,7 +313,7 @@ $darkMode: 'true' !default;
 
   .has-actions slot[name='actions'] {
     display: block;
-    padding-bottom: rem(24);
+    padding-bottom: 1.5rem;
   }
 
   slot[name='actions']::slotted(.btn) {
@@ -323,7 +323,7 @@ $darkMode: 'true' !default;
   // Search
   .dialog__wrapper {
     width: 100%;
-    margin: 0 0 rem(48) 0 !important;
+    margin: 0 0 3rem 0 !important;
     flex-shrink: 0;
 
     > .btn {
@@ -342,12 +342,12 @@ $darkMode: 'true' !default;
 // #region tablet tweaks
 @media screen and (max-width: 62em) and (min-width: 36em) {
   .menu {
-    padding-right: rem(40) !important;
+    padding-right: 2.5rem !important;
   }
 
   .has-secondary .menu__secondary {
     margin-right: rem(-40) !important;
-    padding-right: rem(40) !important;
+    padding-right: 2.5rem !important;
 
     &:before {
       width: calc(100% - 4rem) !important;
@@ -360,14 +360,14 @@ $darkMode: 'true' !default;
 // #endregion
 
 // #region desktop
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   :host {
     //max-width: 100%!important;
     padding-block: 0 !important;
   }
 
   :host > .container {
-    padding-block: rem(24) !important;
+    padding-block: 1.5rem !important;
     padding-inline: 0 !important;
     max-width: 100%;
     display: flex;
@@ -418,8 +418,8 @@ $darkMode: 'true' !default;
       margin-left: auto;
       margin-right: auto;
       padding: var(--container-padding) !important;
-      padding-top: rem(8) !important;
-      padding-bottom: rem(8) !important;
+      padding-top: 0.5rem !important;
+      padding-bottom: 0.5rem !important;
       text-align: right;
     }
   }
@@ -439,7 +439,7 @@ $darkMode: 'true' !default;
   }
 
   ::slotted(a:not([slot='logo']):not(.btn-compact):not(.btn-primary)) {
-    font-size: rem(16) !important;
+    font-size: 1rem !important;
     font-weight: normal !important;
 
     &:after {
@@ -448,21 +448,21 @@ $darkMode: 'true' !default;
   }
 
   ::slotted(a:not([slot='logo']):not([slot='dual'])) {
-    margin-left: rem(32) !important;
+    margin-left: 2rem !important;
   }
 
   ::slotted(.btn-primary) {
-    margin-left: rem(48) !important;
+    margin-left: 3rem !important;
   }
 
   .has-actions slot[name='actions'] {
     display: block;
-    padding-left: rem(48);
+    padding-left: 3rem;
   }
 
   // Search bar
   slot[name='actions']::slotted(.btn) {
-    margin-left: rem(12) !important;
+    margin-left: 0.75rem !important;
   }
 
   :host([data-search]) slot[name='actions'] {
@@ -470,7 +470,7 @@ $darkMode: 'true' !default;
   }
 
   #search-wrapper {
-    margin-left: rem(24) !important;
+    margin-left: 1.5rem !important;
     position: static;
   }
 
@@ -485,7 +485,7 @@ $darkMode: 'true' !default;
     bottom: 0;
     left: 0;
     width: 100%;
-    padding-block: rem(24);
+    padding-block: 1.5rem;
     padding-inline: 0;
     background-color: transparent;
 
@@ -557,7 +557,7 @@ $darkMode: 'true' !default;
   height: calc(100vh - #{rem(96)});
   left: 100%;
   top: 0;
-  padding: 0 rem(24) 0 rem(24);
+  padding: 0 1.5rem 0 1.5rem;
   z-index: var(--index-menu);
   overflow: auto;
   transition: all 1s ease-out;
@@ -582,29 +582,29 @@ $darkMode: 'true' !default;
     width: calc(100% + 3rem);
     border-top: 2px solid var(--colour-border);
     z-index: 1;
-    padding: rem(24) 1.5rem;
+    padding: 1.5rem 1.5rem;
     margin: 0 -1.5rem;
-    font-family: $headings-font-family;
-    font-style: $headings-font-style;
-    font-weight: $headings-font-weight;
-    color: $headings-color;
+    font-family: var(--font-heading);
+    font-style: normal;
+    font-weight: var(--heading-weight);
+    color: var(--colour-heading);
     clear: both;
-    font-size: map.get($heading-sizes, 'h3_fs');
-    line-height: map.get($heading-sizes, 'h3_lh');
+    font-size: var(--h3-fs);
+    line-height: var(--heading-lh);
     max-width: var(--content-max-width);
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
+    @media screen and (min-width: 36em) {
       margin-right: -2.5rem;
       padding-right: 2.5rem;
       width: calc(100% + 4rem);
     }
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     padding-right: 2.5rem !important;
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     height: calc(100vh - var(--nav-height));
     top: calc(var(--nav-height) + 4px);
   }
@@ -644,7 +644,7 @@ slot[name='menus'] {
 // #endregion
 
 // #region compressed nav
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   :host(.nav--md-compressed) .buttons-holder button {
     margin-left: 1.5rem !important;
   }
@@ -706,7 +706,7 @@ slot[name='menus'] {
   }
 }
 
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   :host(.nav--dual-buttons) {
     slot[name='dual'] {
       display: flex;

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

@@ -13,7 +13,7 @@
   }
 
   .btn-menu {
-    width: rem(24) !important;
+    width: 1.5rem !important;
     text-indent: -300px !important;
     padding-right: 0 !important;
 
@@ -48,7 +48,7 @@
   }
 }
 
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   :host {
     position: relative;
   }