@iamproperty/components 7.6.4--beta8 → 7.7.1--beta1

package/assets/sass/_grid.scss

@@ -202,9 +202,20 @@ $breakpoints: (
   // #endregion
 
   // #region Grid utility classes
-  .grid:not(.admin-panel) {
+  .grid {
     display: grid !important;
     grid-template-columns: subgrid !important;
+    
+    > * {
+      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+    }
+  }
+  .sub-grid {
+
+    display: grid !important;
+    grid-template-rows: auto !important;
+    grid-template-columns: [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end] !important;
+    column-gap: var(--gap) !important;
 
     > * {
       grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);

package/assets/sass/_utilities.scss

@@ -3,9 +3,9 @@
 
 @use './utilities/font-awesome-iso-fallbacks';
 
-@use './utilities/clearfix.scss';
-@use './utilities/visually-hidden.scss';
-@use './utilities/text-truncate.scss';
+@use './utilities/clearfix';
+@use './utilities/visually-hidden';
+@use './utilities/text-truncate';
 @use './utilities/ratio';
 @use './utilities/fixed';
 @use './utilities/sticky';
@@ -32,3 +32,4 @@
 @use './utilities/rounded';
 @use './utilities/visible';
 @use './utilities/columns';
+@use './utilities/shadow';

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

@@ -1,15 +1,15 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
-@use '../elements/prefix.scss' as *;
-@use '../elements/forms.scss' as *;
-@use '../elements/buttons.scss' as *;
-@use '../elements/badge-tag.scss' as *;
-@use '../elements/dialog.scss' as *;
-@use '../elements/popover.scss' as *;
+@use '../elements/prefix' as *;
+@use '../elements/forms' as *;
+@use '../elements/buttons' as *;
+@use '../elements/badge-tag' as *;
+@use '../elements/dialog' as *;
+@use '../elements/popover' as *;
 
-@use '../utilities/margins.scss' as *;
-@use '../utilities/visually-hidden.scss' as *;
-@use '../utilities/display.scss' as *;
+@use '../utilities/margins' as *;
+@use '../utilities/visually-hidden' as *;
+@use '../utilities/display' as *;
 
 :host {
   background-color: #fcfcfc;
@@ -18,7 +18,7 @@
 .actionbar__wrapper {
   position: relative;
   z-index: 10;
-  height: rem(68);
+  height: 4.25rem; /* 68 */
   container-type: inline-size;
 }
 
@@ -76,13 +76,13 @@ slot[name='selectall'] {
 }
 
 :is(.actionbar, .actionbar--selected, .actionbar--search) {
-  border-top-left-radius: var(--actionbar-radius, #{rem(10)});
-  border-top-right-radius: var(--actionbar-radius, #{rem(10)});
+  border-top-left-radius: var(--actionbar-radius, 0.625rem);
+  border-top-right-radius: var(--actionbar-radius, 0.625rem);
   padding: 0 1rem;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
-  height: rem(68);
+  height: 4.25rem; /* 68 */
   inset: 0;
 
   @supports selector(:has(*)) {
@@ -205,17 +205,17 @@ slot[name='selectall'] {
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
-  width: rem(210);
+  width: 13.125rem; /* 210 */
 
   overflow: visible;
   position: relative;
 
   @media screen and (min-width: 36em) {
-    width: rem(450);
+    width: 28.125rem; /* (450) */
   }
 
   @media screen and (min-width: 62em) {
-    width: rem(750);
+    width: 46.875rem; /* (750) */
   }
 
   .body {
@@ -224,19 +224,19 @@ slot[name='selectall'] {
 }
 
 :host([data-large-safe-area]) .safe-area {
-  width: rem(260);
+  width: 16.25rem; /* (260) */
 
   @media screen and (min-width: 36em) {
-    width: rem(620);
+    width: 38.75rem; /*(620) */
   }
 
   @media screen and (min-width: 62em) {
-    width: rem(1048);
+    width: 65.5rem; /* (1048) */
   }
 }
 
 :host([data-switchviews]) .safe-area {
-  width: rem(144);
+  width: 9rem; /* (144) */
 }
 // #endregion
 
@@ -271,12 +271,12 @@ slot[name='selectall'] {
 }
 
 .show .search-wrapper {
-  width: calc(100% - #{rem(44 + 8)});
-  max-width: rem(350) !important;
+  width: calc(100% - 3.25rem); /* 44 + 8 */
+  max-width: 21.875rem!important; /* (350) */
   margin: 0 !important;
 
   @media screen and (min-width: 62em) {
-    max-width: rem(450) !important;
+    max-width: 28.125rem!important; /* (450) */
   }
 
   input {
@@ -293,7 +293,7 @@ slot[name='selectall'] {
     max-height: 2.5rem !important;
     min-width: 2.5rem !important;
     max-width: 2.5rem !important;
-    line-height: rem(40 - 8 - 8) !important;
+    line-height: 1.5rem!important; /* 40 - 8 - 8 */
     pointer-events: all !important;
   }
   .empty {

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

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 
 
@@ -7,8 +7,8 @@ iam-actionbar {
   --actionbar-radius: 0;
   background-color: #fcfcfc;
   display: block;
-  border-top-left-radius: rem(10);
-  border-top-right-radius: rem(10);
+  border-top-left-radius: 0.625rem; /* 10 */
+  border-top-right-radius: 0.625rem; /* 10 */
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--colour-canvas);
@@ -38,7 +38,7 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
   }
 
   @media screen and (min-width: 62em) {
-    padding-inline: calc(50% - #{rem(556)} - 2rem);
+    padding-inline: calc(50% - 34.75rem - 2rem); /* 556px */
   }
 }
 // #endregion

package/assets/sass/components/address-lookup.component.scss

@@ -1,11 +1,11 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
-@use '../elements/forms.scss' as *;
-@use '../elements/prefix.scss' as *;
-@use '../elements/buttons.scss' as *;
-@use '../elements/links.scss' as *;
+@use '../elements/forms' as *;
+@use '../elements/prefix' as *;
+@use '../elements/buttons' as *;
+@use '../elements/links' as *;
 
-@use '../utilities/margins.scss' as *;
+@use '../utilities/margins' as *;
 
 *,
 *::before,
@@ -76,7 +76,7 @@ input[name='postcode'] {
 .pre-filled {
   background-color: var(--colour-light);
   border-radius: 1rem;
-  max-width: rem(490);
+  max-width: 30.625rem; /* (490) */
 }
 
 .pre-filled .title:empty {

package/assets/sass/components/applied-filters.scss

@@ -1,5 +1,5 @@
-@use '../_func.scss' as *;
-@use '../elements/badge-tag.scss' as *;
+@use '../_func' as *;
+@use '../elements/badge-tag' as *;
 
 .applied-filters:not(:empty) {
   padding: 1px 1px 1rem 1px;

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

@@ -1,6 +1,6 @@
-@use '../_func.scss' as *;
-@use 'charts.module.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../_func' as *;
+@use 'charts.module' as *;
+@use '../elements/buttons' as *;
 
 // #region Bar chart (Horizontal)
 :host(.chart--horizontal) .chart__outer {
@@ -275,17 +275,17 @@
 }
 
 :host(.chart--fit-content:not(.chart--horizontal).chart--no-scale) {
-  --fc-group-width: #{rem(22)};
+  --fc-group-width: 1.375rem; /* 22 */
   --fc-value-width: 1.5rem;
 
   table {
-    height: var(--chart-height-lg, #{rem(120)});
+    height: var(--chart-height-lg, 7.5rem); /* 120 */
   }
 }
 
 .chart__wrapper {
   @container (min-width: 36em) {
-    --fc-group-width: #{rem(22)};
+    --fc-group-width: 1.375rem; /* 22 */
     --fc-value-width: 1.5rem;
   }
 }

package/assets/sass/components/bento-grid.component.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 *,
 *::before,
@@ -24,7 +24,7 @@
 
   display: block;
   width: 100%;
-  min-height: rem(200);
+  min-height: 12.5rem; /* 200 */
 }
 
 @container (width > 54em) {

package/assets/sass/components/bento-grid.global.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 iam-bento-grid {
   details {
@@ -48,7 +48,7 @@ iam-bento-grid {
           margin-left: 0.5em;
           line-height: 1em;
           font-size: 1em;
-          font-family: 'Font Awesome 6 Pro';
+          font-family: 'Font Awesome 7 Pro';
         }
       }
 
@@ -63,7 +63,7 @@ iam-bento-grid {
         line-height: 1em;
         font-size: 0.5em;
 
-        font-family: 'Font Awesome 6 Pro';
+        font-family: 'Font Awesome 7 Pro';
         font-weight: 300;
       }
 

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

@@ -46,7 +46,7 @@
 
 [class*='fa-']:before {
   content: var(--fa);
-  font-family: 'Font Awesome 6 Pro';
+  font-family: 'Font Awesome 7 Pro';
   line-height: 1em;
 }
 
@@ -185,7 +185,7 @@ div:has(> select) #view {
 .calendar__datepicker {
   display: inline-block;
   position: relative;
-  margin-bottom: rem(9);
+  margin-bottom: 0.5625rem; /* 9 */
   //margin-right: auto;
 
   input {
@@ -208,7 +208,7 @@ div:has(> select) #view {
 
 .calendar__title {
   display: inline-block;
-  line-height: rem(36);
+  line-height: 2.25rem; /* 36 */
   margin-bottom: 0;
   color: var(--colour-primary);
   pointer-events: none;
@@ -291,7 +291,7 @@ hr {
 
   select:has(option[value='month']:checked) ~ .tag.tag--toggle {
     display: inline-block;
-    margin-bottom: rem(9);
+    margin-bottom: 0.5625rem; /* 9 */
     margin-right: 0;
     line-height: 2rem;
     order: 1;
@@ -352,7 +352,7 @@ hr {
   --columnHeadingLineHeight: 1.5rem;
   --columnHeadingFontWeight: bold;
 
-  --alldayHeight: #{rem(28)};
+  --alldayHeight: 1.75rem; /* 28 */
 
   background-color: var(--colour-canvas);
 }
@@ -394,7 +394,7 @@ time.column-header {
   width: 1.25rem;
   height: 1.25rem;
   line-height: 1.25rem;
-  margin-top: rem(2);
+  margin-top: 0.125rem; /* 2 */
   text-align: left;
   border-radius: 50%;
   display: inline-block;
@@ -702,7 +702,7 @@ time.column-header {
   margin-bottom: 2rem;
 
   @container (min-width: 36em) {
-    --side-panel-width: #{rem(72)};
+    --side-panel-width: 4.5rem; /* 72 */
   }
 
   #week-view-corner {
@@ -802,7 +802,7 @@ time.column-header {
 
     > tbody > tr > th,
     > tbody > tr > td {
-      height: rem(72);
+      height: 4.5rem; /* 72 */
     }
 
     > tbody > tr > td {
@@ -819,7 +819,7 @@ time.column-header {
     }
 
     > tbody > tr > td > span {
-      height: rem(17.5);
+      height: 1.09375rem; /* 17.5 */
       display: block;
 
       &.dragover {
@@ -977,7 +977,7 @@ time.column-header {
     max-width: 100%;
 
     @container (min-width: 36em) {
-      --side-panel-width: #{rem(72)};
+      --side-panel-width: 4.5rem; /* 72 */
     }
 
     > thead,
@@ -1025,7 +1025,7 @@ time.column-header {
       }
       tbody tr:first-child {
         position: sticky;
-        top: rem(26);
+        top: 1.625rem; /* 26 */
         border-collapse: collapse;
         background: var(--colour-canvas);
         z-index: 99;
@@ -1044,7 +1044,7 @@ time.column-header {
       tbody td {
         border-bottom: 1px solid var(--colour-border);
         border-right: 1px solid var(--colour-border);
-        height: rem(72);
+        height: 4.5rem; /* 72 */
 
         &:first-child {
           border-left: 1px solid var(--colour-border);
@@ -1207,12 +1207,12 @@ time.column-header {
 
   .month-wrapper table {
     height: var(--table-height);
-    font-size: rem(10);
+    font-size: 0.625rem; /* 10 */
     margin-bottom: 0;
 
     thead > tr > th,
     .column-header {
-      font-size: rem(10);
+      font-size: 0.625rem; /* 10 */
       line-height: 0.75rem;
     }
 

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

@@ -72,7 +72,7 @@
       z-index: var(--index-floating);
       position: absolute;
 
-      width: rem(250);
+      width: 15.625rem; /* 250 */
       background: var(--colour-primary);
       color: var(--colour-white);
       padding: 0.75rem;
@@ -170,9 +170,9 @@
       top: 0;
       right: 0.25rem;
       content: '\f363';
-      font-family: 'Font Awesome 6 Pro';
+      font-family: 'Font Awesome 7 Pro';
       font-weight: 300;
-      line-height: rem(26);
+      line-height: 1.625rem; /* 26 */
     }
   }
 
@@ -208,7 +208,7 @@
   }
 
   iam-calendar:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
-    height: var(--event-height, #{rem(17.5)});
+    height: var(--event-height, 1.09375rem); /* 17.5 */
     line-height: 1.125rem !important;
     padding-top: 0.25rem !important;
     white-space: normal !important;

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

@@ -1,8 +1,8 @@
-@use '../_func.scss' as *;
-@use 'card.module.scss' as *;
-@use '../elements/dialog.scss' as *;
-@use '../elements/popover.scss' as *;
-@use '../elements/buttons.scss' as *;
+@use '../_func' as *;
+@use 'card.module' as *;
+@use '../elements/dialog' as *;
+@use '../elements/popover' as *;
+@use '../elements/buttons' as *;
 
 :host {
   --card-right-padding: 1rem;
@@ -87,11 +87,11 @@
     display: flex;
 
     .card__illustration {
-      height: rem(64);
-      width: rem(64);
+      height: 4rem; /* 64 */
+      width: 4rem; /* 64 */
       margin-right: 1.5rem;
-      margin-top: rem(-20);
-      margin-bottom: rem(-20);
+      margin-top: -1.25rem; /* -20 */
+      margin-bottom: -1.25rem; /* -20 */
       position: relative;
 
       img {
@@ -153,7 +153,7 @@ slot[name='secondary'] {
 
   > .btn:before {
     content: '\f142';
-    font-family: 'Font Awesome 6 Pro';
+    font-family: 'Font Awesome 7 Pro';
   }
 }
 

package/assets/sass/components/card.module.scss

@@ -1,4 +1,4 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
 :host {
   --card-icon-right: 1rem;
@@ -117,7 +117,7 @@
   margin-top: 0.5rem;
 
   i {
-    font-family: var(--fa-style-family, 'Font Awesome 6 Pro');
+    font-family: var(--fa-style-family, 'Font Awesome 7 Pro');
     font-weight: var(--fa-style, 900);
 
     display: block !important;

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

@@ -1,5 +1,5 @@
 @use '../_func' as *;
-@use '../elements/buttons.scss' as *;
+@use '../elements/buttons' as *;
 
 *,
 *::before,
@@ -266,7 +266,7 @@
     text-indent: -50rem;
     overflow: hidden;
     background: #a5ecfd;
-    margin-inline: rem(6);
+    margin-inline: 0.375rem; /* 6 */
     cursor: pointer;
     border: none;
 
@@ -292,7 +292,7 @@
   width: 1rem;
   height: 1rem;
   min-height: 1rem;
-  margin-inline: rem(2);
+  margin-inline: 0.125rem; /* 2 */
 
   &:hover {
     background: var(--colour-info);
@@ -312,9 +312,9 @@ input[type='range'] {
   --track-colour: #a5ecfd;
   --thumb-colour: var(--colour-info);
   --thumb-size: 1rem;
-  --thumb-size-outline: #{rem(0)};
+  --thumb-size-outline: 0;
   width: 90%;
-  max-width: rem(172);
+  max-width: 10.75rem; /* 172 */
 
   background: transparent;
   cursor: pointer;
@@ -330,13 +330,13 @@ input[type='range'] {
 input[type='range']::-webkit-slider-runnable-track {
   background: var(--track-colour);
   height: var(--track-size);
-  border-radius: rem(9);
+  border-radius: 0.5625rem; /* 9 */
 }
 
 input[type='range']::-moz-range-track {
   background: var(--track-colour);
   height: var(--track-size);
-  border-radius: rem(9);
+  border-radius: 0.5625rem; /* 9 */
 }
 
 // Extended track functionality
@@ -366,7 +366,7 @@ input[type='range']::-moz-range-track {
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
-  margin-top: rem(-4); /* Centers thumb on the track */
+  margin-top: -0.25rem; /* Centers thumb on the track */
   background-color: var(--thumb-colour);
   height: var(--thumb-size);
   width: var(--thumb-size);

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

@@ -65,8 +65,8 @@
     --carousel-spacing: 2rem;
 
     @media screen and (min-width: 36em) {
-      min-width: rem(600);
-      max-width: rem(600);
+      min-width: 37.5rem; /* 600 */
+      max-width: 37.5rem; /* 600 */
     }
   }
 

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

@@ -36,8 +36,8 @@
   iam-barchart::part(key-unchecked) {
     --key-border-radius: 50%;
     --btn-border-width: 1px;
-    --btn-padding-block: #{rem(6)};
-    --btn-padding-inline: #{rem(6)};
+    --btn-padding-block: 0.375rem; /* 6 */
+    --btn-padding-inline: 0.375rem; /* 6 */
 
     background-color: var(--colour-canvas-2);
     border: var(--btn-border-width) solid var(--colour-muted);
@@ -69,7 +69,7 @@
     text-decoration: none !important;
   }
   iam-barchart::part(tooltip):after {
-    font-family: 'Font Awesome 6 Pro';
+    font-family: 'Font Awesome 7 Pro';
     font-weight: 900;
     content: '\f059';
     display: inline-block;

package/assets/sass/components/charts.module.scss

@@ -6,7 +6,6 @@
   .chart__key .key:nth-child(11n - #{11 - $i}),
   .chart__outer table tbody tr td:not(:first-child):nth-child(11n - #{11 - ($i+1)}) {
     --chart-colour: var(#{'--chart-colour-' + $i});
-    --chart-colour-hover: var(#{'--chart-colour-' + $i + '-hover'});
   }
 
   .chart__outer
@@ -15,7 +14,6 @@
     tr:nth-child(#{$i}):has(td:nth-child(2):last-child):not([data-colour]):not([data-colour-1])
     td:nth-child(2) {
     --chart-colour: var(#{'--chart-colour-' + $i});
-    --chart-colour-hover: var(#{'--chart-colour-' + $i + '-hover'});
   }
 }
 // #endregion
@@ -119,7 +117,7 @@
   scroll-snap-type: x mandatory;
   scroll-padding: 0.75rem;
   //justify-content: flex-end;
-  gap: 0.5rem;
+  column-gap: 0.5rem;
 
   &:has(label:first-child:last-child) {
     display: var(--single-key-display, none);
@@ -307,7 +305,7 @@
   //color: var(--colour-primary-theme);
   white-space: pre;
   text-align: left;
-  box-shadow: var(--chart-details-shadow, 0 #{rem(2)} 0.75rem rgba(0, 0, 0, 0.25));
+  box-shadow: var(--chart-details-shadow, 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25));
   transform: translate(-50%, -100%);
 
   &::before {
@@ -435,7 +433,7 @@
         height: var(--percent, 0%);
         bottom: var(--bottom, 0%);
         width: 100%;
-        max-width: #{rem(120)};
+        max-width: 7.5rem; /* 120 */
         position: relative;
         padding: 0;
         background: var(--chart-colour);
@@ -450,7 +448,7 @@
         }
 
         &:hover {
-          background: var(--chart-colour-hover);
+          background: color-mix(in oklab, var(--chart-colour), #000000 5%);
         }
 
         &:has(span:empty),
@@ -553,10 +551,6 @@
 :host(:is(.chart-colour--success, .chart-colour--danger, .chart-colour--wraning)) td.chart-colour--success,
 .chart-colour--success td {
   --chart-colour: var(--chart-colour-success) !important;
-
-  &:hover {
-    --chart-colour-hover: var(--chart-colour-success-hover) !important;
-  }
 }
 
 :host(.chart-colour--danger) td,
@@ -564,10 +558,6 @@
 .chart-colour--danger,
 .chart-colour--danger td {
   --chart-colour: var(--chart-colour-danger) !important;
-
-  &:hover {
-    --chart-colour-hover: var(--chart-colour-danger-hover) !important;
-  }
 }
 
 :host(.chart-colour--warning) td,
@@ -575,10 +565,6 @@
 .chart-colour--warning,
 .chart-colour--warning td {
   --chart-colour: var(--chart-colour-warning) !important;
-
-  &:hover {
-    --chart-colour-hover: var(--chart-colour-warning-hover) !important;
-  }
 }
 // #endregion