@iamproperty/components 7.7.1--beta5 → 7.7.1--beta7

package/assets/sass/templates/form.scss

@@ -32,7 +32,7 @@
       }
     }
 
-    // Make H2's look like H3's
+    /*  Make H2's look like H3's */
     :is(h2, .h2) {
       font-size: var(--h3-fs);
       max-width: var(--content-max-width);
@@ -57,14 +57,14 @@
 
     @media screen and (min-width: 36em) {
       .form-panel {
-        max-width: calc(100% - 5rem); // Guess
+        max-width: calc(100% - 5rem); /*  Guess */
         margin-inline: auto;
       }
     }
 
     @media screen and (min-width: 62em) {
       .form-panel {
-        max-width: 57.75rem; /* 924 */  // Guess
+        max-width: 57.75rem; /* 924 */  /*  Guess */
         border-radius: 0.5rem;
         padding-inline: 5.875rem;
         padding-block: 2.5rem;

package/assets/sass/utilities/{border.scss → border.css}

@@ -60,10 +60,7 @@
   }
 
   .border-gradient {
-    
-    
     background: linear-gradient(white, white) padding-box, linear-gradient(to right, var(--colour-primary-theme), var(--colour-info)) border-box;
-    //border-radius: 50em;
     border: var(--border-width) solid transparent;
   }
 }

package/assets/sass/utilities/gap.css

@@ -0,0 +1,26 @@
+@layer utilities {
+
+  .gap-0 {
+    gap: var(--spacer-0) !important;
+  }
+
+  .gap-1 {
+    gap: var(--spacer-1) !important;
+  }
+
+  .gap-2 {
+    gap: var(--spacer-2) !important;
+  }
+
+  .gap-3 {
+    gap: var(--spacer-3) !important;
+  }
+
+  .gap-4 {
+    gap: var(--spacer-4) !important;
+  }
+
+  .gap-5 {
+    gap: var(--spacer-5) !important;
+  }
+}

package/assets/sass/utilities/order.css

@@ -0,0 +1,104 @@
+@layer utilities {
+  
+  .order-first {
+    order: -1 !important;
+  }
+
+  .order-0 {
+    order: 0 !important;
+  }
+
+  .order-1 {
+    order: 1 !important;
+  }
+
+  .order-2 {
+    order: 2 !important;
+  }
+
+  .order-3 {
+    order: 3 !important;
+  }
+
+  .order-4 {
+    order: 4 !important;
+  }
+
+  .order-5 {
+    order: 5 !important;
+  }
+
+  .order-last {
+    order: 99 !important;
+  }
+
+  @media screen and (min-width: 36em) {
+
+    .order-sm-first {
+      order: -1 !important;
+    }
+
+    .order-sm-0 {
+      order: 0 !important;
+    }
+
+    .order-sm-1 {
+      order: 1 !important;
+    }
+
+    .order-sm-2 {
+      order: 2 !important;
+    }
+
+    .order-sm-3 {
+      order: 3 !important;
+    }
+
+    .order-sm-4 {
+      order: 4 !important;
+    }
+
+    .order-sm-5 {
+      order: 5 !important;
+    }
+
+    .order-sm-last {
+      order: 99 !important;
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+
+    .order-md-first {
+      order: -1 !important;
+    }
+
+    .order-md-0 {
+      order: 0 !important;
+    }
+
+    .order-md-1 {
+      order: 1 !important;
+    }
+
+    .order-md-2 {
+      order: 2 !important;
+    }
+
+    .order-md-3 {
+      order: 3 !important;
+    }
+
+    .order-md-4 {
+      order: 4 !important;
+    }
+
+    .order-md-5 {
+      order: 5 !important;
+    }
+
+    .order-md-last {
+      order: 99 !important;
+    }
+  }
+}

package/assets/sass/utilities/position.css

@@ -0,0 +1,68 @@
+@layer utilities {
+
+  .position-static {
+    position: static !important;
+  }
+
+  .position-relative {
+    position: relative !important;
+  }
+
+  .position-absolute {
+    position: absolute !important;
+  }
+
+  .position-fixed {
+    position: fixed !important;
+  }
+
+  .position-sticky {
+    position: sticky !important;
+  }
+
+  @media screen and (min-width: 36em) {
+
+    .position-sm-static {
+      position: static !important;
+    }
+
+    .position-sm-relative {
+      position: relative !important;
+    }
+
+    .position-sm-absolute {
+      position: absolute !important;
+    }
+
+    .position-sm-fixed {
+      position: fixed !important;
+    }
+
+    .position-sm-sticky {
+      position: sticky !important;
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+
+    .position-md-static {
+      position: static !important;
+    }
+
+    .position-md-relative {
+      position: relative !important;
+    }
+
+    .position-md-absolute {
+      position: absolute !important;
+    }
+
+    .position-md-fixed {
+      position: fixed !important;
+    }
+
+    .position-md-sticky {
+      position: sticky !important;
+    }
+  }
+}

package/assets/sass/utilities/{shadow.scss → shadow.css}

@@ -1,7 +1,7 @@
-// #region no shadow
+/* #region no shadow */
 @layer utilities {
   .shadow-none {
     box-shadow: none!important;
   }
 }
-// #endregion
+/* #endregion */

package/assets/sass/utilities/{visually-hidden.scss → visually-hidden.css}

@@ -5,7 +5,7 @@
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
-    margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+    margin: -1px !important;
     overflow: hidden !important;
     clip: rect(0, 0, 0, 0) !important;
     white-space: nowrap !important;

package/assets/ts/components/notification/notification.component.ts

@@ -21,6 +21,7 @@ class iamNotification extends HTMLElement {
     ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}
     </style>
 
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     <div class="notification">
       <div class="notification__icon"><slot name="icon"></slot></div>
       <div class="notification__inner"><div class="notification__text"><slot></slot></div><div class="notification__btns"><slot name="btns"></slot></div></div>
@@ -73,7 +74,7 @@ class iamNotification extends HTMLElement {
   }
 
   addDismissBtn = (component):void => {
-    component.shadowRoot.querySelector('.notification__dismiss')?.innerHTML = `<button data-dismiss-button part="dismiss-btn">Dismiss</button>`;
+    component.shadowRoot.querySelector('.notification__dismiss')?.innerHTML = `<button data-dismiss-button part="dismiss-btn" class="btn btn-secondary btn-compact fa-xmark">Dismiss</button>`;
 
     component.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener(
       'click',