@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

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

@@ -0,0 +1,5 @@
+@use '../_func' as *;
+
+:host {
+  background: transparent;
+}

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

@@ -0,0 +1,27 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('components', $layers) {
+  .tabs__dropdown {
+    display: none;
+  }
+
+  iam-tabs:is(.tabs--dropdown) {
+    .tabs__dropdown {
+      display: block;
+    }
+  }
+
+  @container (min-width: 62em) {
+    iam-tabs:is(.tabs--dropdown-md) {
+      .tabs__dropdown {
+        display: block;
+      }
+    }
+  }
+
+  // #endregion
+}

package/assets/sass/components/tabs.scss

@@ -1,13 +1,46 @@
 @use '../_func' as *;
 
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
 *: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;
+  }
+
+  &:is(.tabs--dropdown) {
+    .tabs__dropdown {
+      display: block;
+    }
+
+    &::part(wrapper) {
+      display: none;
+    }
+  }
+
+  @container (min-width: 62em) {
+    &:is(.tabs--dropdown) {
+      .tabs__dropdown {
+        display: none;
+      }
+
+      &::part(wrapper) {
+        display: block;
+      }
+    }
+  }
 }
 
 iam-tabs::part(next-button) {
@@ -22,6 +55,7 @@ iam-tabs.tabs--guided::part(next-button) {
     display: block;
   }
 }
+
 iam-tabs.tabs--guided::part(next-button):not(:hover) {
   background: var(--colour-success);
 }
@@ -108,7 +142,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
       height: 3px;
       width: 100%;
       transform: translate(-50%, 0) scale(0, 0); // translate pulls this left so it's centered
-      background: var(--colour-info);
+      background: var(--colour-tab-underline);
       transition: transform 0.4s;
     }
 
@@ -162,7 +196,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     display: none;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     flex-direction: row;
   }
 
@@ -193,7 +227,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
       display: none;
     }
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       margin: 0;
 
       &:not(:first-child) {
@@ -206,12 +240,14 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     pointer-events: none;
   }
 }
+
 // #endregion
-@include media-breakpoint-up(sm) {
+@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/testimonial.scss

@@ -4,7 +4,7 @@
   --testimonial-padding: 1rem;
   --testimonial-spacing: 1rem;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     --testimonial-padding: 4rem;
     --testimonial-spacing: 2rem;
   }
@@ -32,10 +32,10 @@
     touch-action: pan-x;
     height: rem(230);
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       height: rem(340);
     }
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       min-height: 100%;
       scroll-snap-type: y mandatory;
       flex-direction: column;
@@ -61,7 +61,7 @@
     left: 50%;
     transform: translate(-50%, 50%);
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       left: auto;
       bottom: auto;
       right: 0;
@@ -75,10 +75,10 @@
   h2 {
     padding: 2rem var(--testimonial-padding) 0 var(--testimonial-padding);
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       padding-top: 3rem;
     }
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       padding-top: 9rem;
     }
   }
