@iamproperty/components 7.4.0 → 7.5.1--beta1

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

@@ -2,7 +2,7 @@
 
 $darkMode: 'true' !default;
 
-$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
+$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
 
 // #region Basic table stuff
 
@@ -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/table.global.scss

@@ -1,12 +1,15 @@
 @use '../_func.scss' as *;
 
+
 $darkMode: 'true' !default;
 
 @use './table-basic.global.scss' with (
   $darkMode: $darkMode
 );
 
-$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
+$selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
+
+@include display();
 
 // #region Tables are only stacked on mobile
 :is(#{$selector}):not(.table--fullwidth).table--cta {
@@ -16,6 +19,8 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     }
   }
 }
+
+
 // #endregion
 
 // #region As part of the iam-table component
@@ -115,7 +120,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     }
   }
 
-  &:has([type='checkbox']:checked) tr:has([type='checkbox']) {
+  &:has([type='checkbox']:checked) tr:has([type='checkbox']):not(:has(.tag)) {
     [type='checkbox'] {
       width: 100vw;
       height: 100%;
@@ -135,10 +140,10 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
     }
   }
 
-  tr:has([type='checkbox']:hover, [type='checkbox']:focus) {
+  tr:has([type='checkbox']:hover, [type='checkbox']:focus):not(:has(.tag)) {
     --row-bg: #eeeeee;
   }
-  tr:has([type='checkbox']:hover:checked, [type='checkbox']:focus:checked, [type='checkbox']:checked) {
+  tr:has([type='checkbox']:hover:checked, [type='checkbox']:focus:checked, [type='checkbox']:checked):not(:has(.tag)) {
     --row-bg: #e0e0e0;
   }
 }

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

@@ -1,4 +1,8 @@
 @use '../_func' as *;
+@use '../elements/links.scss';
+@use '../elements/buttons.scss';
+@use '../components/tabs.config.scss';
+
 
 :host {
   background: transparent;

package/assets/sass/components/tabs.config.scss

@@ -4,24 +4,251 @@ $layers: 'true' !default;
 $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;
 
-@include layer('components', $layers) {
+*:not(main):has(> iam-tabs) {
+  container-type: inline-size;
+}
+
+iam-tabs {
+  --colour-tab-underline: var(--colour-info);
+
+  details:not([open]) {
+    padding-bottom: 0;
+  }
+
   .tabs__dropdown {
     display: none;
+    width: fit-content;
   }
 
-  iam-tabs:is(.tabs--dropdown) {
+  &:is(.tabs--dropdown) {
     .tabs__dropdown {
       display: block;
     }
+
+    &::part(wrapper) {
+      display: none;
+    }
   }
 
   @container (min-width: 62em) {
-    iam-tabs:is(.tabs--dropdown-md) {
+    &:is(.tabs--dropdown) {
       .tabs__dropdown {
+        display: none;
+      }
+
+      &::part(wrapper) {
         display: block;
       }
     }
   }
+}
+
+iam-tabs::part(next-button) {
+  display: none;
+}
+
+iam-tabs.tabs--guided::part(next-button) {
+  @container (width > 62em) {
+    position: absolute;
+    top: rem(150);
+    right: 0;
+    display: block;
+  }
+}
+
+iam-tabs.tabs--guided::part(next-button):not(:hover) {
+  background: var(--colour-success);
+}
+
+.tabs:not(.admin-panel) {
+  position: relative;
+
+  .tabs__links__wrapper {
+    position: relative;
+    margin: 0 auto 2rem;
+
+    &:after {
+      content: '';
+      left: 50%;
+      position: relative;
+      height: 1px;
+      width: 100vw;
+      background-color: var(--colour-border);
+      transform: translate(-50%, 0);
+      display: block;
+      clear: both;
+    }
+  }
+}
+
+.tabs.admin-panel {
+  .tabs__links__wrapper {
+    &:after {
+      display: none;
+    }
+  }
+}
+
+.tabs:not(.admin-panel) .tabs__links {
+  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+}
+
+.tabs__links {
+  scroll-snap-type: x mandatory;
+  padding-bottom: 3px;
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  width: auto;
+  margin: 0 -1.5rem;
+  overflow-y: clip;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .link {
+    white-space: nowrap;
+    scroll-snap-align: start;
+    scroll-margin-left: var(--container-padding);
+  }
+
+  .link:not(.text-decoration-none):not(.btn) {
+    --is-current: 0;
+    font-weight: bold;
+    font-family: var(--font-heading);
+    font-size: rem(18);
+    cursor: pointer;
+    margin: 0;
+    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
+    display: inline-block;
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:last-child {
+      margin-inline-end: 0;
+    }
+
+    &:after {
+      position: absolute;
+      content: '';
+      bottom: 0;
+      left: 50%; // half way across
+      height: 3px;
+      width: 100%;
+      transform: translate(-50%, 0) scale(0, 0); // translate pulls this left so it's centered
+      background: var(--colour-tab-underline);
+      transition: transform 0.4s;
+    }
+
+    &:not(.disabled) {
+      &:hover:after,
+      &:focus:after,
+      &.focus:after {
+        transform: translate(-50%, 0) scale(0.6, 1);
+      }
+    }
+
+    &:not(.disabled) {
+      &:is([aria-pressed='true'], :active, .current):after {
+        transform: translate(-50%, 0) scale(1, 1);
+      }
+    }
+
+    &:is([aria-pressed='true'], .current) {
+      pointer-events: none;
+      outline: var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important;
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  .tabs__links {
+    .link:not(.text-decoration-none):not(.btn) {
+      padding: 2rem 2rem 0.5rem 2rem;
+    }
+  }
+
+  .tabs__links__wrapper {
+    margin: 0 auto 2.5rem;
+  }
+}
+
+// #region admin-panel links
+.admin-panel :is(.admin-panel__links, .tabs__links) {
+  padding: 0;
+  margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
 
-  // #endregion
+  border-top-left-radius: rem(8);
+  border-top-right-radius: rem(8);
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--colour-border);
+  overflow: hidden;
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+  &:after {
+    display: none;
+  }
+
+  @include media-breakpoint-up(sm, $mobileOnly) {
+    flex-direction: row;
+  }
+
+  .link:not(.text-decoration-none):not(.btn) {
+    margin: 0;
+    //margin-left: calc(var(--wrapper-padding) * -1);
+    padding: #{rem(16)} var(--padding-x);
+    width: 100%;
+    position: relative;
+    text-align: left;
+    flex-grow: 1;
+    --gradient-direction: -90deg;
+    background-color: var(--colour-success);
+
+    &:not([class*='bg-']) {
+      background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
+    }
+
+    &:is(.current, [aria-pressed='true']) {
+      color: var(--colour-primary-theme);
+    }
+
+    &:not(.current, [aria-pressed='true']) {
+      background: var(--colour-canvas-2) !important;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      margin: 0;
+
+      &:not(:first-child) {
+        border-left: 1px solid var(--colour-border) !important;
+      }
+    }
+  }
+
+  .link:is(.current, [aria-pressed='true']) {
+    pointer-events: none;
+  }
+}
+
+// #endregion
+@include media-breakpoint-up(sm, $mobileOnly) {
+  :host(.tabs--inline) .tabs__links {
+    margin: 0;
+    justify-content: center;
+  }
+
+  :host(.tabs--inline) .tabs__links__wrapper:after {
+    width: 100%;
+  }
 }

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);
 
@@ -34,7 +34,7 @@ $darkMode: 'true' !default;
       display: none;
     }
 
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):first-child {
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):not(.lead):first-child {
       --gradient-direction: -90deg !important;
       background-color: var(--colour-success);
 
@@ -49,8 +49,8 @@ $darkMode: 'true' !default;
       border-top-right-radius: rem(8);
     }
 
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child,
-    .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child,
+    .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead) {
       font-size: rem(18);
       line-height: rem(24);
       font-weight: bold;
@@ -91,14 +91,14 @@ $darkMode: 'true' !default;
       }
     }
 
-    :is(iam-table, .iam-table) {
+    :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax, .iam-table) {
       margin: 0 0 rem(32) 0;
       padding: 0;
       box-shadow: none;
       background: none;
     }
 
-    > *:last-child {
+    > *:not([class*="mb-"]):last-child {
       margin-bottom: 0 !important;
     }
 
@@ -119,7 +119,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child
       + :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
       padding-top: var(--padding-top);
       margin-top: calc(var(--padding-top) * -1);
@@ -140,7 +140,7 @@ $darkMode: 'true' !default;
       padding-bottom: var(--padding-bottom);
       margin-bottom: calc(var(--padding-bottom) * -1) !important;
 
-      > *:last-child {
+      > *:not([class*="mb-"]):last-child {
         margin-bottom: 0 !important;
       }
 
@@ -177,7 +177,7 @@ $darkMode: 'true' !default;
 
   // #region Has actionbar
   .admin-panel:has(iam-actionbar) {
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child {
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child {
       margin-bottom: 0;
     }
 
@@ -198,7 +198,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    > iam-table {
+    > :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax) {
       overflow: visible;
 
       &:first-child {
@@ -249,4 +249,32 @@ $darkMode: 'true' !default;
     }
   }
   // #endregion
+  .admin-panel__footer:last-child {
+    background-color: var(--wider-colour);
+    padding-top: var(--padding-top);
+    margin-inline: calc(var(--padding-x) * -1);
+    padding-inline: var(--padding-x);
+    padding-bottom: var(--padding-bottom);
+
+    &:has(strong:last-child){
+      display: flex;
+      align-items: end;
+
+      p {
+        padding-bottom: 0;
+        padding-inline-end: var(--padding-x);
+      }
+
+      strong {
+        white-space: nowrap;
+        margin-inline-start: auto;
+      }
+    }
+  }
+
+  .admin-panel__footer:not([class*="mb-"]):last-child {
+
+    margin-bottom: calc(var(--padding-bottom) * -1)!important;
+  }
+
 }

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/buttons--global.scss

@@ -13,7 +13,7 @@ $darkMode: 'true' !default;
 
   // #region reset
   button {
-    // stylelint-disable-next-line property-disallowed-list
+    
     border-radius: 0;
     text-transform: none;
     margin: 0; // 1
@@ -53,7 +53,7 @@ $darkMode: 'true' !default;
     --btn-line-height: #{rem(20)};
 
     display: inline-block;
-    font-weight: bold;
+    font-weight: 500;
     text-align: left;
     text-decoration: none;
     vertical-align: middle;
@@ -259,7 +259,7 @@ $darkMode: 'true' !default;
       display: block;
       max-width: 100% !important;
       outline: none;
-      font-weight: bold;
+      font-weight: 500;
       font-size: var(--btn-font-size) !important;
       line-height: var(--btn-line-height) !important;
 

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 {