@iamproperty/components 7.6.3--beta1 → 7.6.3--beta3

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

@@ -35,12 +35,13 @@
 
     height: 1rem;
     width: 1rem;
+    background-color: var(--colour, var(--colour-info));
+    border-radius: 50%;
   }
-
   :host(:empty) .tooltip__anchor:after {
     font-family: "Font Awesome 6 Pro";
     font-weight: 900;
-    content: "\f059";
+    content: "\?";
     display: block;
     margin: 0;
     line-height: 1;
@@ -49,8 +50,22 @@
     top: 50%;
     left: 50%;
     translate: -50% -50%;
+    font-size: 0.6em;
+    font-weight: bold;
   }
 
+  ::slotted(i:first-child:last-child){
+    height: 1rem;
+    width: 1rem;
+    background-color: var(--colour, var(--colour-info));
+    color: var(--colour-primary);
+    font-size: 0.6em;
+    line-height: 1rem!important;
+    text-align: center;
+    border-radius: 50%;
+  }
+
+
   .tooltip__content {
     position: fixed;
     position-anchor: --anchor;

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

@@ -0,0 +1,25 @@
+@use './modal.component.scss';
+
+@layer components {
+  
+  dialog {
+    width: calc(100% - 6rem) !important;
+    max-width: 50rem !important;
+    padding: 0;
+    aspect-ratio: 16 / 9;
+
+    &[open]::before {
+      
+      display: none;
+    }
+    
+    &[open]::after {
+
+      display: none;
+    }
+  }
+  ::slotted(.embed) {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+  }
+}

package/assets/sass/elements/admin-panel.scss

@@ -1,9 +1,6 @@
 @use '../_func' as *;
 
 
-
-
-
 @layer elements {
   .admin-panel {
     --padding-x: 1.5rem;
@@ -19,6 +16,16 @@
     margin-bottom: 1.5rem;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
     overflow: hidden;
+    
+    &:has(
+      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-'])
+    ) {
+      display: grid;
+
+      > * {
+        grid-column: var(--col-start, col-1-start) / var(--col-end, col-12-end);
+      }
+    }
 
     @container style(--theme: dark) {
       background-color: var(--colour-canvas-2);
@@ -55,6 +62,7 @@
       line-height: 1.5rem;
       font-weight: bold;
       padding: 1rem 1.5rem;
+      max-width: unset;
     }
 
     > :is(.admin-panel__heading):first-child {
@@ -247,40 +255,20 @@
   // #endregion
   .admin-panel:has(.admin-panel__footer){
 
-    container-type: inline-size;
+    //container-type: inline-size;
   }
   .admin-panel__footer:last-child {
     background-color: var(--wider-colour);
     padding-top: var(--padding-top);
     margin-inline: calc(var(--padding-x) * -1);
     padding-inline: var(--padding-x);
-    padding-bottom: var(--padding-bottom);
-
-    p br {
-      display: none;
-    }
+    padding-bottom: 0;
 
-    strong:last-child {
-      white-space: nowrap;
-      padding-bottom: 0!important;
-      margin-inline-start: auto;
-    }
-    
+    & > *:last-child {
+      margin-bottom: 0;
+      padding-bottom: var(--padding-bottom);
 
-    @container (width > 36em) {
-      &:has(strong:last-child){
-        display: flex;
-        align-items: end;
-
-        p {
-          padding-bottom: 0;
-          padding-inline-end: var(--padding-x);
-          
-          br {
-            display: initial;
-          }
-        }
-      }
+      align-self: center;
     }
   }
 

package/assets/sass/elements/badge-tag.scss

@@ -49,12 +49,6 @@
     border-radius: 1rem;
     padding: 0 1rem;
 
-    &:not(:has(i)):after {
-      content: '\2715';
-      margin-left: 0.6em;
-      font-weight: bold;
-    }
-
     i {
       margin-left: 0.5rem;
     }
@@ -72,6 +66,13 @@
       background: var(--wider-colour-1) !important;
       color: #99adb1 !important;
     }
+
+    &:has([readonly]) {
+      pointer-events: none;
+    }
+    &:has([readonly]):after {
+      display: none!important;
+    }
   }
 
   iam-multiselect:not(:defined) .tag,

package/assets/sass/elements/button__group.css

@@ -0,0 +1,31 @@
+@layer elements {
+
+  .btn__group {
+
+    display: flex;
+    flex-direction: column;
+
+    .btn {
+      margin-inline-end: 0;
+      width: 100%;
+      max-width: 100%;
+      text-align: center;
+      white-space: normal;
+    }
+
+    
+  }
+  @container (min-width: 62em) {
+    .btn__group {
+      flex-direction: row;
+      column-gap: var(--gap);
+
+      .btn {
+        
+      max-width: fit-content;
+      white-space: nowrap;
+      }
+    }
+  }
+}
+

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

@@ -1,11 +1,8 @@
 @use '../_func' as *;
 
 
-
-
-
 @layer elements {
-  // #region btn compact
+
   .btn-compact {
     --compact-size: 3rem;
 
@@ -24,7 +21,8 @@
     min-height: var(--compact-size) !important;
     max-height: var(--compact-size) !important;
 
-    line-height: var(--compact-size) !important;
+        align-content: center;
+        line-height: 1 !important;
 
     text-indent: -500px;
     overflow: hidden;
@@ -34,6 +32,7 @@
     &:before {
       content: var(--fa);
       position: absolute;
+      display: block;
       top: 0;
       left: 0;
       width: 100%;
@@ -135,5 +134,54 @@
     }
   }
 
-  // #endregion
+  /* #region Detect font awesome has been loaded and if not show the inner text */
+  .btn-compact {
+    
+    &:is(
+      .fa-left,
+      .fa-chevron-left,
+      .fa-right,
+      .fa-chevron-right,
+      .fa-up,
+      .fa-chevron-up,
+      .fa-down,
+      .fa-chevron-down,
+      .fa-plus,
+      .fa-bars
+    ) {
+      --iso-display: block;
+      --iso-font-size: 1.5rem;
+      --iso-border-radius: 50%;
+      --iso-text-indent: -500px;
+    }
+    
+    @container style(--font-body) {
+
+      font-size: var(--iso-font-size, 0.6rem)!important;
+      border-radius: var(--iso-border-radius, 0)!important;
+      text-indent: var(--iso-text-indent, 0px);
+      white-space: initial;
+
+      &:before {
+        display: var(--iso-display, none);
+        font-family: monospace!important;
+        content: var(--iso)!important;
+      }
+    }
+    
+    @container style(--fa-font-regular) {
+
+      text-indent: -500px;
+      font-size: 1rem!important;
+      border-radius: 50%!important;
+
+      &:before {
+        font-family: "Font Awesome 6 Pro"!important;
+        content: var(--fa)!important;
+        display: block;
+      }
+    }
+    
+  }
+  /* #endregion */
 }

package/assets/sass/elements/buttons.scss

@@ -8,6 +8,7 @@
 @use './buttons--secondary.scss';
 @use './buttons--tertiary.scss';
 @use './buttons--action.scss';
-@use './buttons--compact.scss';
+@use './buttons--compact';
 
 @use './buttons--special.scss';
+@use './button__group.css';

package/assets/sass/elements/container.scss

@@ -14,6 +14,7 @@
     padding: var(--container-padding);
 
     grid-column: container !important;
+    container-type: inline-size;
     width: 100%;
 
     &:not(:has(.row)):has([class*='col-']) {

package/assets/sass/elements/feature.scss

@@ -1,38 +1,57 @@
 @use '../_func' as *;
 
-
-
-
-
 @layer elements {
   
 
   .feature {
 
+    --padding: 1rem;
     background-color: var(--colour-canvas-2);
     border: 1px solid var(--colour-border);
     border-radius: 0.5rem;
-    padding: 1rem 1rem 1rem 1rem;
+    padding: var(--padding);
+    margin-bottom: 1.5rem;
+    display: inline-block;
+    min-height: 2rem;
 
-    strong {
+    &:not(.d-flex) > strong:first-child {
       display: block;
       padding-bottom: 0.2em;
     }
+
+    &.d-flex {
+      gap: 0.5rem;
+    }
+  }
+
+  .admin-panel .feature {
+    --padding: 0rem;
+    border: 0;
+    margin-top: 0.5rem;
+    border-radius: 0;
+
+    &:has(+ .feature) {
+      border-bottom: 1px solid var(--colour-border);
+      padding-bottom: 1rem;
+      margin-bottom: 1rem;
+      min-height: 3rem;
+    }
   }
 
   .feature[class*="fa-"] {
 
-    padding-left: 4rem;
+    padding-left: calc(var(--padding) + 3rem);
     position: relative;
     
     &:before {
       position: absolute;
-      inset: 1rem;
+      inset: var(--padding);
       content: var(--fa);
       font-family: "Font Awesome 6 Pro";
       display: block;
 
       background-color: var(--colour-success);
+      color: var(--colour-primary-theme);
       border-radius: 50%;
       padding: 0;
       height: 2rem;

package/assets/sass/elements/highlight.css

@@ -0,0 +1,70 @@
+@layer elements {
+
+  .highlight {
+    
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    overflow: hidden;
+    position: relative;
+    
+    & > *:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    &:has(> img){
+      padding-right: 13rem;
+      position: relative;
+      min-height: 8rem;
+      align-items: center;
+    }
+
+    & > img {
+      width: 16rem;
+      position: absolute;
+      top: auto;
+      left: auto;
+      bottom: 0;
+      right: 0;
+      margin-right: -3rem;
+      margin-bottom: -4rem!important;
+    }
+
+    p:last-child, p:has(+ img:last-child) {
+      padding-bottom: 0;
+    }
+
+    & > iam-tooltip:empty:first-child {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+    }
+    & > iam-tooltip:has(i:first-child:last-child) {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+    }
+  }
+
+  .highlight:is([class*="bg-"],[class*="colour-"],[class*="colour-"]) {
+    --highlight-colour: var(--colour, var(--bg-colour,));
+    --tint: 80%;
+
+    &:not(.bg-primary, .gradient-primary){
+      
+      background-color: color-mix(in oklab, var(--highlight-colour), var(--colour-mix, #FCFCFC) var(--tint)) !important;
+    }
+
+    &:not(.bg-primary, .gradient-primary, .highlight--raised){
+      
+      border: 1px solid var(--highlight-colour);
+    }
+
+  }
+
+  .highlight--raised {
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    background-color: var(--colour-canvas-2);
+  }
+}

package/assets/sass/elements/hr.css

@@ -19,6 +19,7 @@
   }
 
   hr[class*="border-"] {
+    border: none;
     border-bottom:  var(--border-width) var(--border-style) var(--border-color);
   }
 

package/assets/sass/elements/links.scss

@@ -58,6 +58,10 @@
     position: relative;
     font-weight: bold;
 
+    &:last-child {
+      margin-right: 0;
+    }
+
     &:not(.text-decoration-none) {
       &:after {
         position: absolute;
@@ -167,7 +171,7 @@
   // #endregion
 }
 
-:is(.youtube-link[data-youtube], .vimeo-link[data-vimeo]) {
+:is(.youtube-link, .vimeo-link) {
   position: relative;
 
   &:before {

package/assets/sass/elements/modal.scss

@@ -260,18 +260,6 @@
 
   // #endregion
 
-  dialog:has(.embed) {
-    width: calc(100% - 6rem) !important;
-    max-width: 50rem !important;
-    padding: 0;
-    aspect-ratio: 16 / 9;
-
-    .embed {
-      aspect-ratio: 16 / 9;
-      width: 100%;
-    }
-  }
-
   // #region Multi step modal
 
   *:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {

package/assets/sass/elements/type.css

@@ -71,7 +71,15 @@
   .small {
     font-size: 0.875rem; /* 14/16 */
     line-height: 1.5rem;
-    padding-bottom: 3rem;
+    padding-bottom: 2rem;
+    max-width: var(--content-max-width);
+    font-weight: normal;
+  }
+  
+  .x-small {
+    font-size: 0.625rem; /* 10/16 */
+    line-height: 1.5rem;
+    padding-bottom: 1rem;
     max-width: var(--content-max-width);
     font-weight: normal;
   }

package/assets/sass/foundations/colours.scss

@@ -11,7 +11,7 @@
 
 
   // On any background colour we change the default text colour to our primary colour to stand out more
-  [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.invert-colours):not(iam-header):not(iam-notification):not(.bg-primary, .bg-danger, .bg-dark) {
+  [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.invert-colours):not(iam-header):not(iam-notification):not(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) {
     
     --colour-heading: var(--colour-primary-theme);
     --colour-body: var(--colour-primary-theme);
@@ -23,7 +23,7 @@
     }
   }
 
-  :is(.bg-primary, .bg-danger, .bg-dark) {
+  :is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) {
 
     --colour-heading: var(--colour-white);
     --colour-body: var(--colour-white);

package/assets/sass/utilities/columns.scss

@@ -0,0 +1,62 @@
+@layer utilities {
+
+  [class*='columns-']{
+    column-gap: var(--gap, 1rem);
+
+    > li {
+      break-inside: avoid-column; 
+    }
+  }
+
+  .columns-2 {
+    
+    column-count: 2;
+  }
+
+  .columns-3 {
+    
+    column-count: 3;
+  }
+
+  .columns-4 {
+    
+    column-count: 4;
+  }
+
+  
+  @media screen and (min-width: 36em) {
+
+    .columns-sm-2 {
+    
+      column-count: 2;
+    }
+
+    .columns-sm-3 {
+      
+      column-count: 3;
+    }
+
+    .columns-sm-4 {
+      
+      column-count: 4;
+    }
+  }
+  
+  @media screen and (min-width: 62em) {
+    .columns-md-2 {
+    
+      column-count: 2;
+    }
+
+    .columns-md-3 {
+      
+      column-count: 3;
+    }
+
+    .columns-md-4 {
+      
+      column-count: 4;
+    }
+  }
+
+}