@iamproperty/components 7.5.1--beta9 → 7.5.1--beta11

package/assets/sass/components/tooltip.component.scss

@@ -0,0 +1,120 @@
+@use '../_func.scss' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@layer components {
+
+  :host {
+    display: inline;
+    position: relative;
+    text-decoration: underline;
+    text-decoration-style: dashed;
+    text-underline-offset: 0.2em;
+    overflow-anchor: none; 
+    cursor: pointer;
+  }
+
+  .tooltip__anchor {
+
+    anchor-name: --anchor;
+    position: absolute;
+    display: block;
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    min-width: 1rem;
+    left: auto;
+    right: 0;
+  }
+
+  :host(:empty) .tooltip__anchor{
+
+    height: 1rem;
+    width: 1rem;
+  }
+
+  :host(:empty) .tooltip__anchor:after {
+    font-family: "Font Awesome 6 Pro";
+    font-weight: 900;
+    content: "\f059";
+    display: block;
+    margin: 0;
+    line-height: 1;
+    color: var(--colour-primary);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  .tooltip__content {
+    position: fixed;
+    position-anchor: --anchor;
+    position-area: center end;
+    position-try-fallbacks:  bottom span-all, top span-all, start;
+
+    container-type: anchored;
+    max-width: #{rem(270)};
+    background: var(--colour-primary);
+    color: var(--colour-white);
+    padding: rem(24);
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+    margin: 0.75rem;
+    overflow: visible;
+
+    > strong:first-child {
+      display: block;
+      padding-bottom: 1rem;
+      color: inherit;
+    }
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      max-width: #{rem(335)};
+    }
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      max-width: #{rem(360)};
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 50%;
+      left: -0.45rem;   
+      transform: translate(-50%, 0);
+      border-width: 0.5rem;
+      border-style: solid;
+      border-color: transparent var(--colour-primary) transparent transparent;
+      margin-bottom: -0.5rem;
+
+      @container anchored(fallback: top span-all) {
+
+        left: 50%;    
+        bottom: auto;
+        top: 100%;
+        border-color: var(--colour-primary) transparent transparent transparent;
+        margin-bottom: -1px;
+      }
+  
+      @container anchored(fallback: bottom span-all) {
+
+        top: auto;
+        bottom: 100%;
+        left: 50%;    
+        border-color: transparent transparent var(--colour-primary) transparent;
+        margin-bottom: -1px;
+      }
+  
+      @container anchored(fallback: start) {
+
+        display: none;
+      }
+    }
+  }
+}

package/assets/sass/elements/buttons--special.scss

@@ -0,0 +1,45 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+
+  // #region btn compact
+  .btn[popovertarget] {
+  
+    position: relative;
+    anchor-name: --button2;
+
+    > .fa-chevron-down {
+      display: none;
+    }
+
+    &:after {
+      content: '';
+
+      display: inline-block;
+      margin-left: 1em;
+
+      height: 0.8em;
+      width: 0.8em;
+      z-index: var(--index-focus);
+      background: currentColor;
+      mask-image: var(--icon-arrow);
+      mask-size: 100%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon-arrow);
+      -webkit-mask-size: 100%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+
+      transform: rotate(90deg);
+    }
+
+    &[aria-pressed]:after {
+      transform: rotate(270deg);
+    }
+  }
+
+  // #endregion

package/assets/sass/elements/buttons.scss

@@ -29,3 +29,9 @@ $darkMode: 'true' !default;
   $darkMode: $darkMode,
   $mobileOnly: $mobileOnly
 );
+
+@use './buttons--special.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);

package/assets/sass/elements/dialog.scss

@@ -12,7 +12,8 @@ $darkMode: 'true' !default;
   }
 
   // #region Default styling of both modals
