@iamproperty/components 7.4.0 → 7.5.1--beta1

package/assets/sass/components/milestone.scss

@@ -1,8 +1,8 @@
 iam-milestone {
   --milestone-divider-colour: var(--colour-muted);
   --milestone-panel-border: var(--wider-colour-1-active);
-  --milestone-default-background: #FFFFFF;
-  --milestone-future-background: #F5F5F5;
+  --milestone-default-background: #ffffff;
+  --milestone-future-background: #f5f5f5;
 }
 
 iam-milestone-group {
@@ -10,21 +10,21 @@ iam-milestone-group {
   flex-wrap: wrap;
   max-width: 43rem;
   gap: 2.75rem;
-  
+
   &.reverse-items {
-      flex-direction: column-reverse;
+    flex-direction: column-reverse;
 
-      .milestone + .milestone {
-        &:before {
-          top: auto;
-          bottom: 0;
-          transform: translate(-1px, 2.2rem);
-        }
+    .milestone + .milestone {
+      &:before {
+        top: auto;
+        bottom: 0;
+        transform: translate(-1px, 2.2rem);
       }
+    }
   }
 
   &[data-show-all-toggle] {
-     .milestone.current ~ .milestone {
+    .milestone.current ~ .milestone {
       display: none;
     }
 
@@ -33,11 +33,11 @@ iam-milestone-group {
         display: block;
       }
 
-       .show-all-toggle {
-          &:before {
-            content: "\f070"
-          }
-       }
+      .show-all-toggle {
+        &:before {
+          content: '\f070';
+        }
+      }
     }
   }
 
@@ -50,7 +50,7 @@ iam-milestone-group {
     position: relative;
 
     &:before {
-      content: "\f06e";
+      content: '\f06e';
       font-family: 'Font Awesome 6 Pro';
       position: absolute;
       left: auto;
@@ -61,12 +61,11 @@ iam-milestone-group {
   }
 
   iam-milestone {
-
     + .milestone {
       position: relative;
 
       &:before {
-        content: "";
+        content: '';
         height: 1.5rem;
         width: 2px;
         background: var(--milestone-divider-colour);
@@ -81,13 +80,13 @@ iam-milestone-group {
 }
 
 iam-milestone::part(status) {
-    text-transform: uppercase;
-    text-align: center;
-    display: block;
-    margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  text-align: center;
+  display: block;
+  margin-bottom: 0.5rem;
 }
 
-iam-milestone { 
+iam-milestone {
   border: 2px solid var(--milestone-panel-border);
   border-radius: 8px;
   display: block;
@@ -97,7 +96,7 @@ iam-milestone {
   padding-top: 1rem;
 
   &.current ~ .milestone {
-     background: var(--milestone-future-background);
+    background: var(--milestone-future-background);
   }
 
   h2 {
@@ -140,20 +139,20 @@ iam-milestone {
     gap: 1rem;
 
     &:before {
-      content:'';
+      content: '';
       display: block;
       width: 1rem;
       height: 1rem;
       border: 2px solid var(--colour-primary);
       border-radius: 50%;
-      font-family: "Font Awesome 6 Pro";
+      font-family: 'Font Awesome 6 Pro';
       color: #fff;
       font-size: 0.7rem;
     }
 
     &.complete {
       &:before {
-        content: "\f00c";
+        content: '\f00c';
         border-color: var(--colour-success);
         background: var(--colour-success);
         text-align: center;
@@ -162,46 +161,56 @@ iam-milestone {
   }
 
   summary {
-      border-top: 1px solid #D6D6D6;
-      padding: 1rem 1.5rem;
-      margin-bottom: 0;
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      font-weight: 600;
-
-      &:before {
-        width: 1.25rem;
-        height: 1.25rem;
-        font-size: 0.9rem;
-        line-height: 1.2;
-      }
+    border-top: 1px solid #d6d6d6;
+    padding: 1rem 1.5rem;
+    margin-bottom: 0;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    font-weight: 600;
 
-      &:after {
-        content: "\f078"
-      }
+    &:before {
+      width: 1.25rem;
+      height: 1.25rem;
+      font-size: 0.9rem;
+      line-height: 1.2;
+    }
 
-      + p {
-        padding-bottom: 0;
-      }
+    &:after {
+      content: '\f078';
     }
 
-    details {
+    + p {
       padding-bottom: 0;
+    }
+  }
 
-      &[open] {
-        summary:after {
-          content: "\f077"
-        }
+  details {
+    padding-bottom: 0;
+
+    &[open] {
+      summary:after {
+        content: '\f077';
       }
     }
+  }
 
-    li {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
-      align-items: center;
+  li {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
 
-      .action-date {
-        font-size: 0.75rem;
-      }
+    .action-date {
+      font-size: 0.75rem;
     }
-}
+  }
+
+  @media (prefers-color-scheme: dark) {
+
+    --theme: light;
+    
+    > * {
+      color: var(--colour-heading);
+    }
+    
+  }
+}

package/assets/sass/components/multi-step.component.scss

@@ -107,7 +107,7 @@ $darkMode: 'true' !default;
     }
   }
 
-  @include dark-mode($darkMode) {
+  @container style(--theme: dark) {
     button {
       color: rgba($color: #000000, $alpha: 0.5);
 

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

@@ -11,6 +11,11 @@ $darkMode: 'true' !default;
     margin-inline: rem(3);
   }
 
+  iam-multiselect .tag[slot='checked']:first-child:last-child {
+
+    margin-inline: 0;
+  }
+
   iam-multiselect .tag:not([slot='checked']) {
     display: block;
     width: 100%;
@@ -39,9 +44,14 @@ $darkMode: 'true' !default;
     --display-button: block;
   }
 
-  @include dark-mode($darkMode) {
+  @container style(--theme: dark) {
     iam-multiselect :is(.tag, .badge):not([slot='checked']) {
       color: var(--colour-heading);
     }
   }
+
+  iam-multiselect[data-single] .tag[slot='checked'],
+  iam-multiselect[data-single] .tag[slot='checked'] * {
+    pointer-events: none!important;
+  }
 }

package/assets/sass/components/multiselect.scss

@@ -1,7 +1,27 @@
 @use '../_func' as *;
 
 
-  @include visually-hidden();
+@use '../elements/forms.scss' as *;
+@use '../elements/admin-panel.scss' as *;
+
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+@include visually-hidden();
+@include display();
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+
+  margin-bottom: rem(24);
+}
 
 .outer {
   position: relative;
@@ -14,8 +34,11 @@ label {
   padding-bottom: 0.5rem;
 }
 
+.inner-label:empty {
+  display: none;
+}
+
 .wrapper {
-  margin-bottom: rem(24);
   max-width: var(--input-max-width, 50rem);
 
   &:after {
@@ -48,6 +71,13 @@ label {
   }
 }
 
+.wrapper {
+
+  input {
+
+    margin-top: unset;
+  }
+}
 .wrapper.filled {
   display: flex;
   flex-direction: row;
@@ -72,7 +102,7 @@ label {
     all: unset;
     font-size: rem(16);
     line-height: rem(26);
-    display: inline-block;
+    display: var(--search-display,inline-block);
     width: 0;
     flex-grow: 1;
     padding: 0 rem(8) 0 0 !important;
@@ -169,9 +199,9 @@ button {
 
   .wrapper:not(.filled):not(:focus-within):not([data-mousedown]) {
     input {
-      border: none;
+      border-color: transparent;
       background: none;
-      margin-left: -1rem;
+      margin-left: var(--input-ms,-1rem);
       width: calc(100% + 1rem);
       max-width: calc(100% + 1rem);
       box-shadow: none;
@@ -187,3 +217,30 @@ button {
     padding-left: 0;
   }
 }
+
+:host([data-single]){
+
+  .wrapper.filled{
+    
+    slot[name='checked'] {
+      pointer-events: none;
+    }
+  }
+
+  #clear {
+    display: none;
+  }
+  ::slotted([slot='checked'])::after {
+    display: none;
+  }
+}
+:host-context(td){
+
+    input,
+    textarea,
+    select {
+      margin-left: 0!important;
+      width: 100%!important;
+      max-width: 100%!important;
+    }
+}

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

@@ -4,10 +4,25 @@
 
 @use '../bs_grid' as *;
 
+@use '../elements/forms.scss' as *;
+@use '../elements/buttons.scss' as *;
+
+@use '../elements/brand.scss' as *;
+
+@use '../elements/dialog.scss' as *;
+@use '../elements/modal.scss' as *;
+@use '../elements/container.scss' as *;
+
+
 @include margins();
+@include paddings();
 @include sizes();
 @include display();
 
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 $layers: 'true' !default;
 $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;
@@ -169,6 +184,7 @@ $darkMode: 'true' !default;
   }
 
   .menu {
+    
     overscroll-behavior: contain;
     width: calc(#{rem(375)} - var(--scrollbar-width));
     background-color: var(--colour-canvas-2);
@@ -188,9 +204,15 @@ $darkMode: 'true' !default;
       flex-shrink: 0;
     }
 
-    @include dark-mode($darkMode) {
+    @container style(--body-theme: light) {
+
+      --theme: light;
+    }
+
+    @container style(--theme: dark) {
+
       --colour-link: var(--colour-white);
-      @include invert-colours();
+      //@include invert-colours();
     }
 
     // The menu is always white unless in dark mode
@@ -390,12 +412,15 @@ $darkMode: 'true' !default;
     width: 100%;
 
     @include light-mode($darkMode) {
+      
+      --theme: light;
       background-color: #eeeeee;
       @include reset-colours();
+
     }
 
-    @include dark-mode($darkMode) {
-      @include invert-colours();
+    @container style(--theme: dark) {
+      //@include invert-colours();
     }
 
     .container {
@@ -486,7 +511,7 @@ $darkMode: 'true' !default;
   :host(.search-open) {
     background: #e6eaec !important;
 
-    @include dark-mode($darkMode) {
+    @container style(--theme: dark) {
       background: var(--colour-canvas-2) !important;
     }
 
@@ -553,7 +578,7 @@ $darkMode: 'true' !default;
     flex-shrink: 0;
   }
 
-  @include dark-mode($darkMode) {
+  @container style(--theme: dark) {
     --colour-link: var(--colour-white);
     @include invert-colours();
   }

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

@@ -52,7 +52,7 @@ nav:has(iam-nav.nav--sticky) {
 
   iam-nav {
     position: fixed;
-    outline: 2px solid #EEEEEE;
+    outline: 2px solid #eeeeee;
   }
 }
 
@@ -63,7 +63,6 @@ nav:has(iam-nav.nav--sticky) {
   }
 
   nav:has(iam-nav.nav--xs-sticky) {
-
     position: sticky;
     top: 0;
     left: 0;
@@ -75,10 +74,9 @@ nav:has(iam-nav.nav--sticky) {
       position: fixed;
     }
   }
-  
-  body[data-direction="down"].past100 nav:has(.nav--xs-sticky){
 
-    transform: translate(0,-110%);
+  body[data-direction='down'].past100 nav:has(.nav--xs-sticky) {
+    transform: translate(0, -110%);
   }
 }
 
@@ -89,10 +87,8 @@ nav:has(iam-nav.nav--sticky) {
   }
 }
 
-
-body[data-direction="down"].past100 nav:has(.nav--sticky){
-
-  transform: translate(0,-110%);
+body[data-direction='down'].past100 nav:has(.nav--sticky) {
+  transform: translate(0, -110%);
 }
 
 // #endregion
@@ -210,7 +206,7 @@ iam-nav details {
   summary {
     background-color: var(--colour-white);
 
-    @include dark-mode($darkMode) {
+    @container style(--theme: dark) {
       background-color: var(--colour-canvas-2);
     }
     display: block;
@@ -431,11 +427,11 @@ iam-nav details {
       ) !important;
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
-      @include light-mode($darkMode) {
+      @container style(--theme: light) {
         background: var(--colour-white);
         @include reset-colours();
       }
-      @include dark-mode($darkMode) {
+      @container style(--theme: dark) {
         @include invert-colours();
       }
     }

package/assets/sass/components/notification.scss

@@ -13,14 +13,14 @@ $darkMode: 'true' !default;
   border: rem(2) solid var(--colour, var(--colour-info));
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
-  @include light-mode($darkMode) {
+  @container style(--body-theme: light) {
     background: #e9f9fd;
   }
+      @container style(--body-theme: dark) {
+    background: var(--colour-canvas-2);
+    }
 
-  &::slotted(strong) {
-    color: green;
-  }
-  &::slotted(i),
+  ::slotted(i),
   i {
     color: var(--colour, currentColor);
   }
@@ -31,20 +31,36 @@ $darkMode: 'true' !default;
   border: rem(2) solid transparent;
 }
 
-:host(.colour-warning),
-.iam-notification.colour-warning {
-  background: #fff6e6;
-}
 
-:host(.colour-danger),
-.iam-notification.colour-danger {
-  background: #fcebec;
-}
+  :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-success),
-.iam-notification.colour-success {
-  background: #f8fdf6;
-}
+  :host(.colour-danger),
+  .iam-notification.colour-danger {
+    @container style(--body-theme: light) {
+    background: #fcebec;
+    }
+    @container style(--body-theme: dark) {
+    background: var(--colour-canvas-2);
+    }
+  }
+
+  :host(.colour-success),
+  .iam-notification.colour-success {
+    @container style(--body-theme: light) {
+    background: #f8fdf6;
+    }
+    @container style(--body-theme: dark) {
+    background: var(--colour-canvas-2);
+    }
+  }
 
 :host(.bg-white),
 .iam-notification.bg-white {
@@ -57,6 +73,11 @@ $darkMode: 'true' !default;
   }
 }
 
+:host(.bg-danger) .notification{
+
+  color: var(--colour-white);
+}
+
 // Alerts
 :host([data-type='alert']),
 .iam-notification[data-type='alert'] {

package/assets/sass/components/pagination.scss

@@ -1,4 +1,6 @@
 @use '../_func' as *;
+@use '../elements/forms.scss' as *;
+@use '../elements/buttons.scss' as *;
 
 @include margins();
 
@@ -7,6 +9,10 @@
   display: block;
 }
 
+:host(.d-none){
+  display: none;
+}
+
 .pagination {
   display: block;
 

package/assets/sass/components/slider.scss

@@ -1,6 +1,7 @@
 @use '../_func' as *;
 
 @use '../bs_grid' as *;
+@use '../elements/forms.scss' as *;
 
 .row {
   align-items: center;

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

@@ -1,5 +1,7 @@
 @use '../_func.scss' as *;
-@import '../elements/buttons';
+@use '../elements/buttons';
+
+@use '../components/menu.global.scss';
 
 // Main button
 ::slotted(button:not([slot])) {