@iamproperty/components 7.6.4--beta6 → 7.6.4--beta7

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

@@ -136,11 +136,11 @@ nav:has(iam-nav.nav--sticky) {
   left: 0;
   right: 0;
   z-index: 9999;
-  transition: transform 1s;
 
   iam-nav {
     position: fixed;
     outline: 2px solid #eeeeee;
+  transition: margin 1s;
   }
 }
 
@@ -148,6 +148,7 @@ nav:has(iam-nav.nav--sticky) {
   body:has(iam-nav.open:not(.nav--xs-sticky,.demo-open)) {
     max-height: 100vh;
     overflow: hidden;
+    margin-top: 0rem;
   }
 
   nav:has(iam-nav.nav--xs-sticky) {
@@ -156,7 +157,7 @@ nav:has(iam-nav.nav--sticky) {
     left: 0;
     right: 0;
     z-index: 9999;
-    transition: transform 1s;
+    transition: margin 1s;
 
     iam-nav {
       position: fixed;
@@ -164,7 +165,8 @@ nav:has(iam-nav.nav--sticky) {
   }
 
   body[data-direction='down'].past100 nav:has(.nav--xs-sticky) {
-    transform: translate(0, -110%);
+    
+  margin-top: -8rem;
   }
 }
 
@@ -175,8 +177,10 @@ 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) .nav--sticky{
+  //transform: translate(0, -100%);
+
+  margin-top: -8rem;
 }
 
 // #endregion

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

@@ -77,6 +77,9 @@
       max-height: none !important;
     }
 
+    ::slotted(*) {
+      margin-inline: 1.5rem;
+    }
     ::slotted(table) {
       overflow: visible !important;
       margin-inline: 1.5rem;

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

@@ -6,6 +6,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
 // #region Basic table stuff
 
+@layer components {
 :is(#{$selector}) {
   --hover-background: var(--colour-light);
   --row-bg: var(--colour-canvas-2);
@@ -89,16 +90,21 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
         --compact-size: 2rem;
 
         &:before {
+          --fa: '\f055'!important;
           font-family: 'Font Awesome 6 Pro';
-          content: '\f055';
+          display: block!important;
+
           font-weight: 300 !important;
           font-size: rem(28);
           line-height: var(--compact-size) !important;
         }
 
+        &[aria-expanded] {
+            --fa: '\f056'!important;
+        }
         &[aria-expanded] {
           &:before {
-            content: '\f056';
+            --fa: '\f056'!important;
             font-weight: 900 !important;
           }
         }
@@ -470,6 +476,33 @@ table {
     }
   }
 
+  td:not(.selectrow) input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
+    
+    &:before,
+    &:after {
+      top: 0 !important;
+      left: 0.25rem !important;
+      --border-radius: 0.25rem;
+    }
+  }
+
+  td:not(.selectrow):has(label:not(.radio--tick) input:is([type='radio'], [type='checkbox'])) + td {
+
+    border-top: 0;
+  }
+  td:not(.selectrow) label:not(.radio--tick):has(input:is([type='radio'], [type='checkbox'])) {
+    
+    padding-inline: 0;
+    margin-right: 0;
+
+    &:before,
+    &:after {
+      top: 0 !important;
+      left: 0.25rem !important;
+      --border-radius: 0.25rem;
+    }
+  }
+
   &:has([type='checkbox']:checked) table{
     overflow: hidden;
   }
@@ -531,4 +564,93 @@ table {
     }
   }
 }
