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

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

@@ -1,227 +1,224 @@
-@use 'sass:map';
-@use '../_func' as *;
-
-
-
-
-
-@layer elements {
-  details {
-    display: block;
-
-    &:not([open]) {
-      padding-bottom: 2rem;
-    }
-
-    summary {
-      font-size: 1.125rem; /* 18/16 */
-      line-height: 1.3125rem; /* 21 */ 
-      font-weight: normal;
-      color: var(--colour-heading);
-      display: block;
-
-      &:after {
-        content: '\f055';
-        display: inline-block;
-        margin-left: 0.5em;
-        line-height: 1em;
-        font-size: 1em;
-        font-family: 'Font Awesome 7 Pro';
-      }
-    }
-
-    &[open] summary {
-      margin-bottom: 1rem;
-    }
-  }
-
-  iam-accordion details {
-    --inline-padding: 0.125rem;
-    --border-radius: 0.5rem 0.5rem 0 0;
-    --icon-top: 0.875rem; /* 14/16 */
-    --line-height: 1.5rem;
-      --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-block: var(--block-padding) !important;
-      position: relative;
-      color: var(--colour-heading);
-
-      &:is(:hover, :focus-visible) {
-        background: var(--colour-light);
-        border-radius: var(--border-radius);
-      }
-
-      h3,
-      .h3 {
-        all: unset !important;
-      }
-
-      &::after {
-        display: none;
-      }
-
-      *:is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
-        max-width: 100%;
-        padding: 0;
-        margin: 0;
-
-        &:after {
-          content: '\f055';
-          position: absolute;
-          font-size: 1.5rem;
-          top: calc((#{var(--line-height)} / 2) - 0.75rem);
-          right: var(--inline-padding);
-          width: 1.5rem;
-          height: 1.5rem;
-          line-height: 1.5rem;
-          font-weight: 300;
-          font-family: 'Font Awesome 7 Pro';
-        }
-      }
-
-      *:is(h4, .h4, h2, .h2):after {
-        top: calc((#{var(--line-height)} / 2) + #{var(--inline-padding)} - 0.875rem);
-      }
-
-      .badge {
-        margin: 0 0 0 0.5rem;
-      }
-    }
-
-    &[open] summary {
-      margin-bottom: 2rem;
-    }
-
-    &[open] summary :is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
-      &:after {
-        content: '\f056';
-        font-weight: 900;
-      }
-    }
-
-    summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label)) {
-      // h3 purposelessly missed out
-
-      font-family: var(--font-heading);
-      font-style: normal;
-      color: var(--colour-heading);
-      clear: both;
-      display: block;
-
-      [class*='fa-'] {
-        margin-right: 0.5rem;
-      }
-
-      font-size: 1.125rem; /* 18/16 */
-      line-height: var(--line-height);
-      padding-bottom: var(--heading-pb);
-      font-weight: 700;
-      max-width: 100%;
-
-      &:after {
-        content: '\f055';
-        display: block;
-        position: absolute;
-        font-size: 1.5rem;
-        top: calc((#{var(--line-height)} / 2) - 0.75rem + 0.875rem);
-        right: var(--inline-padding);
-        width: 1.5rem;
-        height: 1.5rem;
-        margin: 0;
-        line-height: 1.5rem;
-        font-weight: 300;
-        font-family: 'Font Awesome 7 Pro';
-      }
-
-
-    }
-
-    &[open] summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6)) {
-      &:after {
-        content: '\f056';
-        
-      }
-    }
-  }
-
-  dialog iam-accordion details {
-    --inline-padding: var(--dialog-padding);
-
-    margin-inline: calc(var(--dialog-padding) * -1);
-    padding-inline: var(--dialog-padding);
-    width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
-
-    &:has(summary:is(:hover, :focus-visible)),
-    &[open] {
-      background: var(--colour-light);
-      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
-    &:has(+ details[open]),
-    &:has(summary:is(:hover, :focus-visible)),
-    &:has(+ details summary:is(:hover, :focus-visible)),
-    &[open] {
-      border-bottom: 1px solid var(--colour-border);
-    }
-
-    &:has(+ details[open]) summary,
-    &:has(summary:is(:hover, :focus-visible)) summary,
-    &:has(+ details summary:is(:hover, :focus-visible)) summary,
-    &[open] summary {
-      border-bottom: 0;
-    }
-
-    &[open] summary {
-      margin-bottom: 1rem;
-    }
-
-    summary {
-      --inline-padding: 0;
-    }
-
-
-    &::before {
-      content: '';
-    }
-  }
-}
+@layer elements {
+  details {
+    display: block;
+
+    &:not([open]) {
+      padding-bottom: 2rem;
+    }
+
+    summary {
+      font-size: 1.125rem; /* 18/16 */
+      line-height: 1.3125rem; /* 21 */ 
+      font-weight: normal;
+      color: var(--colour-heading);
+      display: block;
+
+      &:after {
+        content: '\f055';
+        display: inline-block;
+        margin-left: 0.5em;
+        line-height: 1em;
+        font-size: 1em;
+        font-family: 'Font Awesome 7 Pro';
+      }
+    }
+
+    &[open] summary {
+      margin-bottom: 1rem;
+    }
+  }
+
+  iam-accordion details {
+    --inline-padding: 0.125rem;
+    --border-radius: 0.5rem 0.5rem 0 0;
+    --icon-top: 0.875rem; /* 14/16 */
+    --line-height: 1.5rem;
+    --block-padding: 0.875rem; /* 14/16 */
+
+    *:not(iam-tabs) > &:not([open]) {
+      padding-bottom: 2.625rem; /* 42 */ 
+    }
+
+    summary {
+      border-bottom: 1px solid var(--colour-border);
+      padding-left: 0;
+      padding-inline-end: calc(var(--inline-padding) + 1.6875rem + 0.75rem);
+      padding-block: var(--block-padding) !important;
+      position: relative;
+      color: var(--colour-heading);
+
+      &:is(:hover, :focus-visible) {
+        background: var(--colour-light);
+        border-radius: var(--border-radius);
+      }
+
+      h3,
+      .h3 {
+        all: unset !important;
+      }
+
+      &::after {
+        display: none;
+      }
+
+      *:is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
+        max-width: 100%;
+        padding: 0;
+        margin: 0;
+
+        &:after {
+          content: '\f055';
+          position: absolute;
+          font-size: 1.5rem;
+          top: calc((var(--line-height) / 2) - 0.75rem);
+          right: var(--inline-padding);
+          width: 1.5rem;
+          height: 1.5rem;
+          line-height: 1.5rem;
+          font-weight: 300;
+          font-family: 'Font Awesome 7 Pro';
+        }
+      }
+
+      *:is(h4, .h4, h2, .h2):after {
+        top: calc((var(--line-height) / 2) + var(--inline-padding) - 0.875rem);
+      }
+
+      .badge {
+        margin: 0 0 0 0.5rem;
+      }
+    }
+
+    &[open] summary {
+      margin-bottom: 2rem;
+    }
+
+    &[open] summary :is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
+      &:after {
+        content: '\f056';
+        font-weight: 900;
+      }
+    }
+
+    summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label)) {
+      /*  h3 purposelessly missed out */
+
+      font-family: var(--font-heading);
+      font-style: normal;
+      color: var(--colour-heading);
+      clear: both;
+      display: block;
+
+      [class*='fa-'] {
+        margin-right: 0.5rem;
+      }
+
+      font-size: 1.125rem; /* 18/16 */
+      line-height: var(--line-height);
+      padding-bottom: var(--heading-pb);
+      font-weight: 700;
+      max-width: 100%;
+
+      &:after {
+        content: '\f055';
+        display: block;
+        position: absolute;
+        font-size: 1.5rem;
+        top: calc((var(--line-height) / 2) - 0.75rem + 0.875rem);
+        right: var(--inline-padding);
+        width: 1.5rem;
+        height: 1.5rem;
+        margin: 0;
+        line-height: 1.5rem;
+        font-weight: 300;
+        font-family: 'Font Awesome 7 Pro';
+      }
+
+
+    }
+
+    &[open] summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6)) {
+      &:after {
+        content: '\f056';
+        
+      }
+    }
+  }
+
+  @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);
+
+    margin-inline: calc(var(--dialog-padding) * -1);
+    padding-inline: var(--dialog-padding);
+    width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
+
+    &:has(summary:is(:hover, :focus-visible)),
+    &[open] {
+      background: var(--colour-light);
+      overflow: hidden;
+    }
+
+
+    /*  Fix the border bottom issue */
+    &:has(+ details[open]),
+    &:has(summary:is(:hover, :focus-visible)),
+    &:has(+ details summary:is(:hover, :focus-visible)),
+    &[open] {
+      border-bottom: 1px solid var(--colour-border);
+    }
+
+    &:has(+ details[open]) summary,
+    &:has(summary:is(:hover, :focus-visible)) summary,
+    &:has(+ details summary:is(:hover, :focus-visible)) summary,
+    &[open] summary {
+      border-bottom: 0;
+    }
+
+    &[open] summary {
+      margin-bottom: 1rem;
+    }
+
+    summary {
+      --inline-padding: 0;
+    }
+
+
+    &::before {
+      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,86 +1,75 @@
-@use 'sass:math';
-@use '../_func' as *;
-
-
-
-
-
-@layer elements {
-  // non-js fallback
-  body:not(.js-enabled) dialog:not([open]):target {
-    display: block;
-  }
-
-  // #region Default styling of both modals
-  dialog,
-  [popover] {
-    --dialog-padding: 1.5rem;
-
-    --mh-padding-inline: var(--dialog-padding);
-    color: inherit;
-    width: fit-content;
-    height: fit-content;
-    border: none;
-    overscroll-behavior: contain;
-    background: var(--colour-canvas-2);
-    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-    border-radius: 0.625rem; /* 10 */
-    padding: var(--dialog-padding);
-    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-
-    > *:last-child {
-      margin-bottom: 0;
-    }
-
-    > :is(p):last-child {
-      padding-bottom: 0;
-    }
-  }
-
-  dialog::backdrop {
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(4px);
-    overscroll-behavior: contain;
-  }
-
-  dialog[open],
-  [popover]:popover-open {
-    display: flex;
-    flex-direction: column;
-  }
-
-  // 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-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;
-    }
-
-    @media screen and (min-width: 62em) {
-      min-width: 28.375rem;
-      width: fit-content;
-      max-width: 46rem;
-    }
-
-  }
-  // #endregion
-
-  details.bg-light {
-    margin-inline: calc(var(--dialog-padding) * -1);
-    padding-inline: var(--dialog-padding);
-  }
-
-}
+@layer elements {
+  /*  non-js fallback */
+  body:not(.js-enabled) dialog:not([open]):target {
+    display: block;
+  }
+
+  /* #region Default styling of both modals */
+  dialog,
+  [popover] {
+    --dialog-padding: 1.5rem;
+
+    --mh-padding-inline: var(--dialog-padding);
+    color: inherit;
+    width: fit-content;
+    height: fit-content;
+    border: none;
+    overscroll-behavior: contain;
+    background: var(--colour-canvas-2);
+    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+    border-radius: 0.625rem; /* 10 */
+    padding: var(--dialog-padding);
+    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+
+    > :is(p):last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+    overscroll-behavior: contain;
+  }
+
+  dialog[open],
+  [popover]:popover-open {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /*  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 */
+    max-height: min(90vh, 47rem);
+    overscroll-behavior: contain;
+
+    @media screen and (min-width: 36em) {
+      min-width: 20.9375rem;
+      width: fit-content;
+      max-width: 42.875rem;
+    }
+
+    @media screen and (min-width: 62em) {
+      min-width: 28.375rem;
+      width: fit-content;
+      max-width: 46rem;
+    }
+  }
+
+  
+  /* #endregion */
+
+  details.bg-light {
+    margin-inline: calc(var(--dialog-padding) * -1);
+    padding-inline: var(--dialog-padding);
+  }
+}