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

package/assets/sass/elements/container.scss

@@ -1,118 +1,118 @@
-@layer elements {
-
-  /* #region container */
-  .container {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-
-    container-type: inline-size;
-    width: 100%;
-
-    &:not([class*='col-']){
-
-      grid-column: container !important;
-      padding: var(--container-padding);
-    }
-
-    &:not(:has(.row)):has([class*='col-']) {
-      display: grid;
-      grid-template-columns:
-        [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end
-        col-3-start] 1fr [col-3-end
-        col-4-start] 1fr [col-4-end
-        col-5-start] 1fr [col-5-end
-        col-6-start] 1fr [col-6-end
-        col-7-start] 1fr [col-7-end
-        col-8-start] 1fr [col-8-end
-        col-9-start] 1fr [col-9-end
-        col-10-start] 1fr [col-10-end
-        col-11-start] 1fr [col-11-end
-        col-12-start] 1fr [col-12-end content-end];
-      column-gap: 1rem;
-    }
-
-    [class*='col-span-']:not([class*='-col-span-']):not(:first-child) {
-      --col-start: auto;
-    }
-
-    @media screen and (min-width: 36em) {
-      [class*='sm-col-span-']:not(:first-child) {
-        --col-start: auto;
-      }
-    }
-
-    @media screen and (min-width: 62em) {
-      [class*='md-col-span-']:not(:first-child) {
-        --col-start: auto;
-      }
-    }
-
-    &:not(.container-fluid) {
-      max-width: var(--container-max-width);
-    }
-
-    .container:not(.container-xs-breakout) {
-      padding-left: 0;
-      padding-right: 0;
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-
-    &[class*='bg-'] {
-      padding-top: 3rem;
-      padding-bottom: 2rem;
-    }
-
-    &[class*='bg-'] + .container:not([class*='bg-']) {
-      padding-top: 2rem;
-    }
-
-    /* Fix the clearing for containers */
-    &:before {
-      display: table;
-      clear: both;
-      content: '';
-    }
-    &:after {
-      display: table;
-      clear: both;
-      content: '';
-    }
-
-    &.container-xs-breakout {
-      margin-left: -1.25rem;
-      margin-right: -1.25rem;
-      width: calc(100% + 2.5rem);
-
-      @media screen and (min-width: 36em) {
-        margin-left: auto;
-        margin-right: auto;
-        width: 100%;
-      }
-    }
-  }
-
-  :host .container {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    padding: var(--container-padding);
-    width: 100%;
-  }
-
-  /* replicate container padding-bottom */
-  main > .row {
-    padding-bottom: 1rem;
-
-    &[class*='bg-'] {
-      padding-top: 3rem;
-      padding-bottom: 2rem;
-    }
-
-    &[class*='bg-'] + :is(.row, .container):not([class*='bg-']) {
-      padding-top: 2rem;
-    }
-  }
-  /* #endregion */
-}
+@layer elements {
+
+  /* #region container */
+  .container {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    container-type: inline-size;
+    width: 100%;
+
+    &:not([class*='col-']){
+
+      grid-column: container !important;
+      padding: var(--container-padding);
+    }
+
+    &:not(:has(.row)):has([class*='col-']) {
+      display: grid;
+      grid-template-columns:
+        [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end
+        col-3-start] 1fr [col-3-end
+        col-4-start] 1fr [col-4-end
+        col-5-start] 1fr [col-5-end
+        col-6-start] 1fr [col-6-end
+        col-7-start] 1fr [col-7-end
+        col-8-start] 1fr [col-8-end
+        col-9-start] 1fr [col-9-end
+        col-10-start] 1fr [col-10-end
+        col-11-start] 1fr [col-11-end
+        col-12-start] 1fr [col-12-end content-end];
+      column-gap: 1rem;
+    }
+
+    [class*='col-span-']:not([class*='-col-span-']):not(:first-child) {
+      --col-start: auto;
+    }
+
+    @media screen and (min-width: 36em) {
+      [class*='sm-col-span-']:not(:first-child) {
+        --col-start: auto;
+      }
+    }
+
+    @media screen and (min-width: 62em) {
+      [class*='md-col-span-']:not(:first-child) {
+        --col-start: auto;
+      }
+    }
+
+    &:not(.container-fluid) {
+      max-width: var(--container-max-width);
+    }
+
+    .container:not(.container-xs-breakout) {
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: 0;
+      padding-top: 0;
+    }
+
+    &[class*='bg-'] {
+      padding-top: 3rem;
+      padding-bottom: 2rem;
+    }
+
+    &[class*='bg-'] + .container:not([class*='bg-']) {
+      padding-top: 2rem;
+    }
+
+    /* Fix the clearing for containers */
+    &:before {
+      display: table;
+      clear: both;
+      content: '';
+    }
+    &:after {
+      display: table;
+      clear: both;
+      content: '';
+    }
+
+    &.container-xs-breakout {
+      margin-left: -1.25rem;
+      margin-right: -1.25rem;
+      width: calc(100% + 2.5rem);
+
+      @media screen and (min-width: 36em) {
+        margin-left: auto;
+        margin-right: auto;
+        width: 100%;
+      }
+    }
+  }
+
+  :host .container {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: var(--container-padding);
+    width: 100%;
+  }
+
+  /* replicate container padding-bottom */
+  main > .row {
+    padding-bottom: 1rem;
+
+    &[class*='bg-'] {
+      padding-top: 3rem;
+      padding-bottom: 2rem;
+    }
+
+    &[class*='bg-'] + :is(.row, .container):not([class*='bg-']) {
+      padding-top: 2rem;
+    }
+  }
+  /* #endregion */
+}

package/assets/sass/elements/details.css

@@ -1,224 +1,224 @@
-@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);
-    }
-  }
-}
+@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);
+    }
+  }
+}