+}
+// #endregion
+
+
+// #region Highlighted row
+:is(#{$selector}):not(.table--fullwidth) {
+
+
+  tr:has(td label input:is([type="checkbox"])):has(+ .tr--highlight) td {
+
+    padding-bottom: 1.5rem;
+  }
+
+  .tr--highlight {
+    --row-bg: var(--colour-success);
+    --padding-block: 0.5rem;
+
+    td:has(i) {
+      color: var(--colour-primary-theme);
+      padding-left: 0.5rem;
+      font-style: italic;
+      position: relative;
+      padding-left: 2.5rem;
+      padding-right: 2rem;
+      padding-block: var(--padding-block);
+
+      i {
+        position: absolute;
+        top: 0.5rem;
+        left: 1rem;
+      }
+    }
+  }
+
+  tr:has(td label input:is([type="checkbox"])) + .tr--highlight td:has(i){
+
+    padding-left: 4.5rem;
+    
+      i {
+        left: 3rem;
+      }
+  }
+
+
+  tr:has(+ .tr--highlight) {
+    border-bottom: 0;
+  }
+
+  @container (width < 23.4375em) {
+    .tr--highlight {
+      display: none;
+    }
+    tr[data-highlight]:before {
+
+      font-family: 'Font Awesome 6 Pro';
+      content: '\f005';
+      font-weight: bold;
+      position: absolute;
+      left: 1rem;
+      z-index: 99;
+      top: anchor(--my-anchor top);
+      left: anchor(--my-anchor left);
+      margin-top: 1rem;
+      margin-left: 2rem;
+      position-anchor: --my-anchor;
+      color: var(--colour-primary-theme);
+    }
+    tr[data-highlight]:after {
+      content: attr(data-highlight);
+      background: var(--colour-success);
+      color: var(--colour-primary-theme);
+      display: block;
+      width: calc(100% + 4rem);
+      margin-top: 0.5rem;
+      margin-inline: -2rem;
+      padding-inline: 2rem;
+      margin-bottom: -2rem;
+      padding-block: 1rem;
+
+      border-bottom-left-radius: 0.5rem;
+      border-bottom-right-radius: 0.5rem;
+
+      font-style: italic;
+      padding-left: 3.5rem;
+
+      anchor-name: --my-anchor;
+    }
+  }
+}
 // #endregion

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

