@iamproperty/components 7.6.0 → 7.6.2

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

@@ -1,9 +1,97 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$darkMode: 'true' !default;
 
-body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)) {
+
+// Default colour 
+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;
+  }
+}
+
+iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+  > :not([slot="logo"],[slot="secondary"]) {
+    color-scheme: light;
+  }
+}
+
+.dark-theme iam-nav {
+
+  > :not([slot="logo"],[slot="secondary"]) {
+    color-scheme: dark;
+  }
+  
+  > .nav--menu {
+    --colour-heading: var(--colour-white);
+    color-scheme: dark;
+  }
+}
+
+.dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+  --menu-btn-colour: var(--colour-white);
+}
+  
+  @media (prefers-color-scheme: dark) {
+    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+      --menu-btn-colour: var(--colour-heading);
+    }
+  }
+
+
+@media screen and (min-width: 62em) {
+  iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+      color-scheme: dark;
+    }
+
+    > details > div {
+      color-scheme: light;
+    }
+  }
+
+  .dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+
+    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+      color-scheme: light;
+    }
+
+    
+    > details > div {
+      color-scheme: dark;
+    }
+
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+      > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
+        color-scheme: light;
+      }
+
+        
+      > details > div {
+        color-scheme: dark;
+      }
+    }
+  }
+
+}
+
+body:has(iam-nav.open:not(.nav--sticky,.demo-open):not(.nav--xs-sticky)) {
   max-height: 100vh;
   overflow: hidden;
 }
@@ -36,7 +124,7 @@ nav:has(iam-nav) {
   }
 }
 
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   nav:has(iam-nav a[slot='secondary']) {
     min-height: #{rem(96 + 40)};
   }
