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

package/assets/sass/elements/forms.scss

@@ -9,92 +9,91 @@
 
 
 $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
-
 $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
 
 @layer elements {
-  // #region RESETS
+  /* #region RESETS */
 
 
-  // 1. Remove the margin in Firefox and Safari
+  /*  1. Remove the margin in Firefox and Safari */
   select,
   optgroup {
-    margin: 0; // 1
+    margin: 0; /*  1 */
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
   }
 
-  // Remove the inheritance of text transform in Firefox
+  /*  Remove the inheritance of text transform in Firefox */
   select {
     text-transform: none;
   }
-  // Set the cursor for non-`<button>` buttons
-  //
-  // Details at https://github.com/twbs/bootstrap/pull/30562
+  /*  Set the cursor for non-`<button>` buttons */
+  /*  */
+  /*  Details at https://github.com/twbs/bootstrap/pull/30562 */
 
   select {
-    // Remove the inheritance of word-wrap in Safari.
-    // See https://github.com/twbs/bootstrap/issues/24990
+    /*  Remove the inheritance of word-wrap in Safari. */
+    /*  See https://github.com/twbs/bootstrap/issues/24990 */
     word-wrap: normal;
 
-    // Undo the opacity change from Chrome
+    /*  Undo the opacity change from Chrome */
     &:disabled {
       opacity: 1;
     }
   }
 
   
-  // 1. Browsers set a default `min-width: min-content;` on fieldsets,
-  //    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
-  //    So we reset that to ensure fieldsets behave more like a standard block element.
-  //    See https://github.com/twbs/bootstrap/issues/12359
-  //    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
-  // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
+  /*  1. Browsers set a default `min-width: min-content;` on fieldsets, */
+  /*     unlike e.g. `<div>`s, which have `min-width: 0;` by default. */
+  /*     So we reset that to ensure fieldsets behave more like a standard block element. */
+  /*     See https://github.com/twbs/bootstrap/issues/12359 */
+  /*     and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */
+  /*  2. Reset the default outline behavior of fieldsets so they don't affect page layout. */
 
   fieldset {
-    min-width: 0; // 1
-    padding: 0; // 2
-    margin: 0; // 2
-    border: 0; // 2
+    min-width: 0; /*  1 */
+    padding: 0; /*  2 */
+    margin: 0; /*  2 */
+    border: 0; /*  2 */
   }
 
-  // Correct element displays
+  /*  Correct element displays */
 
   output {
     display: inline-block;
   }
 
-  // Remove border from iframe
+  /*  Remove border from iframe */
 
   iframe {
     border: 0;
   }
 
-  // Summary
-  //
-  // 1. Add the correct display in all browsers
+  /*  Summary */
+  /*  */
+  /*  1. Add the correct display in all browsers */
 
   summary {
-    display: list-item; // 1
+    display: list-item; /*  1 */
     cursor: pointer;
   }
 
-  // Progress
-  //
-  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  /*  Progress */
+  /*  */
+  /*  Add the correct vertical alignment in Chrome, Firefox, and Opera. */
 
   progress {
     vertical-align: baseline;
   }
 
-  // Hidden attribute
-  //
-  // Always hide an element with the `hidden` HTML attribute.
+  /*  Hidden attribute */
+  /*  */
+  /*  Always hide an element with the `hidden` HTML attribute. */
 
-  // #endregion
+  /* #endregion */
 
-  // #region input field
+  /* #region input field */
   :is(select:not(.select--minimal, .btn)) {
     
     display: block;
@@ -108,7 +107,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     background-color: var(--colour-canvas-2);
     background-clip: padding-box;
     border: 2px solid var(--colour-primary);
-    appearance: none; // Fix appearance for date inputs in Safari
+    appearance: none; /*  Fix appearance for date inputs in Safari */
     border-radius: 0.5rem;
     margin-bottom: 1.5rem;
     min-height: calc(
@@ -121,7 +120,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     );
 
 
-    // Customize the `:focus` state to imitate native WebKit styles.
+    /*  Customize the `:focus` state to imitate native WebKit styles. */
     &:is(:focus, .focus):not(:disabled) {
       border-color: var(--colour-info);
       outline: 0;
@@ -131,7 +130,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
     }
     
-    // Disabled inputs
+    /*  Disabled inputs */
     &:disabled {
       background-color: #ccd6d8;
       opacity: 0.4;
@@ -153,9 +152,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       cursor: not-allowed;
       pointer-events: none;
   }
-  // #endregion
+  /* #endregion */
 
-  // #region legend
+  /* #region legend */
   fieldset {
     width: 100%;
     position: relative;
@@ -177,9 +176,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     min-width: 100%;
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region wrappers
+  /* #region wrappers */
   div:has(> label:first-child):has(> input) {
     position: relative;
     max-width: var(--input-max-width);
@@ -238,9 +237,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       margin-inline-end: 1rem;
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region readonly
+  /* #region readonly */
   *:has(> input[readonly]) {
     position: relative;
 
@@ -260,9 +259,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     }
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region prefix
+  /* #region prefix */
   
   @supports selector(:has(*)) {
     
@@ -295,9 +294,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     }
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region Form validation
+  /* #region Form validation */
 
   .was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid]):not(.is-valid) + label,
   .was-validated label:has(*:not(button):is(:invalid, .is-invalid, [aria-invalid]):not(.is-valid)) {
@@ -360,7 +359,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     display: none;
   }
 
-  // Postcode lookup validation
+  /*  Postcode lookup validation */
   iam-address-lookup:has([required]) {
     --req-display: none;
   }
@@ -376,7 +375,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     --error-hide: none;
   }
 
-  // #region radio/checkbox field
+  /* #region radio/checkbox field */
   @supports selector(:has(*)) {
     input:is([type='radio'], [type='checkbox']) {
       position: absolute;
@@ -496,7 +495,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       }
     }
 
-    // multiple radio's together
+    /*  multiple radio's together */
     :is(div, fieldset):has(> :is(input[type='radio'], input[type='checkbox']):nth-of-type(2)) {
       label:not(.tag):not(:has(> iam-card)) {
         margin-bottom: 0rem;
@@ -611,7 +610,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       }
     }
 
-    // Disabled
+    /*  Disabled */
     input:is([type='radio'], [type='checkbox']):disabled + label,
     label:not(.tag):has(input:is([type='radio'], [type='checkbox']):disabled) {
       opacity: 0.4;
@@ -643,9 +642,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       }
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Conditional reveal
+  /* #region Conditional reveal */
   .conditional {
     display: none;
   }
@@ -677,26 +676,26 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     display: block;
     clear: both;
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Multi-select
+  /* #region Multi-select */
   select[multiple] {
     border-radius: 0.35rem;
   }
   select[multiple]::-webkit-scrollbar {
-    width: 0.7rem; // manage scrollbar width here
+    width: 0.7rem; /*  manage scrollbar width here */
   }
   select[multiple]::-webkit-scrollbar * {
-    background-color: transparent; // manage scrollbar background color here
+    background-color: transparent; /*  manage scrollbar background color here */
   }
   select[multiple]::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.2);
