@iamproperty/components 7.3.0 → 7.5.0

package/assets/sass/components/collapsible-side.scss

@@ -36,32 +36,41 @@ $darkMode: 'true' !default;
   @include media-breakpoint-up(md, $mobileOnly) {
     padding-left: 5.25rem !important;
   }
+
+  &.inline {
+    .side-menu {
+      position: absolute;
+      top: 0;
+    }
+  }
 }
 
 // #region Side menu
 .side-menu {
   position: absolute;
+  z-index: 20;
   top: 0;
   left: 0;
   height: 100%;
   min-height: calc(100vh - var(--nav-height));
-  width: rem(30);
+  width: rem(70);
   height: calc(100% - var(--nav-height));
-  background-color: var(--colour-canvas);
+  padding: 0 rem(40) 0 0;
   transition: width 1s;
 
   &:before {
     content: '';
     position: absolute;
+    z-index: 1;
     top: 0;
-    right: 0;
+    right: rem(40);
     height: 100%;
     border-right: 2px solid var(--colour-border);
   }
 
   @include media-breakpoint-up(sm, $mobileOnly) {
     left: 0;
-    width: rem(40);
+    width: rem(80);
   }
 
   @include media-breakpoint-up(md, $mobileOnly) {
@@ -71,10 +80,11 @@ $darkMode: 'true' !default;
     top: var(--nav-height);
 
     &:not(.open).hover {
-      width: rem(304);
+      width: rem(344);
 
       .btn[class*='fa-']:before {
         content: '\f023' !important;
+        transform: rotate(0);
       }
     }
   }
@@ -83,13 +93,14 @@ $darkMode: 'true' !default;
     display: var(--btn-display, block);
     position: absolute;
     top: rem(32);
-    right: 0;
+    right: rem(40);
     margin-bottom: 0;
     margin-right: rem(-20);
     background-color: var(--colour-canvas-2);
     border: 2px solid var(--colour-border);
     z-index: 99;
     color: var(--colour-primary-theme);
+    transition: opacity 0.2s;
 
     &[aria-expanded] {
       // Change icon
@@ -105,7 +116,7 @@ $darkMode: 'true' !default;
 
   &:is(:hover, :focus-within, :active) .btn {
     border: 2px solid var(--colour-border);
-    color: var(--colour-primary-theme);
+    color: var(--colour-primary);
 
     @include media-breakpoint-up(md, $mobileOnly) {
       opacity: 1;
@@ -113,29 +124,30 @@ $darkMode: 'true' !default;
   }
 
   &:is(.open) {
-    width: calc(100% - var(--container-padding-x));
+    width: calc(100% - var(--container-padding-x) + rem(40));
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      width: rem(382);
+    @include media-breakpoint-up(sm) {
+      width: rem(422);
     }
-    @include media-breakpoint-up(md, $mobileOnly) {
-      width: rem(304);
+    @include media-breakpoint-up(md) {
+      width: rem(344);
     }
   }
 
   // Content
-
   .side-menu-content {
     position: absolute;
     top: 0;
-    right: 0;
-    padding: rem(32) rem(40) 0 0;
+    right: rem(40);
+    padding: rem(32) rem(40) rem(40) 0;
     width: rem(351);
+    background-color: var(--colour-canvas);
     opacity: 0;
     transition: opacity 1s;
     min-height: 100%;
     overflow: auto;
     max-height: 100%;
+    scrollbar-width: thin;
 
     .h3 {
       padding-left: rem(24);
@@ -172,90 +184,13 @@ $darkMode: 'true' !default;
   }
 }
 
-// Links
-::slotted(*[slot='menu']) {
-  padding-left: rem(24);
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    padding-left: rem(40);
-  }
-
-  @include media-breakpoint-up(md, $mobileOnly) {
-    padding-left: var(--container-padding-x-md);
-  }
-}
-
-::slotted(hr) {
-  border-bottom: 2px solid var(--colour-border) !important;
-  margin-right: rem(-40) !important;
-}
-
-::slotted(a[slot='menu']) {
-  display: block;
-
-  display: block !important;
-  line-height: rem(20) !important;
-  padding: rem(16) rem(40) rem(16) rem(24) !important;
-  margin: 0 !important;
-  flex-shrink: 0;
-  font-size: 1rem !important;
-  font-weight: normal !important;
-  text-decoration: none;
-
-  border-right: 2px solid var(--colour-border) !important;
-  border-bottom: 2px solid var(--colour-border) !important;
-
-  margin-right: rem(-40) !important;
-
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    padding-left: rem(40) !important;
-  }
-
-  @include media-breakpoint-up(md, $mobileOnly) {
-    padding-left: var(--container-padding-x-md) !important;
-  }
-  &:after {
-    display: none;
-  }
-}
-
-::slotted(a[slot='menu']:where(:hover, :focus, [aria-expanded])) {
-  background-color: var(--side-link-hover) !important;
-}
-
-::slotted(a[slot='menu']:active) {
-  background-color: var(--side-link-hover) !important;
-  font-weight: bold !important;
-}
-
-::slotted(a[slot='menu'][aria-expanded]) {
-  background-color: var(--side-link-hover) !important;
-  font-weight: bold !important;
-  margin-right: #{rem(-40)} !important;
-  position: relative;
-
-  border-right: 2px solid var(--colour-info) !important;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: calc(100% + 4px);
-    margin-top: -2px;
-    width: 2px;
-    border-right: 2px solid var(--colour-info);
-    margin-right: -2px;
-
-    @media (forced-colors: active) {
-      border-right: 10px solid var(--colour-info);
-    }
-  }
-}
+// links moved to links.scss
 // #endregion
 
 // #region main content
 .main-content {
+  position: relative;
+  z-index: 10;
   padding-top: rem(24);
   padding-left: rem(60);
 
@@ -311,3 +246,64 @@ $darkMode: 'true' !default;
     --btn-display: none;
   }
 }
