@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/elements/progress.scss

@@ -1,129 +1,111 @@
 @use '../_func' as *;
 
-:is(label, .label):has(progress) {
-  position: relative;
-  max-width: $input-max-width;
-  margin-bottom: 2rem;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  padding-right: 3rem;
-}
-
-progress {
-  border-radius: rem(5);
-  display: block;
-  margin-top: rem(8);
-  width: calc(100% + 3rem);
-  height: rem(8);
-  margin-left: 0;
-  border: none;
-}
+@include layer('elements', $layers) {
+  :is(label, .label):has(progress) {
+    position: relative;
+    max-width: $input-max-width;
+    margin-bottom: 2rem;
 
-label[data-percent]:has(progress):before {
-  content: attr(data-percent) '%';
-  vertical-align: 0;
-  line-height: 1;
-  position: absolute;
-  top: auto;
-  left: auto;
-  right: 0;
-  bottom: rem(16);
-  color: var(--colour-heading);
-  font-weight: bold;
-}
+    padding-right: 3rem;
+  }
 
-progress[data-progress]:before {
-  content: attr(data-progress) '%';
-}
+  progress {
+    border-radius: rem(5);
+    display: block;
+    margin-top: rem(8);
+    width: calc(100% + 3rem);
+    height: rem(8);
+    margin-left: 0;
+    border: none;
+  }
 
-progress::-webkit-progress-bar {
-  background-color: var(--colour-light);
-  border-radius: rem(5);
-}
-progress::-webkit-progress-value {
-  background-color: var(--colour, var(--colour-info));
-  border-radius: rem(5);
-}
+  label[data-percent]:not(:has(strong)):has(progress):before {
+    content: attr(data-percent) '%';
+  }
 
-// #region inline progress
-:is(label, .label):has(.progress--inline) {
-  font-size: 1rem;
-  color: var(--colour-body);
+  label[data-percent]:not(:has(strong)):has(progress):before,
+  label[data-percent]:has(progress) strong {
+    vertical-align: 0;
+    line-height: 1;
+    position: absolute;
+    top: auto;
+    left: auto;
+    right: 0;
+    bottom: rem(16);
+    color: var(--colour-heading);
+    font-weight: bold;
+  }
 
-  &:before {
-    bottom: -0.25em;
+  progress[data-progress]:before {
+    content: attr(data-progress) '%';
   }
 
-  progress.progress--inline {
-    width: 100%;
+  progress::-webkit-progress-bar {
+    background-color: var(--colour-light);
+    border-radius: rem(5);
+  }
+  progress::-webkit-progress-value {
+    background-color: var(--colour, var(--colour-info));
+    border-radius: rem(5);
   }
-}
 
-// #endregion
-
-// #region Circular
-label:has(.progress--circular) {
-  --max-width: #{rem(200)};
-  --pt: #{rem(90)};
-  --pt-percent: 45%;
-  --bar-width: #{rem(20)};
-  --value-fs: #{rem(48)};
-  --value-pb: #{rem(32)};
-  --label-fs: #{rem(18)};
-
-  position: relative;
-  z-index: 1;
-  max-width: var(--max-width);
-  margin-bottom: 2rem;
-
-  padding-right: 0;
-  aspect-ratio: 1/1;
-  height: auto;
-  width: 100%;
-  text-align: center;
-  padding-top: min(calc(var(--pt-percent) + var(--value-pb)), calc(var(--pt) + var(--value-pb)));
-  padding-inline: var(--value-pb);
-
-  display: inline-block;
-  font-size: var(--label-fs);
-  line-height: 1;
-}
+  // #region inline progress
+  :is(label, .label):has(.progress--inline) {
+    font-size: 1rem;
+    color: var(--colour-body);
 
-label:has(.progress--circular.progress--md) {
-  --max-width: #{rem(170)};
-  --pt: #{rem(76.5)};
-  --pt-percent: 45%;
-  --bar-width: #{rem(20)};
-  --value-pb: #{rem(24)};
-}
+    &:before {
+      bottom: -0.25em;
+    }
 
-label:has(.progress--circular.progress--sm) {
-  --max-width: #{rem(120)};
-  --pt: #{rem(54)};
-  --pt-percent: 45%;
-  --bar-width: #{rem(16)};
-  --value-fs: #{rem(24)};
+    progress.progress--inline {
+      width: 100%;
+    }
+  }
 
-  --value-pb: #{rem(16)};
-  --label-fs: #{rem(12)};
-}
+  // #endregion
 
-// Responsive-ish settings
-*:has(> label > .progress--circular) {
-  container-type: inline-size;
-}
+  // #region Circular
+  label:has(.progress--circular) {
+    --max-width: #{rem(200)};
+    --pt: #{rem(90)};
+    --pt-percent: 45%;
+    --bar-width: #{rem(20)};
+    --value-fs: #{rem(48)};
+    --value-pb: #{rem(32)};
+    --label-fs: #{rem(18)};
+
+    position: relative;
+    z-index: 1;
+    max-width: var(--max-width);
+    margin-bottom: 2rem;
+
+    padding-right: 0;
+    aspect-ratio: 1/1;
+    height: auto;
+    width: 100%;
+    text-align: center;
+    padding-top: min(calc(var(--pt-percent) + var(--value-pb)), calc(var(--pt) + var(--value-pb)));
+    padding-inline: var(--value-pb);
+
+    display: inline-block;
+    font-size: var(--label-fs);
+    line-height: 1;
+  }
 
-@container (width <= 10.625rem) {
-  label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
+  label:has(.progress--circular.progress--md) {
     --max-width: #{rem(170)};
     --pt: #{rem(76.5)};
     --pt-percent: 45%;
     --bar-width: #{rem(20)};
     --value-pb: #{rem(24)};
   }
-}
 
-@container (width <= 7.5rem) {
-  label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
+  label:has(.progress--circular.progress--sm) {
     --max-width: #{rem(120)};
     --pt: #{rem(54)};
     --pt-percent: 45%;
@@ -133,71 +115,100 @@ label:has(.progress--circular.progress--sm) {
     --value-pb: #{rem(16)};
     --label-fs: #{rem(12)};
   }
-}
 
-label:has(.progress--circular) + label:has(.progress--circular) {
-  margin-left: 2rem;
-}
+  // Responsive-ish settings
+  *:has(> label > .progress--circular) {
+    container-type: inline-size;
+  }
 
-// Needed to allow it to be animated
-@property --progress {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 0%;
-}
+  @container (width <= 10.625rem) {
+    label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
+      --max-width: #{rem(170)};
+      --pt: #{rem(76.5)};
+      --pt-percent: 45%;
+      --bar-width: #{rem(20)};
+      --value-pb: #{rem(24)};
+    }
+  }
 
-.progress--circular {
-  --progress-shown: var(--progress, 0%);
-  position: absolute;
-  z-index: -2;
-  top: 0;
-  left: 0;
-  margin: 0;
-  background: red;
-  background: conic-gradient(
-    var(--colour, var(--colour-info)) var(--progress-shown),
-    var(--colour-light) var(--progress-shown) calc(100% - var(--progress-shown))
-  );
-  height: 100%;
-  width: 100%;
-  border-radius: 50%;
-  box-shadow: #{rem(3)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 20%);
-  transition: --progress 1s;
-}
+  @container (width <= 7.5rem) {
+    label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
+      --max-width: #{rem(120)};
+      --pt: #{rem(54)};
+      --pt-percent: 45%;
+      --bar-width: #{rem(16)};
+      --value-fs: #{rem(24)};
+
+      --value-pb: #{rem(16)};
+      --label-fs: #{rem(12)};
+    }
+  }
 
-.progress--circular::-webkit-progress-bar,
-.progress--circular::-webkit-progress-value {
-  opacity: 0;
-}
+  label:has(.progress--circular) + label:has(.progress--circular) {
+    margin-left: 2rem;
+  }
 
-.progress--circular::-moz-progress-bar {
-  opacity: 0;
-}
+  // Needed to allow it to be animated
+  @property --progress {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
 
-label[data-percent]:has(.progress--circular):before {
-  top: var(--pt-percent);
-  left: 50%;
-  right: auto;
-  bottom: auto;
-  color: var(--colour-heading);
-  transform: translate(-50%, -50%);
-  font-size: var(--value-fs);
-  line-height: 1;
-  z-index: 2;
-  text-indent: 0;
-}
+  .progress--circular {
+    --progress-shown: var(--progress, 0%);
+    position: absolute;
+    z-index: -2;
+    top: 0;
+    left: 0;
+    margin: 0;
+    background: red;
+    background: conic-gradient(
+      var(--colour, var(--colour-info)) var(--progress-shown),
+      var(--colour-light) var(--progress-shown) calc(100% - var(--progress-shown))
+    );
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    box-shadow: #{rem(3)} #{rem(3)} #{rem(6)} rgba(0, 0, 0, 20%);
+    transition: --progress 1s;
+  }
 
-label:has(.progress--circular):after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  aspect-ratio: 1/1;
-  width: calc(100% - var(--bar-width) - var(--bar-width));
-  background-color: var(--colour-canvas);
-  border-radius: 50%;
-}
+  .progress--circular::-webkit-progress-bar,
+  .progress--circular::-webkit-progress-value {
+    opacity: 0;
+  }
+
+  .progress--circular::-moz-progress-bar {
+    opacity: 0;
+  }
+
+  label[data-percent]:not(:has(strong)):has(.progress--circular):before,
+  label[data-percent]:has(.progress--circular) strong {
+    top: var(--pt-percent);
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    color: var(--colour-heading);
+    transform: translate(-50%, -50%);
+    font-size: var(--value-fs);
+    line-height: 1;
+    z-index: 2;
+    text-indent: 0;
+  }
 
-// #endregion
+  label:has(.progress--circular):after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    aspect-ratio: 1/1;
+    width: calc(100% - var(--bar-width) - var(--bar-width));
+    background-color: var(--colour-canvas);
+    border-radius: 50%;
+  }
+
+  // #endregion
+}

