@iamproperty/components 7.8.2--beta6 → 7.8.2--beta8

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

@@ -1,103 +1,6 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-/*  Default colour  */
-:is(iam-nav,.iam-nav) {
-
-  > .nav--menu {
-    --colour-heading: var(--colour-primary-theme);
-    color-scheme: light;
-  }
-}
-
-:is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
-
-  > :not([slot="logo"],[slot="secondary"]) {
-    color-scheme: light;
-  }
-}
-
-.dark-theme :is(iam-nav,.iam-nav) {
-
-  > :not([slot="logo"],[slot="secondary"]) {
-    color-scheme: dark;
-  }
-  
-  > .nav--menu {
-    --colour-heading: var(--colour-white);
-    color-scheme: dark;
-  }
-}
-
-.dark-theme :is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
-
-  --menu-btn-colour: var(--colour-white);
-}
-  
-  @media (prefers-color-scheme: dark) {
-    html:not(.light-theme) :is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
-
-      --menu-btn-colour: var(--colour-heading);
-    }
-  }
-
-
-@media screen and (min-width: 62em) {
-  :is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
-    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
-      color-scheme: dark;
-    }
-
-    > details > div {
-      color-scheme: light;
-    }
-  }
-
-  .dark-theme :is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
-
-    > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
-      color-scheme: light;
-    }
-
-    
-    > details > div {
-      color-scheme: dark;
-    }
-
-  }
-
-  @media (prefers-color-scheme: dark) {
-    html:not(.light-theme) :is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
-      > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
-        color-scheme: light;
-      }
-
-        
-      > details > div {
-        color-scheme: dark;
-      }
-    }
-  }
-
-}
-
-body:has(:is(iam-nav,.iam-nav).open:not(.nav--sticky,.demo-open):not(.nav--xs-sticky)) {
-  max-height: 100vh;
-  overflow: hidden;
-}
-
-body {
-  --nav-height: 6rem; /* 96 */
-  --sticky-padding: 0px;
-
-  &:has(:is(iam-nav,.iam-nav) a[slot='secondary']) {
-    --nav-height: 8.5rem; /* 96 + 40 */
-  }
-
-  &:has(:is(iam-nav,.iam-nav).nav--sticky) {
-    --sticky-padding: var(--nav-height);
-  }
-}
 
 /* #region Create the correct padding top of the page */
 nav:has(:is(iam-nav,.iam-nav)) {
@@ -126,11 +29,13 @@ nav:has(.nav--sticky) {
   left: 0;
   right: 0;
   z-index: 9999;
+  pointer-events: none;
 
   .nav--sticky {
     position: fixed;
     outline: 2px solid #eeeeee;
     transition: margin 1s;
+    pointer-events: all;
   }
 }
 
@@ -156,7 +61,7 @@ nav:has(.nav--sticky) {
 
   body[data-direction='down'].past100 nav:has(.nav--xs-sticky) {
     
-  margin-top: -8rem;
+    transform: translate(0, -100%);
   }
 }
 
@@ -168,44 +73,13 @@ nav:has(.nav--sticky) {
 }
 
 body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
-  /* transform: translate(0, -100%); */
-
-  margin-top: -8rem;
+  transform: translate(0, -100%);
 }
 
 /* #endregion */
 
 /* #region General styles */
 :is(iam-nav,.iam-nav) {
-  --nav-height: 6rem; /* 96 */
-
-  &:has([slot='secondary']) {
-    --nav-height: 8.5rem; /* 96 + 40 */
-  }
-
-  overscroll-behavior: contain !important;
-  background-color: var(--colour-canvas);
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  padding: var(--container-padding);
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  width: 100%;
-
-  .brand {
-    font-size: 3rem;
-    height: 3rem;
-    padding: 0;
-    text-decoration: none;
-    min-width: min(var(--svg-width), 14rem);
-    margin-right: auto;
-
-    img {
-      height: 100%;
-      width: auto;
-    }
-  }
 
   a:not([slot='logo']):not(.btn):not(:has(iam-card)) {
     text-decoration: none;
@@ -236,7 +110,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
     &[data-product][data-feature]:not([data-is-enabled="true"]) {
       padding-left: 2rem!important;
       &:before {
-        content: "\f890";
+        content: "\f135";
         font-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
         padding-right: 0.5em;
         position: absolute;
@@ -244,7 +118,6 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
         font-weight: 700;
       }
     }
-    
   }
 
   /* #region standard nav sections */
@@ -280,12 +153,6 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
   /* #endregion */
 }
 