@@ -19,6 +19,159 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 }
 
 
+:is(#{$selector}) iam-actionbar {
+  margin: 0 1.5rem 1rem 1.5rem;
+
+  @container (width < 23.4375em) {
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    border-radius: 0.5rem;
+  }
+}
+:is(#{$selector}).table--fullwidth:has(iam-actionbar) {
+  padding-top: 0;
+}
+:is(#{$selector}).table--fullwidth iam-actionbar {
+  margin: -2rem -2rem 2rem -2rem;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+:is(#{$selector}).table--fullwidth iam-actionbar:has(+ table input:checked) {
+  margin: -2rem -2rem 2rem -2rem;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+// Actionbar
+.actionbar__sticky-wrapper {
+  container-type: inline-size;
+
+  @container (width < 23.4375em) {
+    padding: 0 !important;
+  }
+}
+
+@container (width < 23.4375em) {
+  :is(#{$selector}):is(.actionbar__sticky-wrapper) > .actionbar__sticky {
+    display: block;
+    position: sticky;
+    left: 0;
+    top: calc(var(--sticky-padding) + #{rem(16)});
+    z-index: var(--index-menu);
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: calc(100vh - #{rem(68 + 24 + 16)});
+      pointer-events: none;
+    }
+
+    & + * {
+      margin-top: calc(-100vh - -6.75rem);
+    }
+  }
+
+  :is(#{$selector}):is(.actionbar__sticky) > iam-actionbar {
+    pointer-events: all !important;
+    display: block;
+    border: none;
+    background: var(--colour-canvas-2);
+    //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    border-radius: 0.5rem;
+    margin-bottom: rem(24);
+  }
+}
+
+@container (width < 23.4375em) {
+  :is(#{$selector}).table--fullwidth iam-actionbar,
+  :is(#{$selector}) iam-actionbar {
+    margin-left: -2rem;
+    margin-right: -2rem;
+    margin-top: -2rem;
+    margin-bottom: 2rem;
+  }
+}
+// #endregion
+
+// #region Table with actionbar
+
+:is(#{$selector}) {
+  input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
+    padding-left: 0 !important;
+    margin: 0 !important;
+
+    &:before,
+    &:after {
+      top: 0.75rem !important;
+      left: 0.25rem !important;
+      --border-radius: 0.25rem;
+    }
+  }
+
+  &:has([type='checkbox']:checked) tr:has([type='checkbox']) {
+    .td--fixed [type='checkbox'] {
+      width: 100vw;
+      height: 100%;
+      max-height: var(--row-height);
+      max-width: 100vw;
+      cursor: pointer;
+      pointer-events: all;
+      top: auto;
+      margin: 0;
+      margin-top: 0rem;
+    }
+  }
+
+  @container (width > 23.4375em) {
+    tr:has([type='checkbox']:checked) {
+      height: calc(4.625rem - 2px);
+    }
+  }
+
+  tr:has([type='checkbox']:hover, [type='checkbox']:focus) {
+    --row-bg: #eeeeee;
+  }
+  tr:has([type='checkbox']:hover:checked, [type='checkbox']:focus:checked, [type='checkbox']:checked) {
+    --row-bg: #e0e0e0;
+  }
+}
+
+@container (width < 23.4375em) {
+  :is(#{$selector}) {
+    iam-actionbar {
+
+    }
+    .actionbar__sticky + * {
+      margin-top: 0 !important;
+    }
+  }
+
+  :is(#{$selector}) {
+    input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
+      padding-left: 0 !important;
+      margin: 0 !important;
+      min-height: 2rem;
+
+      &:before,
+      &:after {
+        top: 0.25rem !important;
+        left: 0 !important;
+      }
+    }
+
+    &:has([type='checkbox']:checked) tr:has([type='checkbox']) {
+      [type='checkbox'] {
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        max-width: 100%;
+        margin-top: -2rem;
+      }
+    }
+  }
+}
 // #endregion
 
 // #region Expandable tables

package/assets/sass/elements/button__group.css

@@ -8,6 +8,17 @@
     reading-flow: source-order;
     margin-bottom: 1.5rem;
 
+    .btn-compact {
+
+      max-width: fit-content;
+      margin-inline: auto;
+    }
+
+  }
+  :where(.btn__group, iam-modal) {
+    
+    reading-flow: source-order;
+    
     .btn {
       margin-inline-end: 0;
       width: 100%;
@@ -15,6 +26,10 @@
       text-align: center;
       white-space: normal;
       margin: 0;
+
+      &:not(:last-child) {
+        margin-right: 0;
+      }
     }
 
     .btn-tertiary {
@@ -30,14 +45,15 @@
     .btn-primary {
       order: 1;
       reading-order: 1;
-    }
-
-    .btn-compact {
+      margin: 0;
 
-      max-width: fit-content;
-      margin-inline: auto;
+      &:not(:last-child) {
+        
+        margin: 0;
+      }
     }
   }
+
   :is(iam-form,form) .btn__group{
     padding-top: 1rem;
   }
@@ -48,35 +64,60 @@
       gap: var(--gap);
       flex-wrap: wrap;
 
-      .btn {
-          
-        max-width: fit-content;
-        white-space: nowrap;
-        margin-block: auto;
-      }
-
-      
       .btn-tertiary {
         max-width: fit-content;
         margin-inline: 0;
         margin-block: auto;
         order: 1;
-        reading-order: 1;
       }
       .btn-secondary {
         order: 2;
-        reading-order: 2;
       }
       .btn-primary {
         order: 3;
-        reading-order: 3;
       }
+
       .btn-compact {
         
         margin-inline: 0;
         margin-block: auto;
       }
     }
+    :where(iam-modal, .btn__group) {
+
+      .btn {
+        max-width: fit-content;
+        white-space: nowrap;
+        margin-block: auto;
+      }
+    }
+    .btn__group {
+      
+      .btn-tertiary {
+        reading-order: 1;
+      }
+      .btn-secondary {
+        reading-order: 2;
+      }
+      .btn-primary {
+        reading-order: 3;
+      }
+    }
+    iam-modal {
+      
+      .btn-tertiary {
+        reading-order: 3;
+        order: 1;
+      }
+      .btn-secondary {
+        order: 2;
+        reading-order: 2;
+      }
+      .btn-primary {
+        order: 3;
+        reading-order: 1;
+      }
+    }
     .btn__group.text-end {
       justify-content: flex-end;
     }

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

@@ -21,8 +21,8 @@
     min-height: var(--compact-size) !important;
     max-height: var(--compact-size) !important;
 
-        align-content: center;
-        line-height: 1 !important;
+    align-content: center;
+    line-height: 1 !important;
 
     text-indent: -500px;
     overflow: hidden;

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

@@ -15,7 +15,7 @@
       content: '';
 
       display: inline-block;
-      margin-right: -0.5em;
+      margin-right: 0.25em;
       margin-left: 1em;
 
       height: 0.8em;

package/assets/sass/elements/label.scss

@@ -13,5 +13,9 @@
       
       margin-top: 0.25rem!important;
     }
+
+    &.label--sm {
+      --input-max-width: 15rem;
+    }
   }
 }

package/assets/sass/elements/progress.scss

@@ -46,11 +46,11 @@
 
   progress::-webkit-progress-bar {
     background-color: var(--colour-light);
-    border-radius: rem(5);
+    border-radius: var(--border-radius, #{rem(5)});
   }
   progress::-webkit-progress-value {
     background-color: var(--colour, var(--colour-info));
-    border-radius: rem(5);
+    border-radius: var(--border-radius, #{rem(5)});
   }
 
   // #region inline progress