-  dialog {
+  dialog,
+  [popover] {
     --dialog-padding: #{rem(24)};
 
     --mh-padding-inline: var(--dialog-padding);
@@ -42,13 +43,15 @@ $darkMode: 'true' !default;
     overscroll-behavior: contain;
   }
 
-  dialog[open] {
+  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([popover]) {
+  *:not(.dialog__wrapper) > dialog[open],
+  *:not(.dialog__wrapper) > [popover]:popover-open {
 
     overflow-y: auto;
     width: 90vw;
@@ -59,8 +62,8 @@ $darkMode: 'true' !default;
     overscroll-behavior: contain;
 
     @include media-breakpoint-up(sm, $mobileOnly) {
-      --dialog-padding: #{rem(32)};
-      padding: var(--dialog-padding);
+      //--dialog-padding: #{rem(32)};
+      //padding: var(--dialog-padding);
       min-width: rem(335);
       width: fit-content;
       max-width: rem(686);
@@ -75,11 +78,9 @@ $darkMode: 'true' !default;
   }
   // #endregion
 
-
   details.bg-light {
     margin-inline: calc(var(--dialog-padding) * -1);
     padding-inline: var(--dialog-padding);
   }
 
 }
-

package/assets/sass/elements/feature.scss

@@ -0,0 +1,53 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  
+
+  .feature {
+
+    background-color: var(--colour-canvas-2);
+    border: 1px solid var(--colour-border);
+    border-radius: 0.5rem;
+    padding: 1rem 1rem 1rem 1rem;
+
+    strong {
+      display: block;
+      padding-bottom: 0.2em;
+    }
+  }
+
+  .feature[class*="fa-"] {
+
+    padding-left: 4rem;
+    position: relative;
+    
+    &:before {
+      position: absolute;
+      inset: 1rem;
+      content: var(--fa);
+      font-family: "Font Awesome 6 Pro";
+      display: block;
+
+      background-color: var(--colour-success);
+      border-radius: 50%;
+      padding: 0;
+      height: 2rem;
+      line-height: 2rem;
+      width: 2rem;
+      text-align: center;
+    }
+  }
+
+  .feature[class*="fa-rocket"] {
+
+    &:before {
+      
+      padding-right: 0.1rem;
+    }
+  }
+
+}

package/assets/sass/elements/forms.scss

@@ -3,6 +3,9 @@
 
 @use '../_func' as *;
 
+@use './input' as *;
+
+
 $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>");
@@ -20,8 +23,6 @@ $optionalText: 'true' !default;
   }
 
   // 1. Remove the margin in Firefox and Safari
-
-  input,
   select,
   optgroup,
   textarea {
@@ -50,26 +51,7 @@ $optionalText: 'true' !default;
     }
   }
 
-  // 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']
-    )::-webkit-calendar-picker-indicator {
-    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.
-
-  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-
-  ::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-  }
+  
 
   // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
 
@@ -91,97 +73,6 @@ $optionalText: 'true' !default;
     border: 0; // 2
   }
 