@@ -88,7 +88,7 @@
     margin: 0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
     position: relative;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       --display-none: block;
 
       blockquote:not(.largest) {

package/assets/sass/components/timeline.scss

@@ -23,7 +23,7 @@
   .timeline__container:not(.timeline--simple) & {
     align-items: center;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       --img-order: 0;
       --circle-pos: 50%;
       --line-length: 50%;

package/assets/sass/core.scss

@@ -1,7 +1,16 @@
 @charset "UTF-8";
 
-@use '_fonts';
-@use '_corefiles.scss';
-@import '_utilities';
+$root: ':root' !default;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+$optionalText: 'true' !default;
 
-@import '_utility-mixins';
+@use '_fonts';
+@use '_corefiles.scss' with (
+  $root: $root,
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode,
+  $optionalText: $optionalText
+);

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

@@ -1,139 +1,102 @@
 @use '../_func' as *;
 
-.admin-panel {
-  --padding-x: #{rem(24)};
-  --padding-top: #{rem(16)};
-  --padding-bottom: #{rem(16)};
-  --mh-modifier: #{rem(56 + 16)};
-  --mh-padding-inline: var(--padding-x);
-  display: block;
-  padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-  background-color: var(--colour-canvas-2);
-  border-radius: rem(8);
-  margin-bottom: rem(24);
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-  overflow: hidden;
-
-  @include dark-mode() {
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  .admin-panel {
+    --padding-x: #{rem(24)};
+    --padding-top: #{rem(16)};
+    --padding-bottom: #{rem(16)};
+    --mh-modifier: #{rem(56 + 16)};
+    --mh-padding-inline: var(--padding-x);
+    display: block;
+    padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     background-color: var(--colour-canvas-2);
-    color: var(--colour-body);
-
-    .bg-white {
-      background-color: transparent !important;
-      color: var(--white) !important;
+    border-radius: rem(8);
+    margin-bottom: rem(24);
+    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+    overflow: hidden;
+
+    @include dark-mode($darkMode) {
+      background-color: var(--colour-canvas-2);
+      color: var(--colour-body);
+
+      .bg-white {
+        background-color: transparent !important;
+        color: var(--white) !important;
+      }
     }
-  }
-
-  &:empty {
-    display: none;
-  }
-
-  > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):first-child {
-    --gradient-direction: -90deg !important;
-    background-color: var(--colour-success);
 
-    &:not([class*='bg-']) {
-      color: var(--colour-primary-theme);
-      background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
+    &:empty {
+      display: none;
     }
 
-    margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
-    display: block;
-    border-top-left-radius: rem(8);
-    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) {
-    font-size: rem(18);
-    line-height: rem(24);
-    font-weight: bold;
-    padding: rem(16) rem(24);
-  }
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):first-child {
+      --gradient-direction: -90deg !important;
+      background-color: var(--colour-success);
 
-  > :is(.admin-panel__heading):first-child {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    align-items: center;
-    padding: rem(16) rem(24);
+      &:not([class*='bg-']) {
+        color: var(--colour-primary-theme);
+        background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
+      }
 
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
-      padding: 0;
-      margin-inline-end: auto;
+      margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
+      display: block;
+      border-top-left-radius: rem(8);
+      border-top-right-radius: rem(8);
     }
 
-    .btn {
-      --btn-margin: 0;
-      margin-bottom: 0;
+    > :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) {
+      font-size: rem(18);
+      line-height: rem(24);
+      font-weight: bold;
+      padding: rem(16) rem(24);
     }
 
-    .dialog__wrapper + .btn {
-      --btn-margin: 0.25rem;
-      margin-inline-end: 0;
-    }
+    > :is(.admin-panel__heading):first-child {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: center;
+      padding: rem(16) rem(24);
 
-    @media (prefers-color-scheme: light) {
-      .btn-action,
-      .dialog__wrapper {
-        --colour-canvas-2: #ffffff;
-        --colour-heading: var(--colour-primary);
-        --colour-btn-action-hover-bg: var(--colour-light);
-        --colour-btn-hover: var(--colour-primary);
-        --colour-border: #d8d8d8;
+      > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
+        padding: 0;
+        margin-inline-end: auto;
       }
-    }
-  }
 
-  :is(iam-table, .iam-table) {
-    margin: 0 0 rem(32) 0;
-    padding: 0;
-    box-shadow: none;
-    background: none;
-  }
-
-  > *:last-child {
-    margin-bottom: 0 !important;
-  }
-
-  > *:is(p):last-child {
-    padding-bottom: 0 !important;
-  }
-
-  p {
-    max-width: 100%;
-    padding-bottom: rem(24);
-  }
+      .btn {
+        --btn-margin: 0;
+        margin-bottom: 0;
+      }
 
-  > :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) {
-    overflow: auto;
+      .dialog__wrapper + .btn {
+        --btn-margin: 0.25rem;
+        margin-inline-end: 0;
+      }
 
-    &:before {
-      top: 100% !important;
+      @media (prefers-color-scheme: light) {
+        .btn-action,
+        .dialog__wrapper {
+          --colour-canvas-2: #ffffff;
+          --colour-heading: var(--colour-primary);
+          --colour-btn-action-hover-bg: var(--colour-light);
+          --colour-btn-hover: var(--colour-primary);
+          --colour-border: #d8d8d8;
+        }
+      }
     }
-  }
-
-  > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):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);
-  }
 
-  > :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
-    ):last-child {
-    padding-bottom: var(--padding-bottom);
-    margin-bottom: calc(var(--padding-bottom) * -1) !important;
+    :is(iam-table, .iam-table) {
+      margin: 0 0 rem(32) 0;
+      padding: 0;
+      box-shadow: none;
+      background: none;
+    }
 
     > *:last-child {
       margin-bottom: 0 !important;
@@ -142,97 +105,148 @@
     > *:is(p):last-child {
       padding-bottom: 0 !important;
     }
-  }
 
-  > iam-pagination {
-    margin-top: -1rem;
-  }
+    p {
+      max-width: 100%;
+      padding-bottom: rem(24);
+    }
 
-  &:has(.mh-fluid) {
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-}
+    > :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) {
+      overflow: auto;
 
-[class*='col'].admin-panel:first-child:last-child:not(
-    :has(.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)
-  ) {
-  min-height: calc(100% - #{rem(24)});
-}
+      &:before {
+        top: 100% !important;
+      }
+    }
 
-// #region Has actionbar
-.admin-panel:has(iam-actionbar) {
-  > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child {
-    margin-bottom: 0;
-  }
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):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);
+    }
 