package/assets/sass/elements/table.element.scss

@@ -1,132 +1,138 @@
-@use '../_func.scss' as *;
+@use '../_func' as *;
 
-// #region reset
-table {
-  caption-side: bottom;
-  border-collapse: collapse;
-}
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-caption {
-  padding-top: $table-cell-padding-y;
-  padding-bottom: $table-cell-padding-y;
-  color: $table-caption-color;
-  text-align: left;
-}
+@include layer('elements', $layers) {
+  // #region reset
+  table {
+    caption-side: bottom;
+    border-collapse: collapse;
+  }
 
-// 1. Removes font-weight bold by inheriting
-// 2. Matches default `<td>` alignment by inheriting `text-align`.
-// 3. Fix alignment for Safari
+  caption {
+    padding-top: $table-cell-padding-y;
+    padding-bottom: $table-cell-padding-y;
+    color: $table-caption-color;
+    text-align: left;
+  }
 
-th {
-  font-weight: $table-th-font-weight; // 1
-  text-align: inherit; // 2
-  text-align: -webkit-match-parent; // 3
-}
+  // 1. Removes font-weight bold by inheriting
+  // 2. Matches default `<td>` alignment by inheriting `text-align`.
+  // 3. Fix alignment for Safari
 
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-}
-// #endregion
-
-// #region Default table
-table {
-  --border-width: 2px;
-  --inner-border-width: 2px;
-  width: 100%;
-  font-size: rem(16);
-  border: none;
-  margin-bottom: rem(32);
-  overflow: auto;
-}
+  th {
+    font-weight: $table-th-font-weight; // 1
+    text-align: inherit; // 2
+    text-align: -webkit-match-parent; // 3
+  }
 
