@iamproperty/components 6.1.0--beta → 6.1.0--beta3

package/assets/sass/elements/modal.scss

@@ -195,7 +195,6 @@ dialog::backdrop {
     }
 
     > i:before {
-      content: "\f2ed";
       position: absolute;
       top: 0;
       left: 50%;
@@ -233,32 +232,72 @@ dialog::backdrop {
 }
 // #endregion
 
-// #region Multi 
-.js-enabled *:not(.dialog__wrapper) > dialog[open].dialog--multi {
-
+// #region youTube video
+*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed){
 
-  padding-top: calc(var(--dialog-padding) * 4);
+  display: block;
 
-  & > form:first-child button, & > button:first-child {
-    top: calc(var(--dialog-padding) * 4);
+  .mh-lg, .mh-lg:before {
+    display: contents;
   }
 
-  @supports selector(:has(*)) {
-  fieldset:not(.active) {
-    display: none;
+  @include media-breakpoint-up(sm) {
+    
+    min-width: rem(686);
+    max-width: rem(686);
   }
+  
+  @include media-breakpoint-up(md) {
+    
+    min-width: rem(736);
+    max-width: rem(736);
   }
-  &:not(:has(fieldset.active)) fieldset:first-of-type{
-    display: flex;
-    flex-direction: column;
+}
+// #endregion
+
+
+// #region admin panel dialog
+dialog:has(> .admin-panel) {
+
+  .dialog__close {
+    margin-top: -0.8rem;
   }
+}
+dialog > .admin-panel {
+  margin: -1rem calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1)!important;
+  padding-top: 0;
 
-  form > *:not(fieldset) {
-    display: none!important;
+  &:last-child {
+    
+    margin-bottom: calc(var(--dialog-padding) * -1);
   }
+}
 
-  form {
-    max-height: rem(370);
+// #endregion
+
+
+dialog:has(.embed){
+
+  width: calc(100% - 6rem) !important;
+  max-width: 50rem !important;
+  padding: 0;
+  aspect-ratio: 16 / 9;
+
+  .embed {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+  }
+}
+
+
+// #region Multi step modal
+
+*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open]{
+
+  padding: 0;
+
+  & > button:first-child {
+    top: calc(var(--dialog-padding) * 4)!important;
   }
 
   :is(.h1,.h2,.h3,.h4,.h5,.h6){
@@ -266,240 +305,134 @@ dialog::backdrop {
     padding-bottom: var(--dialog-padding);
   }
 
-  .steps {
-    width: 100%;
-    position: absolute;
-    top:0;
-    left: 0;
-    padding: var(--dialog-padding);
-    counter-reset: section;
-    display: flex;
-    justify-content: space-between;
-
-    &:before {   
- 
-      content: "";
-      position: absolute;
-      top: calc(50% - 1px);
-      left: var(--dialog-padding);
-      z-index: 2;
-      width: calc(100% - var(--dialog-padding) - var(--dialog-padding));
-      height: 2px;
-      background: currentColor;
-      z-index: 1;
-      background: linear-gradient(90deg, var(--colour-success) 0%, var(--colour-success) var(--progress, 0%), rgba(255,255,255,0.5) var(--progress, 0%), rgba(255,255,255,0.5) 100%);
-    }
-
-    button {
 
-      position: relative;
-      background: transparent;
-      border: none;
-      color: rgba($color: #ffffff, $alpha: 0.5);
-      height: rem(24);
-      line-height: rem(24);
-      width: rem(24);
-      text-indent: 300%;
-      overflow: hidden;
-      z-index: 2;
-      background-color: var(--colour-primary);
-      outline: 0.5rem solid var(--colour-primary);
-
-      &:before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        counter-increment: section;
-        content: counter(section);
-
-        border: 1px solid currentColor;
-        height: rem(24);
-        line-height: rem(24);
-        width: rem(24);
-        text-align: center;
-        display: inline-block;
-        text-indent: 0;
-        border-radius: 50%;
-      }
+  iam-multi-step {
+    padding-inline: 0!important;
+  }
 
-      &:not(.active):not(.valid) {
-        
-        pointer-events: none;
+  form {
+    overflow: auto;
+    padding-bottom: var(--dialog-padding);
+  
+    max-height: calc(min(90vh, 47rem) - 6rem);
+  }
 
-        &:before {
-          opacity: 0.5;
-        }
-      }
+  fieldset {    
 
-      &.active {
-        color: var(--colour-white);
-      }
-      &.valid {
-        color: var(--colour-success);
-      }
+    > :last-child {
+      margin-bottom: var(--dialog-padding)!important;
     }
 
-    @include dark-mode() {
-
-      button {
-        
-        color: rgba($color: #000000, $alpha: 0.5);
-
-        &.active {
-          color: black;
-        }
-        &.valid {
-          color: var(--colour-complete);
-        }
-      }
+    > p:last-child {
+      padding-bottom: 0!important;
+      margin-bottom: var(--dialog-padding)!important;
     }
   }
 
+  fieldset:not(.active) {
+    display: none;
+  }
+
   @include media-breakpoint-up(sm) {
     min-width: rem(452);
     width: rem(452);
     max-width: rem(452);
+
+    
+    & > button:first-child {
+      top: calc(var(--dialog-padding) * 3.25)!important;
+    }
+
+    .btn--wrapper {
+      margin-top: auto;
+      text-align: right;
+    }
+
+    form {
+      height: calc(100vh - 6rem);
+      padding-left: 0!important;
+      padding-right: var(--dialog-padding)!important;
+    }
   }
+
+
   @include media-breakpoint-up(md) {
     min-width: rem(924);
     width: rem(924);
     max-width: rem(924);
-    padding-top: var(--dialog-padding);
-    padding-left: calc(var(--dialog-padding) + #{rem(282)});
-    display: flex; 
-    flex-direction: column;
-    //height: rem(478);
+
+    & > button:first-child {
+      top: calc(var(--dialog-padding) * 1)!important;
+    }
 
     @media (min-height: #{rem(500)}) {
       height: rem(478);
       max-height: rem(478);
     }
 
-
-    & > form:first-child button, & > button:first-child {
-      top: var(--dialog-padding);
-    }
-
-    .steps {
-      width: rem(282);
-      height: 100%;
+    form {
+      display: flex;
       flex-direction: column;
-      justify-content: center;
-
-      &:before {
-        display: none;
-      }
-
-      button {
-        margin-block: 0.5rem;
-        width: 100%;
-        text-indent: 0;
-        text-align: left;
-        padding-left: 2rem;
-        font-size: rem(18);
-        outline-width: 1px;
-      }
     }
 
-    .btn--wrapper {
-      margin-top: auto;
-      text-align: right;
-    }
-    
-    
-    @supports not selector(:has(*)) {
-      > form {
-        overflow: auto;
-
-        button:not([type="submit"]){
-          display: none;
-        }
-      }
-    }
-    @supports selector(:has(*)) {
-      > form {
-        display: contents
-      }
-      fieldset {    
-        display: flex; 
-        flex-direction: column;
-        flex-grow: 1;
-        position: relative;
-
-        overflow: auto;
-        margin-bottom: calc(var(--dialog-padding) * -1);
-        padding-right: calc(var(--dialog-padding) - 10px);
-        margin-right: calc((var(--dialog-padding) * -1) + 10px);
-
-        > :last-child {
-          margin-bottom: var(--dialog-padding)!important;
-        }
-
-        > p:last-child {
-          padding-bottom: 0!important;
-          margin-bottom: var(--dialog-padding)!important;
-        }
-
-        &::before {
-          content: "";
-          top: 100%;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: var(--dialog-padding);
-          min-height: var(--dialog-padding);
-          position: sticky;
-          display: block;
-          background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
-          z-index: 2;
-          margin-bottom: calc(var(--dialog-padding) * -1);;
-        }
+    fieldset {    
+      display: flex; 
+      flex-direction: column;
+      flex-grow: 1;
+      position: relative;
+  
+      overflow: auto;
+      margin-bottom: calc(var(--dialog-padding) * -1);
+      padding-right: calc(var(--dialog-padding) - 10px);
+      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+  
+      max-height: rem(370);
+  
+      &::before {
+        content: "";
+        top: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--dialog-padding);
+        min-height: var(--dialog-padding);
+        position: sticky;
+        display: block;
+        background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+        z-index: 2;
+        margin-bottom: calc(var(--dialog-padding) * -1);;
       }
     }
   }
 }
-// #endregion
-
-// #region youTube video
-*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed){
-
-  display: block;
 
-  .mh-lg, .mh-lg:before {
-    display: contents;
-  }
-
-  @include media-breakpoint-up(sm) {
-    
-    min-width: rem(686);
-    max-width: rem(686);
-  }
-  
-  @include media-breakpoint-up(md) {
-    
-    min-width: rem(736);
-    max-width: rem(736);
-  }
-}
 // #endregion
 
-// #region mobile fullwidth view 
+// #region mobile fullwidth view For multi step modal
 @media screen and (max-width: 36em) {
 
-  dialog[open].dialog--sm-fullpage,
-  .js-enabled *:not(.dialog__wrapper) > dialog[open].dialog--multi {
+  dialog[open]:has(iam-multi-step) {
 
     min-width: 100%;
     min-height: 100%;
     border-radius: 0;
     overflow-y: auto;
 
+    iam-multi-step {
+      padding-inline: 0!important;
+    }
+
+    form {
+      height: calc(100vh - 6rem);
+      padding-inline: var(--dialog-padding)!important;
+    }
+
     .btn--wrapper {
       padding-top: rem(64);
     }
   }
 
-  dialog[open].dialog--sm-fullpage {
+  dialog[open]:has(iam-multi-step) {
     
     .mh-lg {
       max-height: none!important;
@@ -517,37 +450,4 @@ dialog::backdrop {
     }
   }
 }
-// #endregion
-
-// #region admin panel dialog
-dialog:has(> .admin-panel) {
-
-  .dialog__close {
-    margin-top: -0.8rem;
-  }
-}
-dialog > .admin-panel {
-  margin: -1rem calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1)!important;
-  padding-top: 0;
-
-  &:last-child {
-    
-    margin-bottom: calc(var(--dialog-padding) * -1);
-  }
-}
-
-// #endregion
-
-
-dialog:has(.embed){
-
-  width: calc(100% - 6rem) !important;
-  max-width: 50rem !important;
-  padding: 0;
-  aspect-ratio: 16 / 9;
-
-  .embed {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-  }
-}
+// #endregion

package/assets/sass/elements/table.element.scss

@@ -1,5 +1,40 @@
 @use "../_func.scss" as *;
 
+// #region reset
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: $table-cell-padding-y;
+  padding-bottom: $table-cell-padding-y;
+  color: $table-caption-color;
+  text-align: left;
+}
+
+// 1. Removes font-weight bold by inheriting
+// 2. Matches default `<td>` alignment by inheriting `text-align`.
+// 3. Fix alignment for Safari
+
+th {
+  font-weight: $table-th-font-weight; // 1
+  text-align: inherit; // 2
+  text-align: -webkit-match-parent; // 3
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+// #endregion
+
 // #region Default table
 table {
   --border-width: 2px;

package/assets/sass/elements/type.scss

@@ -7,9 +7,11 @@ mark {
   background-color: $mark-bg;
 }
 
-@import "../../bootstrap/scss/_type.scss";
+//@import "../../bootstrap/scss/_type.scss";
 
 // #region headings
+
+
 %heading {
   --line-height: #{$headings-line-height};
   // From bootstrap reboot
@@ -97,6 +99,7 @@ mark {
 // #endregion
 
 p {
+  margin-top: 0;
   font-size: rem(map-get($heading-sizes,"body_fs"));
   line-height: rem(map-get($heading-sizes,"body_lh"));
   padding-bottom: rem(map-get($heading-sizes,"body_end_pb"));
@@ -108,7 +111,7 @@ p:has(+ p) {
   padding-bottom: rem(map-get($heading-sizes,"body_pb"));
 }
 
-@include is('.lead, .strapline'){
+:is(.lead, .strapline){
   font-size: rem(map-get($heading-sizes,"lead_fs"));
   line-height: rem(map-get($heading-sizes,"lead_lh"));
   padding-bottom: rem(map-get($heading-sizes,"lead_pb"));
@@ -126,8 +129,41 @@ small,
   font-weight: normal;
 }
 
+
+sub,
+sup {
+  position: relative;
+  font-size: .75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+
+abbr[title] {
+  text-decoration: underline dotted; // 1
+  cursor: help; // 2
+  text-decoration-skip-ink: none; // 3
+}
+
+
+// Address
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+
+blockquote {
+}
+
 blockquote {
 
+  margin: 0;
   quotes: "“" "”" "‘" "’";
   padding-bottom: rem(48);
   overflow: hidden;

package/assets/sass/error.scss

@@ -2,5 +2,36 @@
 
 // Set mobile only variable so that the media query mixin doesn't print out non mobile rules
 @use "_func" as *;
+
+@include layer('reset') {
+
+  html {
+    --font-body: arial, sans-serif!important;
+    --font-heading: arial, sans-serif!important;
+  }
+}
+
 @import "_corefiles";
-@import '../../assets/sass/components/nav.global.scss';
+
+@include layer('elements') {
+.h1 {
+  --line-height: #{rem(map-get($heading-sizes,"h1_lh"))};
+
+  font-size: rem(map-get($heading-sizes,"h1_fs"));
+  padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
+  font-weight: 900;
+
+  @include media-breakpoint-up(sm) {
+
+    font-size: rem(map-get($heading-sizes,"h1_fs_sm"));
+    --line-height: #{rem(map-get($heading-sizes,"h1_lh_sm"))};
+    padding-bottom: rem(map-get($heading-sizes,"h1_pb_sm"));
+  }
+}
+}
+
+@include layer('utilities') {
+  .gradient-primary {
+    background-image: linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, var(--colour-primary-theme) 20%, transparent 100%) !important;
+  }
+}

package/assets/sass/foundations/bs_grid.scss

@@ -0,0 +1,33 @@
+// Row
+//
+// Rows contain your columns.
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row();
+
+    > * {
+      @include make-col-ready();
+    }
+  }
+}
+
+@if $enable-cssgrid {
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$prefix}gap, #{$grid-gutter-width});
+
+    @include make-cssgrid();
+  }
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}