@iamproperty/components 7.7.1--beta5 → 7.7.1--beta7

package/assets/sass/elements/{buttons--special.scss → buttons--special.css}

@@ -1,13 +1,11 @@
-@use '../_func' as *;
-
 @layer elements {
-  // #region btn compact
+  /* #region btn compact */
   .btn[popovertarget] {
   
     position: relative;
     anchor-name: --button2;
 
-    > .fa-chevron-down {
+    & > .fa-chevron-down {
       display: none;
     }
 
@@ -39,10 +37,9 @@
     }
   }
 
-  // #endregion
-
-  // #region Select as button
+  /* #endregion */
 
+  /* #region Select as button */
   .btn:has(select) {
     position: relative;
     padding: 0;
@@ -92,7 +89,8 @@
 
     select::picker-icon {
       display: none;
-    }  
+    }
+
     select::picker(select) {
       appearance: base-select;
       background: var(--menu-bg, canvas);
@@ -105,22 +103,17 @@
     }
 
     hr {
-      
       height: 1px !important;
       background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
       width: 100%;
       margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
       padding: 0 !important;
     }
+
     select option::checkmark {
       display: none;
     }
-    /*
-    select option:checked::checkmark {
-      content: '✔';
-      color: #2196f3;
-    }
-    */
+    
     select selectedcontent span {
       display: none;
     }
@@ -148,9 +141,9 @@
       pointer-events: none;
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region btn that is a select
+  /* #region btn that is a select */
   .btn-action:has(select) {
     padding-block: 0;
     padding-right: 2rem;
@@ -168,5 +161,5 @@
       right: 0.5rem;
     }
   }
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/elements/{buttons--tertiary.scss → buttons--tertiary.css}

@@ -1,12 +1,5 @@
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
-  // #region Tertiary Button
-
+  /* #region Tertiary Button */
   .btn.btn-tertiary {
     background-color: transparent;
     border: none;
@@ -35,11 +28,12 @@
       width: 0%;
     }
 
-    [class*='fa-'] {
+    &[class*='fa-'] {
       margin-left: 0;
       margin-right: 0.5rem;
     }
-    [class*='fa-']:not(:first-child) {
+    
+    &[class*='fa-']:not(:first-child) {
       margin-left: 0.5rem;
       margin-right: 0;
     }
@@ -53,5 +47,5 @@
       color: var(--colour-active);
     }
   }
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/elements/buttons.scss

@@ -1,14 +1,9 @@
 @use '../_func' as *;
 
-
-
-
-
 @use './buttons--global';
 @use './buttons--secondary';
 @use './buttons--tertiary';
 @use './buttons--action';
 @use './buttons--compact';
-
 @use './buttons--special';
 @use './button__group.css';

package/assets/sass/elements/container.scss

@@ -1,13 +1,6 @@
-@use 'sass:math';
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
-  // #region contain
-  // #region container
+
+  /* #region container */
   .container {
     display: block;
     margin-left: auto;
@@ -75,7 +68,7 @@
       padding-top: 2rem;
     }
 
-    // Fix the clearing for containers
+    /* Fix the clearing for containers */
     &:before {
       display: table;
       clear: both;
@@ -108,7 +101,7 @@
     width: 100%;
   }
 
-  // replicate container padding-bottom
+  /* replicate container padding-bottom */
   main > .row {
     padding-bottom: 1rem;
 
@@ -121,35 +114,5 @@
       padding-top: 2rem;
     }
   }
-  // #endregion
-
-  // #region Circles
-  .container {
-    &:has(.circle) {
-      position: relative;
-      z-index: 1;
-    }
-
-    > .circle {
-      position: absolute;
-      z-index: var(--index-below);
-      border-width: 3px;
-    }
-
-    // Default pattern
-    &:not([class*='circle-pattern-']) > .circle {
-      font-size: 18.75rem; /* (300) */
-      top: -4.6875rem;
-      left: -12.5rem; /* -200 */
-    }
-
-    &:not([class*='circle-pattern-']) > .circle ~ .circle {
-      font-size: 21.875rem;
-      top: auto;
-      left: auto;
-      right: -6.25rem;
-      bottom: -12.5rem; /* -200 */
-    }
-  }
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/elements/{details.scss → details.css}

