@iamproperty/components 7.4.0 → 7.5.0

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,7 +1,6 @@
 @use '../_func' as *;
 
-
-  @include visually-hidden();
+@include visually-hidden();
 
 .outer {
   position: relative;

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

@@ -169,6 +169,7 @@ $darkMode: 'true' !default;
   }
 
   .menu {
+    
     overscroll-behavior: contain;
     width: calc(#{rem(375)} - var(--scrollbar-width));
     background-color: var(--colour-canvas-2);
@@ -188,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
@@ -390,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 {
@@ -486,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;
     }
 
@@ -553,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();
   }

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,9 +13,12 @@ $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;
@@ -31,20 +34,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 {

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])) {

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

@@ -246,27 +246,27 @@ table {
   }
 
   :not(.hide-status):is(
-      [data-content='low'],
-      [data-content='medium'],
-      [data-content='high'],
-      [data-content='unknown'],
-      [data-content='due'],
-      [data-content='overdue'],
-      [data-content='incomplete'],
-      [data-content='requires approval'],
-      [data-content='upcoming'],
-      [data-content='approval required'],
-      [data-content='warning'],
-      [data-content='verified'],
-      [data-content='not started'],
-      [data-content='to do'],
-      [data-content='on track'],
-      [data-content='completed'],
-      [data-content='complete'],
-      [data-content='successful'],
-      [data-content='failed'],
-      .alert-status:not([data-content='0']):not([data-content='']):not(:empty)
-    ) {
+    [data-content='low'],
+    [data-content='medium'],
+    [data-content='high'],
+    [data-content='unknown'],
+    [data-content='due'],
+    [data-content='overdue'],
+    [data-content='incomplete'],
+    [data-content='requires approval'],
+    [data-content='upcoming'],
+    [data-content='approval required'],
+    [data-content='warning'],
+    [data-content='verified'],
+    [data-content='not started'],
+    [data-content='to do'],
+    [data-content='on track'],
+    [data-content='completed'],
+    [data-content='complete'],
+    [data-content='successful'],
+    [data-content='failed'],
+    .alert-status:not([data-content='0']):not([data-content='']):not(:empty)
+  ) {
     position: relative;
     padding-left: 1.5rem;
 
@@ -322,11 +322,11 @@ table {
   }
 
   :is(
-      [data-content='requires approval'],
-      [data-content='approval required'],
-      [data-content='action required'],
-      [data-content='upcoming']
-    ):after {
+    [data-content='requires approval'],
+    [data-content='approval required'],
+    [data-content='action required'],
+    [data-content='upcoming']
+  ):after {
     content: '\f024';
     color: var(--colour-warning);
   }
@@ -337,12 +337,12 @@ table {
   }
 
   :is(
-      [data-content='manually verified'],
-      [data-content='verified'],
-      [data-content='completed'],
-      [data-content='complete'],
-      [data-content='successful']
-    ):after {
+    [data-content='manually verified'],
+    [data-content='verified'],
+    [data-content='completed'],
+    [data-content='complete'],
+    [data-content='successful']
+  ):after {
     content: '\f00c';
     font-weight: normal;
     color: var(--colour-complete);

package/assets/sass/components/word-count.component.scss

@@ -0,0 +1,26 @@
+@use '../_func.scss' as *;
+
+// #region word counter
+:host {
+  display: block;
+  max-width: var(--input-max-width, 50rem);
+}
+
+::slotted(span) {
+  position: relative;
+  display: block;
+}
+
+::slotted(span)::before {
+  display: inline-block;
+  //counter-reset: variable var(--char-count) var(--maxlength);
+  //counter-reset: variable2 var(--maxlength);
+  //content: attr(data-count) ' / ' var(--maxlength);
+
+  content: attr(data-count) ' / ' attr(data-max);
+  float: right;
+
+  margin: 0 0 1em 1em;
+}
+
+// #endregion

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

@@ -20,7 +20,7 @@ $darkMode: 'true' !default;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
     overflow: hidden;
 
-    @include dark-mode($darkMode) {
+    @container style(--theme: dark) {
       background-color: var(--colour-canvas-2);
       color: var(--colour-body);
 

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

@@ -46,7 +46,7 @@ $darkMode: 'true' !default;
     &[class*='fa-']:before {
       line-height: calc(var(--compact-size) - #{rem(4)});
 
-      @include dark-mode($darkMode) {
+      @container style(--theme: dark) {
         color: white;
       }
     }

package/assets/sass/elements/details.scss

@@ -40,22 +40,41 @@ $darkMode: 'true' !default;
     --border-radius: #{rem(8)} #{rem(8)} 0 0;
     --icon-top: #{rem(14)};
     --line-height: #{rem(24)};
+      --block-padding: #{rem(14)};
 
     *:not(iam-tabs) > &:not([open]) {
       padding-bottom: rem(42);
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      --inline-padding: #{rem(30)};
+    @include media-breakpoint-up(sm) {
+      --inline-padding: #{rem(14)};
+      --block-padding: #{rem(14)};
       --icon-top: #{rem(24)};
       --line-height: #{rem(24)};
+
+      summary {
+        &:has(.h2, h2, .h4, h4) {
+          --inline-padding: #{rem(22)};
+          --block-padding: #{rem(22)};
+        }
+      }
+
+      summary {
+        &:has(.h2, h2) {
+          --line-height: #{rem(52)};
+        }
+
+        &:has(.h4, h4) {
+          --line-height: #{rem(30)};
+        }
+      }
     }
 
     summary {
       border-bottom: 1px solid var(--colour-border);
-      padding-left: var(--inline-padding);
-      padding-right: calc(var(--inline-padding) + #{rem(24)} + #{rem(24)});
-      padding-block: rem(14) !important;
+      padding-left: 0;
+      padding-inline-end: calc(#{var(--inline-padding)} + #{rem(27)} + #{rem(12)});
+      padding-block: var(--block-padding) !important;
       position: relative;
       color: $headings-color;
 
@@ -82,7 +101,7 @@ $darkMode: 'true' !default;
           content: '\f055';
           position: absolute;
           font-size: rem(24);
-          top: calc((#{var(--line-height)} / 2) - #{rem(12)} + #{rem(14)});
+          top: calc((#{var(--line-height)} / 2) - #{rem(12)});
           right: var(--inline-padding);
           width: rem(24);
           height: rem(24);
@@ -91,6 +110,14 @@ $darkMode: 'true' !default;
           font-family: 'Font Awesome 6 Pro';
         }
       }
+
+      *:is(h4, .h4, h2, .h2):after {
+        top: calc((#{var(--line-height)} / 2) + #{var(--inline-padding)} - #{rem(14)});
+      }
+
+      .badge {
+        margin: 0 0 0 0.5rem;
+      }
     }
 
     &[open] summary {

package/assets/sass/elements/forms.scss

@@ -283,7 +283,6 @@ $optionalText: 'true' !default;
     }
 
     &:is(:focus, .focus):not(:disabled):not(:invalid) {
-      
       box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
     }
     // Add some height to date inputs on iOS
@@ -573,15 +572,19 @@ $optionalText: 'true' !default;
 
     .suffix
       ~ :is(
-        input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not([type='time']),
+        input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
+            [type='time']
+          ),
         textarea,
         output
       ),
     :is(
-        input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not([type='time']),
-        textarea,
-        output
-      ):has(~ .suffix) {
+      input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
+          [type='time']
+        ),
+      textarea,
+      output
+    ):has(~ .suffix) {
       order: 1;
 
       border-start-end-radius: 0 !important;
@@ -591,23 +594,6 @@ $optionalText: 'true' !default;
 
   // #endregion
 
-  // #region word counter
-
-  :is(input, textarea)[maxlength] + span {
-    position: relative;
-
-    &:before {
-      counter-reset: variable var(--char-count) var(--maxlength);
-      counter-reset: variable2 var(--maxlength);
-      content: attr(data-count) ' / ' counter(variable2);
-      float: right;
-
-      margin: 0 0 1em 1em;
-    }
-  }
-
-  // #endregion
-
   // #region Form validation
 
   .was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid]):not(.is-valid) + label,
@@ -1016,7 +1002,7 @@ $optionalText: 'true' !default;
 
   // #region Select
 
-  select:not(.btn) {
+  select:not(.select--minimal, .btn) {
     $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
 
     background:
@@ -1340,20 +1326,19 @@ $optionalText: 'true' !default;
   }
 
   .empty {
-
     position: absolute;
     bottom: 0.5rem;
     right: 3.5rem;
     margin: 0;
     aspect-ratio: 1 / 1;
-    
+
     width: 2rem;
     height: 2rem;
-    
+
     text-align: center;
     line-height: 1;
 
-    &:not(:hover,:focus){
+    &:not(:hover, :focus) {
       border-color: transparent;
       background-color: transparent;
     }
@@ -1370,14 +1355,16 @@ $optionalText: 'true' !default;
   }
 }
 
-.was-validated :is(iam-advanced-select, iam-search) label:has(:is(input:not([type=radio]):not([type=checkbox]), select)){
+.was-validated
+  :is(iam-advanced-select, iam-search)
+  label:has(:is(input:not([type='radio']):not([type='checkbox']), select)) {
   margin-bottom: 2.5rem;
 
   input {
-    background: none!important;
+    background: none !important;
   }
 
-  &:has(:invalid, .is-invalid) .hint-text { 
+  &:has(:invalid, .is-invalid) .hint-text {
     display: none;
   }
 }
@@ -1428,12 +1415,10 @@ $optionalText: 'true' !default;
       background: rgba(224, 224, 224, 1) !important;
       border-radius: 0.25rem !important;
     }
-
   }
 }
 
 iam-advanced-select datalist {
-  
   option {
     &.active {
       border-left: 4px solid var(--colour-info) !important;

package/assets/sass/elements/lists.scss

@@ -271,7 +271,7 @@ $darkMode: 'true' !default;
       background-color: var(--colour-success);
       border-color: var(--colour-success);
 
-      @include dark-mode($darkMode) {
+      @container style(--theme: dark) {
         background-color: var(--colour-complete);
         border-color: var(--colour-complete);
       }

package/assets/sass/elements/toggle-button.scss

@@ -9,6 +9,7 @@ $darkMode: 'true' !default;
   .toggle {
     --outline-width: 0.25rem !important;
     padding-left: 3.25rem !important;
+    max-width: fit-content !important;
   }
 
   .toggle:before {

package/assets/sass/foundations/reboot.scss

@@ -117,12 +117,19 @@ $darkMode: 'true' !default;
     color-scheme: light dark;
     @include var(background, --colour-canvas);
     @include var(font-family, --font-body);
-    @include var(color, --colour-body);
+
     width: 100%;
     line-height: 1.2;
     min-height: 100%;
     -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);
+    }
   }
 
   // #region scrollbars