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

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

@@ -36,19 +36,19 @@
 }
 
 
-// #region Fix colours 
+/* #region Fix colours  */
 
 :host(.bg-primary) .container {
 
-  //color-scheme: dark;
+  /* color-scheme: dark; */
 
   .menu {
     
-    //color-scheme: light;
+    /* color-scheme: light; */
   }
 }
 
-// #endregion
+/* #endregion */
 
 .btn-menu {
   padding: 0;
@@ -162,7 +162,7 @@
   }
 }
 
-// #region mobile and tablet menu
+/* #region mobile and tablet menu */
 @media screen and (max-width: 62em) {
   :host > .container {
     display: contents;
@@ -221,7 +221,7 @@
     }
 
 
-    // The menu is always white unless in dark mode
+    /*  The menu is always white unless in dark mode */
     
       background-color: var(--colour-canvas-2);
       
@@ -320,7 +320,7 @@
     margin-top: 0 !important;
   }
 
-  // Search
+  /*  Search */
   .dialog__wrapper {
     width: 100%;
     margin: 0 0 3rem 0 !important;
@@ -337,9 +337,9 @@
     display: contents;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region tablet tweaks
+/* #region tablet tweaks */
 @media screen and (max-width: 62em) and (min-width: 36em) {
   .menu {
     padding-right: 2.5rem !important;
@@ -357,12 +357,12 @@
     width: auto !important;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region desktop
+/* #region desktop */
 @media screen and (min-width: 62em) {
   :host {
-    //max-width: 100%!important;
+    /* max-width: 100%!important; */
     padding-block: 0 !important;
   }
 
@@ -460,7 +460,7 @@
     padding-left: 3rem;
   }
 
-  // Search bar
+  /*  Search bar */
   slot[name='actions']::slotted(.btn) {
     margin-left: 0.75rem !important;
   }
@@ -525,7 +525,7 @@
     }
   }
 
-  // backdrop
+  /*  backdrop */
   .backdrop {
     content: '';
     display: block;
@@ -545,9 +545,9 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Menus
+/* #region Menus */
 ::slotted(.nav--menu) {
   pointer-events: all;
   overscroll-behavior: contain;
@@ -570,7 +570,7 @@
   }
 
 
-  // The menu is always white unless in dark mode
+  /*  The menu is always white unless in dark mode */
 
 
   @media (forced-colors: active) {
@@ -641,9 +641,9 @@ slot[name='menus'] {
     backdrop-filter: blur(2px);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region compressed nav
+/* #region compressed nav */
 @media screen and (min-width: 62em) {
   :host(.nav--md-compressed) .buttons-holder button {
     margin-left: 1.5rem !important;
@@ -662,9 +662,9 @@ slot[name='menus'] {
     margin-left: 1.5rem !important;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Compact button
+/* #region Compact button */
 @media screen and (min-width: 62em) {
   :host(.nav--btn-compact:not(.nav--large)) {
     .btn-menu .btn {
@@ -694,9 +694,9 @@ slot[name='menus'] {
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Dual with buttons
+/* #region Dual with buttons */
 @media screen and (max-width: 62em) {
   :host(.nav--dual-buttons) {
     slot[name='dual'] {
@@ -715,4 +715,4 @@ slot[name='menus'] {
     }
   }
 }
-// #endregion
+/* #endregion */

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

@@ -30,7 +30,7 @@
     display: contents;
   }
   .menu {
-    //position: relative;
+    /* position: relative; */
     position: absolute;
     --scrollbar-width: 17px;
     top: 6rem; /* 96 */
@@ -38,7 +38,7 @@
     right: 0;
     -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
     box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
-    //height: auto;
+    /* height: auto; */
     width: 100%;
     max-width: calc(23.4375rem - var(--scrollbar-width));
     transition: none;

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

@@ -3,7 +3,7 @@
 
 
 
-// Default colour 
+/*  Default colour  */
 iam-nav {
 
   > :not([slot="logo"],[slot="secondary"]) {
@@ -109,7 +109,7 @@ body {
   }
 }
 
-// #region Create the correct padding top of the page
+/* #region Create the correct padding top of the page */
 nav:has(iam-nav) {
   min-height: 6rem; /* 96 */
   display: block;
@@ -178,14 +178,14 @@ nav:has(iam-nav.nav--sticky) {
 }
 
 body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
-  //transform: translate(0, -100%);
+  /* transform: translate(0, -100%); */
 
   margin-top: -8rem;
 }
 
-// #endregion
+/* #endregion */
 
-// #region General styles
+/* #region General styles */
 iam-nav {
   --nav-height: 6rem; /* 96 */
 
@@ -285,9 +285,9 @@ iam-nav details {
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region mobile and tablet mega menu
+/* #region mobile and tablet mega menu */
 iam-nav details {
   @container style(--mobDetails) {
 
@@ -358,7 +358,7 @@ iam-nav details {
       }
     }
 
-    // Hide cards
+    /*  Hide cards */
     a:has(iam-card) {
       display: none !important;
     }
@@ -393,7 +393,7 @@ iam-nav details {
   iam-nav {
     --mobDetails: 'true';
 
-    // Sub details
+    /*  Sub details */
     details details {
       &:after {
         display: none;
@@ -436,9 +436,9 @@ iam-nav details {
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region tablet mega menu tweaks
+/* #region tablet mega menu tweaks */
 iam-nav details {
 
   @container style(--tabletDetails) {
@@ -478,9 +478,9 @@ iam-nav details {
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region Desktop mega menu
+/* #region Desktop mega menu */
 @media screen and (min-width: 62em) {
   iam-nav > details,
   iam-nav *:not(.nav--menu) > details {
@@ -696,9 +696,9 @@ iam-nav details {
   }
 }
 
-// 4 columns on large screens
+/*  4 columns on large screens */
 @media screen and (min-width: 80em) {
-  // 1280
+  /*  1280 */
   iam-nav.nav--large *:not(.nav--menu) > details {
     &[open] > div:not(:has(details)) {
       columns: 4;
@@ -707,9 +707,9 @@ iam-nav details {
   }
 }
 
-// #endregion
+/* #endregion */
 
-// #region Search
+/* #region Search */
 @media screen and (min-width: 62em) {
   iam-nav {
     &.search-open {
@@ -719,9 +719,9 @@ iam-nav details {
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Dual navbar in desktop
+/* #region Dual navbar in desktop */
 @media screen and (min-width: 62em) {
   iam-nav:has([slot='dual']) {
     .brand:has(~ [slot='dual']) {
@@ -741,9 +741,9 @@ iam-nav details {
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region compact menus on mobile
+/* #region compact menus on mobile */
 iam-nav > .dialog__wrapper {
   .dialog--list {
     a {
@@ -805,9 +805,9 @@ iam-nav > .dialog__wrapper {
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region navbar additional menus
+/* #region navbar additional menus */
 
 iam-nav .nav--menu {
   outline: none !important;
@@ -867,4 +867,4 @@ iam-nav .nav--menu {
 }
 
 
-// #endregion
+/* #endregion */

package/assets/sass/components/notification.scss

@@ -1,5 +1,7 @@
 @use '../_func' as *;
 
+@use '../elements/buttons--global';
+@use '../elements/buttons--compact';
 
 
 :host,
@@ -63,7 +65,7 @@
   color: var(--colour-white);
 }
 
-// Alerts
+/*  Alerts */
 :host([data-type='alert']),
 .iam-notification[data-type='alert'] {
   border-radius: 0;
@@ -75,7 +77,7 @@
   margin-bottom: 0;
 }
 
-// Toasts
+/*  Toasts */
 :host([data-type='toast']),
 .iam-notification[data-type='toast'] {
   margin: auto;
@@ -160,34 +162,19 @@
     padding-left: 1rem;
 
     button {
-      text-indent: 300%;
-      overflow: hidden;
-      border: none;
-      height: 1.125rem; /* 18/16 */
-      width: 1.125rem; /* 18/16 */
-      background: transparent;
       display: inline-block;
       position: relative;
-      color: inherit;
-
-      &:after {
-        content: '';
-        top: 0;
-        left: 0;
-        position: absolute;
-        display: block;
-        height: 1.125rem; /* 18/16 */
-        width: 1.125rem; /* 18/16 */
-        z-index: var(--index-focus);
-        background: currentColor;
-        mask-image: var(--icon-close);
-        mask-size: 100%;
-        mask-repeat: no-repeat;
-        mask-position: 50% 50%;
-        -webkit-mask-image: var(--icon-close);
-        -webkit-mask-size: 100%;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-position: 50% 50%;
+      margin: 0;
+      color: currentColor;
+
+      &:hover {
+        
+        color: var(--colour-primary-theme);
+      }
+
+      &:before {
+        font-weight: lighter;
+        font-size: 1.5rem;
       }
     }
 
@@ -199,20 +186,20 @@
   }
 }
 
-// #region no icon
+/* #region no icon */
 :host(.notification--no-icon) {
   .notification__icon {
     display: none;
   }
 }
-// #endregion
+/* #endregion */
 
 
-// #region no background
+/* #region no background */
 :host(.notification--no-bg){
   box-shadow: none;
   background: none!important;
   padding: 0;
   border: 0 !important;
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/pagination.scss

@@ -34,7 +34,7 @@
   }
 }
 
-// #region page jump and per page
+/* #region page jump and per page */
 .pagination div:is(.page-jump, .per-page) {
   border: 1px solid var(--colour-light);
   height: 3.25rem; /* (52); */
@@ -94,9 +94,9 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Item count
+/* #region Item count */
 .pagination > .item-count {
   display: block;
   text-align: center;
@@ -116,9 +116,9 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region buttons
+/* #region buttons */
 *:where(.prev, .next) {
   border: 1px solid var(--colour-light);
   line-height: 3.25rem; /* (52); */
@@ -185,9 +185,9 @@
     color: var(--colour-info);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region mobile button
+/* #region mobile button */
 .mobile-controls {
   display: block;
 }
@@ -234,4 +234,4 @@
     margin: auto;
   }
 }
-// #endregion
+/* #endregion */

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

@@ -23,7 +23,7 @@
   border-end-end-radius: 0!important;
 }
 
-// Password checker
+/*  Password checker */
 .invalid-feedback {
   color: var(--colour-danger);
   margin-top: 0.5rem;
@@ -32,7 +32,7 @@
   background-position: left top 1px;
   background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
   padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
-  //display: none;
+  /* display: none; */
 }
 
 .pwd-checker {
@@ -53,4 +53,4 @@
 label:has(.pwd-checker.invalid-feedback):after {
   display: none !important;
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/property-searchbar.scss

@@ -1,6 +1,6 @@
 @use '../_func' as *;
 
-// #region Property searchbar
+/* #region Property searchbar */
 .property-searchbar {
   fieldset {
     position: relative;
@@ -95,9 +95,9 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Heror searchbar
+/* #region Heror searchbar */
 .property-searchbar--hero .property-searchbar {
 
 
@@ -120,7 +120,7 @@
 
     .form-control,
     .form-select {
-      margin-left: -0.5rem; // Add a negative margin too keep text inline but also allow for a padding left so that the focus state looks presentable
+      margin-left: -0.5rem; /*  Add a negative margin too keep text inline but also allow for a padding left so that the focus state looks presentable */
       border: none;
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
@@ -136,4 +136,4 @@
     }
   }
 }
-// #endregion
+/* #endregion */

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

@@ -78,7 +78,7 @@
   height: 5.25rem; /* 84 */
   position: relative;
   border-radius: 0 0 4px 4px;
-  //overflow: hidden;
+  /* overflow: hidden; */
 
   &:before {
     content: '1';

package/assets/sass/components/slider.scss

@@ -22,7 +22,7 @@
   display: block;
 }
 
-// Track
+/*  Track */
 input[type='range']::-webkit-slider-runnable-track {
   background: linear-gradient(
     to right,
@@ -45,7 +45,7 @@ input[type='range']::-moz-range-track {
   );
 }
 
-// Two input fields
+/*  Two input fields */
 input[type='range'] + input[type='range'] {
   position: absolute;
   top: 0;

package/assets/sass/components/split-button.component.scss

@@ -3,7 +3,7 @@
 
 @use '../components/menu.global';
 
-// Main button
+/*  Main button */
 ::slotted(button:not([slot])) {
   float: left;
   margin-right: 0 !important;
@@ -13,7 +13,7 @@
   padding-right: 1rem !important;
 }
 
-// Secondary buttons
+/*  Secondary buttons */
 ::slotted(button[slot]) {
   background: none !important;
   display: block !important;
@@ -21,7 +21,7 @@
   border: none !important;
 }
 
-// Drop down button
+/*  Drop down button */
 .split-button {
   position: relative;
 
@@ -57,7 +57,7 @@
   }
 }
 
-// Secondary button
+/*  Secondary button */
 .btn-secondary:not([disabled]) {
   &:hover,
   &:active,

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

@@ -4,7 +4,7 @@
 
 
 
-// #region Table container - Add via JS if needed, provides a safe space to scroll
+/* #region Table container - Add via JS if needed, provides a safe space to scroll */
 :host {
   container-type: inline-size;
   display: block;
@@ -55,11 +55,11 @@
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+  -ms-overflow-style: -ms-autohiding-scrollbar; /*  See https://github.com/twbs/bootstrap/pull/10057 */
 }
-// #endregion
+/* #endregion */
 
-// #region Tables are only stacked on mobile
+/* #region Tables are only stacked on mobile */
 @container (width < 23.4375em) {
   :host(:not(.table--fullwidth)) .table__container {
     margin-left: -1.5rem;
@@ -98,9 +98,9 @@
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region CTA column
+/* #region CTA column */
 @container (width > 23.4375em) {
   :host {
     --cta-width: 8rem;
@@ -119,9 +119,9 @@
     margin-bottom: 0;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Max height tables
+/* #region Max height tables */
 .table__wrapper:is(.mh-sm, .mh-md, .mh-lg) {
   position: relative;
   overflow: auto;