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

package/assets/sass/elements/prefix.scss

@@ -1,140 +1,140 @@
-@use 'sass:map';
-@use 'sass:math';
-
-@use '../_func' as *;
-
-
-@layer elements{
-  :is(.prefix, .suffix) {
-    display: none;
-  }
-  
-  :is(.prefix, .suffix) {
-    --fa-display: flex;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: auto;
-    padding: 0 0.75rem;
-    font-size: var(--input-fs, 1rem);
-    line-height: var(--input-lh, 1.25rem);
-    color: var(--colour-body);
-    background-color: var(--colour-primary-theme);
-    border: 2px solid var(--colour-primary);
-    color: var(--colour-white);
-    margin: 0 !important;
-    /* margin-bottom: 1rem; */
-    border-end-start-radius: 0.5rem;
-    border-start-start-radius: 0.5rem;
-    min-width: calc(2.75rem + 4px);
-    overflow: hidden;
-    white-space: nowrap;
-    text-align: center;
-    text-overflow: ellipsis;
-    position: relative;
-
-
-    height: calc(
-      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
-        4px
-    );
-
-    @supports (height: stretch) {
-      
-      height: stretch;
-    }
-
-
-    flex-shrink: 0;
-
-    &:after {
-      display: inline-block;
-      max-width: 1.25rem;
-    }
-
-    &[class*='fa-'] {
-      width: calc(2.75rem + 4px);
-      padding-inline: 0;
-    }
-
-    select {
-      position: absolute;
-      inset: 0;
-      opacity: 0;
-      cursor: pointer;
-    }
-
-    span {
-      display: none;
-    }
-
-    select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
-    select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
-    select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
-    select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
-    select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
-    select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
-    select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
-    select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
-    select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
-    select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
-      display: block;
-    }
-
-    select ~ span:after {
-      content: ' \f078';
-      font-family: 'Font Awesome 7 Pro';
-      font-size: 0.8em;
-      display: inline-block;
-      padding-left: 1em;
-    }
-
-    select:focus-visible ~ span:after {
-      content: '\f077';
-    }
-        
-    @container style(--font-body) {
-
-      &::before {
-        content: var(--iso)!important;
-      }
-      
-    }
-
-    @container style(--fa-font-regular) {
-
-      &::before {
-        content: var(--fa)!important;
-      }
-    }
-  }
-
-  .prefix {
-      border-right: none;
-    }
-
-    .suffix {
-      border-left: none;
-      border-end-start-radius: 0;
-      border-start-start-radius: 0;
-      border-start-end-radius: 0.5rem !important;
-      border-end-end-radius: 0.5rem !important;
-      order: 2;
-    }
-
-    .prefix span {
-      display: none;
-
-      small {
-        font-size: 0.8em;
-      }
-    }
-
-    .prefix
-      ~ :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), textarea, output) {
-      border-end-start-radius: 0 !important;
-      border-start-start-radius: 0 !important;
-    }
-
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+
+@layer elements{
+  :is(.prefix, .suffix) {
+    display: none;
+  }
+  
+  :is(.prefix, .suffix) {
+    --fa-display: flex;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    padding: 0 0.75rem;
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-body);
+    background-color: var(--colour-primary-theme);
+    border: 2px solid var(--colour-primary);
+    color: var(--colour-white);
+    margin: 0 !important;
+    /* margin-bottom: 1rem; */
+    border-end-start-radius: 0.5rem;
+    border-start-start-radius: 0.5rem;
+    min-width: calc(2.75rem + 4px);
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    text-overflow: ellipsis;
+    position: relative;
+
+
+    height: calc(
+      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
+        4px
+    );
+
+    @supports (height: stretch) {
+      
+      height: stretch;
+    }
+
+
+    flex-shrink: 0;
+
+    &:after {
+      display: inline-block;
+      max-width: 1.25rem;
+    }
+
+    &[class*='fa-'] {
+      width: calc(2.75rem + 4px);
+      padding-inline: 0;
+    }
+
+    select {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    span {
+      display: none;
+    }
+
+    select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
+    select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
+    select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
+    select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
+    select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
+    select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
+    select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
+    select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
+    select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
+    select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+      display: block;
+    }
+
+    select ~ span:after {
+      content: ' \f078';
+      font-family: 'Font Awesome 7 Pro';
+      font-size: 0.8em;
+      display: inline-block;
+      padding-left: 1em;
+    }
+
+    select:focus-visible ~ span:after {
+      content: '\f077';
+    }
+        
+    @container style(--font-body) {
+
+      &::before {
+        content: var(--iso)!important;
+      }
+      
+    }
+
+    @container style(--fa-font-regular) {
+
+      &::before {
+        content: var(--fa)!important;
+      }
+    }
+  }
+
+  .prefix {
+      border-right: none;
+    }
+
+    .suffix {
+      border-left: none;
+      border-end-start-radius: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0.5rem !important;
+      border-end-end-radius: 0.5rem !important;
+      order: 2;
+    }
+
+    .prefix span {
+      display: none;
+
+      small {
+        font-size: 0.8em;
+      }
+    }
+
+    .prefix
+      ~ :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), textarea, output) {
+      border-end-start-radius: 0 !important;
+      border-start-start-radius: 0 !important;
+    }
+
 }