-    //background-color:#000000!important; // manage scrollbar thumb background color here
+    /* background-color:#000000!important; // manage scrollbar thumb background color here */
     border-radius: 0.35rem;
   }
-  // #endregion
+  /* #endregion */
 
-  // #region Select
+  /* #region Select */
 
   select:not(.select--minimal, .btn) {
     $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
@@ -733,7 +732,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       border-color: black;
     }
 
-    // Remove outline from select box in FF
+    /*  Remove outline from select box in FF */
     &:-moz-focusring {
       color: transparent;
       text-shadow: 0 0 0 inherit;
@@ -774,7 +773,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     }
 
     &:hover {
-      //border: none;
+      /* border: none; */
       background: var(--colour-light);
     }
 
@@ -811,17 +810,17 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       color: var(--colour-body);
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region file upload
+  /* #region file upload */
   iam-fileupload {
     input {
       display: none;
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region label with input field in
+  /* #region label with input field in */
   :is(label:not(.tag), .label):has(:is(input, select, textarea)) {
     display: block;
     margin-bottom: 1.5rem;
@@ -886,9 +885,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     }
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region input range
+  /* #region input range */
   input[type='range'] {
     --track-size: 0.5rem;
     --track-colour: var(--colour-light);
@@ -918,7 +917,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     left: 0;
   }
 
-  // Track Styles
+  /*  Track Styles */
   input[type='range']::-webkit-slider-runnable-track {
     background: var(--track-colour);
     height: var(--track-size);
@@ -931,7 +930,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     border-radius: 0.5rem;
   }
 
-  // Thumb Styles
+  /*  Thumb Styles */
   input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none; /* Override default look */
     appearance: none;
@@ -956,7 +955,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     pointer-events: all;
   }
 
-  // Focus Styles
+  /*  Focus Styles */
   input[type='range']:focus {
     outline: none;
   }
@@ -984,9 +983,9 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     margin: 0;
   }
 
