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

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

@@ -1,9 +1,6 @@
 @use '../_func' as *;
 
 
-
-
-
 @layer components {
   iam-carousel:defined {
     > div > *:last-child {
@@ -33,52 +30,15 @@
     container-type: inline-size;
   }
 
-  .admin-panel:has(iam-carousel:last-child) iam-carousel::part(carousel) {
-    margin-bottom: -1.5rem;
+  .admin-panel:has(iam-carousel:last-child) {
+    --carousel-mb: 0rem;
   }
 
-  @container (min-width: 62em) {
-    .admin-panel iam-carousel {
-      --carousel-spacing: 1.5rem;
-      margin-inline: -1.5rem;
-
-      & > div {
-        scroll-margin-left: 1.5rem;
-        --last-item-extra: -1.5rem;
-      }
-
-      & > div:first-child {
-        margin-left: 1.5rem;
-      }
-      & > div:last-child {
-        padding-inline-end: 2rem;
-        --last-item-extra: 1.5rem;
-      }
-    }
-  }
+  
   /* #endregion */
 
   /* #region carousel in dialog */
 
-  dialog:has(iam-carousel) {
-    container-type: inline-size;
-    --carousel-spacing: 2rem;
-
-    @media screen and (min-width: 36em) {
-      min-width: 37.5rem; /* 600 */
-      max-width: 37.5rem; /* 600 */
-    }
-  }
-
-  dialog:has(iam-carousel:last-child) {
-    iam-carousel::part(carousel) {
-      margin-bottom: 0 !important;
-    }
-
-    iam-carousel::part(controls) {
-      margin-bottom: 0 !important;
-      max-width: calc(100% - 4rem);
-    }
-  }
+  
   /* #endregion */
 }

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

@@ -69,7 +69,7 @@
     text-decoration: none !important;
   }
   iam-barchart::part(tooltip):after {
-    font-family: 'Font Awesome 7 Pro';
+    font-family: var(--fa-family-classic);
     font-weight: 900;
     content: '\f059';
     display: inline-block;

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

@@ -1,6 +1,6 @@
 @use '../_func' as *;
 
-@use '../_grid' as *;
+@use '../utilities/grid' as *;
 
 @use '../elements/forms' as *;
 @use '../elements/admin-panel' as *;

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

@@ -44,10 +44,10 @@
   }
 }
 
