@iamproperty/components 7.5.1--beta12 → 7.6.1

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

@@ -3,7 +3,95 @@
 
 $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);
+    }
+  }
+
+
+@include media-breakpoint-up(md) {
+  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) {
+@include media-breakpoint-up(md) {
   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) {
+@include media-breakpoint-up(sm) {
   body:has(iam-nav.open:not(.nav--sticky)) {
     max-height: 100vh;
     overflow: hidden;
@@ -152,6 +240,14 @@ iam-nav {
       text-decoration-color: var(--colour-info) !important;
     }
   }
+
+
+}
+
+@container style(--body-theme: dark) {
+  iam-nav.bg-primary [slot="secondary"] {
+    --colour-link: white;
+  }
 }
 
 iam-nav details {
@@ -191,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;
@@ -204,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);
@@ -289,6 +382,11 @@ iam-nav details {
 }
 
 @media screen and (max-width: 62em) {
+
+  iam-nav details {
+
+    background-color: #eeeeee;
+  }
   iam-nav details {
     @include mobDetails();
 
@@ -310,6 +408,10 @@ iam-nav details {
         transform: none;
         font-weight: 400;
       }
+
+      > div {
+        color-scheme: light;
+      }
     }
 
     a + details > summary {
@@ -374,7 +476,7 @@ iam-nav details {
 // #endregion
 
 // #region Desktop mega menu
-@include media-breakpoint-up(md, $mobileOnly) {
+@include media-breakpoint-up(md) {
   iam-nav > details,
   iam-nav *:not(.nav--menu) > details {
     width: auto;
@@ -427,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;
@@ -477,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);
@@ -618,7 +705,7 @@ iam-nav details {
 // #endregion
 
 // #region Search
-@include media-breakpoint-up(md, $mobileOnly) {
+@include media-breakpoint-up(md) {
   iam-nav {
     &.search-open {
       > *:not([slot='logo']):not([slot='secondary']):not([slot='search']) {
@@ -630,7 +717,7 @@ iam-nav details {
 // #endregion
 
 // #region Dual navbar in desktop
-@include media-breakpoint-up(md, $mobileOnly) {
+@include media-breakpoint-up(md) {
   iam-nav:has([slot='dual']) {
     .brand:has(~ [slot='dual']) {
       margin-right: rem(24) !important;
@@ -774,4 +861,5 @@ iam-nav .nav--menu {
   }
 }
 
+
 // #endregion

package/assets/sass/components/notification.scss

@@ -12,13 +12,8 @@ $darkMode: 'true' !default;
   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,40 +21,33 @@ $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),
@@ -110,10 +98,7 @@ $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);

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

@@ -99,7 +99,7 @@
 
 // #region Heror searchbar
 .property-searchbar--hero .property-searchbar {
-  @include reset-colours();
+
 
   padding: 1rem;
   background-color: #fff;

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

@@ -49,6 +49,10 @@
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }
+
+      &::after {
+        display: none;
+      }
     }
   }
 }

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

@@ -11,10 +11,11 @@ $darkMode: 'true' !default;
 }
 
 .table__container {
+  
   --wrapper-padding: #{rem(32)};
   --bg-colour: #ffffff;
   display: block;
-  background: white;
+  background: var(--colour-canvas-2);
   padding: var(--wrapper-padding);
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
   border-radius: rem(10);

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

@@ -37,7 +37,10 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       background: var(--row-bg);
     }
   }
-
+  
+  :is(td, th) {
+    color: var(--colour-body-default);
+  }
   /*
   &[data-expandable] [data-expand-button][aria-expanded] {
     background-color: transparent;
@@ -220,7 +223,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
       width: var(--cta-width);
       min-height: calc(var(--row-height) - 2px);
       text-align: right;
-      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvs-2)) 1.25rem);
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvas-2)) 1.25rem);
       cursor: default;
       padding-bottom: 0;
 
@@ -233,7 +236,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     }
 
     tbody tr:hover > *:not(:first-child):last-child {
-      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvs-2)) 1.25rem);
+      background: linear-gradient(90deg, transparent 0%, var(--row-bg, var(--colour-canvas-2)) 1.25rem);
     }
   }
 }
@@ -396,10 +399,7 @@ table {
   margin: -2rem -2rem 2rem -2rem;
   box-shadow: none;
   border-radius: 0;
-
-  @include light-mode($darkMode) {
     background-color: #e6eaec;
-  }
 }
 
 // Actionbar
@@ -499,9 +499,8 @@ table {
 @container (width < 23.4375em) {
   :is(#{$selector}) {
     iam-actionbar {
-      @include light-mode($darkMode) {
         background-color: #e6eaec;
-      }
+      
     }
     .actionbar__sticky + * {
       margin-top: 0 !important;

package/assets/sass/elements/admin-panel.scss

@@ -186,10 +186,6 @@ $darkMode: 'true' !default;
       margin-inline: calc(var(--padding-x) * -1);
       margin-bottom: var(--padding-top);
 
-      @include light-mode($darkMode) {
-        background: #eeeeee;
-      }
-
       &:first-child {
         margin-top: calc(var(--padding-top) * -1);
       }

package/assets/sass/elements/buttons--action.scss

@@ -59,7 +59,7 @@ $darkMode: 'true' !default;
   }
 
   // #region Select as button
-  .btn:has(select) {
+  .btn-action:has(select) {
     padding-block: 0;
     padding-right: 2rem;
 

package/assets/sass/elements/buttons--compact.scss

@@ -117,21 +117,21 @@ $darkMode: 'true' !default;
     ):not(.bg-canvas-2):not(.prevent-invert),
   .invert-colours {
     .btn-compact.btn-secondary:not(:hover, :focus, .hover, :focus-within):not(.btn-collapse) {
-      background-color: var(--colour-inverted) !important;
-      border-color: var(--colour-inverted) !important;
-      color: var(--colour-primary-theme);
+      background-color: var(--colour-white) !important;
+      border-color: var(--colour-white) !important;
+      color: var(--colour-heading);
     }
 
     .btn-compact.btn-secondary:is(:hover, :focus, .hover, :focus-within):not([disabled]):not(.btn-collapse) {
       background-color: transparent;
-      border-color: var(--colour-inverted) !important;
-      color: var(--colour-inverted);
+      border-color: var(--colour-white) !important;
+      color: var(--colour-white);
     }
 
     .btn-compact.btn-secondary[disabled] {
-      background-color: var(--colour-inverted) !important;
-      border-color: var(--colour-inverted) !important;
-      color: var(--colour-primary-theme) !important;
+      background-color: var(--colour-white) !important;
+      border-color: var(--colour-white) !important;
+      color: var(--colour-heading) !important;
     }
   }
 

package/assets/sass/elements/buttons--global.scss

@@ -53,7 +53,7 @@ $darkMode: 'true' !default;
     --btn-line-height: #{rem(20)};
 
     display: inline-block;
-    font-weight: 500;
+    font-weight: bold;
     text-align: left;
     text-decoration: none;
     vertical-align: middle;
@@ -239,23 +239,24 @@ $darkMode: 'true' !default;
 
   .btn:has(select) {
     position: relative;
-    padding-right: rem(56);
+    padding: 0;
 
     select {
       all: unset !important;
-      margin: calc(rem(-12)) calc(rem(-40)) !important;
+      
       padding: var(--btn-padding-block) var(--btn-padding-inline) !important;
-      padding-right: rem(56) !important;
-      margin-right: rem(-56) !important;
+      
+      padding-right: calc(var(--btn-padding-inline) + 2rem)!important;
+
       border-radius: rem(24) !important;
       appearance: none !important;
       background: none !important;
       border: none !important;
       color: currentColor !important;
       display: block;
-      max-width: 100% !important;
+      //max-width: 100% !important;
       outline: none;
-      font-weight: 500;
+      font-weight: bold;
       font-size: var(--btn-font-size) !important;
       line-height: var(--btn-line-height) !important;
       field-sizing: content!important;
@@ -270,7 +271,7 @@ $darkMode: 'true' !default;
     &:after {
       position: absolute;
       top: rem(10);
-      right: rem(32);
+      right: 1.5rem;
 
       content: '';
       height: rem(24);

package/assets/sass/elements/details.scss

@@ -127,7 +127,7 @@ $darkMode: 'true' !default;
     &[open] summary :is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
       &:after {
         content: '\f056';
-        font-weight: 400;
+        font-weight: 900;
       }
     }
 
@@ -147,7 +147,7 @@ $darkMode: 'true' !default;
       font-size: rem(18);
       line-height: var(--line-height);
       padding-bottom: map.get($heading-sizes, 'h3_pb');
-      font-weight: 500;
+      font-weight: 700;
       max-width: 100%;
 
       &:after {

package/assets/sass/elements/forms.scss

@@ -587,8 +587,8 @@ $optionalText: 'true' !default;
       --tick-colour: var(--colour-muted);
 
       &:before {
-        background: var(--colour-check-bg, var(--colour-light));
-        outline: var(--outline-width) solid var(--colour-light);
+        background: var(--colour-check-bg, light-dark(var(--colour-light), #444444));
+        outline: var(--outline-width) solid light-dark(var(--colour-light), #444444);
       }
     }
     input:is([type='radio'], [type='checkbox']):is(:active, .active) + label,
@@ -696,7 +696,8 @@ $optionalText: 'true' !default;
       linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top /
         calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem))
         calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem))
-        no-repeat;
+        no-repeat,
+      linear-gradient(to right, var(--colour-canvas-2), var(--colour-canvas-2));
 
     padding-right: calc(
       var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem)
@@ -810,7 +811,7 @@ $optionalText: 'true' !default;
   // #endregion
 
   // #region label with input field in
-  :is(label:not(.tag), .label):has(:is(input, select)) {
+  :is(label:not(.tag), .label):has(:is(input, select, textarea)) {
     display: block;
     margin-bottom: rem(24);
     max-width: $input-max-width;

package/assets/sass/elements/links.scss

@@ -56,7 +56,7 @@ $darkMode: 'true' !default;
     line-height: rem(24);
     min-height: rem(24);
     position: relative;
-    font-weight: 500;
+    font-weight: bold;
 
     &:not(.text-decoration-none) {
       &:after {
@@ -320,7 +320,7 @@ iam-collapsible-side {
       li:first-of-type {
         a::before {
           content: '\f056';
-          font-weight: 500;
+          font-weight: bold;
         }
       }
 

package/assets/sass/elements/prefix.scss

@@ -34,7 +34,18 @@
     text-align: center;
     text-overflow: ellipsis;
     position: relative;
-    height: stretch;
+
+
+    height: calc(
+      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
+        4px
+    );
+
+    @supports (height: stretch) {
+      
+      height: stretch;
+    }
+
 
     flex-shrink: 0;
 

package/assets/sass/elements/type.scss

@@ -21,7 +21,7 @@ $darkMode: 'true' !default;
     margin-bottom: 0;
     font-family: $headings-font-family;
     font-style: $headings-font-style;
-    font-weight: 500;
+    font-weight: bold;
 
     line-height: round(calc(1em * var(--type-scale)), 0.25rem);
     padding-bottom: round(calc(1em * var(--type-scale)), 0.25rem);
@@ -40,12 +40,12 @@ $darkMode: 'true' !default;
 
   :is(.h1, h1) {
     font-size: map.get($heading-sizes, 'h1_fs');
-    font-weight: 700;
+    font-weight: 900;
   }
 
   :is(h2, .h2) {
     font-size: map.get($heading-sizes, 'h2_fs');
-    font-weight: 500;
+    font-weight: 900;
   }
 
   :is(h3, .h3) {
@@ -83,7 +83,7 @@ $darkMode: 'true' !default;
     line-height: rem(map.get($heading-sizes, 'lead_lh'));
     padding-bottom: rem(map.get($heading-sizes, 'lead_pb'));
     max-width: var(--content-max-width);
-    font-weight: 500;
+    font-weight: 700;
   }
 
   small,
@@ -117,7 +117,7 @@ $darkMode: 'true' !default;
   }
 
   strong {
-    font-weight: 500;
+    font-weight: bolder;
     font-family: var(--font-heading);
     color: var(--colour-heading);
   }
@@ -153,7 +153,7 @@ $darkMode: 'true' !default;
       font-size: rem(18);
       line-height: rem(32);
       padding-bottom: 0;
-      font-weight: 500;
+      font-weight: bold;
       font-style: normal;
     }
   }

package/assets/sass/foundations/reboot.scss

@@ -114,7 +114,6 @@ $darkMode: 'true' !default;
 
   body {
     margin: 0; // 1
-    color-scheme: light dark;
     @include var(background, --colour-canvas);
     @include var(font-family, --font-body);
 
@@ -124,12 +123,7 @@ $darkMode: 'true' !default;
     -webkit-text-size-adjust: 100%; // 3
     -webkit-tap-highlight-color: rgba($black, 0); // 4
 
-    @container style(--theme: dark) {
-      color: var(--colour-body);
-    }
-    @container style(--theme: light) {
-      color: var(--colour-body);
-    }
+    color: var(--colour-body);
   }
 
   // #region scrollbars