-@container style(--body-theme: dark) {
-  :is(iam-nav,.iam-nav).bg-primary [slot="secondary"] {
-    --colour-link: white;
-  }
-}
-
 :is(iam-nav,.iam-nav) details {
   padding-bottom: 0;
 
@@ -322,7 +189,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 
 /* #region mobile and tablet mega menu */
 :is(iam-nav,.iam-nav) details {
-  @container style(--mobDetails) {
+  @media screen and (max-width: 62em) {
 
     margin-left: -1.5rem;
     margin-right: -1.5rem;
@@ -497,7 +364,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 /* #region tablet mega menu tweaks */
 :is(iam-nav,.iam-nav) details {
 
-  @container style(--tabletDetails) {
+  @media screen and (max-width: 62em) and (min-width: 36em) {
     padding-right: 2.5rem;
     margin-right: -2.5rem;
 
@@ -516,24 +383,6 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
   }
 }
 
-@media screen and (max-width: 62em) and (min-width: 36em) {
-  :is(iam-nav,.iam-nav) {
-    --tabletDetails: 'true';
-  }
-
-  :is(iam-nav,.iam-nav) details details[open] + details:before {
-    padding-right: 2.5rem;
-    margin-right: -2.5rem; /* -40 */
-  }
-}
-
-@media screen and (min-width: 62em) {
-  :is(iam-nav,.iam-nav) .nav--menu {
-    --mobDetails: 'true';
-    --tabletDetails: 'true';
-  }
-}
-
 /* #endregion */
 
 /* #region Desktop mega menu */
@@ -582,7 +431,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
       position: absolute;
       display: block;
       top: 100%;
-      left: 0;
+      left: 50%;
       width: 100%;
       padding-inline: max(
         var(--padding-inline),
@@ -591,8 +440,9 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
       max-height: calc(100vh - var(--nav-height));
       width: 100svw;
-      overflow: auto;
+      //overflow: auto;
       flex-wrap: wrap;
+      translate: -50% 0;
 
       .lead {
 
@@ -747,6 +597,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
       font-weight: normal;
       display: block;
       margin: 0;
+      overflow: auto;
 
       &:where(:hover, :focus, .selected, [aria-current='page']) {
         text-decoration: underline;
@@ -818,7 +669,9 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
       display: inline-block;
       margin-left: 1.5rem;
       margin-bottom: 0!important;
-      font-size: 1rem;
+      font-size: 0.75rem;
+      font-weight: bold;
+
 
       &:after {
         display: none;
@@ -878,7 +731,11 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
     left: 1.5rem;
   }
 
-  
+  :is(iam-nav,.iam-nav) > details[slot="secondary"][open]:has([data-title="Learning and support"])::details-content {
+    
+    left: auto;
+    right: 0;
+  }
     
 }
 
@@ -995,62 +852,16 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 
 /* #region navbar additional menus */
 
-:is(iam-nav,.iam-nav) .nav--menu {
-  outline: none !important;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    border: 0 !important;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border: 0 !important;
-  }
-
-  hr {
-    width: 100% !important;
-    border-top: 2px solid var(--colour-border) !important;
-  }
-  a {
-    display: block !important;
-    line-height: 1.25rem !important;
-    padding: 1.5rem 0 !important;
-    margin: 0 !important;
-
-    &:not(.mb-0):not(:has(+ a)) {
-      margin: 0 0 2.25rem 0 !important;
-    }
-
-    flex-shrink: 0;
-    font-size: 1rem !important;
-    font-weight: normal !important;
-
-    &:has(+ a) {
-      margin-bottom: 0 !important;
-    }
-
-    &:after {
-      content: '';
-      display: block;
-      height: 2px;
-      width: 100% !important;
-      background-color: var(--colour-border) !important;
-      top: calc(100% - 2px) !important;
-    }
-  }
-
-  > button {
-    min-width: 100%;
-    text-align: center;
-  }
+iam-nav .title[slot="account"] {
+  display: block;
+}
 
-  &.closed * {
-    //display: none !important;
-  }
+iam-nav .title[slot="account"]:has(+ .switch-account[slot="account"]) {
+  padding-bottom: 0.5rem!important;
 }
 
+iam-nav .switch-account[slot="account"] {
+  margin-bottom: 3rem;
+}
 
 /* #endregion */

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

@@ -2,13 +2,8 @@
 @use '../_func' as *;
 
 
-
-
-
 @layer components {
-  nav:has(iam-nav) {
-    grid-column: container;
-  }
+
   iam-nav {
     display: block;
     padding: var(--container-padding);
@@ -16,7 +11,6 @@
     padding-bottom: 1.5rem;
     max-width: 100%;
     margin-inline: auto;
-    column-grid: container;
 
     .brand {
       font-size: 3rem;

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

@@ -10,6 +10,7 @@
   iam-bone {
     background-color: #D9D9D9; /* TODO: needs to be a variable */
     border: unset;
+    outline: unset;
     display: block;
     width: 100%;
     min-height: var(--bone-height);
@@ -26,6 +27,4 @@
   hr {
     width: 100%;
   }
-
-  
 }

package/assets/sass/elements/buttons--action.css

@@ -17,7 +17,7 @@
 
     &:not(.btn-primary):not(.border-0) {
       background-color: var(--colour-canvas-2);
-      border: var(--btn-border-width) solid var(--colour-muted);
+      outline: var(--btn-border-width) solid var(--colour-muted);
     }
 
     &.btn[class*='fa-']:before {

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

@@ -31,12 +31,12 @@
       width: 100%;
       height: 100%;
       text-indent: 0;
-      line-height: calc(var(--compact-size) - 0.25rem);
+      line-height: var(--compact-size);
       font-weight: 900;
     }
 
     [class*='fa-']:before {
-      line-height: calc(var(--compact-size) - 0.25rem);
+      line-height: var(--compact-size);
 
       @container style(--theme: dark) {
         color: white;
@@ -62,7 +62,11 @@
     &.btn-secondary {
       --colour-btn-bg: transparent;
       --colour-btn-border: transparent;
-      border-color: transparent;
+
+      &:not(:focus-visible){
+        outline: none!important;
+      }
+      
 
       &:not([class*='colour-']) {
         --colour: var(--colour-light);
@@ -74,7 +78,7 @@
       ) {
       background-color: var(--colour);
       color: var(--colour-primary-theme);
-      border-color: var(--colour);
+      outline-color: var(--colour);
 
       &:is(.colour-primary, .colour-dark, .colour-danger, .colour-black) {
         color: var(--colour-inverted);

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

@@ -10,10 +10,6 @@
     line-height: inherit;
   }
 
-  button:focus:not(:focus-visible) {
-    outline: 0;
-  }
-
   :is(button,[type="button"],[type="reset"],[type="submit"],[role='button']) {
     -webkit-appearance: button;
 
@@ -74,7 +70,9 @@
 
     &:not(.border-0) {
       background: var(--colour-btn-bg);
-      border: var(--btn-border-width) solid var(--colour-btn-border);
+      border: none!important;
+      outline: var(--btn-border-width) solid var(--colour-btn-border);
+      outline-offset: -2px;
     }
 
     &:not(:last-child) {
@@ -84,7 +82,6 @@
 
   a:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) .btn,
   .btn:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
-    outline: 0;
     text-decoration: none;
 
     background: var(--colour-btn-bg-hover);

package/assets/sass/elements/buttons--secondary.css

@@ -5,7 +5,7 @@
 
     &:not(.border-0) {
       background: var(--colour-btn-secondary-bg);
-      border: 2px solid var(--colour-btn-secondary-border);
+      outline: 2px solid var(--colour-btn-secondary-border);
     }
   }
 

package/assets/sass/elements/buttons--tertiary.css

@@ -2,7 +2,7 @@
   /* #region Tertiary Button */
   .btn.btn-tertiary {
     background-color: transparent;
-    border: none;
+    outline: none;
     color: var(--colour-link);
     margin: 0 var(--btn-margin) var(--btn-margin) 0;
     padding: 0;

package/assets/sass/elements/dropdown.css

@@ -69,8 +69,7 @@
     box-shadow: var(--dropdown-box-shadow);
   }
   
-  :is(.dropdown, datalist):empty,
-  select::picker(select):empty {
+  :is(.dropdown, datalist):empty {
     
     display: none !important;
   }
@@ -113,6 +112,9 @@
   [popover] {
     top: calc(anchor(top) + anchor-size(height));
     left: anchor(left);
+    bottom: auto;
+    right: auto;
+    border: unset !important;
   }
 
   /* #endregion */
@@ -155,11 +157,26 @@
       color: var(--option-color-hover) !important;
     }
 
+    &:has(:is(:hover, :focus)) {
+      background: var(--option-bg-hover)!important;
+      color: var(--option-color-hover) !important;
+    }
+
     &:is(:active,.active,:checked) {
       border-left: var(--option-border-left-active) !important;
+      padding-left: calc(var(--option-padding) - 4px) !important;
+      background: var(--option-bg-active) !important;
+    }
+    &:has(:is(:active,.active,:checked)) {
+      border-left: var(--option-border-left-active) !important;
+      padding-left: calc(var(--option-padding) - 4px) !important;
       background: var(--option-bg-active) !important;
     }
 
+    &:has(:is(:active,.active,:checked)) {
+      border-left: var(--option-border-left-active) !important;
+      background: var(--option-bg-active) !important;
+    }
     &:after {
       content: attr(data-after);
     }

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

@@ -16,6 +16,15 @@
     &:is(:active, .active) {
       color: var(--colour-active);
     }
+
+    &:is(:active, .active,.selected,[aria-current='page']) {
+      --colour-underline: var(--colour-info);
+      text-decoration-color: var(--colour-info) !important;
+      
+    }
+    &:is(.selected,[aria-current='page']) {
+      pointer-events: none;
+    }
   }
 
   a:not([href]):not([class]),
@@ -127,7 +136,6 @@
   /* #region Support card component */
   :is(a, button, label):has(.card, iam-card) {
 
-
     border: none;
     background: none;
     padding: 0;
@@ -136,7 +144,6 @@
     text-decoration: none;
     border-radius: var(--card-border-radius) !important;
 
-
     $theme-colors: (
       'primary': var(--colour-primary),
       'secondary': var(--colour-secondary),
@@ -159,7 +166,7 @@
       }
     }
 
-    &:not(:hover, :focus, .hover, :active, .active) {
+    &:not(:hover, :focus, .hover, :active, .active):not(:has(input)) {
 
       outline: none !important;
     }
@@ -198,6 +205,23 @@
       --card-icon-right: var(--card-icon-right-overide, 0.5rem);
     }
 
+    &:has(input) {
+      cursor: pointer;
+      outline: 1px solid var(--colour-border,red);
+    }
+
+    &:has(input):is(:hover,:focus) {
+      
+      --card-bg: var(--colour-light);
+    }
+
+    &:has(:checked) {
+      
+      --card-icon-bg: var(--colour-primary-theme);
+      --card-icon-colour: #ffffff;
+      outline: 2px solid var(--hover-outline-colour,red);
+    }
+
     &:before {
       display: none;
     }
@@ -212,9 +236,11 @@
 
     iam-card {
       width: 100%;
+      height: stretch;
     }
   }
 
+
   iam-carousel.carousel--article-cards :is(a, button, label):is(:hover,.hover,:focus) iam-card,
   :is(a, button, label):is(:hover,.hover,:focus) iam-card.card--article,
   iam-card.article-card:has([slot="link"]:hover),

package/assets/sass/elements/popover.scss

@@ -156,6 +156,7 @@
         .btn-action {
           background: unset;
           border: unset;
+          outline: unset;
           color: var(--colour-primary);
           font-weight: inherit;
           font-family: inherit;

package/assets/sass/elements/select.scss

@@ -226,7 +226,7 @@
   select[multiple]::-webkit-scrollbar {
     width: 0.7rem; /*  manage scrollbar width here */
   }
-  select[multiple]::-webkit-scrollbar * {
+  select[multiple]::-webkit-scrollbar {
     background-color: transparent; /*  manage scrollbar background color here */
   }
   select[multiple]::-webkit-scrollbar-thumb {

package/assets/sass/elements/tooltips.scss

@@ -149,4 +149,58 @@
       }
     }
   }
+
+  
+  .tooltip__content {
+    position: absolute;
+    
+    max-width: 16.875rem; /* 270 */ 
+    background: var(--colour-primary);
+    color: var(--colour-white);
+    padding: 1.5rem;
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+    margin: 0.75rem;
+    overflow: visible;
+
+    > strong:first-child {
+      display: block;
+      padding-bottom: 1rem;
+      color: inherit;
+    }
+
+    @media screen and (min-width: 36em) {
+      max-width: 20.9375rem; /* 335 */ 
+    }
+
+    @media screen and (min-width: 62em) {
+      max-width: 22.5rem;  /* 360 */
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      transform: translate(-50%, 0);
+      border-width: 0.5rem;
+      border-style: solid;
+      left: 50%;
+      bottom: auto;
+      top: 100%;
+      border-color: var(--colour-primary) transparent transparent transparent;
+      margin-bottom: -1px;
+    }
+  }
+
+  label .tooltip__content {
+    display: none;
+    left: 50%;
+    translate: -50% 0;
+    width: 100%;
+  }
+  label:is(:hover,:focus-within) .tooltip__content {
+    display: block;
+    z-index: 2;
+    bottom: 100%;
+  }
 }

package/assets/sass/foundations/root.scss

@@ -295,6 +295,10 @@
           var(--container-padding-bottom) var(--container-padding-x);
         --gutter: 3.5rem;
       }
+        
+      &:has(iam-nav [slot='secondary']) {
+        --nav-height: 8.5rem; /* 96 + 40 */
+      }
     }
 
     @media (prefers-reduced-motion: no-preference) {