@@ -1,10 +1,3 @@
-@use 'sass:map';
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
   details {
     display: block;
@@ -40,40 +33,16 @@
     --border-radius: 0.5rem 0.5rem 0 0;
     --icon-top: 0.875rem; /* 14/16 */
     --line-height: 1.5rem;
-      --block-padding: 0.875rem; /* 14/16 */
+    --block-padding: 0.875rem; /* 14/16 */
 
     *:not(iam-tabs) > &:not([open]) {
       padding-bottom: 2.625rem; /* 42 */ 
     }
 
-    @media screen and (min-width: 36em) {
-      --inline-padding: 0.875rem; /* 14/16 */
-      --block-padding: 0.875rem; /* 14/16 */
-      --icon-top: 1.5rem;
-      --line-height: 1.5rem;
-
-      summary {
-        &:has(.h2, h2, .h4, h4) {
-          --inline-padding: 1.375rem; /* 22 */ 
-          --block-padding: 1.375rem; /* 22 */ 
-        }
-      }
-
-      summary {
-        &:has(.h2, h2) {
-          --line-height: 3.25rem; /* 52 */ 
-        }
-
-        &:has(.h4, h4) {
-          --line-height: 1.875rem; /* 30 */ 
-        }
-      }
-    }
-
     summary {
       border-bottom: 1px solid var(--colour-border);
       padding-left: 0;
-      padding-inline-end: calc(#{var(--inline-padding)} + 1.6875rem + 0.75rem);
+      padding-inline-end: calc(var(--inline-padding) + 1.6875rem + 0.75rem);
       padding-block: var(--block-padding) !important;
       position: relative;
       color: var(--colour-heading);
@@ -101,7 +70,7 @@
           content: '\f055';
           position: absolute;
           font-size: 1.5rem;
-          top: calc((#{var(--line-height)} / 2) - 0.75rem);
+          top: calc((var(--line-height) / 2) - 0.75rem);
           right: var(--inline-padding);
           width: 1.5rem;
           height: 1.5rem;
@@ -112,7 +81,7 @@
       }
 
       *:is(h4, .h4, h2, .h2):after {
-        top: calc((#{var(--line-height)} / 2) + #{var(--inline-padding)} - 0.875rem);
+        top: calc((var(--line-height) / 2) + var(--inline-padding) - 0.875rem);
       }
 
       .badge {
@@ -132,7 +101,7 @@
     }
 
     summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label)) {
-      // h3 purposelessly missed out
+      /*  h3 purposelessly missed out */
 
       font-family: var(--font-heading);
       font-style: normal;
@@ -155,7 +124,7 @@
         display: block;
         position: absolute;
         font-size: 1.5rem;
-        top: calc((#{var(--line-height)} / 2) - 0.75rem + 0.875rem);
+        top: calc((var(--line-height) / 2) - 0.75rem + 0.875rem);
         right: var(--inline-padding);
         width: 1.5rem;
         height: 1.5rem;
@@ -176,6 +145,32 @@
     }
   }
 
+  @media screen and (min-width: 36em) {
+    iam-accordion details {
+      --inline-padding: 0.875rem; /* 14/16 */
+      --block-padding: 0.875rem; /* 14/16 */
+      --icon-top: 1.5rem;
+      --line-height: 1.5rem;
+
+      summary {
+        &:has(.h2, h2, .h4, h4) {
+          --inline-padding: 1.375rem; /* 22 */ 
+          --block-padding: 1.375rem; /* 22 */ 
+        }
+      }
+
+      summary {
+        &:has(.h2, h2) {
+          --line-height: 3.25rem; /* 52 */ 
+        }
+
+        &:has(.h4, h4) {
+          --line-height: 1.875rem; /* 30 */ 
+        }
+      }
+    }
+  }
+
   dialog iam-accordion details {
     --inline-padding: var(--dialog-padding);
 
@@ -189,14 +184,8 @@
       overflow: hidden;
     }
 
-    @media screen and (min-width: 36em) {
-      --dialog-padding: 2rem;
-      
-    margin-inline: calc(var(--dialog-padding) * -1);
-    padding-inline: var(--dialog-padding);
-    }
 
-    // Fix the border bottom issue
+    /*  Fix the border bottom issue */
     &:has(+ details[open]),
     &:has(summary:is(:hover, :focus-visible)),
     &:has(+ details summary:is(:hover, :focus-visible)),
@@ -224,4 +213,12 @@
       content: '';
     }
   }
+
+  @media screen and (min-width: 36em) {
+    dialog iam-accordion details {
+      --dialog-padding: 2rem;
+      margin-inline: calc(var(--dialog-padding) * -1);
+      padding-inline: var(--dialog-padding);
+    }
+  }
 }

package/assets/sass/elements/dialog.scss

@@ -1,17 +1,10 @@
-@use 'sass:math';
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
-  // non-js fallback
+  /*  non-js fallback */
   body:not(.js-enabled) dialog:not([open]):target {
     display: block;
   }
 
-  // #region Default styling of both modals
+  /* #region Default styling of both modals */
   dialog,
   [popover] {
     --dialog-padding: 1.5rem;
@@ -49,21 +42,17 @@
     flex-direction: column;
   }
 
-  // TODO: when the old modals are depreciated this selector can be simplified
+  /*  TODO: when the old modals are depreciated this selector can be simplified */
   *:not(.dialog__wrapper) > dialog[open],
   *:not(.dialog__wrapper) > [popover]:popover-open {
 
     overflow-y: auto;
     width: 90vw;
-    max-width: 20.25rem; // col-width*4
-
-    //height: 90vh;
+    max-width: 20.25rem; /*  col-width*4 */
     max-height: min(90vh, 47rem);
     overscroll-behavior: contain;
 
     @media screen and (min-width: 36em) {
-      //--dialog-padding: 2rem;
-      //padding: var(--dialog-padding);
       min-width: 20.9375rem;
       width: fit-content;
       max-width: 42.875rem;
@@ -74,13 +63,13 @@
       width: fit-content;
       max-width: 46rem;
     }
-
   }
-  // #endregion
+
+  
+  /* #endregion */
 
   details.bg-light {
     margin-inline: calc(var(--dialog-padding) * -1);
     padding-inline: var(--dialog-padding);
   }
-
 }

package/assets/sass/elements/{dropdown.scss → dropdown.css}

@@ -1,8 +1,6 @@
-@use '../_func' as *;
-
 @layer elements {
   
-  // #region Dropdown
+  /* #region Dropdown */
   .dropdown {
     position: absolute;
     top: calc(100% + 0.5rem);
@@ -20,9 +18,9 @@
     }
   }
 
-  // #endregion
+  /* #endregion */
   
-  // #region Needed for the component files
+  /* #region Needed for the component files */
   :is(iam-tag,iam-multiselect):has(label:not([slot='checked'])) {
     --display-panel: block;
   }
@@ -41,9 +39,9 @@
       color: var(--colour-heading);
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Indivitual options
+  /* #region Indivitual options */
   .dropdown__option[slot='checked'] {
     order: var(--order, 1);
   }
@@ -83,5 +81,5 @@
       }
     }
   }
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/elements/{feature.scss → feature.css}

@@ -1,8 +1,5 @@
-@use '../_func' as *;
-
 @layer elements {
   
-
   .feature {
 
     --padding: 1rem;
@@ -74,7 +71,7 @@
       display: block;
       font-weight: 900;
       font-size: 2rem;
-      //border-radius: 50%;
+      /* border-radius: 50%; */
       width: 4.8rem; /* TODO unmagic this number, should be 1 column width */
       padding: 0;
       height: 100%;
@@ -130,8 +127,6 @@
     }
   }
 
-
-
   .feature--loading {
     
     &:before {
@@ -176,5 +171,4 @@
         translate: 0 -50%;
       }
   }
-
 }