-  // 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
-    width: 100%;
-    padding: 0;
-    margin-bottom: $legend-margin-bottom;
-    @include font-size($legend-font-size);
-    font-weight: $legend-font-weight;
-    line-height: inherit;
-
-    + * {
-      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
-
-  ::-webkit-datetime-edit-fields-wrapper,
-  ::-webkit-datetime-edit-text,
-  ::-webkit-datetime-edit-minute,
-  ::-webkit-datetime-edit-hour-field,
-  ::-webkit-datetime-edit-day-field,
-  ::-webkit-datetime-edit-month-field,
-  ::-webkit-datetime-edit-year-field {
-    padding: 0;
-  }
-
-  ::-webkit-inner-spin-button {
-    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.
-
-  [type='search'] {
-    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
-
-  /* rtl:raw:
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-  direction: ltr;
-}
-*/
-
-  // Remove the inner padding in Chrome and Safari on macOS.
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  // Remove padding around color pickers in webkit browsers
-
-  ::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-
-  ::-moz-color-swatch {
-    border-radius: 0;
-    border: none;
-  }
-
-  ::-webkit-color-swatch {
-    border-radius: 0;
-    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.
-
-  ::file-selector-button {
-    font: inherit; // 1
-    -webkit-appearance: button; // 2
-  }
-
   // Correct element displays
 
   output {
@@ -232,73 +123,13 @@ $optionalText: 'true' !default;
 
   // #region input field
   :is(
-    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-    textarea,
-    output,
     select:not(.select--minimal, .btn)
   ) {
-    display: block;
-    width: 100%;
-    display: block;
-    width: 100%;
-    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-inline, #{rem(16)});
-    font-size: var(--input-fs, #{rem(16)});
-    line-height: var(--input-lh, #{rem(20)});
-    color: var(--colour-heading);
-    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
-    border-radius: rem(8);
-    margin-bottom: rem(24);
-    min-height: calc(
-      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
-        4px
-    );
-    max-height: calc(
-      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
-        4px
-    );
-
-    &:is(textarea) {
-      max-height: 100%;
-    }
-
-    // Customize the `:focus` state to imitate native WebKit styles.
-    &:is(:focus, .focus):not(:disabled) {
-      border-color: var(--colour-info);
-      outline: 0;
-    }
-
-    &: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
-    &::-webkit-date-and-time-value {
-      // Multiply line-height by 1em if it has no unit
-      height: if(math.unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
-    }
-
-    // Disabled inputs
-    &:disabled {
-      background-color: #ccd6d8;
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
+    
+    @include input();
   }
 
-  input[type='color'] {
-
-    padding: 0!important;
-    max-width: 3rem!important;
-  }
-  
   [disabled] :is(
-    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-    textarea,
-    output,
     select:not(.select--minimal, .btn)
   ) {
       background-color: #ccd6d8;
@@ -312,18 +143,6 @@ $optionalText: 'true' !default;
       cursor: not-allowed;
       pointer-events: none;
   }
-
-  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
-    max-width: $input-max-width;
-  }
-
-  textarea {
-    --textarea-height-scale: 3;
-    min-height: calc(
-      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) +
-        (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px
-    ) !important;
-  }
   // #endregion
 
   // #region legend
@@ -1221,6 +1040,10 @@ $optionalText: 'true' !default;
     }
   }
 
+  &:has(input:is([name$="Alt"]):not([data-value],[data-placeholder])) .empty {
+    display: none;
+  }
+
   label:after,
   .hint-text {
     position: absolute;

package/assets/sass/elements/input.scss

@@ -0,0 +1,177 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+
+@layer elements {
+
+  input {
+    margin: 0; // 1
+    font-family: inherit;
+    @include 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
+
+  [list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
+      [type='time']
+    )::-webkit-calendar-picker-indicator {
+    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.
+
+  // 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
+
+  legend {
+    float: left; // 1
+    width: 100%;
+    padding: 0;
+    margin-bottom: $legend-margin-bottom;
+    @include font-size($legend-font-size);
+    font-weight: $legend-font-weight;
+    line-height: inherit;
+
+    + * {
+      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
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    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.
+
+  [type='search'] {
+    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
+
+  /* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+
+  // Remove the inner padding in Chrome and Safari on macOS.
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  // Remove padding around color pickers in webkit browsers
+
+  ::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  ::-moz-color-swatch {
+    border-radius: 0;
+    border: none;
+  }
+
+  ::-webkit-color-swatch {
+    border-radius: 0;
+    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.
+
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
+
+
+  
+
+  // #region input field
+  :is(
+    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+    textarea,
+    output
+  ) {
+    @include input();
+  }
+
+  input[type='color'] {
+
+    padding: 0!important;
+    max-width: 3rem!important;
+  }
+  
+  [disabled] :is(
+    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+    textarea,
+    output,
+    select:not(.select--minimal, .btn)
+  ) {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+
+  [disabled] label {
+
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+
+  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
+    max-width: $input-max-width;
+  }
+
+  textarea {
+    --textarea-height-scale: 3;
+    min-height: calc(
+      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) +
+        (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px
+    ) !important;
+  }
+  // #endregion
+
+}