-:is(td, th) {
-  padding: rem(12) rem(32) rem(12) 0;
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  td,
+  th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+  // #endregion
+
+  // #region Default table
+  table {
+    --border-width: 2px;
+    --inner-border-width: 2px;
+    width: 100%;
+    font-size: rem(16);
+    border: none;
+    margin-bottom: rem(32);
+    overflow: auto;
+  }
 
-  font-weight: normal;
-  text-align: left;
-  vertical-align: top;
-  border: none;
-  font-size: rem(16);
-  line-height: rem(20);
-  color: var(--colour-body);
+  :is(td, th) {
+    padding: rem(12) rem(32) rem(12) 0;
 
-  &:last-child {
-    padding-right: 0;
-  }
+    font-weight: normal;
+    text-align: left;
+    vertical-align: top;
+    border: none;
+    font-size: rem(16);
+    line-height: rem(20);
+    color: var(--colour-body);
 
-  p {
-    font-size: inherit;
-    padding: 0;
-    @container (width > 23.4375em) {
-      display: -webkit-box;
-      -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      min-width: rem(300);
+    &:last-child {
+      padding-right: 0;
     }
-  }
-}
-
-th {
-  font-weight: bold;
-  @include var(color, --colour-heading);
-}
 
-thead {
-  tr {
-    border-bottom: var(--border-width) solid currentColor;
-    @include var(border-color, --colour-primary);
-  }
-  th {
-    padding-top: 0;
-    vertical-align: bottom;
+    p {
+      font-size: inherit;
+      padding: 0;
+      @container (width > 23.4375em) {
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        min-width: rem(300);
+      }
+    }
   }
-}
 
-// Error messages
-tr td[colspan='100%']:first-child:last-child span {
-  max-width: rem(624);
-  font-weight: bold;
-  padding: 3rem;
-  text-align: center;
-  display: block;
-  color: var(--colour-heading);
-
-  @include media-breakpoint-up(md) {
-    max-width: rem(1048);
+  th {
+    font-weight: bold;
+    @include var(color, --colour-heading);
   }
-}
 
-@container (width >= 60em) {
   thead {
-    th:not(:empty) {
-      white-space: nowrap;
-      min-width: #{$td-mw};
+    tr {
+      border-bottom: var(--border-width) solid currentColor;
+      @include var(border-color, --colour-primary);
     }
-    th.th--mw-md {
-      min-width: rem(240);
+    th {
+      padding-top: 0;
+      vertical-align: bottom;
     }
-    th.th--mw-lg {
-      min-width: rem(360);
+  }
+
+  // Error messages
+  tr td[colspan='100%']:first-child:last-child span {
+    max-width: rem(624);
+    font-weight: bold;
+    padding: 3rem;
+    text-align: center;
+    display: block;
+    color: var(--colour-heading);
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      max-width: rem(1048);
     }
   }
-}
 
-tbody tr {
-  border-bottom: var(--border-width) solid currentColor;
-  @include var(border-color, --colour-border);
-}
+  @container (width >= 60em) {
+    thead {
+      th:not(:empty) {
+        white-space: nowrap;
+        min-width: #{$td-mw};
+      }
+      th.th--mw-md {
+        min-width: rem(240);
+      }
+      th.th--mw-lg {
+        min-width: rem(360);
+      }
+    }
+  }
 
-.border-0 > table,
-table.border-0 {
-  --border-width: 0px;
-  --inner-border-width: 0px;
+  tbody tr {
+    border-bottom: var(--border-width) solid currentColor;
+    @include var(border-color, --colour-border);
+  }
+
+  .border-0 > table,
+  table.border-0 {
+    --border-width: 0px;
+    --inner-border-width: 0px;
+  }
+  // #endregion
 }
-// #endregion