-  // #endregion
+  /* #endregion */
 
-  // #region Date and time fields
+  /* #region Date and time fields */
   :is(input[type='date'],input[type='datetime-local'],input[type='year'],input[type='month'],input[type='week'], input[type='time']) {
     position: relative;
     margin-right: -3rem;
@@ -1013,10 +1012,10 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     z-index: 99;
     max-width: fit-content;
   }
-  // #endregion
+  /* #endregion */
 }
 
-// #region datalist
+/* #region datalist */
 :is(iam-advanced-select, iam-search, .postcode-lookup) {
   position: relative;
   display: block;
@@ -1169,7 +1168,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     --colour-body: var(--colour-primary-theme);
     color: var(--colour-primary-theme);
 
-    // Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten
+    /*  Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten */
     > * {
       color-scheme: light;
     }
@@ -1199,7 +1198,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   border-radius: 0.5rem;
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
   width: 100% !important;
-  //max-width: var(--menu-item-width, 50rem) !important;
+  /* max-width: var(--menu-item-width, 50rem) !important; */
   z-index: 100;
   display: none;
   max-height: 25rem;
@@ -1335,4 +1334,4 @@ iam-address-lookup [slot="preloadedList"]{
     display: block;
   }
 }
-// #endregion
+/* #endregion */

package/assets/sass/elements/input.scss

@@ -7,14 +7,14 @@
 @layer elements {
 
   input {
-    margin: 0; // 1
+    margin: 0; /*  1 */
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
   }
 
-  // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
-  // See https://stackoverflow.com/a/54997118
+  /*  Remove the dropdown arrow only from text type inputs built with datalists in Chrome. */
+  /*  See https://stackoverflow.com/a/54997118 */
 
   [list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
       [type='time']
@@ -22,25 +22,25 @@
     display: none !important;
   }
 
-  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-  //    controls in Android 4.
-  // 2. Correct the inability to style clickable types in iOS and Safari.
-  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
+  /*  1. Prevent a WebKit bug where (2) destroys native `audio` and `video` */
+  /*     controls in Android 4. */
+  /*  2. Correct the inability to style clickable types in iOS and Safari. */
+  /*  3. Opinionated: add "hand" cursor to non-disabled button elements. */
 
-  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+  /*  Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */
 
   ::-moz-focus-inner {
     padding: 0;
     border-style: none;
   }
 
-  // 1. By using `float: left`, the legend will behave like a block element.
-  //    This way the border of a fieldset wraps around the legend if present.
-  // 2. Fix wrapping bug.
-  //    See https://github.com/twbs/bootstrap/issues/29712
+  /*  1. By using `float: left`, the legend will behave like a block element. */
+  /*     This way the border of a fieldset wraps around the legend if present. */
+  /*  2. Fix wrapping bug. */
+  /*     See https://github.com/twbs/bootstrap/issues/29712 */
 
   legend {
-    float: left; // 1
+    float: left; /*  1 */
     width: 100%;
     padding: 0;
     margin-bottom: 0.5rem;
@@ -49,12 +49,12 @@
     line-height: inherit;
 
     + * {
-      clear: left; // 2
+      clear: left; /*  2 */
     }
   }
 
-  // Fix height of inputs with a type of datetime-local, date, month, week, or time
-  // See https://github.com/twbs/bootstrap/issues/18842
+  /*  Fix height of inputs with a type of datetime-local, date, month, week, or time */
+  /*  See https://github.com/twbs/bootstrap/issues/18842 */
 
   ::-webkit-datetime-edit-fields-wrapper,
   ::-webkit-datetime-edit-text,
@@ -70,21 +70,21 @@
     height: auto;
   }
 
