@iamproperty/components 7.2.2--beta2 → 7.3.0

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

@@ -1,17 +1,36 @@
+@use '../_func.scss' as *;
+
 :host {
+  //all: unset;
   inset: auto;
-  top: anchor(top);
-  left: calc(anchor(right) + var(--menu-offset, 0.25rem));
+  top: anchor(bottom);
+  left: anchor(left);
   position: fixed;
   position-try-fallbacks: flip-block, flip-inline;
   width: max-content;
-  min-width: calc(anchor-size(width) + 2rem);
 
-  max-height: var(--menu-max-height, min-contents);
+  height: min-content;
+  max-height: var(--menu-max-height, min(100vh - 6rem));
   background: var(--menu-bg, canvas);
   margin: var(--menu-margin, 0);
-  padding: var(--menu-padding, 0.25rem);
+  padding: var(--menu-padding, 0.5rem);
   border: var(--menu-border, 2px solid grey);
+  overflow: auto;
+
+  border: none !important;
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+}
+
+:host(.menu--fill) {
+  width: anchor-size(width);
+  min-width: anchor-size(width);
+  max-width: anchor-size(width);
+}
+
+:host(:popover-open),
+:host([popover-open]) {
+  display: block;
 }
 
 :host(:not([popover])) {
@@ -19,61 +38,133 @@
   display: block;
 }
 