package/assets/sass/elements/progress.scss

@@ -1,208 +1,208 @@
-@layer elements {
-  :is(label, .label):has(progress) {
-    position: relative;
-    max-width: var(--input-max-width);
-    margin-bottom: 2rem;
-
-    padding-right: 3rem;
-  }
-
-  progress {
-    border-radius: 0.3125rem; /* 5 */ 
-    display: block;
-    margin-top: 0.5rem;
-    width: calc(100% + 3rem);
-    height: 0.5rem;
-    margin-left: 0;
-    border: none;
-  }
-
-  label[data-percent]:not(:has(strong)):has(progress):before {
-    content: attr(data-percent) '%';
-  }
-
-  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: 1rem;
-    color: var(--colour-heading);
-    font-weight: bold;
-  }
-
-  progress[data-progress]:before {
-    content: attr(data-progress) '%';
-  }
-
-  progress::-webkit-progress-bar {
-    background-color: var(--colour-light);
-    border-radius: var(--border-radius, 0.3125rem);
-  }
-  progress::-webkit-progress-value {
-    background-color: var(--colour, var(--colour-info));
-    border-radius: var(--border-radius, 0.3125rem);
-  }
-
-  /* #region inline progress */
-  :is(label, .label):has(.progress--inline) {
-    font-size: 1rem;
-    color: var(--colour-body);
-
-    &:before {
-      bottom: -0.25em;
-    }
-
-    progress.progress--inline {
-      width: 100%;
-    }
-  }
-
-  /* #endregion */
-
-  /* #region Circular */
-  label:has(.progress--circular) {
-    --max-width: 12.5rem;
-    --pt: 5.625rem;
-    --pt-percent: 45%;
-    --bar-width: 1.25rem;
-    --value-fs: 3rem;
-    --value-pb: 2rem;
-    --label-fs: 1.125rem; /* 18/16 */
-
-    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;
-  }
-
-  label:has(.progress--circular.progress--md) {
-    --max-width: 10.625rem;
-    --pt: 4.78125rem;
-    --pt-percent: 45%;
-    --bar-width: 1.25rem;
-    --value-pb: 1.5rem;
-  }
-
-  label:has(.progress--circular.progress--sm) {
-    --max-width: 7.5rem; /* 120 */
-    --pt: 3.375rem;
-    --pt-percent: 45%;
-    --bar-width: 1rem;
-    --value-fs: 1.5rem;
-
-    --value-pb: 1rem;
-    --label-fs: 0.75rem;
-  }
-
-  /*  Responsive-ish settings */
-  *:has(> label > .progress--circular) {
-    container-type: inline-size;
-  }
-
-  @container (width <= 10.625rem) {
-    label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
-      --max-width: 10.625rem;
-      --pt: 4.78125rem
-      --pt-percent: 45%;
-      --bar-width: 1.25rem;
-      --value-pb: 1.5rem;
-    }
-  }
-
-  @container (width <= 7.5rem) {
-    label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
-      --max-width: 7.5rem; /* 120 */
-      --pt: 3.375rem;
-      --pt-percent: 45%;
-      --bar-width: 1rem;
-      --value-fs: 1.5rem;
-
-      --value-pb: 1rem;
-      --label-fs: 0.75rem;
-    }
-  }
-
-  label:has(.progress--circular) + label:has(.progress--circular) {
-    margin-left: 2rem;
-  }
-
-  /*  Needed to allow it to be animated */
-  @property --progress {
-    syntax: '<percentage>';
-    inherits: false;
-    initial-value: 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: 0.1875rem 0.1875rem 0.375rem rgba(0, 0, 0, 20%);
-    transition: --progress 1s;
-  }
-
-  .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;
-  }
-
-  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 */
-}
+@layer elements {
+  :is(label, .label):has(progress) {
+    position: relative;
+    max-width: var(--input-max-width);
+    margin-bottom: 2rem;
+
+    padding-right: 3rem;
+  }
+
+  progress {
+    border-radius: 0.3125rem; /* 5 */ 
+    display: block;
+    margin-top: 0.5rem;
+    width: calc(100% + 3rem);
+    height: 0.5rem;
+    margin-left: 0;
+    border: none;
+  }
+
+  label[data-percent]:not(:has(strong)):has(progress):before {
+    content: attr(data-percent) '%';
+  }
+
+  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: 1rem;
+    color: var(--colour-heading);
+    font-weight: bold;
+  }
+
+  progress[data-progress]:before {
+    content: attr(data-progress) '%';
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: var(--colour-light);
+    border-radius: var(--border-radius, 0.3125rem);
+  }
+  progress::-webkit-progress-value {
+    background-color: var(--colour, var(--colour-info));
+    border-radius: var(--border-radius, 0.3125rem);
+  }
+
+  /* #region inline progress */
+  :is(label, .label):has(.progress--inline) {
+    font-size: 1rem;
+    color: var(--colour-body);
+
+    &:before {
+      bottom: -0.25em;
+    }
+
+    progress.progress--inline {
+      width: 100%;
+    }
+  }
+
+  /* #endregion */
+
+  /* #region Circular */
+  label:has(.progress--circular) {
+    --max-width: 12.5rem;
+    --pt: 5.625rem;
+    --pt-percent: 45%;
+    --bar-width: 1.25rem;
+    --value-fs: 3rem;
+    --value-pb: 2rem;
+    --label-fs: 1.125rem; /* 18/16 */
+
+    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;
+  }
+
+  label:has(.progress--circular.progress--md) {
+    --max-width: 10.625rem;
+    --pt: 4.78125rem;
+    --pt-percent: 45%;
+    --bar-width: 1.25rem;
+    --value-pb: 1.5rem;
+  }
+
+  label:has(.progress--circular.progress--sm) {
+    --max-width: 7.5rem; /* 120 */
+    --pt: 3.375rem;
+    --pt-percent: 45%;
+    --bar-width: 1rem;
+    --value-fs: 1.5rem;
+
+    --value-pb: 1rem;
+    --label-fs: 0.75rem;
+  }
+
+  /*  Responsive-ish settings */
+  *:has(> label > .progress--circular) {
+    container-type: inline-size;
+  }
+
+  @container (width <= 10.625rem) {
+    label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
+      --max-width: 10.625rem;
+      --pt: 4.78125rem
+      --pt-percent: 45%;
+      --bar-width: 1.25rem;
+      --value-pb: 1.5rem;
+    }
+  }
+
+  @container (width <= 7.5rem) {
+    label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
+      --max-width: 7.5rem; /* 120 */
+      --pt: 3.375rem;
+      --pt-percent: 45%;
+      --bar-width: 1rem;
+      --value-fs: 1.5rem;
+
+      --value-pb: 1rem;
+      --label-fs: 0.75rem;
+    }
+  }
+
+  label:has(.progress--circular) + label:has(.progress--circular) {
+    margin-left: 2rem;
+  }
+
+  /*  Needed to allow it to be animated */
+  @property --progress {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 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: 0.1875rem 0.1875rem 0.375rem rgba(0, 0, 0, 20%);
+    transition: --progress 1s;
+  }
+
+  .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;
+  }
+
+  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 */
+}