-:host-context(:is(:checked, .checked)),
-:host(:is(:active, .active)) {
-  outline: 2px solid var(--colour, var(--colour-primary));
-  outline-offset: -2px;
+:host-context(:is(:checked, .checked)) .wrapper,
+:host(:is(:active, .active)) .wrapper {
+  outline: 2px solid var(--colour, var(--colour-primary))!important;
+  outline-offset: -2px!important;
 
   .card__body {
     background: none;
@@ -69,7 +69,7 @@
 
   &:after {
     content: var(--card-flag-icon, '\f024');
-    font-family: 'Font Awesome 7 Pro';
+    font-family: var(--fa-family-classic);
     position: absolute;
     top: 1rem;
     right: 1rem;

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

@@ -204,7 +204,7 @@ slot[name="badge"] {
   margin-bottom: -3rem;
   width: fit-content;
   margin-inline: auto;
-  gap: 0.5rem;
+  gap: 0.75rem;
 }
 
 ::slotted([slot="toolbox"]) {

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

@@ -1,10 +1,16 @@
 @use '../_func' as *;
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 :host {
   /* all: unset; */
   inset: auto;
-  top: anchor(bottom);
-  left: anchor(left);
+  top: anchor(bottom)!important;
+  left: anchor(left)!important;
   position: fixed;
   position-try-fallbacks: flip-block, flip-inline;
   width: max-content!important;
@@ -13,15 +19,8 @@
 
   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.5rem)!important;
-  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) {
@@ -42,12 +41,18 @@
 
 :host(.menu--sm) {
   width: 10rem;
+  min-width: 10rem!important;
+  max-width: 10rem!important;
 }
 :host(.menu--md) {
   width: 15rem; /* 240 */
+  min-width: 15rem!important;
+  max-width: 15rem!important;
 }
 :host(.menu--lg) {
   width: 20rem; /* 320 */
+  min-width: 20rem!important;
+  max-width: 20rem!important;
 }
 
 :host(.menu--height-sm) {
@@ -57,7 +62,7 @@
   max-height: 25rem; /* 400 */
 }
 
-::slotted(*:is(button, a, label, span)) {
+::slotted(*:is(button, a, label, span, iam-button)) {
   /* all: unset !important; */
   background: unset !important;
   border: unset !important;
@@ -74,7 +79,7 @@
   text-align: var(--menu-item-text-align, left) !important;
 }
 
-::slotted(*:is(button, a, label)) {
+::slotted(*:is(button, a, label, iam-button)) {
   padding-inline: var(--menu-item-padding, 0.5rem);
   cursor: var(--menu-item-cursor, pointer) !important;
 }
@@ -84,7 +89,7 @@
   font-weight: 700 !important;
 }
 
-::slotted(*:is(button, a, label, span):last-child) {
+::slotted(*:is(button, a, label, span, iam-button):last-child) {
   margin-bottom: 0 !important;
 }
 
@@ -119,13 +124,13 @@
   }
 }
 
-::slotted(*:is(button, a, label):is(:hover, .hover, :focus, .focus)) {
+::slotted(*:is(button, a, label, iam-button):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)) {
+::slotted(*:is(button, a, label, iam-button):is(:active, .active)) {
   background: rgba(224, 224, 224, 1) !important;
   border-radius: 0.25rem !important;
 }
@@ -155,7 +160,7 @@
 }
 
 ::slotted(iam-menu[popover]) {
-  top: anchor(top);
-  left: calc(anchor(right) + 1rem);
+  top: anchor(top)!important;
+  left: calc(anchor(right) + 1rem)!important;
 }
 /* #endregion */

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

@@ -1,22 +1,18 @@
 @use '../_func' as *;
 
-
-
-
-
 @layer components {
-  $menuPadding: 0.5rem !default;
-
-  iam-menu:defined {
-    --menu-padding: #{$menuPadding};
-    --border-color: var(--colour-border);
-    --menu-item-margin: 0 0 0.5rem 0;
-  }
 
   iam-menu i {
     width: 1.25rem;
   }
 
+  iam-menu {
+    iam-button button {
+
+      all: unset!important;
+    }
+  }
+
   /* #region sub menu */
 
   iam-menu > button:has(+ iam-menu) {

package/assets/sass/components/milestone.scss

@@ -51,7 +51,7 @@ iam-milestone-group {
 
     &:before {
       content: '\f06e';
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       position: absolute;
       left: auto;
       right: 0;
@@ -145,7 +145,7 @@ iam-milestone {
       height: 1rem;
       border: 2px solid var(--colour-primary);
       border-radius: 50%;
-      font-family: 'Font Awesome 7 Pro';
+      font-family: var(--fa-family-classic);
       color: #fff;
       font-size: 0.7rem;
     }

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

@@ -29,6 +29,7 @@
     max-height: min(90vh, 47rem);
     overscroll-behavior: contain;
     overflow-y: hidden;
+    place-self: center;
 
     @media screen and (min-width: 36em) {
       --dialog-padding: 2rem;

package/assets/sass/components/multiselect.scss

@@ -134,6 +134,14 @@
     }
   }
 
+  .dropdown {
+    display: none;
+    
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+  }
+
   .wrapper:is(:focus-within) .dropdown {
     display: var(--display-panel, none);
   }

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

@@ -27,7 +27,6 @@
 
 
 
-
 :host {
   display: flex !important;
   flex-direction: row !important;
@@ -200,7 +199,7 @@
 
     
     overscroll-behavior: contain;
-    width: calc(23.4375rem - var(--scrollbar-width));
+    width: 23.4375rem;
     background-color: var(--colour-canvas-2);
     position: absolute;
     height: calc(100vh - 6rem);
@@ -242,14 +241,14 @@
     }
 
     &.open {
-      left: calc(100% - (23.4375rem - var(--scrollbar-width)));
+      left: calc(100% - 23.4375rem);
       -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
       box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
       pointer-events: all;
     }
 
     &.closed * {
-      display: none !important;
+      //display: none !important;
     }
   }
 
@@ -410,10 +409,11 @@
     display: block;
     position: absolute;
     top: 0;
-    left: 0;
-    width: 100%;
-
+    left: 50%;
+    width: 100svw;
+    translate: -50svw 0;
 
+    
     .container {
       margin-left: auto;
       margin-right: auto;
@@ -544,6 +544,17 @@
       backdrop-filter: blur(2px);
     }
   }
+
+  :host(.open-secondary) .backdrop{
+
+    z-index: 1;
+    top: 0;
+  }
+
+  :host(.open-secondary) .has-secondary .menu__secondary {
+
+    z-index: 2;
+  }
 }
 /* #endregion */
 
@@ -551,7 +562,7 @@
 ::slotted(.nav--menu) {
   pointer-events: all;
   overscroll-behavior: contain;
-  width: calc(23.4375rem - var(--scrollbar-width));
+  width: 23.4375rem;
   background-color: var(--colour-canvas-2);
   position: absolute;
   height: calc(100vh - 6rem);
@@ -618,7 +629,7 @@ slot[name='menus'] {
   height: 100vh;
   overflow: hidden;
   pointer-events: none;
-  width: calc(23.4375rem - var(--scrollbar-width));
+  width: 23.4375rem;
 }
 
 ::slotted(.nav--menu[data-open-title]) {
@@ -629,7 +640,7 @@ slot[name='menus'] {
 
 ::slotted(.nav--menu.open) {
   width: calc(23.4375rem - var(--modifier, 0px));
-  left: calc(100% - (23.4375rem - var(--scrollbar-width, 0px) - var(--modifier, 0px)));
+  left: calc(100% - (23.4375rem - var(--modifier, 0px)));
   -webkit-box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
   pointer-events: all;

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

@@ -32,7 +32,6 @@
   .menu {
     /* position: relative; */
     position: absolute;
-    --scrollbar-width: 17px;
     top: 6rem; /* 96 */
     left: auto;
     right: 0;
@@ -40,7 +39,7 @@
     box-shadow: 0 6px 12px 0px rgba(0, 0, 0, 0.2);
     /* height: auto; */
     width: 100%;
-    max-width: calc(23.4375rem - var(--scrollbar-width));
+    max-width: calc(23.4375rem);
     transition: none;
   }
   .menu.closed * {