@iamproperty/components 7.8.2--beta3 → 7.8.2--beta5

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

@@ -1,37 +1,7 @@
 @use '../_func' as *;
 
-
 @layer components {
-  iam-carousel:defined {
-    > div > *:last-child {
-      margin-bottom: 0 !important;
-      padding-bottom: 0 !important;
-    }
-  }
-
-  /*  Preload */
-  iam-carousel:not(:defined) {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow: auto;
-    margin-block-end: 2rem;
-    overflow: auto;
-
-    & > * {
-      width: 100%;
-      display: block;
-      flex: 0 0 100%;
-      padding-inline-end: 1rem;
-    }
-  }
 
-}
-
-
-
-@layer components {
-
- 
   iam-carousel {
     --button-height: 3rem;
     --marker-height: 1.25rem;
@@ -65,7 +35,7 @@
     grid-column: auto!important;
     min-height: 100%;
     margin: 0;
-    scroll-snap-align: start!important;
+    scroll-snap-align: start;
   }
   /* #endregion */
 
@@ -127,7 +97,8 @@
   /* #endregion */
 
   /* #region left and right buttons on desktop */
-  main > iam-carousel {
+  main > iam-carousel,
+  main > .container > iam-carousel {
     
     @container (min-width: 62em) {
       
@@ -223,37 +194,38 @@
   /* #endregion */
 
   /* #region count the number of items and set variables to hide the controls/markers */
-  iam-carousel:has(> *:not(.carousel__controls):first-child + .carousel__controls) {
+  
+  iam-carousel:has(> *:first-child:last-child) {
     
-    --hide-buttons: 1;
+    //--hide-buttons: 1;
     --hide-markers: 1;
   }
   
   iam-carousel {
     
-    @container (min-width: 30em) { /* TODO work out this number - shoule be 6 columns */
-      &[data-smcols='2']:not(:has(> *:not(.carousel__controls):nth-child(3))) {
+    @container (min-width: 30em) and (max-width: 63em){ /* TODO work out this number - shoule be 6 columns */
+      &[data-smcols='2']:not(:has(> *:nth-child(3))) {
 
-        --hide-buttons: 1;
+        //--hide-buttons: 1;
         --hide-markers: 1;
 
-        --button-height: 0rem;
+        //--button-height: 0rem;
         --marker-height: 0rem;
         --marker-mb: 0rem;
       }
-      &[data-smcols='3']:not(:has(> *:not(.carousel__controls):nth-child(4))) {
+      &[data-smcols='3']:not(:has(> *:nth-child(4))) {
 
-        --hide-buttons: 1;
+        //--hide-buttons: 1;
         --hide-markers: 1;
 
-        --button-height: 0rem;
+        //--button-height: 0rem;
         --marker-height: 0rem;
         --marker-mb: 0rem;
       }
     }
 
     @container (min-width: 62em) {
-      &[data-mdcols='2']:not(:has(> *:not(.carousel__controls):nth-child(3))) {
+      &[data-mdcols='2']:not(:has(> *:nth-child(3))) {
 
         --hide-buttons: 1;
         --hide-markers: 1;
@@ -262,7 +234,7 @@
         --marker-height: 0rem;
         --marker-mb: 0rem;
       }
-      &[data-mdcols='3']:not(:has(> *:not(.carousel__controls):nth-child(4))) {
+      &[data-mdcols='3']:not(:has(> *:nth-child(4))) {
 
         --hide-buttons: 1;
         --hide-markers: 1;
@@ -287,7 +259,7 @@
       --count: 3;
     }
 
-    @container (min-width: 30em) {
+    @container (min-width: 30em) and (max-width: 62em) {
       &[data-smcols='2'] {
 
         --count: 2;
@@ -298,7 +270,7 @@
       }
     }
 
-    @container (min-width: 64em) {
+    @container (min-width: 62em) {
       &[data-mdcols='2'] {
 
         --count: 2;
@@ -307,6 +279,10 @@
 
         --count: 3;
       }
+      &[data-mdcols='4'] {
+
+        --count: 4;
+      }
     }
   }
   /* #endregion */
@@ -319,26 +295,23 @@
       @container style(--count) {
 
         scroll-snap-align: unset;
-        
+        scroll-snap-stop: unset;
+
         &::scroll-marker{
 
           display: none;
         }
       }
 
-      @container not scroll-state(snapped: x) {
-        
-        //--opacity: 0;
-      }
-      
       @container style(--count: 2) {
 
-        &:not(.carousel__controls):nth-child(2n - 1) {
+        
+        &:nth-child(2n + 1) {
           scroll-snap-align: start;
           scroll-snap-stop: always;
         }
 
-        &:not(.carousel__controls):nth-child(2n - 1)::scroll-marker{
+        &:nth-child(2n + 1)::scroll-marker{
 
           display: block;
         }
@@ -346,12 +319,25 @@
 
       @container style(--count: 3) {
 
-        &:not(.carousel__controls):nth-child(3n - 2) {
+        &:nth-child(3n + 1) {
           scroll-snap-align: start;
           scroll-snap-stop: always;
         }
 
-        &:not(.carousel__controls):nth-child(3n - 2)::scroll-marker{
+        &:nth-child(3n + 1)::scroll-marker{
+
+          display: block;
+        }
+      }
+      @container style(--count: 4) {
+
+        
+        &:nth-child(4n + 1) {
+          scroll-snap-align: start;
+          scroll-snap-stop: always;
+        }
+
+        &:nth-child(4n + 1)::scroll-marker{
 
           display: block;
         }
@@ -405,162 +391,46 @@
   /* #endregion */
 
 
-  /* #region progress bar */
-  .carousel__controls {
-    display: none;
-    position: absolute;
+  iam-carousel::part(carousel__controls){
     position-anchor: --carousel;
 
     top: auto;
     left: anchor(left);
     right: anchor(right);
-    min-height: 0;
-    width: auto;
     bottom: anchor(bottom);
-    z-index: 99;
-  }
-
-  .carousel__progress {
-    margin-inline: auto;
-    text-align: center;
-    display: none;
-    padding-bottom: 0;
-    
-    input[type='range'] {
-      --track-size: 0.5rem;
-      --track-colour: #a5ecfd;
-      --thumb-colour: var(--colour-info);
-      --thumb-size: 1rem;
-      --thumb-size-outline: 0;
-      width: 90%;
-      max-width: 10.75rem; /* 172 */
-
-      background: transparent;
-      cursor: pointer;
-      margin: 0;
-      height: 1rem;
-      border-radius: 50%;
-      accent-color: var(--thumb-colour);
-      -webkit-appearance: none;
-      appearance: none;
-    }
-
-    /*  Track Styles */
-    input[type='range']::-webkit-slider-runnable-track {
-      background: var(--track-colour);
-      height: var(--track-size);
-      border-radius: 0.5625rem; /* 9 */
-    }
-
-    input[type='range']::-moz-range-track {
-      background: var(--track-colour);
-      height: var(--track-size);
-      border-radius: 0.5625rem; /* 9 */
-    }
-
-    /*  Extended track functionality */
-    input[type='range']::-webkit-slider-runnable-track {
-      background: linear-gradient(
-        to right,
-        var(--track-colour),
-        var(--track-colour) var(--start-percent, 0%),
-        var(--thumb-colour) var(--start-percent, 0%),
-        var(--thumb-colour) calc(var(--percent, 0%)),
-        var(--track-colour) calc(var(--percent, 0%))
-      );
-    }
-
-    input[type='range']::-moz-range-track {
-      background: linear-gradient(
-        to right,
-        var(--track-colour),
-        var(--track-colour) var(--start-percent, 0%),
-        var(--thumb-colour) var(--start-percent, 0%),
-        var(--thumb-colour) calc(var(--percent, 0%)),
-        var(--track-colour) calc(var(--percent, 0%))
-      );
-    }
-
-    /*  Thumb Styles */
-    input[type='range']::-webkit-slider-thumb {
-      -webkit-appearance: none; /* Override default look */
-      appearance: none;
-      margin-top: -0.25rem; /* Centers thumb on the track */
-      background-color: var(--thumb-colour);
-      height: var(--thumb-size);
-      width: var(--thumb-size);
-      border-radius: 50%;
-      position: relative;
-      z-index: 99;
-      pointer-events: all;
-    }
-
-    input[type='range']::-moz-range-thumb {
-      border: none; /*Removes extra border that FF applies*/
-      background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
-      height: var(--thumb-size);
-      width: var(--thumb-size);
-      border-radius: 50%;
-      position: relative;
-      z-index: 99;
-      pointer-events: all;
-    }
-
-    /*  Focus Styles */
-    input[type='range']:focus {
-      outline: none;
-    }
-
-    input[type='range']:hover::-webkit-slider-thumb,
-    input[type='range']:focus::-webkit-slider-thumb {
-      outline: var(--thumb-size-outline) solid var(--thumb-colour);
-    }
-
-    input[type='range']:active::-webkit-slider-thumb {
-      outline: var(--thumb-size-outline) solid var(--thumb-colour);
-    }
-
-    input[type='range']:hover::-moz-range-thumb,
-    input[type='range']:focus::-moz-range-thumb {
-      outline: var(--thumb-size-outline) solid var(--thumb-colour);
-    }
-    input[type='range']:focus::-moz-range-thumb {
-      outline: var(--thumb-size-outline) solid var(--thumb-colour);
-    }
   }
-  /* #endregion */
+  
   @supports not selector(::scroll-marker-group) {
     
     iam-carousel {
       --button-height: 0rem;
       --marker-height: 0rem;
       --marker-mb: 0rem;
+      --carousel-controls-display: block;
     }
 
-    .carousel__controls {
-      display: block;
-    }
 
-    .carousel__progress-xs {
+
+    iam-carousel::part(carousel__progress-xs) {
       display: block;
     }
 
-    @container (min-width: 30em) {
+    @container (min-width: 30em) and (max-width: 63em) {
 
-      .carousel__progress-xs {
+      iam-carousel::part(carousel__progress-xs) {
         display: none;
       }
-      .carousel__progress-sm {
+      iam-carousel::part(carousel__progress-sm) {
         display: block;
       }
     }
 
     @container (min-width: 62em) {
 
-      .carousel__progress-sm {
+      iam-carousel::part(carousel__progress-sm) {
         display: none;
       }
-      .carousel__progress-md {
+      iam-carousel::part(carousel__progress-md) {
         display: block;
       }
     }
@@ -571,40 +441,39 @@
     
 
     @container (max-width: 30em) {
-      iam-carousel:has(> *:nth-child(5)){
+      iam-carousel:has(> *:nth-child(6)){
         
         --button-height: 0rem;
         
-        --hide-buttons: 1;
+        //--hide-buttons: 1;
         --hide-markers: 1;
         
-        .carousel__controls {
-          display: block;
-        }
+        --carousel-controls-display: block;
+        
       }
-      iam-carousel:has(> *:nth-child(5)) + .carousel__progress {
+      iam-carousel:has(> *:nth-child(6))::part(carousel__progress-xs) {
         display: block;
       }
+
     }
 
-    @container (min-width: 30em) {
+    @container (min-width: 30em) and (max-width: 63em) {
 
-      .carousel__progress {
-        display: none;
+      iam-carousel::part(carousel__progress-xs) {
+        display: none!important;
       }
 
       iam-carousel[data-smcols="2"]:has(> *:nth-child(10)){
         
-        --button-height: 0rem;
+        //--button-height: 0rem;
         
-        --hide-buttons: 1;
+        //--hide-buttons: 1;
         --hide-markers: 1;
 
-        .carousel__controls {
-          display: block;
-        }
+        --carousel-controls-display: block;
+        
       }
-      iam-carousel[data-smcols="2"]:has(> *:nth-child(10)) .carousel__progress-sm {
+      iam-carousel[data-smcols="2"]:has(> *:nth-child(10))::part(carousel__progress-sm) {
         display: block;
       }
 
@@ -612,38 +481,37 @@
         
         --button-height: 0rem;
         
-        --hide-buttons: 1;
+        //--hide-buttons: 1;
         --hide-markers: 1;
 
-        .carousel__controls {
-          display: block;
-        }
+        --carousel-controls-display: block;
+        
       }
       
-      iam-carousel[data-smcols="3"]:has(> *:nth-child(15)) .carousel__progress-sm {
+      iam-carousel[data-smcols="3"]:has(> *:nth-child(15))::part(carousel__progress-sm) {
         display: block;
       }
     }
 
     @container (min-width: 62em) {
 
-      .carousel__progress-sm {
-        display: none;
+      iam-carousel::part(carousel__progress-xs),
+      iam-carousel::part(carousel__progress-sm) {
+        display: none!important;
       }
 
       iam-carousel[data-mdcols="2"]:has(> *:nth-child(10)){
         
         --button-height: 0rem;
         
-        --hide-buttons: 1;
+        //--hide-buttons: 1;
         --hide-markers: 1;
 
-        .carousel__controls {
-          display: block;
-        }
+        --carousel-controls-display: block;
+        
       }
       
-      iam-carousel[data-mdcols="2"]:has(> *:nth-child(10)) .carousel__progress-md {
+      iam-carousel[data-mdcols="2"]:has(> *:nth-child(10))::part(carousel__progress-md) {
         display: block;
       }
 
@@ -651,15 +519,14 @@
         
         --button-height: 0rem;
         
-        --hide-buttons: 1;
+        //--hide-buttons: 1;
         --hide-markers: 1;
 
-        .carousel__controls {
-          display: block;
-        }
+        --carousel-controls-display: block;
+        
       }
       
-      iam-carousel[data-mdcols="3"]:has(> *:nth-child(15)) .carousel__progress-md {
+      iam-carousel[data-mdcols="3"]:has(> *:nth-child(15))::part(carousel__progress-md) {
         display: block;
       }
     }
@@ -672,46 +539,15 @@
     
     --hide-buttons: 1;
     --hide-markers: 1;        
-    
-    .carousel__controls {
-      display: block;
-    }
-  }
-  .carousel__pips {
-    display: flex !important;
-    flex-wrap: nowrap;
-    max-width: 100%;
-    overflow: hidden;
-    height: 5rem;
-    overflow-x: auto;
-
-    button {
-      padding: 0;
-      margin: 0 0.2rem 0.4rem;
-
-      width: 6rem;
-      height: 4rem;
-      aspect-ratio: 3 / 2;
-
-      border-radius: 0;
-      position: relative;
-      border-radius: 0.25rem;
-
-      img {
-        position: absolute;
-        inset: 0;
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-        margin: 0;
-      }
+    --carousel-controls-display: block;
 
-      &[aria-current] {
-        outline: 2px solid var(--colour-info);
-      }
+    &::part(carousel__pips){
+      
+      height: 5rem;
     }
   }
 
+
   /* #endregion */
 
   /* #region article cards */
@@ -737,6 +573,11 @@
     --card-badges-bottom-padding: 0;
     --card-right-padding: 0.5rem;
     --card-left-padding: 0.5rem;
+
+    iam-card {
+      
+      --card-footer-bottom-padding: 0.5rem;
+    }
   }
   /* #endregon */
 }

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

@@ -1,5 +1,4 @@
 @use '../_func' as *;
-@use '../elements/buttons' as *;
 
 *,
 *::before,
@@ -10,9 +9,3 @@
 :host {
   display: contents;
 }
-
-::slotted(iam-marketing:first-child:last-child) {
-  margin-bottom: 0;
-  min-height: 100%;
-  min-width: 100%;
-}

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

@@ -7,10 +7,14 @@
   overscroll-behavior: contain;
 
   display: block;
-  container-type: inline-size;
+  container-type: revert;
 
 }
 
+:host(.has-parent-dialog) dialog {
+  display: contents!important;
+}
+
 ::slotted(dialog) {
   display: contents!important;
 }

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

@@ -120,9 +120,10 @@
   }
 
   @media screen and (min-width: 62em) {
+    min-width: 3rem;
     width: fit-content;
     height: auto;
-    margin: 0 0 0 2rem;
+    margin: 0 0 0 1.5rem;
     padding: 0 !important;
     text-indent: 0;
     padding-right: 0 !important;

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

@@ -1,19 +1,9 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-
-
 /*  Default colour  */
 :is(iam-nav,.iam-nav) {
 
-  > :not([slot="logo"],[slot="secondary"]) {
-    color-scheme: light;
-  }
-
-  > [slot="secondary"] {
-    color-scheme: light;
-  }
-
   > .nav--menu {
     --colour-heading: var(--colour-primary-theme);
     color-scheme: light;

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

@@ -1,6 +1,12 @@
 @use '../_func' as *;
 
 .container.notification__holder {
+
+
+  position-anchor: --nav;
+
+  top: anchor(bottom);
+
   position: fixed;
   top: var(--nav-height);
   left: 50%;
@@ -19,6 +25,8 @@
   align-content: flex-end;
   align-items: flex-end;
 
+
+
   :is(.iam-notification, iam-notification) {
     pointer-events: all;
     margin: 0.5rem 0 0.5rem 0;