+
+:host([inline]) {
+  width: 100%;
+  max-width: 100%;
+
+  @include media-breakpoint-up(md, $mobileOnly) {
+    max-width: min(var(--container-max-width), 100% - 19rem);
+  }
+}
+
+:host([menu-right]) {
+  .container {
+    padding-right: 0 !important;
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      padding-right: 5.25rem !important;
+    }
+  }
+
+  @include media-breakpoint-up(md, $mobileOnly) {
+    .container:has(.side-menu.open) {
+      margin-right: max(19rem, calc(50% - calc(var(--container-max-width) / 2)));
+      margin-left: 0;
+    }
+  }
+
+  .side-menu {
+    left: auto;
+    right: -2.5rem;
+    padding: 0 0 0 rem(40);
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      right: 0;
+    }
+
+    &::before {
+      right: 100%;
+    }
+
+    .btn {
+      right: 100%;
+
+      &:before {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .main-content {
+    padding-left: var(--container-padding-x);
+    padding-right: rem(60);
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      padding-right: rem(80);
+    }
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      padding-right: 0;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+@use '../_func' as *;
+@use '../elements/buttons.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: contents;
+}
+
+::slotted(iam-marketing:first-child:last-child) {
+  margin-bottom: 0;
+  min-height: 100%;
+  min-width: 100%;
+}

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

@@ -0,0 +1,22 @@
+@use '../_func.scss' as *;
+
+$icon-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M296 552L296 496C296 482.7 306.7 472 320 472C333.3 472 344 482.7 344 496L344 552C344 565.3 333.3 576 320 576C306.7 576 296 565.3 296 552zM296 144L296 88C296 74.7 306.7 64 320 64C333.3 64 344 74.7 344 88L344 144C344 157.3 333.3 168 320 168C306.7 168 296 157.3 296 144zM139 139C148.4 129.6 163.6 129.6 172.9 139L212.5 178.6C221.9 188 221.9 203.2 212.5 212.5C203.1 221.8 187.9 221.9 178.6 212.5L139 172.9C129.6 163.5 129.6 148.3 139 139zM427.5 427.5C436.9 418.1 452.1 418.1 461.4 427.5L501 467.1C510.4 476.5 510.4 491.7 501 501C491.6 510.3 476.4 510.4 467.1 501L427.5 461.4C418.1 452 418.1 436.8 427.5 427.5zM64 320C64 306.7 74.7 296 88 296L144 296C157.3 296 168 306.7 168 320C168 333.3 157.3 344 144 344L88 344C74.7 344 64 333.3 64 320zM472 320C472 306.7 482.7 296 496 296L552 296C565.3 296 576 306.7 576 320C576 333.3 565.3 344 552 344L496 344C482.7 344 472 333.3 472 320zM139 501C129.6 491.6 129.6 476.4 139 467.1L178.6 427.5C188 418.1 203.2 418.1 212.5 427.5C221.8 436.9 221.9 452.1 212.5 461.4L172.9 501C163.5 510.4 148.3 510.4 139 501zM427.5 212.5C418.1 203.1 418.1 187.9 427.5 178.6L467.1 139C476.5 129.6 491.7 129.6 501 139C510.3 148.4 510.4 163.6 501 172.9L461.4 212.5C452 221.9 436.8 221.9 427.5 212.5zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320zM208 320C208 258.1 258.1 208 320 208C381.9 208 432 258.1 432 320C432 381.9 381.9 432 320 432C258.1 432 208 381.9 208 320z'/></svg>");
+$icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M503.8 153.8C504.8 157.4 508.2 160 512 160C515.8 160 519.1 157.5 520.2 153.8L531.2 115.2L569.8 104.2C573.4 103.2 576 99.8 576 96C576 92.2 573.5 88.9 569.8 87.8L531.2 76.8L520.2 38.2C519.2 34.6 515.8 32 512 32C508.2 32 504.9 34.5 503.8 38.2L492.8 76.8L454.2 87.8C450.6 88.8 448 92.2 448 96C448 99.8 450.5 103.1 454.2 104.2L492.8 115.2L503.8 153.8zM288 128C164.3 128 64 228.3 64 352C64 475.7 164.3 576 288 576C348.2 576 402.9 552.2 443.1 513.6C449.5 507.5 451.3 497.9 447.7 489.8C444.1 481.7 435.7 476.8 426.9 477.5C422.6 477.8 418.3 478 414 478C325.1 478 253 405.9 253 317C253 253.9 289.3 199.2 342.3 172.8C350.2 168.8 354.9 160.3 353.8 151.5C352.7 142.7 346.2 135.5 337.6 133.5C321.6 129.9 305 128 288 128zM419.2 332.8L435.8 390.8C437.4 396.3 442.4 400 448 400C453.6 400 458.7 396.2 460.2 390.8L476.8 332.8L534.8 316.2C540.3 314.6 544 309.6 544 304C544 298.4 540.2 293.3 534.8 291.8L476.8 275.2L460.2 217.2C458.6 211.7 453.6 208 448 208C442.4 208 437.3 211.8 435.8 217.2L419.2 275.2L361.2 291.8C355.7 293.4 352 298.4 352 304C352 309.6 355.8 314.7 361.2 316.2L419.2 332.8z'/></svg>");
+
+::slotted(.toggle):after {
+  --icon: #{escape-svg($icon-light)};
+  background: var(--colour-primary-theme);
+  mask-image: var(--icon);
+  mask-size: 100%;
+  mask-repeat: no-repeat;
+  mask-position: 50% 50%;
+  -webkit-mask-image: var(--icon);
+  -webkit-mask-size: 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 50% 50%;
+  z-index: 2;
+}
+
+::slotted(.toggle.dark-theme):after {
+  --icon: #{escape-svg($icon-dark)};
+}

package/assets/sass/components/inline-edit.scss

@@ -1,5 +1,7 @@
 @use '../_func' as *;
 
+@include display();
+
 :host {
   max-width: var(--input-max-width, 50rem);
   display: block;

package/assets/sass/components/{marketing.scss → marketing.component.scss}

@@ -2,14 +2,13 @@
 
 $isComponent: 'true' !default;
 
-@mixin iamMarketing() {
+:host {
   display: flex;
   position: relative;
   overflow: hidden;
   position: relative;
   overflow: hidden;
   margin-bottom: 2rem;
-  max-width: 40rem;
   min-width: 100%;
   padding: 2rem;
   border-radius: 0.5rem;
@@ -24,6 +23,7 @@ figure {
   width: 100%;
   top: 0;
   left: 0;
+  margin: 0;
 
   &:after {
     content: '';
@@ -58,10 +58,6 @@ img {
   mix-blend-mode: multiply;
 }
 
-:host {
-  @include iamMarketing();
-}
-
 @include slotted('*', $isComponent) {
   position: relative;
   z-index: 2;

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

@@ -108,15 +108,12 @@
   border-left: 4px solid var(--colour-info) !important;
   border-radius: 0.25rem !important;
 
-  
-  padding-left: calc(var(--menu-item-padding, 0.5rem) - 4px)!important;
+  padding-left: calc(var(--menu-item-padding, 0.5rem) - 4px) !important;
 }
 
 @media (prefers-color-scheme: dark) {
-
   ::slotted(*:is(button, a, label):is(.selected):not(:hover, .hover)) {
-  
-    color: black!important;
+    color: black !important;
   }
 }
 
@@ -132,10 +129,8 @@
 }
 
 @media (prefers-color-scheme: dark) {
-
   ::slotted(*:is(button, a, label):is(:active, .active)) {
-  
-    color: black!important;
+    color: black !important;
   }
 }
 

package/assets/sass/components/milestone.scss

@@ -0,0 +1,216 @@
+iam-milestone {
+  --milestone-divider-colour: var(--colour-muted);
+  --milestone-panel-border: var(--wider-colour-1-active);
+  --milestone-default-background: #ffffff;
+  --milestone-future-background: #f5f5f5;
+}
+
+iam-milestone-group {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 43rem;
+  gap: 2.75rem;
+
+  &.reverse-items {
+    flex-direction: column-reverse;
+
+    .milestone + .milestone {
+      &:before {
+        top: auto;
+        bottom: 0;
+        transform: translate(-1px, 2.2rem);
+      }
+    }
+  }
+
+  &[data-show-all-toggle] {
+    .milestone.current ~ .milestone {
+      display: none;
+    }
+
+    &.show-all {
+      .milestone.current ~ .milestone {
+        display: block;
+      }
+
+      .show-all-toggle {
+        &:before {
+          content: '\f070';
+        }
+      }
+    }
+  }
+
+  .show-all-toggle {
+    margin: 0 auto;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding-right: 1.7rem;
+    position: relative;
+
+    &:before {
+      content: '\f06e';
+      font-family: 'Font Awesome 6 Pro';
+      position: absolute;
+      left: auto;
+      right: 0;
+      top: 0;
+      margin-right: 0;
+    }
+  }
+
+  iam-milestone {
+    + .milestone {
+      position: relative;
+
+      &:before {
+        content: '';
+        height: 1.5rem;
+        width: 2px;
+        background: var(--milestone-divider-colour);
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-1px, -2.2rem);
+      }
+    }
+  }
+}
+
+iam-milestone::part(status) {
+  text-transform: uppercase;
+  text-align: center;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+iam-milestone {
+  border: 2px solid var(--milestone-panel-border);
+  border-radius: 8px;
+  display: block;
+  width: 100%;
+  max-width: 43rem;
+  background: var(--milestone-default-background);
+  padding-top: 1rem;
+
+  &.current ~ .milestone {
+    background: var(--milestone-future-background);
+  }
+
+  h2 {
+    text-align: center;
+  }
+
+  ul {
+    padding-left: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    li {
+      width: 100%;
+    }
+  }
+
+  p {
+    padding: 0 1rem 2rem;
+
+    + ul {
+      margin-top: 2rem;
+    }
+  }
+
+  .task-details {
+    padding: 1rem 1.5rem;
+
+    p {
+      padding: 0;
+
+      + ul {
+        margin-top: 2rem;
+      }
+    }
+  }
+
+  summary,
+  li {
+    gap: 1rem;
+
+    &:before {
+      content: '';
+      display: block;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid var(--colour-primary);
+      border-radius: 50%;
+      font-family: 'Font Awesome 6 Pro';
+      color: #fff;
+      font-size: 0.7rem;
+    }
+
+    &.complete {
+      &:before {
+        content: '\f00c';
+        border-color: var(--colour-success);
+        background: var(--colour-success);
+        text-align: center;
+      }
+    }
+  }
+
+  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;
+    }
+
+    &:after {
+      content: '\f078';
+    }
+
+    + p {
+      padding-bottom: 0;
+    }
+  }
+
+  details {
+    padding-bottom: 0;
+
+    &[open] {
+      summary:after {
+        content: '\f077';
+      }
+    }
+  }
+
+  li {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+
+    .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

@@ -39,7 +39,7 @@ $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);
     }

package/assets/sass/components/multiselect.scss

@@ -1,5 +1,7 @@
 @use '../_func' as *;
 
+@include visually-hidden();
+
 .outer {
   position: relative;
   max-width: var(--input-max-width, 50rem);

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

@@ -6,6 +6,7 @@
 
 @include margins();
 @include sizes();
+@include display();
 
 $layers: 'true' !default;
 $mobileOnly: 'false' !default;
@@ -168,6 +169,7 @@ $darkMode: 'true' !default;
   }
 
   .menu {
+    
     overscroll-behavior: contain;
     width: calc(#{rem(375)} - var(--scrollbar-width));
     background-color: var(--colour-canvas-2);
@@ -187,9 +189,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
@@ -389,12 +397,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 {
@@ -485,7 +496,7 @@ $darkMode: 'true' !default;
   :host(.search-open) {
     background: #e6eaec !important;
 
-    @include dark-mode($darkMode) {
+    @container style(--theme: dark) {
       background: var(--colour-canvas-2) !important;
     }
 
@@ -552,7 +563,7 @@ $darkMode: 'true' !default;
     flex-shrink: 0;
   }
 
-  @include dark-mode($darkMode) {
+  @container style(--theme: dark) {
     --colour-link: var(--colour-white);
     @include invert-colours();
   }