@iamproperty/components 7.7.1--beta14 → 7.7.1--beta16

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

@@ -4,7 +4,7 @@
 
 
 /*  Default colour  */
-iam-nav {
+:is(iam-nav,.iam-nav) {
 
   > :not([slot="logo"],[slot="secondary"]) {
     color-scheme: light;
@@ -20,14 +20,14 @@ iam-nav {
   }
 }
 
-iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+:is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
 
   > :not([slot="logo"],[slot="secondary"]) {
     color-scheme: light;
   }
 }
 
-.dark-theme iam-nav {
+.dark-theme :is(iam-nav,.iam-nav) {
 
   > :not([slot="logo"],[slot="secondary"]) {
     color-scheme: dark;
@@ -39,13 +39,13 @@ iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
   }
 }
 
-.dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-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) iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+    html:not(.light-theme) :is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
 
       --menu-btn-colour: var(--colour-heading);
     }
@@ -53,7 +53,7 @@ iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
 
 
 @media screen and (min-width: 62em) {
-  iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+  :is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
     > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
       color-scheme: dark;
     }
@@ -63,7 +63,7 @@ iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
     }
   }
 
-  .dark-theme iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
+  .dark-theme :is(iam-nav,.iam-nav):is(.bg-primary, .bg-danger, .bg-dark) {
 
     > :not([slot="logo"],[slot="secondary"],[slot="menus"]) {
       color-scheme: light;
@@ -77,7 +77,7 @@ iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
   }
 
   @media (prefers-color-scheme: dark) {
-    html:not(.light-theme) iam-nav:is(.bg-primary, .bg-danger, .bg-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;
       }
@@ -91,7 +91,7 @@ iam-nav:is(.bg-primary, .bg-danger, .bg-dark) {
 
 }
 
-body:has(iam-nav.open:not(.nav--sticky,.demo-open):not(.nav--xs-sticky)) {
+body:has(:is(iam-nav,.iam-nav).open:not(.nav--sticky,.demo-open):not(.nav--xs-sticky)) {
   max-height: 100vh;
   overflow: hidden;
 }
@@ -100,22 +100,22 @@ body {
   --nav-height: 6rem; /* 96 */
   --sticky-padding: 0px;
 
-  &:has(iam-nav a[slot='secondary']) {
+  &:has(:is(iam-nav,.iam-nav) a[slot='secondary']) {
     --nav-height: 8.5rem; /* 96 + 40 */
   }
 
-  &:has(iam-nav.nav--sticky) {
+  &:has(:is(iam-nav,.iam-nav).nav--sticky) {
     --sticky-padding: var(--nav-height);
   }
 }
 
 /* #region Create the correct padding top of the page */
-nav:has(iam-nav) {
+nav:has(:is(iam-nav,.iam-nav)) {
   min-height: 6rem; /* 96 */
   display: block;
   position: relative;
 
-  iam-nav {
+  :is(iam-nav,.iam-nav) {
     position: absolute;
     top: 0;
     left: 0;
@@ -125,19 +125,19 @@ nav:has(iam-nav) {
 }
 
 @media screen and (min-width: 62em) {
-  nav:has(iam-nav a[slot='secondary']) {
+  nav:has(:is(iam-nav,.iam-nav) [slot='secondary']) {
     min-height: 8.5rem; /* 96 + 40 */
   }
 }
 
-nav:has(iam-nav.nav--sticky) {
+nav:has(:is(iam-nav,.iam-nav).nav--sticky) {
   position: sticky;
   top: 0;
   left: 0;
   right: 0;
   z-index: 9999;
 
-  iam-nav {
+  :is(iam-nav,.iam-nav) {
     position: fixed;
     outline: 2px solid #eeeeee;
   transition: margin 1s;
@@ -145,13 +145,13 @@ nav:has(iam-nav.nav--sticky) {
 }
 
 @media screen and (max-width: 36em) {
-  body:has(iam-nav.open:not(.nav--xs-sticky,.demo-open)) {
+  body:has(:is(iam-nav,.iam-nav).open:not(.nav--xs-sticky,.demo-open)) {
     max-height: 100vh;
     overflow: hidden;
     margin-top: 0rem;
   }
 
-  nav:has(iam-nav.nav--xs-sticky) {
+  nav:has(:is(iam-nav,.iam-nav).nav--xs-sticky) {
     position: sticky;
     top: 0;
     left: 0;
@@ -159,7 +159,7 @@ nav:has(iam-nav.nav--sticky) {
     z-index: 9999;
     transition: margin 1s;
 
-    iam-nav {
+    :is(iam-nav,.iam-nav) {
       position: fixed;
     }
   }
@@ -171,7 +171,7 @@ nav:has(iam-nav.nav--sticky) {
 }
 
 @media screen and (min-width: 36em) {
-  body:has(iam-nav.open:not(.nav--sticky)) {
+  body:has(:is(iam-nav,.iam-nav).open:not(.nav--sticky)) {
     max-height: 100vh;
     overflow: hidden;
   }
@@ -186,10 +186,10 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 /* #endregion */
 
 /* #region General styles */
-iam-nav {
+:is(iam-nav,.iam-nav) {
   --nav-height: 6rem; /* 96 */
 
-  &:has(a[slot='secondary']) {
+  &:has([slot='secondary']) {
     --nav-height: 8.5rem; /* 96 + 40 */
   }
 
@@ -248,12 +248,12 @@ iam-nav {
 }
 
 @container style(--body-theme: dark) {
-  iam-nav.bg-primary [slot="secondary"] {
+  :is(iam-nav,.iam-nav).bg-primary [slot="secondary"] {
     --colour-link: white;
   }
 }
 
-iam-nav details {
+:is(iam-nav,.iam-nav) details {
   padding-bottom: 0;
 
   > summary {
@@ -288,7 +288,7 @@ iam-nav details {
 /* #endregion */
 
 /* #region mobile and tablet mega menu */
-iam-nav details {
+:is(iam-nav,.iam-nav) details {
   @container style(--mobDetails) {
 
     margin-left: -1.5rem;
@@ -327,7 +327,7 @@ iam-nav details {
         position: absolute;
         top: 1.5rem;
         right: 1.5rem;
-        font-family: 'Font Awesome 7 Pro';
+        font-family: var(--fa-family-classic);
         line-height: 1em;
       }
     }
@@ -363,6 +363,11 @@ iam-nav details {
       display: none !important;
     }
 
+    > div .lead {
+
+      padding: 1rem 0 0 3rem!important;
+    }
+
     > div a:last-child {
       margin-bottom: 0 !important;
     }
@@ -382,15 +387,25 @@ iam-nav details {
       height: 2px;
       background-color: var(--colour-border) !important;
     }
+
+    /* secondary nav */
+
+    &[slot="secondary"] {
+      background-color: transparent;
+
+      summary {
+        background-color: transparent;
+      }
+    }
   }
 }
 @media screen and (max-width: 62em) {
 
-  iam-nav details {
+  :is(iam-nav,.iam-nav) details {
 
     background-color: #eeeeee;
   }
-  iam-nav {
+  :is(iam-nav,.iam-nav) {
     --mobDetails: 'true';
 
     /*  Sub details */
@@ -439,7 +454,7 @@ iam-nav details {
 /* #endregion */
 
 /* #region tablet mega menu tweaks */
-iam-nav details {
+:is(iam-nav,.iam-nav) details {
 
   @container style(--tabletDetails) {
     padding-right: 2.5rem;
@@ -461,18 +476,18 @@ iam-nav details {
 }
 
 @media screen and (max-width: 62em) and (min-width: 36em) {
-  iam-nav {
+  :is(iam-nav,.iam-nav) {
     --tabletDetails: 'true';
   }
 
-  iam-nav details details[open] + details:before {
+  :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) {
-  iam-nav .nav--menu {
+  :is(iam-nav,.iam-nav) .nav--menu {
     --mobDetails: 'true';
     --tabletDetails: 'true';
   }
@@ -482,8 +497,8 @@ iam-nav details {
 
 /* #region Desktop mega menu */
 @media screen and (min-width: 62em) {
-  iam-nav > details,
-  iam-nav *:not(.nav--menu) > details {
+  :is(iam-nav,.iam-nav) > details:not([slot="secondary"]),
+  :is(iam-nav,.iam-nav) *:not(.nav--menu) > details:not([slot="secondary"]) {
     width: auto;
 
     > summary {
@@ -509,7 +524,7 @@ iam-nav details {
         top: 50%;
         transform: translate(0, -50%);
         right: 0;
-        font-family: 'Font Awesome 7 Pro';
+        font-family: var(--fa-family-classic);
         line-height: 1em;
       }
     }
@@ -534,6 +549,11 @@ iam-nav details {
       ) !important;
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
+      .lead {
+
+        padding: 1rem 0 0 0!important;
+      }
+
     }
 
     &[open] > div:has(details) {
@@ -589,6 +609,7 @@ iam-nav details {
         }
       }
 
+
       a:has(iam-card) {
         display: inline-block;
       }
@@ -636,6 +657,43 @@ iam-nav details {
       }
     }
 
+    &[open] > div:has(span.section) {
+
+      display: flex;
+        
+      > span.section {
+        display: block;
+        flex-grow: 1;
+
+        .lead {
+          column-span: all;
+        }
+      } 
+
+      > span.section.double {
+
+        display: block;
+        width: calc(66.66% - 6.875rem);
+        columns: 2;
+        column-gap: 6.875rem;
+
+        .lead {
+          column-span: all;
+        }
+      }
+
+      > span.section:first-child:last-child {
+        display: block;
+        width: calc(66.66% - 6.875rem);
+        columns: 3;
+        column-gap: 6.875rem;
+
+        .lead {
+          column-span: all;
+        }
+      }
+    }
+
     a:not([slot='logo']):not(.btn):not(:has(iam-card)) {
       font-size: 1rem;
       line-height: 1.5rem;
@@ -683,7 +741,7 @@ iam-nav details {
     }
   }
 
-  nav:has(iam-nav.open) {
+  nav:has(:is(iam-nav,.iam-nav).open) {
     min-height: 100vh !important;
     max-height: 100vh;
     overflow: auto;
@@ -691,15 +749,86 @@ iam-nav details {
     margin-bottom: calc((100vh - var(--nav-height)) * -1);
   }
 
-  html:has(iam-nav.open:not(.demo-open)) {
+  html:has(:is(iam-nav,.iam-nav).open:not(.demo-open)) {
     overflow: hidden;
   }
+
+  // Updated secondary nav
+  :is(iam-nav,.iam-nav) > details[slot="secondary"]{
+    display: inline-block;
+    position: relative;
+    width: auto;
+
+    summary {
+      display: inline-block;
+      margin-left: 1.5rem;
+      margin-bottom: 0!important;
+
+      &:after {
+        display: none;
+      }
+    }
+
+    div {
+      text-align: left;
+
+      a {
+        white-space: nowrap;
+        text-decoration: none;
+
+        font-size: 1rem !important;
+        line-height: 1.5rem !important;
+        margin: 0;
+        padding: var(--option-padding) !important;
+
+      }
+
+      .lead {
+        --colour-heading: var(--colour-body);
+        font-size: 0.87rem !important;
+        line-height: 1.5rem !important;
+        margin: 0;
+        padding: var(--option-padding) !important;
+      }
+      a:after {
+        width: 0;
+      }
+
+      .section + .section {
+        border-top: 1px solid var(--colour-border);
+        display: block;
+        padding-top: 0.5rem;
+        margin-top: 0.5rem;
+      }
+    }
+    
+  }
+
+  :is(iam-nav,.iam-nav) > details[slot="secondary"]::details-content {
+    display: none;
+  }
+
+  :is(iam-nav,.iam-nav) > details[slot="secondary"][open]::details-content {
+    display: block;
+    background: var(--dropdown-bg);
+    margin-block: var(--dropdown-margin-block);
+    padding: var(--dropdown-padding);
+    border-radius: var(--dropdown-border-radius);
+    box-shadow: var(--dropdown-box-shadow);
+
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 1.5rem;
+  }
+
+  
+    
 }
 
 /*  4 columns on large screens */
 @media screen and (min-width: 80em) {
   /*  1280 */
-  iam-nav.nav--large *:not(.nav--menu) > details {
+  :is(iam-nav,.iam-nav).nav--large *:not(.nav--menu) > details {
     &[open] > div:not(:has(details)) {
       columns: 4;
       column-gap: 6.875rem;
@@ -711,7 +840,7 @@ iam-nav details {
 
 /* #region Search */
 @media screen and (min-width: 62em) {
-  iam-nav {
+  :is(iam-nav,.iam-nav) {
     &.search-open {
       > *:not([slot='logo']):not([slot='secondary']):not([slot='search']) {
         display: none !important;
@@ -723,7 +852,7 @@ iam-nav details {
 
 /* #region Dual navbar in desktop */
 @media screen and (min-width: 62em) {
-  iam-nav:has([slot='dual']) {
+  :is(iam-nav,.iam-nav):has([slot='dual']) {
     .brand:has(~ [slot='dual']) {
       margin-right: 1.5rem !important;
     }
@@ -744,7 +873,7 @@ iam-nav details {
 /* #endregion */
 
 /* #region compact menus on mobile */
-iam-nav > .dialog__wrapper {
+:is(iam-nav,.iam-nav) > .dialog__wrapper {
   .dialog--list {
     a {
       font-size: 1rem;
@@ -753,7 +882,7 @@ iam-nav > .dialog__wrapper {
 }
 
 @media screen and (max-width: 62em) {
-  iam-nav > .dialog__wrapper:not(.dialog--xs) {
+  :is(iam-nav,.iam-nav) > .dialog__wrapper:not(.dialog--xs) {
     width: 100%;
 
     .btn-compact {
@@ -768,8 +897,8 @@ iam-nav > .dialog__wrapper {
     }
   }
 
-  iam-nav > .dialog__wrapper:not(.dialog--xs) .dialog--list a,
-  iam-nav .btn-compact {
+  :is(iam-nav,.iam-nav) > .dialog__wrapper:not(.dialog--xs) .dialog--list a,
+  :is(iam-nav,.iam-nav) .btn-compact {
     --compact-size: 2rem;
     all: unset;
     display: block !important;
@@ -809,7 +938,7 @@ iam-nav > .dialog__wrapper {
 
 /* #region navbar additional menus */
 
-iam-nav .nav--menu {
+:is(iam-nav,.iam-nav) .nav--menu {
   outline: none !important;
 
   &::-webkit-scrollbar {

package/assets/sass/components/pagination.scss

@@ -137,7 +137,7 @@
     margin-left: 0.5em;
     font-size: 0.8rem;
     content: '\f054';
-    font-family: 'Font Awesome 7 Pro';
+    font-family: var(--fa-family-classic);
     color: var(--colour-info);
   }
 
@@ -181,7 +181,7 @@
     margin-right: 0.5em;
     font-size: 0.8rem;
     content: '\f053';
-    font-family: 'Font Awesome 7 Pro';
+    font-family: var(--fa-family-classic);
     color: var(--colour-info);
   }
 }

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

@@ -1,16 +1,22 @@
 @use '../_func' as *;
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 @layer components {
 
   :host {
     
-    padding: 1rem;
+    padding: 0.5rem;
     max-width: calc(anchor-size(width) * 2) !important;
 
+    max-height: min(100vh - 6rem);
     position: absolute;
     position-area: bottom span-x-end;
     margin:  0.25rem;
-    padding: 1rem;
     max-width: calc(anchor-size(width) * 2) !important;
     position-try-fallbacks: top span-x-end, bottom span-x-start, top span-x-start;
 
@@ -25,4 +31,33 @@
       width: 22.5rem; /* (360); */
     }
   } 
+
+  :host(.popover--sm) {
+    width: 10rem;
+    min-width: 10rem!important;
+    max-width: 10rem!important;
+  }
+  :host(.popover--md) {
+    width: 15rem; /* 240 */
+    min-width: 15rem!important;
+    max-width: 15rem!important;
+  }
+  :host(.popover--lg) {
+    width: 20rem; /* 320 */
+    min-width: 20rem!important;
+    max-width: 20rem!important;
+  }
+  :host(.popover--fill) {
+    max-width: anchor-size(width)!important;
+    min-width: anchor-size(width)!important;
+    width: anchor-size(width)!important;
+  }
+    
+  :host(.popover--height-sm) {
+    max-height: 12.5rem; /* 200 */
+  }
+  :host(.popover--height-lg) {
+    max-height: 25rem; /* 400 */
+  }
+
 }

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

@@ -0,0 +1,2 @@
+
+@use 'advanced-select.component';

package/assets/sass/components/split-button.component.scss

@@ -1,6 +1,8 @@
 @use '../_func' as *;
 @use '../elements/buttons';
 
+@use '../elements/dropdown';
+
 @use '../components/menu.global';
 
 /*  Main button */
@@ -25,7 +27,7 @@
 .split-button {
   position: relative;
 
-  .dropdown {
+  .menu__wrapper {
     position: relative;
     display: inline-block;