-.menu--inner {
-  display: contents;
+:host(.menu--sm) {
+  width: rem(160);
+}
+:host(.menu--md) {
+  width: rem(240);
+}
+:host(.menu--lg) {
+  width: rem(320);
 }
 
-::slotted(*:not(iam-menu)) {
+:host(.menu--height-sm) {
+  max-height: rem(200);
+}
+:host(.menu--height-lg) {
+  max-height: rem(400);
+}
+
+::slotted(*:is(button, a, label, span)) {
   //all: unset !important;
   background: unset !important;
   border: unset !important;
-  color: inherit !important;
+  color: var(--colour-primary) !important;
   font-weight: inherit !important;
   font-family: inherit !important;
   font-size: 1rem !important;
+  line-height: rem(19) !important;
   display: block !important;
   margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-  padding: var(--menu-item-padding, 0) !important;
+  padding-block: var(--menu-item-padding, 0.5rem) !important;
   width: var(--menu-item-width, 100%) !important;
+  max-width: var(--menu-item-width, 100%) !important;
   text-align: var(--menu-item-text-align, left) !important;
+}
+
+::slotted(*:is(button, a, label)) {
+  padding-inline: var(--menu-item-padding, 0.5rem);
   cursor: var(--menu-item-cursor, pointer) !important;
 }
 
-::slotted(details) {
-  margin: 0 !important;
-  padding: 0 !important;
+::slotted(*:is(span):first-child) {
+  padding-top: 0 !important;
+  font-weight: 700 !important;
 }
-::slotted(*:not(iam-menu):not([class*='fa-'])):before {
-  display: none !important;
+
+::slotted(*:is(button, a, label, span):last-child) {
+  margin-bottom: 0 !important;
 }
-::slotted(*[class*='fa-']):before {
-  font-family: var(--fa-font-family, 'Font Awesome 6 Pro');
+
+// Radio buttons
+
+::slotted(*:is(label)) {
+  --radio-size: #{rem(20)};
+  --radio-inner-size: #{rem(12)};
+  --radio-inner-top: #{rem(12)};
+  --radio-inner-left: #{rem(12)};
+
+  --checkbox-tick-size: #{rem(12)};
+  --checkbox-inner-size: #{rem(10)};
+  --checkbox-inner-top: #{rem(6)};
+  --checkbox-inner-left: #{rem(8)};
+  padding-left: rem(36) !important;
 }
-::slotted(*:not(iam-menu)):after {
-  display: none !important;
+
+// States
+
+::slotted(*:is(button, a, label):is(.selected)) {
+  background: #e9f8fc !important;
+  border-left: 4px solid var(--colour-info) !important;
+  border-radius: 0.25rem !important;
+
+  
+  padding-left: calc(var(--menu-item-padding, 0.5rem) - 4px)!important;
 }
 
-::slotted(*:not(iam-menu):focus) {
-  color: var(--menuFocusColor, LinkText) !important;
+@media (prefers-color-scheme: dark) {
+
+  ::slotted(*:is(button, a, label):is(.selected):not(:hover, .hover)) {
+  
+    color: black!important;
+  }
 }
-::slotted(*:not(iam-menu):not(details):hover) {
-  color: var(--menuHoverColor, LinkText) !important;
+
+::slotted(*:is(button, a, label):is(:hover, .hover, :focus, .focus)) {
+  //all: unset !important;
+  background: var(--colour-light) !important;
+  border-radius: 0.25rem !important;
+}
+
+::slotted(*:is(button, a, label):is(:active, .active)) {
+  background: rgba(224, 224, 224, 1) !important;
+  border-radius: 0.25rem !important;
 }
-::slotted(*:not(iam-menu):not(details):active) {
-  color: var(--menuActiveColor, ActiveText) !important;
+
+@media (prefers-color-scheme: dark) {
+
+  ::slotted(*:is(button, a, label):is(:active, .active)) {
+  
+    color: black!important;
+  }
 }
 
 ::slotted(hr) {
-  height: 2px !important;
+  height: 1px !important;
   background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
-  margin-left: calc(var(--menu-padding, 0.25rem) * -1) !important;
-  margin-right: calc(var(--menu-padding, 0.25rem) * -1) !important;
-  width: calc(100% + var(--menu-padding, 0.25rem) * 2) !important;
-  margin-top: var(--menu-hr-margin, 0.75rem) !important;
-  margin-bottom: var(--menu-hr-margin, 1rem) !important;
+  width: 100%;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
   padding: 0 !important;
 }
 
+// #region sub menu
+::slotted(iam-menu:not([popover])) {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 0;
+  margin: 0;
+  width: auto;
+}
+
+::slotted(iam-menu[popover]) {
+  top: anchor(top);
+  left: calc(anchor(right) + 1rem);
+}
+// #endregion
+
+/*
+
 ::slotted([popovertarget]):before {
   text-align: center;
   display: inline-block !important;
@@ -99,3 +190,4 @@
   -webkit-mask-position: 50% 50%;
   z-index: 2;
 }
+*/

package/assets/sass/components/menu.scss

@@ -5,17 +5,78 @@ $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;
 
 @include layer('components', $layers) {
-  $menuPadding: 1rem !default;
-  $menuBorder: none !default;
-  $menuBorderRadius: 1rem !default;
-  $menuBoxShadow: 0px 2px 9px rgba(0, 0, 0, 0.1) !default;
+  $menuPadding: 0.5rem !default;
 
   iam-menu:defined {
     --menu-padding: #{$menuPadding};
     --border-color: var(--colour-border);
     --menu-item-margin: 0 0 0.5rem 0;
-    border: #{$menuBorder};
-    border-radius: #{$menuBorderRadius};
-    box-shadow: #{$menuBoxShadow};
   }
+
+  iam-menu i {
+    width: 1.25rem;
+  }
+
+  // #region sub menu
+
+  iam-menu > button:has(+ iam-menu) {
+    position: relative;
+
+    &:after {
+      content: '';
+      height: var(--btn-line-height);
+      width: rem(16);
+      height: rem(16);
+      display: inline-block;
+      background: currentColor;
+      mask-image: var(--icon-arrow);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-arrow);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+      vertical-align: bottom;
+
+      position: absolute;
+      top: calc(50% - 0.5rem);
+      right: 0.5rem;
+    }
+  }
+
+  iam-menu > button:has(+ iam-menu:not([popover])) {
+    &:after {
+      rotate: 90deg;
+    }
+  }
+
+  iam-menu > button.open:has(+ iam-menu:not([popover])) {
+    position: relative;
+
+    &:after {
+      top: calc(50% - 0.5rem);
+      right: 0.5rem;
+      rotate: 270deg;
+    }
+  }
+
+  iam-menu > button:has(+ iam-menu:popover-open) {
+    position: relative;
+
+    &:after {
+      top: calc(50% - 0.5rem);
+      right: 0.5rem;
+      rotate: 180deg;
+    }
+  }
+
+  iam-menu > button:not(.open) + iam-menu:not([popover]) {
+    display: none;
+  }
+
+  iam-menu > button + iam-menu:not([popover]) > *:is(button, a, label) {
+    padding-left: 2rem;
+  }
+  // #endregion
 }

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

@@ -579,13 +579,11 @@ $darkMode: 'true' !default;
     font-weight: $headings-font-weight;
     color: $headings-color;
     clear: both;
-    font-size: rem(map.get($heading-sizes, 'h3_fs'));
-    line-height: rem(map.get($heading-sizes, 'h3_lh'));
+    font-size: map.get($heading-sizes, 'h3_fs');
+    line-height: map.get($heading-sizes, 'h3_lh');
     max-width: var(--content-max-width);
 
     @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
-      line-height: rem(map.get($heading-sizes, 'h3_lh_sm'));
       margin-right: -2.5rem;
       padding-right: 2.5rem;
       width: calc(100% + 4rem);

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

@@ -10,9 +10,7 @@
   box-sizing: border-box;
 }
 
-
 :host {
-
   display: block;
   text-align: center;
   margin-bottom: 2rem;
@@ -21,7 +19,6 @@
 }
 
 .rank {
-
   position: relative;
   display: flex;
 
@@ -39,11 +36,11 @@
   .position {
     margin: 0;
     padding: 0;
-    line-height: 1!important;
+    line-height: 1 !important;
   }
-  
+
   .position:after {
-    content: var(--rank-sub-text, "Your rank");
+    content: var(--rank-sub-text, 'Your rank');
     display: block;
     font-size: rem(map.get($heading-sizes, 'lead_fs'));
     line-height: 1;
@@ -61,11 +58,9 @@
   }
 }
 
-
-:host([data-position="1st"]),
-:host([data-position="2nd"]),
-:host([data-position="3rd"]) {
-
+:host([data-position='1st']),
+:host([data-position='2nd']),
+:host([data-position='3rd']) {
   .rank {
     border-width: 0;
     overflow: hidden;
@@ -76,22 +71,19 @@
   }
 }
 
-:host([data-position="1st"]) {
-
+:host([data-position='1st']) {
   .rank {
-
-    background: #FFEE56;
+    background: #ffee56;
   }
-  
+
   .rank svg:nth-child(1) {
     display: block;
   }
 }
 
-:host([data-position="2nd"]) {
-
+:host([data-position='2nd']) {
   .rank {
-    background: #EDEDED;
+    background: #ededed;
   }
 
   .rank svg:nth-child(2) {
@@ -99,13 +91,12 @@
   }
 }
 
-:host([data-position="3rd"]) {
-
+:host([data-position='3rd']) {
   .rank {
-    background: #FFE798;
+    background: #ffe798;
   }
 
   .rank svg:nth-child(3) {
     display: block;
   }
-}
+}

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

@@ -1,8 +1,6 @@
 @use 'sass:map';
 @use '../_func.scss' as *;
 
-
-
 @use '../elements/type.scss' as *;
 
 @include max-height();
@@ -14,7 +12,6 @@
 }
 
 .podium {
-
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -29,7 +26,6 @@
     order: 1;
 
     iam-rank {
-
       margin: 0;
       width: 100%;
     }
@@ -48,14 +44,12 @@
     }
   }
 
-
   > div:nth-child(1) {
     order: 2;
     padding: 0;
   }
 
   > div:nth-child(2) {
-    
     padding: 1rem 1rem 0 0;
   }
 
@@ -63,4 +57,4 @@
     order: 3;
     padding: 1rem 0 0 1rem;
   }
-}
+}

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

@@ -11,7 +11,6 @@
 }
 
 iam-rankings {
-
   table {
     display: block;
     width: 100%;
@@ -25,14 +24,14 @@ iam-rankings {
     display: contents;
   }
 
-  :is(td,th) {
+  :is(td, th) {
     font-weight: normal;
   }
 
   tr.current {
     background-color: var(--colour-light);
   }
-  tr.current :is(td,th) {
+  tr.current :is(td, th) {
     font-weight: bolder;
   }
 
@@ -40,11 +39,10 @@ iam-rankings {
     display: flex;
     width: 100%;
     position: relative;
-    
 
     &:before {
       counter-increment: countItem; /* Increment the value of section counter by 1 */
-      content: counter(countItem)".";
+      content: counter(countItem) '.';
       font-size: rem(32);
       line-height: rem(40);
       font-weight: bolder;
@@ -68,17 +66,13 @@ iam-rankings {
 
     progress {
       width: 100%;
-      height: 1rem ;
+      height: 1rem;
     }
   }
 
-
   @each $index, $value in $chart-colors {
-    tr:nth-child(#{$index}) progress{
+    tr:nth-child(#{$index}) progress {
       --colour: var(--chart-colour-#{$index}, #{$value});
     }
-    
   }
-
-
-}
+}

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

@@ -6,8 +6,6 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
 // #region Basic table stuff
 
-
-
 :is(#{$selector}) {
   --hover-background: var(--colour-light);
   --row-bg: var(--colour-canvas-2);
@@ -207,11 +205,11 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
 :is(#{$selector}).table--cta {
   @container (width > 23.4375em) {
-    padding-right: calc(var(--wrapper-padding) + 1.5rem)!important;
+    padding-right: calc(var(--wrapper-padding) + 1.5rem) !important;
 
     tr > th:nth-last-child(2),
     tr > td:nth-last-child(2) {
-      padding-right: var(--cta-width)!important;
+      padding-right: var(--cta-width) !important;
     }
 
     tr > *:not(:first-child):last-child {

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

@@ -285,7 +285,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed + th:not(.th--fixed),
     .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 6))!important;
+      padding-left: calc(rem(48 + 6)) !important;
     }
 
     .th--fixed + .th--fixed,
@@ -295,7 +295,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed + .th--fixed + th:not(.th--fixed),
     .td--fixed + .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 48 + 6))!important;
+      padding-left: calc(rem(48 + 48 + 6)) !important;
     }
 
     .th--fixed + .th--fixed + .th--fixed,
@@ -305,7 +305,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit';
 
     .th--fixed + .th--fixed + .th--fixed + th:not(.th--fixed),
     .td--fixed + .td--fixed + .td--fixed + td:not(.td--fixed) {
-      padding-left: calc(rem(48 + 48 + 48 + 6))!important;
+      padding-left: calc(rem(48 + 48 + 48 + 6)) !important;
     }
 
     .dialog__wrapper {
@@ -348,7 +348,7 @@ $icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
   }
 
   &:has(th[data-sort]) :is(th, td) {
-    padding-left: 0.25rem!important;
+    padding-left: 0.25rem !important;
   }
 
   th[data-sort][data-order-by='asc'] {

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

@@ -68,7 +68,7 @@ $darkMode: 'true' !default;
     border-radius: rem(24);
     margin-bottom: var(--btn-margin);
     background: none;
-    
+
     transition:
       border 0.5s,
       background 0.5s,

package/assets/sass/elements/details.scss

@@ -119,7 +119,7 @@ $darkMode: 'true' !default;
 
       font-size: rem(18);
       line-height: var(--line-height);
-      padding-bottom: rem(map.get($heading-sizes, 'h3_pb'));
+      padding-bottom: map.get($heading-sizes, 'h3_pb');
       font-weight: 700;
       max-width: 100%;
 
@@ -139,9 +139,7 @@ $darkMode: 'true' !default;
       }
 
       @include media-breakpoint-up(sm, $mobileOnly) {
-        font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
-        --line-height: #{rem(map.get($heading-sizes, 'h3_lh_sm'))};
-        padding-bottom: rem(map.get($heading-sizes, 'h3_pb_sm'));
+
         font-weight: 900;
       }
     }

package/assets/sass/elements/dialog.scss

@@ -11,8 +11,7 @@ $darkMode: 'true' !default;
     display: block;
   }
 
-  // #region Default styling of both modals and popovers
-  [popover],
+  // #region Default styling of both modals
   dialog {
     --dialog-padding: #{rem(24)};
 
@@ -29,7 +28,6 @@ $darkMode: 'true' !default;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
   }
 
-  [popover]:popover-open,
   dialog[open] {
     display: flex;
     flex-direction: column;