-  iam-actionbar {
-    background: var(--colour-canvas);
+    > :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
+      ):last-child {
+      padding-bottom: var(--padding-bottom);
+      margin-bottom: calc(var(--padding-bottom) * -1) !important;
+
+      > *:last-child {
+        margin-bottom: 0 !important;
+      }
 
-    @include light-mode {
-      background: #eeeeee;
+      > *:is(p):last-child {
+        padding-bottom: 0 !important;
+      }
     }
 
-    margin-inline: calc(var(--padding-x) * -1);
-    margin-bottom: var(--padding-top);
+    > iam-pagination {
+      margin-top: -1rem;
+    }
 
-    &:first-child {
-      margin-top: calc(var(--padding-top) * -1);
+    &:has(.mh-fluid) {
+      max-height: 100%;
+      display: flex;
+      flex-direction: column;
     }
-    &:not(:first-child) {
-      border-radius: 0;
+
+    &.grid {
+      display: grid !important;
+      grid-template-columns: subgrid !important;
+
+      > *:not(:first-child) {
+        grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+      }
     }
   }
 
-  > iam-table {
-    overflow: visible;
+  [class*='col'].admin-panel:first-child:last-child:not(
+      :has(.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)
+    ) {
+    min-height: calc(100% - #{rem(24)});
+  }
 
-    &:first-child {
-      margin-top: calc(var(--padding-top) * -1);
+  // #region Has actionbar
+  .admin-panel:has(iam-actionbar) {
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child {
+      margin-bottom: 0;
     }
 
     iam-actionbar {
-      margin-top: 0 !important;
-      border-radius: 0;
-      box-shadow: none;
+      background: var(--colour-canvas);
+      margin-inline: calc(var(--padding-x) * -1);
+      margin-bottom: var(--padding-top);
+
+      @include light-mode($darkMode) {
+        background: #eeeeee;
+      }
+
+      &:first-child {
+        margin-top: calc(var(--padding-top) * -1);
+      }
+      &:not(:first-child) {
+        border-radius: 0;
+      }
     }
-  }
-}
-// #endregion
-
-// #region Admin panel as details
-details.admin-panel {
-  summary:after {
-    content: '\f077';
-    font-weight: bold;
-    margin-left: 0;
-    height: 2rem;
-    width: 2rem;
-    text-align: center;
-    line-height: 2rem;
-    margin-right: -0.5rem;
-  }
 
-  summary:not(:has(.btn:hover)):hover:after {
-    background: var(--colour-light);
-    border-radius: 50%;
-  }
-  summary:not(:has(.btn:hover)):active:after {
-    background: var(--colour-light);
-    filter: brightness(85%);
-    border-radius: 50%;
+    > iam-table {
+      overflow: visible;
+
+      &:first-child {
+        margin-top: calc(var(--padding-top) * -1);
+      }
+
+      iam-actionbar {
+        margin-top: 0 !important;
+        border-radius: 0;
+        box-shadow: none;
+      }
+    }
   }
-}
-details.admin-panel:not([open]) {
-  padding-bottom: 0;
+  // #endregion
+
+  // #region Admin panel as details
+  details.admin-panel {
+    summary:after {
+      content: '\f077';
+      font-weight: bold;
+      margin-left: 0;
+      height: 2rem;
+      width: 2rem;
+      text-align: center;
+      line-height: 2rem;
+      margin-right: -0.5rem;
+    }
 
-  summary:first-child {
-    margin-bottom: 0;
+    summary:not(:has(.btn:hover)):hover:after {
+      background: var(--colour-light);
+      border-radius: 50%;
+    }
+    summary:not(:has(.btn:hover)):active:after {
+      background: var(--colour-light);
+      filter: brightness(85%);
+      border-radius: 50%;
+    }
   }
+  details.admin-panel:not([open]) {
+    padding-bottom: 0;
 
-  summary:after {
-    content: '\f078';
+    summary:first-child {
+      margin-bottom: 0;
+    }
+
+    summary:after {
+      content: '\f078';
+    }
   }
+  // #endregion
 }
-// #endregion