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

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

@@ -6,3 +6,168 @@
 *::after {
   box-sizing: border-box;
 }
+
+
+
+@layer components {
+
+/* #region progress bar */
+  .carousel__controls {
+    display: var(--carousel-controls-display, none);
+    position: absolute;
+    position-anchor: --carousel;
+
+    top: auto;
+    left: anchor(left);
+    right: anchor(right);
+    bottom: anchor(bottom);
+    min-height: 0;
+    width: auto;
+    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 */
+  
+
+  .carousel__pips {
+    display: flex !important;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    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;
+      }
+
+      &[aria-current] {
+        outline: 2px solid var(--colour-info);
+      }
+    }
+  }
+}

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;
+        }
+
+        &:nth-child(3n + 1)::scroll-marker{
+
+          display: block;
+        }
+      }
+      @container style(--count: 4) {
+
+        
+        &:nth-child(4n + 1) {
           scroll-snap-align: start;
           scroll-snap-stop: always;
         }
 
-        &:not(.carousel__controls):nth-child(3n - 2)::scroll-marker{
+        &: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;
+    --carousel-controls-display: block;
 
-      border-radius: 0;
-      position: relative;
-      border-radius: 0.25rem;
-
-      img {
-        position: absolute;
-        inset: 0;
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-        margin: 0;
-      }
-
-      &[aria-current] {
-        outline: 2px solid var(--colour-info);
-      }
+    &::part(carousel__pips){
+      
+      height: 5rem;
     }
   }
 
+
   /* #endregion */
 
   /* #region article cards */