@@ -57,7 +145,7 @@ nav:has(iam-nav.nav--sticky) {
 }
 
 @media screen and (max-width: 36em) {
-  body:has(iam-nav.open:not(.nav--xs-sticky)) {
+  body:has(iam-nav.open:not(.nav--xs-sticky,.demo-open)) {
     max-height: 100vh;
     overflow: hidden;
   }
@@ -80,7 +168,7 @@ nav:has(iam-nav.nav--sticky) {
   }
 }
 
-@include media-breakpoint-up(sm, $mobileOnly) {
+@media screen and (min-width: 36em) {
   body:has(iam-nav.open:not(.nav--sticky)) {
     max-height: 100vh;
     overflow: hidden;
@@ -107,14 +195,14 @@ iam-nav {
   margin-left: auto;
   margin-right: auto;
   padding: var(--container-padding);
-  padding-top: rem(24);
-  padding-bottom: rem(24);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
   width: 100%;
   //max-width: rem(1280);
 
   .brand {
-    font-size: rem(48);
-    height: rem(48);
+    font-size: 3rem;
+    height: 3rem;
     padding: 0;
     text-decoration: none;
     min-width: min(var(--svg-width), 14rem);
@@ -199,11 +287,6 @@ iam-nav details {
 // #region mobile and tablet mega menu
 
 @mixin mobDetails() {
-  background-color: var(--colour-canvas);
-
-  @include light-mode($darkMode) {
-    background-color: #eeeeee;
-  }
 
   margin-left: -1.5rem;
   margin-right: -1.5rem;
@@ -212,11 +295,13 @@ iam-nav details {
   position: relative;
 
   summary {
-    background-color: var(--colour-white);
+    background-color: var(--colour-canvas-2);
 
+    /*
     @container style(--theme: dark) {
       background-color: var(--colour-canvas-2);
     }
+      */
     display: block;
     border: none;
     color: var(--colour-link);
@@ -234,7 +319,7 @@ iam-nav details {
     &:after {
       content: '\f055';
       display: block;
-      font-size: rem(24);
+      font-size: 1.5rem;
       font-weight: 300;
       position: absolute;
       top: 1.5rem;
@@ -297,6 +382,11 @@ iam-nav details {
 }
 
 @media screen and (max-width: 62em) {
+
+  iam-nav details {
+
+    background-color: #eeeeee;
+  }
   iam-nav details {
     @include mobDetails();
 
@@ -307,17 +397,21 @@ iam-nav details {
       }
 
       summary {
-        padding: 0 1.5rem rem(24) 3.5rem;
+        padding: 0 1.5rem 1.5rem 3.5rem;
         position: relative;
       }
 
       summary:after {
         left: 1.5rem;
-        font-size: rem(16);
+        font-size: 1rem;
         top: rem(3);
         transform: none;
         font-weight: 400;
       }
+
+      > div {
+        color-scheme: light;
+      }
     }
 
     a + details > summary {
@@ -344,16 +438,16 @@ iam-nav details {
 // #region tablet mega menu tweaks
 
 @mixin tabletDetails() {
-  padding-right: rem(40);
-  margin-right: rem(-40);
+  padding-right: 2.5rem;
+  margin-right: -2.5rem;
 
   &:after {
     width: calc(100% - 4rem);
   }
 
   summary {
-    padding-right: rem(40);
-    margin-right: rem(-40);
+    padding-right: 2.5rem;
+    margin-right: -2.5rem;
 
     &:after {
       right: 2.5rem;
@@ -367,7 +461,7 @@ iam-nav details {
   }
 
   iam-nav details details[open] + details:before {
-    padding-right: rem(40);
+    padding-right: 2.5rem;
     margin-right: rem(-40);
   }
 }
@@ -382,7 +476,7 @@ iam-nav details {
 // #endregion
 
 // #region Desktop mega menu
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   iam-nav > details,
   iam-nav *:not(.nav--menu) > details {
     width: auto;
@@ -399,12 +493,12 @@ iam-nav details {
       position: relative;
       font-weight: normal;
       white-space: nowrap;
-      padding-right: rem(24);
+      padding-right: 1.5rem;
 
       &:after {
         content: '\f078';
         display: block;
-        font-size: rem(16);
+        font-size: 1rem;
         font-weight: 300;
         position: absolute;
         top: 50%;
@@ -435,22 +529,11 @@ iam-nav details {
       ) !important;
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
-      @container style(--theme: light) {
-        background: var(--colour-white);
-        @include reset-colours();
-      }
-      @container style(--theme: dark) {
-        @include invert-colours();
-      }
     }
 
     &[open] > div:has(details) {
       background: var(--colour-canvas-2);
 
-      @include light-mode($darkMode) {
-        background: #eeeeee;
-      }
-
       > a {
         display: inline-block !important;
         margin-right: 2rem !important;
@@ -485,10 +568,6 @@ iam-nav details {
     &[open] > div:not(:has(details)) {
       background: var(--colour-canvas);
 
-      @include light-mode($darkMode) {
-        background: var(--colour-white);
-        --colour-canvas-2: white;
-      }
 
       padding-top: rem(40 + 88);
       padding-bottom: rem(64);
@@ -521,7 +600,7 @@ iam-nav details {
           var(--padding-inline),
           calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
         ) !important;
-        font-size: rem(32);
+        font-size: 2rem;
         font-weight: bold;
         line-height: rem(88);
 
@@ -535,7 +614,7 @@ iam-nav details {
       }
 
       &:has(iam-card) {
-        column-gap: rem(16);
+        column-gap: 1rem;
 
         a:not(:has(iam-card)) {
           margin-right: rem(94) !important;
@@ -554,7 +633,7 @@ iam-nav details {
 
     a:not([slot='logo']):not(.btn):not(:has(iam-card)) {
       font-size: 1rem;
-      line-height: rem(24);
+      line-height: 1.5rem;
       padding-block: 1.5rem;
       position: relative;
       font-weight: normal;
@@ -595,7 +674,7 @@ iam-nav details {
     }
 
     details:not(:first-child) > summary {
-      margin-left: rem(32);
+      margin-left: 2rem;
     }
   }
 
@@ -626,7 +705,7 @@ iam-nav details {
 // #endregion
 
 // #region Search
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   iam-nav {
     &.search-open {
       > *:not([slot='logo']):not([slot='secondary']):not([slot='search']) {
@@ -638,10 +717,10 @@ iam-nav details {
 // #endregion
 
 // #region Dual navbar in desktop
-@include media-breakpoint-up(md, $mobileOnly) {
+@media screen and (min-width: 62em) {
   iam-nav:has([slot='dual']) {
     .brand:has(~ [slot='dual']) {
-      margin-right: rem(24) !important;
+      margin-right: 1.5rem !important;
     }
 
     *:not([slot='dual']):has(+ [slot='dual']) + [slot='dual'] {
@@ -690,10 +769,10 @@ iam-nav > .dialog__wrapper {
     all: unset;
     display: block !important;
     font-size: rem(14) !important;
-    line-height: rem(32) !important;
-    height: rem(32) !important;
-    min-height: rem(32) !important;
-    max-height: rem(32) !important;
+    line-height: 2rem !important;
+    height: 2rem !important;
+    min-height: 2rem !important;
+    max-height: 2rem !important;
     width: 100% !important;
     margin: 0 !important;
     cursor: pointer;
@@ -781,19 +860,6 @@ iam-nav .nav--menu {
     display: none !important;
   }
 }
-@layer overrides {
 
-  iam-nav.bg-primary .nav--menu{
 
-    --theme: light;
-
-    @each $color, $value in $theme-colors {
-      --colour-#{$color}: #{$value}!important;
-    }
-    @each $color, $value in $non-theme-colors {
-      --colour-#{$color}: #{$value}!important;
-    }
-        
-  }
-}
 // #endregion

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

@@ -1,11 +1,11 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+
+
+
+@layer components {
   nav:has(iam-nav) {
     grid-column: container;
   }
@@ -19,14 +19,14 @@ $darkMode: 'true' !default;
     column-grid: container;
 
     .brand {
-      font-size: rem(48);
-      height: rem(48);
+      font-size: 3rem;
+      height: 3rem;
       padding: 0;
       text-decoration: none;
       min-width: min(var(--svg-width), 14rem);
     }
 
-    @include media-breakpoint-up(md, $mobileOnly) {
+    @media screen and (min-width: 62em) {
       padding-inline: max(
         var(--padding-inline),
         calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
@@ -44,7 +44,7 @@ $darkMode: 'true' !default;
         display: none;
       }
 
-      @include media-breakpoint-up(md, $mobileOnly) {
+      @media screen and (min-width: 62em) {
         &:has([slot='secondary']) {
           padding-top: rem(64);
         }

package/assets/sass/components/notification.scss

@@ -1,24 +1,19 @@
 @use '../_func' as *;
 
-$darkMode: 'true' !default;
+
 
 :host,
 .iam-notification {
   display: block;
-  padding: rem(22) rem(24) rem(22) rem(24 - 8) !important;
-  border-radius: rem(8);
+  padding: rem(22) 1.5rem rem(22) rem(24 - 8) !important;
+  border-radius: 0.5rem;
   box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.2);
   margin-bottom: 1rem;
   font-size: rem(15);
   border: rem(2) solid var(--colour, var(--colour-info));
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+  background: var(--colour-notification-bg);
 
-  @container style(--body-theme: light) {
-    background: #e9f9fd;
-  }
-      @container style(--body-theme: dark) {
-    background: var(--colour-canvas-2);
-    }
 
   ::slotted(i),
   i {
@@ -26,46 +21,39 @@ $darkMode: 'true' !default;
   }
 }
 
+:host(:not(.bg-danger)){
+  
+  color-scheme: light;
+  color: var(--colour-heading);
+}
+
 :host([data-type]),
 .iam-notification[data-type] {
   border: rem(2) solid transparent;
 }
 
 
-  :host(.colour-warning),
-  .iam-notification.colour-warning {
-    @container style(--body-theme: light) {
-      background: #fff6e6;
-    }
-    @container style(--body-theme: dark) {
-    background: var(--colour-canvas-2);
-    }
-  }
+:host(.colour-warning),
+.iam-notification.colour-warning {
+  background: var(--colour-notification-warning-bg);
+}
 
   :host(.colour-danger),
   .iam-notification.colour-danger {
-    @container style(--body-theme: light) {
-    background: #fcebec;
-    }
-    @container style(--body-theme: dark) {
-    background: var(--colour-canvas-2);
-    }
+    
+  background: var(--colour-notification-danger-bg);
   }
 
   :host(.colour-success),
   .iam-notification.colour-success {
-    @container style(--body-theme: light) {
-    background: #f8fdf6;
-    }
-    @container style(--body-theme: dark) {
-    background: var(--colour-canvas-2);
-    }
+    
+  background: var(--colour-notification-success-bg);
   }
 
 :host(.bg-white),
 .iam-notification.bg-white {
   border: none;
-  border-left: rem(8) solid var(--colour-info);
+  border-left: 0.5rem solid var(--colour-info);
 
   ::slotted(i),
   i {
@@ -110,17 +98,14 @@ $darkMode: 'true' !default;
   margin-inline: auto;
   display: flex;
   flex-wrap: nowrap;
-
-  @include light-mode($darkMode) {
-    color: var(--colour-heading);
-  }
+  color: var(--colour-heading);
 
   .notification__icon {
-    margin-inline-end: rem(16);
+    margin-inline-end: 1rem;
     flex-grow: 0;
 
     ::slotted(i) {
-      font-size: rem(18);
+      font-size: 1.125rem; /* 18/16 */
     }
   }
 
@@ -152,19 +137,19 @@ $darkMode: 'true' !default;
     ::slotted(a),
     ::slotted(button),
     > * {
-      margin: rem(16) rem(16) 0 0 !important;
+      margin: 1rem 1rem 0 0 !important;
     }
 
     @container (width > 23.4375em) {
       display: flex;
       align-items: center;
       border-left: 1px solid currentColor;
-      margin-left: rem(32);
+      margin-left: 2rem;
 
       ::slotted(a),
       ::slotted(button),
       > * {
-        margin: 0 0 0 rem(32) !important;
+        margin: 0 0 0 2rem !important;
       }
     }
   }
@@ -181,8 +166,8 @@ $darkMode: 'true' !default;
       text-indent: 300%;
       overflow: hidden;
       border: none;
-      height: rem(18);
-      width: rem(18);
+      height: 1.125rem; /* 18/16 */
+      width: 1.125rem; /* 18/16 */
       background: transparent;
       display: inline-block;
       position: relative;
@@ -194,8 +179,8 @@ $darkMode: 'true' !default;
         left: 0;
         position: absolute;
         display: block;
-        height: rem(18);
-        width: rem(18);
+        height: 1.125rem; /* 18/16 */
+        width: 1.125rem; /* 18/16 */
         z-index: var(--index-focus);
         background: currentColor;
         mask-image: var(--icon-close);
@@ -210,7 +195,7 @@ $darkMode: 'true' !default;
     }
 
     @container (width > 23.4375em) {
-      padding-left: rem(32);
+      padding-left: 2rem;
       display: flex;
       align-items: center;
     }

package/assets/sass/components/pagination.scss

@@ -2,7 +2,7 @@
 @use '../elements/forms.scss' as *;
 @use '../elements/buttons.scss' as *;
 
-@include margins();
+@use '../utilities/margins' as *;
 
 :host {
   container-type: inline-size;
@@ -16,11 +16,11 @@
 .pagination {
   display: block;
 
-  @include container-up(sm) {
+  @media screen and (min-width: 36em) {
     display: flex;
     align-items: center;
     justify-content: space-between !important;
-    padding-top: rem(32);
+    padding-top: 2rem;
   }
 
   > div {
@@ -46,7 +46,7 @@
   .select--minimal {
     height: calc(3.25rem - 1em);
     line-height: calc(3.25rem - 1em);
-    margin-left: rem(-16);
+    margin-left: -1rem;
     font-weight: bold;
   }
 
@@ -72,7 +72,7 @@
     display: flex !important;
   }
 }
-@include container-up(sm) {
+@media screen and (min-width: 36em) {
   :host([data-page-jump]) {
     .page-jump {
       display: flex !important;
@@ -80,14 +80,14 @@
   }
 }
 
-@include container-up(sm) {
+@media screen and (min-width: 36em) {
   :host([data-per-page]:not([data-page-jump][data-item-count])) {
     .per-page {
       display: flex !important;
     }
   }
 }
-@include container-up(md) {
+@media screen and (min-width: 62em) {
   :host([data-per-page][data-page-jump][data-item-count]) {
     .per-page {
       display: flex !important;
@@ -100,11 +100,11 @@
 .pagination > .item-count {
   display: block;
   text-align: center;
-  margin-bottom: rem(16);
+  margin-bottom: 1rem;
   margin-inline: auto;
 }
 
-@include container-up(sm) {
+@media screen and (min-width: 36em) {
   .pagination > .item-count {
     display: none;
   }
@@ -129,7 +129,7 @@
   padding-inline: 1rem;
   color: var(--colour-body);
 
-  @include container-up(sm) {
+  @media screen and (min-width: 36em) {
     display: inline-block;
   }
 
@@ -163,7 +163,7 @@
   .pagination {
     justify-content: flex-end;
 
-    @include container-up(sm) {
+    @media screen and (min-width: 36em) {
       justify-content: space-between;
     }
   }
@@ -194,7 +194,7 @@
 
 :host([data-minimal]) {
   .pagination {
-    padding-top: rem(24);
+    padding-top: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -204,7 +204,7 @@
   }
 }
 
-@include container-up(sm) {
+@media screen and (min-width: 36em) {
   .mobile-controls {
     display: none !important;
   }
@@ -217,13 +217,13 @@
 
 .fa-spin {
   display: none !important;
-  font-size: rem(48);
+  font-size: 3rem;
   color: var(--colour-info);
 }
 
 :host([data-loading]) {
   .mobile-controls {
-    padding-top: rem(32);
+    padding-top: 2rem;
   }
   .item-count,
   .mobile-controls > *:not(.fa-spin) {