@iamproperty/components 6.1.0--beta → 6.1.0--beta3

package/assets/sass/components/multi-step.component.scss

@@ -0,0 +1,148 @@
+@use "../_func.scss" as *;
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+// #region Multi 
+
+:host {
+
+  --dialog-padding: 1.5rem;
+  box-sizing: border-box;
+  padding-top: calc(var(--dialog-padding) * 4); 
+  display: block;
+  position: relative;
+  margin-right: 0!important;
+  min-height: 100%;
+  padding-left: var(--dialog-padding);
+  
+  @include media-breakpoint-up(md) {
+    padding-top: var(--dialog-padding);
+    padding-left: calc(var(--dialog-padding) + #{rem(282)})!important;
+    display: flex; 
+    flex-direction: column;
+  }
+}
+
+
+// #region steps
+.steps {
+  width: 100%;
+  position: absolute;
+  top:0;
+  left: 0;
+  padding: var(--dialog-padding);
+  counter-reset: section;
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--colour-primary);
+
+  &:before {   
+
+    content: "";
+    position: absolute;
+    top: calc(50% - 1px);
+    left: var(--dialog-padding);
+    z-index: 2;
+    width: calc(100% - var(--dialog-padding) - var(--dialog-padding));
+    height: 2px;
+    background: currentColor;
+    z-index: 1;
+    background: linear-gradient(90deg, var(--colour-success) 0%, var(--colour-success) var(--progress, 0%), rgba(255,255,255,0.5) var(--progress, 0%), rgba(255,255,255,0.5) 100%);
+  }
+
+  button {
+
+    position: relative;
+    background: transparent;
+    border: none;
+    color: rgba($color: #ffffff, $alpha: 0.5);
+    height: rem(24);
+    line-height: rem(24);
+    width: rem(24);
+    text-indent: 300%;
+    overflow: hidden;
+    z-index: 2;
+    background-color: var(--colour-primary);
+    outline: 0.5rem solid var(--colour-primary);
+    cursor: pointer;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      counter-increment: section;
+      content: counter(section);
+
+      border: 1px solid currentColor;
+      height: rem(24);
+      line-height: rem(24);
+      width: rem(24);
+      text-align: center;
+      display: inline-block;
+      text-indent: 0;
+      border-radius: 50%;
+    }
+
+    &:not(.active):not(.valid) {
+      
+      pointer-events: none;
+
+      &:before {
+        opacity: 0.5;
+      }
+    }
+
+    &.active {
+      color: var(--colour-white);
+    }
+    &.valid {
+      color: var(--colour-success);
+    }
+  }
+
+  @include dark-mode() {
+
+    button {
+      
+      color: rgba($color: #000000, $alpha: 0.5);
+
+      &.active {
+        color: black;
+      }
+      &.valid {
+        color: var(--colour-complete);
+      }
+    }
+  }
+
+  
+  @include media-breakpoint-up(md) {
+    
+      width: rem(282);
+      height: 100%;
+      flex-direction: column;
+      justify-content: center;
+
+      &:before {
+        display: none;
+      }
+
+      button {
+        margin-block: 0.5rem;
+        width: 100%;
+        text-indent: 0;
+        text-align: left;
+        padding-left: 2rem;
+        font-size: rem(18);
+        outline-width: 1px;
+      }
+    
+
+  }
+}
+// #endregion
+
+
+

package/assets/sass/components/nav.preload.scss

@@ -1,6 +1,10 @@
 @use "sass:math";
 @use "../_func" as *;
 
+nav:has(iam-nav) {
+
+  grid-column: container;
+}
 iam-nav {
 
   display: block;
@@ -9,6 +13,7 @@ iam-nav {
   padding-bottom: 1.5rem;
   max-width: 100%;
   margin-inline: auto;
+  column-grid: container;
   
   .brand {
     font-size: rem(48);

package/assets/sass/components/tabs.scss

@@ -1,6 +1,6 @@
 @use "../_func" as *;
 
-*:has(> iam-tabs){
+*:not(main):has(> iam-tabs){
   
   container-type: inline-size;
 }

package/assets/sass/elements/admin-panel.scss

@@ -13,7 +13,8 @@
   border-radius: rem(8);
   margin-bottom: rem(24);
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-
+  overflow: hidden;
+  
   @include dark-mode() {
     background-color: var(--colour-canvas-2);
     color: var(--colour-body);

package/assets/sass/elements/buttons.scss

@@ -1,5 +1,38 @@
 @use "../_func.scss" as *;
 
+// #region rset
+button {
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 0;
+
+  text-transform: none;
+  margin: 0; // 1
+  font-family: inherit;
+  @include font-size(inherit);
+  line-height: inherit;
+}
+
+[role="button"] {
+  cursor: pointer;
+}
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+button,
+[type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+
+  @if $enable-button-pointers {
+    &:not(:disabled) {
+      cursor: pointer; // 3
+    }
+  }
+}
+// #endregion
+
 // #region button primary
 .btn {
 

package/assets/sass/elements/container.scss

@@ -1,14 +1,16 @@
 @use "sass:math";
 @use "../_func.scss" as *;
 
-@import "../../bootstrap/scss/_grid.scss";
-
 // #region container
 .container {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  padding: var(--container-padding);
+
+  
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: var(--container-padding);
+  
+    grid-column: container!important;
   width: 100%;
 
   &:not(.container-fluid) {
@@ -58,6 +60,14 @@
   }
 }
 
+:host .container {
+  display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: var(--container-padding);
+    width: 100%;
+}
+
 
 // replicate container padding-bottom
 main > .row {

package/assets/sass/elements/details.scss

@@ -1,6 +1,8 @@
 
 details {
 
+  display: block;
+
   &:not([open]){
       
     padding-bottom: rem(32);

package/assets/sass/elements/forms.scss

@@ -4,6 +4,204 @@ $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' vie
 
 $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>");
 
+// #region RESETS
+
+
+label {
+  display: inline-block; // 1
+}
+
+// 1. Remove the margin in Firefox and Safari
+
+input,
+select,
+optgroup,
+textarea {
+  margin: 0; // 1
+  font-family: inherit;
+  @include font-size(inherit);
+  line-height: inherit;
+}
+
+// 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
+
+
+select {
+  // 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
+  &:disabled {
+    opacity: 1;
+  }
+}
+
+// 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.
+
+textarea {
+  resize: vertical; // 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.
+
+fieldset {
+  min-width: 0; // 1
+  padding: 0; // 2
+  margin: 0; // 2
+  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;
+}
+
+
+// 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 {
+  display: inline-block;
+}
+
+// Remove border from iframe
+
+iframe {
+  border: 0;
+}
+
+// Summary
+//
+// 1. Add the correct display in all browsers
+
+summary {
+  display: list-item; // 1
+  cursor: pointer;
+}
+
+
+// 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.
+
+// #endregion
+
 // #region Form label
 :is(label:not(.tag),.label) {
   font-size: rem(18);
@@ -143,37 +341,51 @@ div:has(> label:first-child):has(> input) {
     margin-top: rem(8);
   }
 
-  input[type="color"]{
-    width: 3rem!important;
-    flex-shrink: 0!important;
-    flex-grow: 0!important;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    padding: 0;
-    overflow: hidden;
+}
 
-  
-    &::-moz-color-swatch {
-      
-      border-radius: 0;
-      border: none;
-    }
+// #region colors
 
-    &::-webkit-color-swatch {
-      
-      border-radius: 0;
-      border: none;
-    }
+input[type="color"]{
+  width: 3rem!important;
+  flex-shrink: 0!important;
+  flex-grow: 0!important;
+  border-start-end-radius: 0!important;
+  border-end-end-radius: 0!important;
+  padding: 0!important;
+  overflow: hidden;
+  cursor: pointer!important;
+
+
+  &::-moz-color-swatch {
+    
+    border-radius: 0;
+    border: none;
   }
 
-  output {
-    border-left: none!important;
-    border-end-start-radius: 0!important;
-    border-start-start-radius: 0!important;
-    margin: 0!important;
+  &::-webkit-color-swatch {
+    
+    border-radius: 0;
+    border: none;
   }
 }
 
+label :is(div,span,fieldset):has(input[type="color"] + output){
+  display: flex;
+}
+
+input[type="color"] + output {
+  border-left: none!important;
+  border-end-start-radius: 0!important;
+  border-start-start-radius: 0!important;
+  margin: 0!important;
+}
+
+output {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0 !important;
+}
+// #endregion
+
 div:has(> :is(.form-control-sm, .input--sm)) {
   
   --input-fs: #{rem(14)};

package/assets/sass/elements/links.scss

@@ -1,5 +1,31 @@
 @use "../_func.scss" as *;
 
+
+// #region reset
+a {
+  color: var(--#{$prefix}link-color);
+  text-decoration: $link-decoration;
+
+  &:hover {
+    color: var(--#{$prefix}link-hover-color);
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+// And undo these styles for placeholder links/named anchors (without href).
+// It would be more straightforward to just use a[href] in previous block, but that
+// causes specificity issues in many other styles that are too complex to fix.
+// See https://github.com/twbs/bootstrap/issues/19402
+
+a:not([href]):not([class]) {
+  &,
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+// #endregion
+
 // global
 a {
   color: var(--colour-link);
@@ -106,7 +132,7 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
   background: none;
   padding:0;
   display: flex;
-
+  margin-bottom: 1.5rem;
 
   &:not([class*="col"]){
     margin: 0 0 rem(24) 0;
@@ -125,7 +151,4 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
   }
 }
 
-:is(.col,[class*="col-"]) > :is(a,button):has(.card, iam-card):first-child:last-child{
-  min-height: calc(100% - rem(24));
-}
 // #endregion

package/assets/sass/elements/lists.scss

@@ -1,5 +1,51 @@
 @use "../_func.scss" as *;
 
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: $dt-font-weight;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0; // 1
+}
+
+
+
+.list-unstyled {
+  @include list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @include list-unstyled();
+}
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-padding;
+  }
+}
+
 @include is('ol, ul','','li'){
   max-width: $content-max-width;
 }

package/assets/sass/elements/media.scss

@@ -1,6 +1,16 @@
 @use "../_func" as *;
 
-@import "../../bootstrap/scss/_images.scss";
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+
 
 img {
   max-width: 100%;