-  // 1. Correct the outline style in Safari.
-  // 2. This overrides the extra rounded corners on search inputs in iOS so that our
-  //    `.form-control` class can properly style them. Note that this cannot simply
-  //    be added to `.form-control` as it's not specific enough. For details, see
-  //    https://github.com/twbs/bootstrap/issues/11586.
+  /*  1. Correct the outline style in Safari. */
+  /*  2. This overrides the extra rounded corners on search inputs in iOS so that our */
+  /*     `.form-control` class can properly style them. Note that this cannot simply */
+  /*     be added to `.form-control` as it's not specific enough. For details, see */
+  /*     https://github.com/twbs/bootstrap/issues/11586. */
 
   [type='search'] {
-    outline-offset: -2px; // 1
-    -webkit-appearance: textfield; // 2
+    outline-offset: -2px; /*  1 */
+    -webkit-appearance: textfield; /*  2 */
   }
 
-  // 1. A few input types should stay LTR
-  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
-  // 2. RTL only output
-  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+  /*  1. A few input types should stay LTR */
+  /*  See https://rtlstyling.com/posts/rtl-styling#form-inputs */
+  /*  2. RTL only output */
+  /*  See https://rtlcss.com/learn/usage-guide/control-directives/#raw */
 
   /* rtl:raw:
 [type="tel"],
@@ -95,13 +95,13 @@
 }
 */
 
-  // Remove the inner padding in Chrome and Safari on macOS.
+  /*  Remove the inner padding in Chrome and Safari on macOS. */
 
   ::-webkit-search-decoration {
     -webkit-appearance: none;
   }
 
-  // Remove padding around color pickers in webkit browsers
+  /*  Remove padding around color pickers in webkit browsers */
 
   ::-webkit-color-swatch-wrapper {
     padding: 0;
@@ -117,18 +117,18 @@
     border: none;
   }
 
-  // 1. Inherit font family and line height for file input buttons
-  // 2. Correct the inability to style clickable types in iOS and Safari.
+  /*  1. Inherit font family and line height for file input buttons */
+  /*  2. Correct the inability to style clickable types in iOS and Safari. */
 
   ::file-selector-button {
-    font: inherit; // 1
-    -webkit-appearance: button; // 2
+    font: inherit; /*  1 */
+    -webkit-appearance: button; /*  2 */
   }
 
 
   
 
-  // #region input field
+  /* #region input field */
   :is(
     input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
     output
@@ -144,7 +144,7 @@
     background-color: var(--colour-canvas-2);
     background-clip: padding-box;
     border: 2px solid var(--colour-primary);
-    appearance: none; // Fix appearance for date inputs in Safari
+    appearance: none; /*  Fix appearance for date inputs in Safari */
     border-radius: 0.5rem;
     margin-bottom: 1.5rem;
     min-height: calc(
@@ -156,7 +156,7 @@
         4px
     );
 
-    // Customize the `:focus` state to imitate native WebKit styles.
+    /*  Customize the `:focus` state to imitate native WebKit styles. */
     &:is(:focus, .focus):not(:disabled) {
       border-color: var(--colour-info);
       outline: 0;
@@ -165,15 +165,15 @@
     &:is(:focus, .focus):not(:disabled):not(:invalid) {
       box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
     }
-    // Add some height to date inputs on iOS
-    // https://github.com/twbs/bootstrap/issues/23307
-    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+    /*  Add some height to date inputs on iOS */
+    /*  https://github.com/twbs/bootstrap/issues/23307 */
+    /*  TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved */
     &::-webkit-date-and-time-value {
-      // Multiply line-height by 1em if it has no unit
+      /*  Multiply line-height by 1em if it has no unit */
       height: if(math.unit(1.5) == '', 1.5 * 1em, 1.5);
     }
 
-    // Disabled inputs
+    /*  Disabled inputs */
     &:disabled {
       background-color: #ccd6d8;
       opacity: 0.4;
@@ -208,6 +208,6 @@
     max-width: var(--input-max-width);
   }
 
-  // #endregion
+  /* #endregion */
 
 }

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

@@ -9,7 +9,7 @@
     color: var(--colour-heading);
     display: block;
 
-    > iam-rating {
+    & > iam-rating {
       
       margin-top: 0.25rem!important;
     }