@iamproperty/components 2.9.0 → 3.1.0

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.accordion{--accordion-indent: .75rem;--accordion-right-padding: 3rem;--accordion-y-padding: 1rem;--accordion-icon-size: 1.875rem;--accordion-icon-top: .75rem}@media screen and (min-width: 62em){.accordion{--accordion-right-padding: 6rem;--accordion-y-padding: 2rem;--accordion-icon-size: 3rem;--accordion-icon-top: 1.25rem}}.accordion-button{padding:var(--accordion-y-padding) var(--accordion-right-padding) var(--accordion-y-padding) var(--accordion-indent);color:var(--colour-heading);text-align:left;background-color:transparent;overflow-anchor:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;--marker-bg: var(--colour-secondary);cursor:pointer;position:relative}@media (prefers-reduced-motion: reduce){.accordion-button{transition:none}}.accordion-button .badge{vertical-align:bottom;margin-left:.5em;margin-right:.5em;margin-bottom:.1em}.accordion-button:before,.accordion-button:after{content:"";position:absolute;right:var(--accordion-indent);top:var(--accordion-icon-top);margin-top:var(--accordion-icon-size-half);width:var(--accordion-icon-size);height:var(--accordion-icon-size)}.accordion-button:before{text-indent:100%;white-space:nowrap;overflow:hidden;background:var(--marker-bg);border-radius:100%}.accordion-button:after{background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transition:transform .2s ease-in-out;transform:rotate(90deg)}@media (prefers-reduced-motion: reduce){.accordion-button:after{transition:none}}.accordion-button:hover,.accordion-button:focus{--marker-bg: var(--colour-warning);color:var(--colour-hover)}.accordion-button:hover{z-index:var(--index-focus)}.accordion-button:focus{z-index:var(--index-focus);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}[open]>summary>.accordion-button{color:var(--colour-heading);background-color:transparent}[open]>summary>.accordion-button:after{transform:rotate(-90deg)}summary[class*=bg-] .accordion-button{border-bottom:1px solid var(--colour-border);margin-bottom:-1px}summary[class*=bg-] .accordion-button:before{background:none!important}summary[class*=bg-]:hover .accordion-button{opacity:.8}summary[class*=bg-]+.accordion-body{padding-top:2rem}.accordion-header{margin-bottom:0}.accordion-item{background-color:transparent;border-bottom:1px solid var(--colour-border);margin-bottom:2rem}.accordion-item:first-of-type{border-top:1px solid var(--colour-border)}.accordion-item+.accordion-item{margin-top:-2rem}.accordion-body{text-align:left;padding:0 var(--accordion-indent)}.accordion--straight>details>summary:not([class*=bg-])>.accordion-button,.accordion--straight>details>.accordion-body{padding-left:0!important}.accordion--straight>details>.accordion-body{padding-right:0!important}.accordion .accordion:first-child{padding-top:1rem}.accordion .accordion:last-child{padding-bottom:2rem}.accordion .accordion .accordion-button{padding:1rem 3rem 1rem var(--accordion-indent)}.accordion .accordion .accordion-button:before,.accordion .accordion .accordion-button:after{top:.75rem;height:2rem;width:2rem;right:.5rem}.accordion .accordion .accordion-button:before{background-color:var(--colour-light)}.card{--card-spacer-y: 1.5rem;--card-spacer-x: 1.25rem;--card-title-spacer-y: .5rem;--card-border-width: 0;--card-border-color: var(--border-color-translucent);--card-border-radius: .625rem;--card-box-shadow: ;--card-inner-border-radius:calc(.375rem - 1px);--card-cap-padding-y: 1.5rem;--card-cap-padding-x: 1.25rem;--card-cap-bg: transparent;--card-cap-color: ;--card-height: ;--card-color: ;--card-bg: #fff;--card-img-overlay-padding: 1rem;--card-group-margin: .75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--card-height);word-wrap:break-word;background-color:var(--card-bg);background-clip:border-box;border:var(--card-border-width) solid var(--card-border-color);border-radius:var(--card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--card-inner-border-radius);border-top-right-radius:var(--card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--card-inner-border-radius);border-bottom-left-radius:var(--card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--card-spacer-y) var(--card-spacer-x);color:var(--card-color)}.card-title{margin-bottom:var(--card-title-spacer-y)}.card-subtitle{margin-top:calc(-.5 * var(--card-title-spacer-y));margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--card-spacer-x)}.card-header{padding:var(--card-cap-padding-y) var(--card-cap-padding-x);margin-bottom:0;color:var(--card-cap-color);background-color:var(--card-cap-bg);border-bottom:var(--card-border-width) solid var(--card-border-color)}.card-header:first-child{border-radius:var(--card-inner-border-radius) var(--card-inner-border-radius) 0 0}.card-footer{padding:var(--card-cap-padding-y) var(--card-cap-padding-x);color:var(--card-cap-color);background-color:var(--card-cap-bg);border-top:var(--card-border-width) solid var(--card-border-color)}.card-footer:last-child{border-radius:0 0 var(--card-inner-border-radius) var(--card-inner-border-radius)}.card-header-tabs{margin-right:calc(-.5 * var(--card-cap-padding-x));margin-bottom:calc(-1 * var(--card-cap-padding-y));margin-left:calc(-.5 * var(--card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--card-bg);border-bottom-color:var(--card-bg)}.card-header-pills{margin-right:calc(-.5 * var(--card-cap-padding-x));margin-left:calc(-.5 * var(--card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--card-img-overlay-padding);border-radius:var(--card-inner-border-radius)}.card-img,.card-img-top,.card-img-bottom{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--card-inner-border-radius);border-top-right-radius:var(--card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--card-inner-border-radius);border-bottom-left-radius:var(--card-inner-border-radius)}.card-group>.card{margin-bottom:var(--card-group-margin)}@media screen and (min-width: 36em){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-img-top,.card-group>.card:not(:last-child) .card-header{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-img-bottom,.card-group>.card:not(:last-child) .card-footer{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-img-top,.card-group>.card:not(:first-child) .card-header{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-img-bottom,.card-group>.card:not(:first-child) .card-footer{border-bottom-left-radius:0}}a.card{cursor:pointer}a.card:before{display:none}.card:not(.card--simple){--colour-body: var(--colour-body-theme);--colour-heading: var(--colour-primary);--colour-link: var(--colour-link-theme);--colour-hover: var(--colour-hover-theme);--colour-active: var(--colour-active-theme);--colour-border: var(--colour-border-theme);--colour-brand: var(--colour-primary);--btn-bg: var(--colour-warning);--btn-text: var(--colour-primary);--btn-hover-text: var(--colour-primary);--btn-tertiary-bg: var(--colour-primary);--btn-tertiary-hover-text: white}.card:not(.card--simple) .text-primary{color:var(--colour-primary)!important}.card{--spread: .75rem;box-shadow:0 2px var(--spread) 0 #9a9a9a40;min-height:100%;overflow:hidden;max-width:57.8125rem}.card:hover,.card:focus{--spread: .375rem}.card:hover .card-body *:not(.badge),.card:focus .card-body *:not(.badge){color:var(--colour-hover)!important}.card:active{--spread: .1875rem}.card-header__wrapper{padding-bottom:0;padding-top:55%;position:relative;overflow:hidden;background:rgba(0,0,0,.1)}.card-header__wrapper>*{position:absolute;top:0;left:0;width:100%;height:100%}.card-header__wrapper .card-image{position:absolute;top:0;left:0;width:101%;height:101%;object-fit:cover}.card-header__wrapper .card-header{display:flex;flex-wrap:nowrap;flex-direction:column;align-items:flex-start;justify-content:space-between}.card-header__wrapper .card-logo{position:absolute;top:0;right:0;left:auto;height:3.5rem;width:8rem;object-fit:contain;object-position:right}.card-banner{padding:.5rem}.card-banner__tag{position:absolute;top:0;left:0;background-color:var(--colour-secondary);font-size:.875rem;font-weight:700;aspect-ratio:1;padding:.75rem;border-radius:50%;transform:translate(-.25rem,-1.25rem) rotate(-25deg);box-shadow:0 .5rem 1rem #00000026!important}.card-body{color:var(--colour-body)}.card-body *:last-child{margin-bottom:0}.card-footer{padding-top:0}.row:not([class*=g-]) .card{margin-bottom:1rem}.card--simple{box-shadow:none;min-height:0;background:none}.card--simple .card-header__wrapper{border-radius:.625rem;margin-bottom:1rem}.card--simple .card-body{padding-top:0}.card--simple .card-body,.card--simple .card-footer{padding-left:0;padding-right:0}.card--quick .card-header,.card--quick .card-footer,.card--quick .card-body>*:not(.card-title){display:none}.card--quick .card-title{margin-bottom:0;padding-left:2em;position:relative}.card--quick .card-title:before,.card--quick .card-title:after{content:"";position:absolute;left:0;top:0;width:1.2em;height:1.2em}.card--quick .card-title:before{left:.05em;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}.card--quick .card-title:after{border:2px solid currentColor;border-radius:50%}.card--small{display:flex;flex-direction:row;align-items:center;padding-inline:.5rem}.card--small .card-header__wrapper,.card--small .card-body>*:not(.card-title){display:none}.card--small .card-body,.card--small .card-footer{padding:.5rem}.card--small .card-title{margin:0}.card--small .btn{margin-right:0;white-space:nowrap}.card--small .btn:not(.btn--link){padding:.5em 1em}.card--small:not([target=_blank]) .btn-primary:not(.btn--link):after{content:"";height:1em;width:1em;margin-left:.5em;margin-right:-.5em;display:inline-block;vertical-align:baseline;margin-bottom:-.15em;mask-image:var(--icon-arrow);mask-size:100% 100%;mask-repeat:no-repeat;mask-position:0 0;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;background-color:currentColor}@media screen and (min-width: 62em){.card--small{flex-wrap:wrap}.card--small .card-footer{min-width:100%;text-align:right}}.card--danger,.card--warning,.card--success{position:relative;padding-left:1.5rem}.card--danger:after,.card--warning:after,.card--success:after{content:"";height:100%;width:1rem;background:var(--colour-danger);display:block;position:absolute;top:0;left:0}.card--warning:after{background:var(--colour-warning)}.card--success:after{background:var(--colour-success)}.card-deck.container:not([data-card-type=simple]){padding-bottom:3rem}.card-deck.container:not([data-card-type=simple])>.row:first-child{padding-top:.5rem}.card-deck.container:not([data-card-type=simple])[class*=bg-]{padding-bottom:5rem}@media screen and (min-width: 36em) and (max-width: 61.99em){.card-deck .row-cols-sm-1 .card-header__wrapper{position:absolute;top:0;left:0;width:45.8%;height:100%;padding:0}.card-deck .row-cols-sm-1 .card-header__wrapper~.card-body,.card-deck .row-cols-sm-1 .card-header__wrapper~.card-footer{padding-left:calc(45.8% + 2.5rem)}}@media screen and (min-width: 62em){.card-deck:not(.card-deck--featured) .row-cols-md-1 .card-header__wrapper{position:absolute;top:0;left:0;width:45.8%;height:100%;padding:0}.card-deck:not(.card-deck--featured) .row-cols-md-1 .card-header__wrapper~.card-body,.card-deck:not(.card-deck--featured) .row-cols-md-1 .card-header__wrapper~.card-footer{padding-left:calc(45.8% + 2.5rem)}}.card-deck--featured>.row>.col:nth-child(4)~.col{display:none}.card-deck--featured>.row>.col:not(:first-child) .card-header__wrapper{display:none}.card-deck--featured .row-cols-sm-1>.col:not(:first-child) .card-header__wrapper~.card-body{padding-left:1.5rem}.card-deck--featured .card-footer{display:none}@media screen and (min-width: 62em){.card-deck--featured>.row{display:grid;grid-template-columns:1fr 1fr 41.66666667%;grid-template-rows:auto auto auto;gap:var(--gutter-y) var(--gutter-x);grid-template-areas:"featured featured card2" "featured featured card3" "featured featured card4";margin-top:0}.card-deck--featured>.row>.col:first-child{grid-area:featured}.card-deck--featured>.row>.col:not(:first-child){min-height:0}.card-deck--featured>.row>.col:nth-child(2){grid-area:card2}.card-deck--featured>.row>.col:nth-child(3){grid-area:card3}.card-deck--featured>.row>.col:nth-child(4){grid-area:card4}.card-deck--featured>.row>.col{width:100%;margin-top:0}}.carousel{padding-bottom:3rem}.carousel .carousel__wrapper{position:relative}.carousel .carousel__inner{--gutter-x: 1rem;overflow:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--gutter-x) * -.5);margin-left:calc(var(--gutter-x) * -.5)}.carousel .carousel__inner>.row{flex-wrap:nowrap;margin:0}.carousel .carousel__inner>.row>.col{padding-top:2.25rem;padding-bottom:1.5rem;scroll-snap-align:start;scroll-padding:calc(var(--gutter-x) * -1)}.carousel .carousel__item>*:last-child{margin-bottom:0;padding-bottom:0}body.js-enabled .carousel__inner{scrollbar-width:none;-ms-overflow-style:none}body.js-enabled .carousel__inner::-webkit-scrollbar{display:none}.carousel:not(.hide-controls){padding-bottom:4.5rem!important}.carousel.hide-controls .carousel__controls{display:none}.carousel .carousel__controls{position:absolute;text-align:center;width:auto;left:0;width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;bottom:-3rem}.carousel .carousel__controls a{width:1rem;height:1rem;min-height:1rem;border-radius:50%;text-indent:-50rem;overflow:hidden;background:currentColor;padding:0;margin:0 .5rem .5rem}.carousel .carousel__controls a:before{display:none}.carousel .carousel__controls a:first-child:last-child{display:none}.carousel .carousel__controls>a:nth-child(10)~a{display:none}.carousel.hide-btns .carousel__wrapper>.btn{display:none}.carousel:not(.hide-btns) .carousel__inner{margin-left:1.75rem;margin-right:1.75rem}.carousel .carousel__wrapper>.btn{position:absolute;top:50%;left:-1.25rem;transform:translateY(-50%)}.carousel .carousel__wrapper>.btn.btn-next{left:auto;right:-1.25rem}@media screen and (min-width: 62em){.carousel .carousel__wrapper>.btn{margin-left:-1rem;margin-right:-1rem}}.carousel .carousel__inner>.row>.col:first-child{margin-left:0!important}@media screen and (min-width: 36em){.carousel .carousel__controls>a:nth-child(10)~a{display:inline-block}.carousel .carousel__inner>.row[class*=row-cols-sm-]>.col{scroll-snap-align:unset}.carousel .carousel__inner>.row-cols-sm-2>.col:nth-child(odd),.carousel .carousel__inner>.row-cols-sm-3>.col:nth-child(3n+1),.carousel .carousel__inner>.row-cols-sm-4>.col:nth-child(4n+1),.carousel .carousel__inner>.row-cols-sm-5>.col:nth-child(5n+1),.carousel .carousel__inner>.row-cols-sm-6>.col:nth-child(6n+1){scroll-snap-align:start}body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-2>.col:nth-child(odd),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-3>.col:nth-child(3n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-4>.col:nth-child(4n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-5>.col:nth-child(5n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-sm-6>.col:nth-child(6n+1){margin-left:4rem}.carousel .carousel__controls.cols-sm-2>a:not(:nth-child(odd)),.carousel .carousel__controls.cols-sm-3>a:not(:nth-child(3n+1)),.carousel .carousel__controls.cols-sm-4>a:not(:nth-child(4n+1)),.carousel .carousel__controls.cols-sm-5>a:not(:nth-child(5n+1)),.carousel .carousel__controls.cols-sm-6>a:not(:nth-child(6n+1)){display:none}.carousel .carousel__controls.cols-sm-2>a:first-child:nth-last-child(2),.carousel .carousel__controls.cols-sm-3>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3)),.carousel .carousel__controls.cols-sm-4>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4)),.carousel .carousel__controls.cols-sm-5>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),.carousel .carousel__controls.cols-sm-6>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)){display:none}.carousel.hide-sm-btns .carousel__wrapper>.btn{display:none}.carousel.hide-sm-btns .carousel__inner{margin-left:0;margin-right:0}}@media screen and (min-width: 62em){.carousel .carousel__inner>.row[class*=row-cols-md-]>.col{scroll-snap-align:unset;margin-left:0}.carousel .carousel__inner>.row-cols-md-2>.col:nth-child(odd),.carousel .carousel__inner>.row-cols-md-3>.col:nth-child(3n+1),.carousel .carousel__inner>.row-cols-md-4>.col:nth-child(4n+1),.carousel .carousel__inner>.row-cols-md-5>.col:nth-child(5n+1),.carousel .carousel__inner>.row-cols-md-6>.col:nth-child(6n+1){scroll-snap-align:start}body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-2>.col:nth-child(odd),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-3>.col:nth-child(3n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-4>.col:nth-child(4n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-5>.col:nth-child(5n+1),body:not(.js-enabled) .carousel .carousel__inner>.row-cols-md-6>.col:nth-child(6n+1){margin-left:50vw}.carousel .carousel__controls.cols-md-2>a:not(:nth-child(odd)),.carousel .carousel__controls.cols-md-3>a:not(:nth-child(3n+1)),.carousel .carousel__controls.cols-md-4>a:not(:nth-child(4n+1)),.carousel .carousel__controls.cols-md-5>a:not(:nth-child(5n+1)),.carousel .carousel__controls.cols-md-6>a:not(:nth-child(6n+1)){display:none}.carousel .carousel__controls.cols-md-2>a:first-child:nth-last-child(2),.carousel .carousel__controls.cols-md-3>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3)),.carousel .carousel__controls.cols-md-4>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4)),.carousel .carousel__controls.cols-md-5>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5)),.carousel .carousel__controls.cols-md-6>:is(a:first-child:nth-last-child(2),a:first-child:nth-last-child(3),a:first-child:nth-last-child(4),a:first-child:nth-last-child(5),a:first-child:nth-last-child(6)){display:none}.carousel.hide-md-btns .carousel__wrapper>.btn{display:none}.carousel.hide-md-btns .carousel__inner{margin-left:0;margin-right:0}}.header-banner{background:linear-gradient(180deg,var(--colour-secondary) 0,var(--colour-info) 100%);margin-bottom:2rem;position:relative;overflow:hidden}@media screen and (min-width: 62em){.header-banner{min-height:29.375rem}}.header-banner>.container{padding-bottom:0;position:relative}.header-banner__inner{--colour-body: var(--colour-body-theme);--colour-heading: var(--colour-primary);--colour-link: var(--colour-link-theme);--colour-hover: var(--colour-hover-theme);--colour-active: var(--colour-active-theme);--colour-border: var(--colour-border-theme);--colour-brand: var(--colour-primary);--btn-bg: var(--colour-warning);--btn-text: var(--colour-primary);--btn-hover-text: var(--colour-primary);--btn-tertiary-bg: var(--colour-primary);--btn-tertiary-hover-text: white;color:var(--colour-body);background:white;padding:2rem;margin:1.875rem 0;position:relative;z-index:var(--index-above)}.header-banner__inner .text-primary{color:var(--colour-primary)!important}@media screen and (min-width: 62em){.header-banner__inner{max-width:37.5rem;margin:7rem 0 5rem;padding:3.5rem 4rem}}.header-banner__inner>*:last-child{padding-bottom:0;margin-bottom:0}.header-banner>picture img{display:none}@media screen and (min-width: 62em){.header-banner>picture img{display:block;position:absolute;top:-.5%;left:40%;height:101%;object-fit:cover;width:60%;pointer-events:none}}.header-banner>.container>.breadcrumb{margin-top:1.5rem;margin-bottom:-.5rem}@media screen and (min-width: 62em){.header-banner>.container>.breadcrumb{position:absolute;top:0;left:3.75rem}}.testimonial{--testimonial-padding: 1rem;--testimonial-spacing: 1rem}@media screen and (min-width: 62em){.testimonial{--testimonial-padding: 4rem;--testimonial-spacing: 2rem}}.testimonial>div:first-child{position:relative;overflow:hidden}.testimonial .circle{color:currentColor;position:absolute;top:-18rem;right:-8rem;font-size:28rem;border-width:4px}.testimonial__images{overflow:auto;scroll-snap-type:x mandatory;display:flex;user-select:none;touch-action:pan-x;height:14.375rem}@media screen and (min-width: 36em){.testimonial__images{height:21.25rem}}@media screen and (min-width: 62em){.testimonial__images{min-height:100%;scroll-snap-type:y mandatory;flex-direction:column;touch-action:pan-y}}.testimonial__images img{scroll-snap-align:start;user-select:none;pointer-events:none;flex-shrink:0}.testimonial .testimonial__controls{display:none}.testimonial.testimonial--multi .testimonial__controls{display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}@media screen and (min-width: 62em){.testimonial.testimonial--multi .testimonial__controls{left:auto;bottom:auto;right:0;top:50%;transform:rotate(90deg) translateY(-120%);transform-origin:center}}.testimonial h2{padding:2rem var(--testimonial-padding) 0 var(--testimonial-padding)}@media screen and (min-width: 36em){.testimonial h2{padding-top:3rem}}@media screen and (min-width: 62em){.testimonial h2{padding-top:9rem}}.testimonial__content{--display-none: none;margin:0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);position:relative}@media screen and (min-width: 62em){.testimonial__content{--display-none: block}.testimonial__content blockquote:not(.largest){position:absolute;top:0}}.testimonial[data-show="1"] blockquote:not(:nth-child(1)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="2"] blockquote:not(:nth-child(2)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="3"] blockquote:not(:nth-child(3)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="4"] blockquote:not(:nth-child(4)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="5"] blockquote:not(:nth-child(5)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="6"] blockquote:not(:nth-child(6)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="7"] blockquote:not(:nth-child(7)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="8"] blockquote:not(:nth-child(8)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="9"] blockquote:not(:nth-child(9)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial[data-show="10"] blockquote:not(:nth-child(10)){display:var(--display-none);opacity:0;user-select:none;pointer-events:none}.testimonial__after{padding:1rem var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding)}.testimonial__images::-webkit-scrollbar{display:none}.testimonial__images{-ms-overflow-style:none;scrollbar-width:none}.property-searchbar fieldset{position:relative}@media screen and (min-width: 62em){.property-searchbar fieldset{position:relative;padding-right:1.5rem}.property-searchbar fieldset:after{content:"";position:absolute;top:0;right:.5rem;display:block;height:100%;width:1px;background-color:var(--colour-muted);opacity:.25}}.property-searchbar .form-control__wrapper{margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar .form-control__wrapper{margin-bottom:0}}.property-searchbar .form-label,.property-searchbar label{font-size:.875rem;text-transform:uppercase}@media screen and (min-width: 62em){.property-searchbar .row .row .form-label{display:none}.property-searchbar .form-control,.property-searchbar .form-select{padding:.5rem 1.5rem .5rem .5rem}.property-searchbar .form-select{background-position:right .5rem center}}.property-searchbar .input--locations{padding-right:5.5rem}.property-searchbar .select--miles{position:absolute;bottom:0rem;right:.5rem;width:5rem}@media screen and (min-width: 62em){.property-searchbar .select--miles{right:1.5rem}}.property-searchbar .select--miles label{display:none}.property-searchbar .select--miles select{background-color:transparent;border-color:transparent}@media screen and (min-width: 62em){.property-searchbar .property-searchbar__btn{align-items:flex-end}}.property-searchbar button{margin-top:1rem;margin-bottom:1rem}@media screen and (min-width: 62em){.property-searchbar button{margin:0;padding-left:3.5rem;padding-right:3.5rem}}.property-searchbar--hero .property-searchbar{--colour-body: var(--colour-body-theme);--colour-heading: var(--colour-primary);--colour-link: var(--colour-link-theme);--colour-hover: var(--colour-hover-theme);--colour-active: var(--colour-active-theme);--colour-border: var(--colour-border-theme);--colour-brand: var(--colour-primary);--btn-bg: var(--colour-warning);--btn-text: var(--colour-primary);--btn-hover-text: var(--colour-primary);--btn-tertiary-bg: var(--colour-primary);--btn-tertiary-hover-text: white;padding:1rem;background-color:#fff;width:100%;border-radius:.625rem;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.24);box-shadow:0 2px 4px #0000003d;position:relative}.property-searchbar--hero .property-searchbar .text-primary{color:var(--colour-primary)!important}@media screen and (min-width: 62em){.property-searchbar--hero .property-searchbar{border-radius:3rem;padding:1.5rem 2.5rem}.property-searchbar--hero .property-searchbar .form-label,.property-searchbar--hero .property-searchbar label{margin-bottom:0}.property-searchbar--hero .property-searchbar .form-control,.property-searchbar--hero .property-searchbar .form-select{margin-left:-.5rem;border:none;padding-top:.25rem;padding-bottom:.25rem}.property-searchbar--hero .property-searchbar .form-select{background-position:right 0rem center;padding-right:1rem}.property-searchbar--hero .property-searchbar .property-searchbar__btn{align-items:center}}.nav .nav__mobile-bar{background:var(--colour-primary);color:#fff;--colour-body: white;--colour-heading: white;--colour-link: white;--colour-hover: white;--colour-border: white;--colour-brand: white;--btn-bg: white;--btn-text: var(--colour-primary);--btn-hover-text: var(--colour-heading);--btn-tertiary-bg: white;--btn-tertiary-hover-text: var(--colour-primary);display:flex;flex-direction:column;flex-wrap:nowrap;width:23.4375rem}@media screen and (min-width: 36em){.nav .nav__mobile-bar{width:100%}}.nav .nav__mobile-bar>.container{padding-top:1rem;padding-bottom:1rem;flex-shrink:0;overflow:visible}.nav{font-weight:700}.nav__inner,.nav__menu--account{display:flex;flex-direction:column;flex-wrap:nowrap}.nav__inner>.container,.nav__menu--account>.container{padding-top:1rem;padding-bottom:0;flex-shrink:0;overflow:visible;z-index:unset}.nav__menu{padding-top:2.25rem;padding-bottom:1rem}.nav .brand{font-size:2.25rem}@media screen and (min-width: 62em){.nav .brand{font-size:3.75rem}}.nav__logo img{height:2.25rem;width:auto}@media screen and (min-width: 36em){.nav__logo img{height:3.75rem;width:auto}}.nav__search-btn,.nav__menu-btn{display:flex}.nav__search-btn label,.nav__menu-btn label{height:1.125rem;width:1.5rem;text-indent:-300%;overflow:hidden;position:relative;cursor:pointer;color:var(--colour-link)}.nav__search-btn label:hover,.nav__search-btn label:focus,.nav__menu-btn label:hover,.nav__menu-btn label:focus{color:var(--colour-hover)}.nav__search-btn label:active,.nav__menu-btn label:active{color:var(--colour-active)}.nav__search-btn label:before,.nav__search-btn label:after,.nav__menu-btn label:before,.nav__menu-btn label:after{content:"";position:absolute;width:0%;height:2px;top:calc(50% - 1px);left:0;background:currentColor;transform-origin:50% 50%;transition:transform .5s,width .5s}.nav__search-btn label{text-indent:0;overflow:visible}.nav__search-btn .icon{height:2rem;width:2rem;margin-top:-.5rem;margin-left:-.0625rem;transition:opacity .5s;color:inherit}.nav__search-btn .icon__outline{stroke-width:2px;stroke:currentColor}.nav__menu-btn{display:flex}.nav__menu-btn label{border-top:2px solid currentColor;border-bottom:2px solid currentColor}.nav__menu-btn label:before,.nav__menu-btn label:after{width:100%}.nav__account-btn label{font-size:1.125rem;text-indent:0;overflow:visible;color:var(--colour-body);height:3rem;line-height:3rem;display:block;border-top:1px solid var(--colour-border);border-bottom:1px solid var(--colour-border)}.nav__account-btn .icon{height:1.75rem;width:1.75rem;margin-top:-.5rem;margin-right:.5rem;transition:opacity .5s;color:inherit}.nav__account-btn .icon__outline{stroke-width:2px;stroke:currentColor}.nav__menu>ul{margin-bottom:0}.nav__menu>ul>li>a{font-size:1.125rem;line-height:2rem;display:inline-block;position:relative;text-decoration:none}.nav__menu>ul>li>a.current{border-left:.375rem solid var(--colour-info);margin-left:-1.25rem;padding-left:.875rem}@media screen and (min-width: 62em){.nav__menu--search{display:none}#showSearch:checked~.nav__inner>.nav__menu--search{order:2;position:absolute;top:100%;left:0;width:100%;background:rgba(0,0,0,.6);height:calc(100vh - 5rem);display:block}}.services{line-height:2rem}.services li{display:flex;justify-content:space-between}.services .service--active:before{content:"";height:1em;width:1em;display:inline-block;background:var(--colour-secondary);margin-right:.5rem;margin-bottom:-.1em;border-radius:50%}.credits{border:2px solid var(--colour-primary);padding:1rem;margin-bottom:2rem;border-radius:.625rem}.credits .h5,.credits ul{padding-inline:1rem}.credits>*:last-child{margin-bottom:0!important}.nav[class*=bg-] .nav__inner{background-color:transparent}.nav__menu--secondary{flex-grow:1;font-weight:700}.nav__menu--secondary .nav__section-link{pointer-events:none;font-weight:700;color:var(--colour-link);font-size:1.125rem}.nav__menu--secondary>.container>ul>li{padding-block:.375rem}.nav__menu--secondary>.container>ul>li:not(:last-child){border-bottom:1px solid var(--colour-border)}.nav__menu--secondary>.container>ul>li a{display:inline-block;font-size:1.125rem;line-height:2.25rem;text-decoration:none;font-weight:700}.nav__menu--secondary>.container>ul>li ul{padding:0}.nav__menu--secondary>.container>ul>li ul a{font-weight:400}.nav__menu--secondary>.container>ul>li ul a .icon{display:none}.nav{position:sticky;top:0;left:0;width:100%;z-index:var(--index-menu)}.nav.is-stuck{-webkit-box-shadow:0 4px 20px -10px rgba(51,51,51,.25);box-shadow:0 4px 20px -10px #33333340}nav+main>*:first-child{padding-top:2rem}.nav__menu,.nav__btn,.nav__menu--secondary{display:none}.nav__inner,.nav__menu--account{position:absolute;top:0;left:100%;background:var(--body-bg);z-index:2;width:100%;overscroll-behavior:contain}@media screen and (min-width: 36em){.nav__inner,.nav__menu--account{width:23.4375rem}}.nav__menu--account{z-index:2;height:100vh}#showMenu:checked~.nav__inner,#showAccount:checked~.nav__menu--account{height:100vh;overflow:visible;overflow-x:auto;left:0}@media screen and (min-width: 36em){#showMenu:checked~.nav__inner,#showAccount:checked~.nav__menu--account{left:calc(100% - 23.4375rem)}}@media screen and (min-width: 62em){#showAccount~.nav__menu--account{display:none}#showAccount:checked~.nav__menu--account{left:0;width:100%;height:auto;display:block;top:6rem;border-top:.3125rem solid var(--colour-primary);border-bottom:1px solid var(--colour-border-light);-webkit-box-shadow:0px 3px 6px 0px rgba(0,0,0,.16);-moz-box-shadow:0px 3px 6px 0px rgba(0,0,0,.16);box-shadow:0 3px 6px #00000029}}#showMenu:checked~div .nav__menu,#showMenu:checked~div .nav__btn,#showMenu:checked~div .nav__menu--secondary,#showMenu:not(:checked)~#showSearch:checked~div .nav__menu--search{display:block}#showMenu:checked~div .nav__menu-btn label,#showSearch:checked~div .nav__search-btn label{border:0}#showMenu:checked~div .nav__menu-btn label .icon,#showSearch:checked~div .nav__search-btn label .icon{opacity:0}#showMenu:checked~div .nav__menu-btn label:before,#showSearch:checked~div .nav__search-btn label:before{width:100%;transform:rotate(45deg)}#showMenu:checked~div .nav__menu-btn label:after,#showSearch:checked~div .nav__search-btn label:after{width:100%;transform:rotate(-45deg)}@media screen and (min-width: 36em){#showMenu:checked~.nav__bg{content:" ";position:absolute;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);z-index:1}}@media screen and (min-width: 62em){.nav__bg{display:none}}@media screen and (min-width: 62em){.nav .nav__mobile-bar{display:none}.nav__logo{height:4rem}#showMenu:checked~.nav__inner,.nav__inner{overflow:visible;position:static;width:100%}.nav .nav__menu{display:flex;padding-bottom:0}.nav__btn,.nav__menu--secondary{display:flex}.nav .nav__inner>.container{padding-bottom:1rem}.nav__search-btn,.nav__btn{order:2;margin-left:1rem}.nav__search-btn .btn,.nav__btn .btn{margin-bottom:0}.nav__menu{padding-top:0}.nav__menu>.list-unstyled{margin-left:-1.5rem!important;margin-right:-1.5rem!important;width:calc(100% + 3rem);margin-bottom:0;padding-top:0;padding-left:1.5rem;padding-right:1.5rem}.nav__menu>.list-unstyled>li{display:inline-block;padding-left:1rem;padding-right:1rem}.nav__menu>.list-unstyled>li:not(:last-child){border-right:1px solid var(--colour-border)}.nav__menu>.list-unstyled>li>a{line-height:1.75rem}.nav__menu>.list-unstyled>li>a.current{border-left:none;padding-left:0;border-bottom:.1875rem solid var(--colour-info)}.nav__account-btn{max-width:fit-content!important}.nav__account-btn label{border:none!important;padding-top:.5rem;position:relative;padding-right:2.5rem}.nav__account-btn label:after{content:"";position:absolute;top:calc(50% + .5rem);right:0;width:1.5em;height:1.5em;background:currentColor;mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transition:transform .2s ease-in-out;transform:rotate(90deg) translate(-50%)}.nav .nav__menu--secondary>.container>.list-unstyled{font-size:.9375rem;padding-top:0}}@media screen and (min-width: 62em){.nav__menu--secondary{background-color:var(--colour-primary);--colour-body: white;--colour-heading: white;--colour-link: white;--colour-hover: white;--colour-border: white;--colour-brand: white;--btn-bg: white;--btn-text: var(--colour-primary);--btn-hover-text: var(--colour-heading);--btn-tertiary-bg: white;--btn-tertiary-hover-text: var(--colour-primary)}.nav__menu--secondary .nav__section-link{pointer-events:all}.nav__menu--secondary>.container{padding-bottom:0}.nav__menu--secondary>.container>.list-unstyled{margin-left:-1rem!important;margin-right:-1rem!important;width:calc(100% + 2rem);margin-bottom:0}.nav__menu--secondary>.container>.list-unstyled>li{display:inline-block;padding-left:1rem;padding-right:1rem;border:none!important;padding-block:0;position:relative}.nav__menu--secondary>.container>.list-unstyled>li a,.nav__menu--secondary>.container>.list-unstyled>li .nav__section-link{display:block;line-height:2.25rem;padding-block:.5rem;cursor:pointer}.nav__menu--secondary>.container>.list-unstyled>li ul{display:none}.nav__menu--secondary>.container>.list-unstyled>li:hover>.nav__section-link,.nav__menu--secondary>.container>.list-unstyled>li:focus>.nav__section-link,.nav__menu--secondary>.container>.list-unstyled>li:focus-within>.nav__section-link{color:var(--colour-selected)}.nav__menu--secondary>.container>.list-unstyled>li:hover ul,.nav__menu--secondary>.container>.list-unstyled>li:focus ul,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul{display:block;background:white;position:absolute;top:100%;left:0;padding-top:1rem;-webkit-box-shadow:0 4px 20px -10px rgba(51,51,51,.25);box-shadow:0 4px 20px -10px #33333340;--colour-body: var(--colour-body-theme);--colour-heading: var(--colour-primary);--colour-link: var(--colour-link-theme);--colour-hover: var(--colour-hover-theme);--colour-active: var(--colour-active-theme);--colour-border: var(--colour-border-theme);--colour-brand: var(--colour-primary);--btn-bg: var(--colour-warning);--btn-text: var(--colour-primary);--btn-hover-text: var(--colour-primary);--btn-tertiary-bg: var(--colour-primary);--btn-tertiary-hover-text: white;--colour-admin: var(--colour-admin-theme)}.nav__menu--secondary>.container>.list-unstyled>li:hover ul .text-primary,.nav__menu--secondary>.container>.list-unstyled>li:focus ul .text-primary,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul .text-primary{color:var(--colour-primary)!important}.nav__menu--secondary>.container>.list-unstyled>li:hover ul li,.nav__menu--secondary>.container>.list-unstyled>li:focus ul li,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul li{padding-inline:1.5rem}.nav__menu--secondary>.container>.list-unstyled>li:hover ul li:last-child,.nav__menu--secondary>.container>.list-unstyled>li:focus ul li:last-child,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul li:last-child{padding-bottom:1rem}.nav__menu--secondary>.container>.list-unstyled>li:hover ul li.nav__download,.nav__menu--secondary>.container>.list-unstyled>li:focus ul li.nav__download,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul li.nav__download{background:var(--colour-admin);padding-top:1rem}.nav__menu--secondary>.container>.list-unstyled>li:hover ul li.nav__download+li.nav__download,.nav__menu--secondary>.container>.list-unstyled>li:focus ul li.nav__download+li.nav__download,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul li.nav__download+li.nav__download{padding-top:0}.nav__menu--secondary>.container>.list-unstyled>li:hover ul a,.nav__menu--secondary>.container>.list-unstyled>li:focus ul a,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul a{white-space:nowrap;padding:0;line-height:3rem}.nav__menu--secondary>.container>.list-unstyled>li:hover ul a .icon,.nav__menu--secondary>.container>.list-unstyled>li:focus ul a .icon,.nav__menu--secondary>.container>.list-unstyled>li:focus-within ul a .icon{display:inline-block;font-size:1.5em;padding:0;margin:-.15em .25em 0 0}.nav__menu--secondary>.container>.logout-button{display:none}}@media screen and (min-width: 62em){.nav__menu--account>.container:first-child{display:none}.nav__menu--account>.container:not(:first-child){display:flex;flex-wrap:wrap;gap:2rem;align-items:start}.nav__menu--account>.container:not(:first-child):before{display:none}.nav__menu--account>.container:not(:first-child)>.row,.nav__menu--account>.container:not(:first-child) .nav__featured-link,.nav__menu--account>.container:not(:first-child) .credits{flex-basis:22%;flex-grow:1;margin:0}.nav__menu--account>.container:not(:first-child)>.row>.col:first-child,.nav__menu--account>.container:not(:first-child) .nav__featured-link>.row>.col:first-child{max-width:100%!important;width:100%;flex-shrink:0;min-width:100%;margin-bottom:1rem}.nav__menu--account>.container:not(:first-child) .logout-button{min-width:100%}}@media screen and (min-width: 62em){.nav .list-unstyled>li details.nav__mega-menu{position:static;height:4.5rem;margin-bottom:-5rem}}.nav .list-unstyled>li details.nav__mega-menu .inner{z-index:5}.nav .list-unstyled>li details.nav__mega-menu .inner [class*=bg-]{--bs-bg-opacity: 0}@media screen and (min-width: 62em){.nav .list-unstyled>li details.nav__mega-menu .inner [class*=bg-]{--bs-bg-opacity: 1}}@media screen and (min-width: 62em){.nav .list-unstyled>li details.nav__mega-menu .inner{--bs-bg-opacity: 1;position:absolute;top:100%;left:50%;width:100vw!important;max-width:100vw!important;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translate(-50%);background:rgba(0,0,0,.6);height:calc(100vh - 8rem);pointer-events:none;padding-top:0}.nav .list-unstyled>li details.nav__mega-menu .inner .container{padding:0 1.5rem 1rem!important;max-width:90rem!important;text-align:left;pointer-events:all;display:flex}.nav .list-unstyled>li details.nav__mega-menu .inner .container>div{padding:2.25rem}}.nav--inline-search .nav__menu form{position:relative}.nav--inline-search .nav__menu form .form-control__wrapper .form-control{padding-right:3rem}.nav--inline-search .nav__menu form button{position:absolute;bottom:0;right:0;margin:0;z-index:var(--index-focus);border-color:transparent;background:transparent;padding:.85rem 0rem}.nav--inline-search .nav__menu form button .icon{stroke:currentColor}@media screen and (min-width: 62em){.nav--inline-search .nav__menu>.list-unstyled{text-align:left;margin-right:0!important}.nav--inline-search .nav__menu form{min-width:21.875rem;position:relative}.nav--inline-search .nav__menu form .form-control__wrapper{margin-bottom:0;display:flex;align-items:center}.nav--inline-search .nav__menu form .form-control__wrapper label{white-space:nowrap;padding-right:1rem}.nav--inline-search .nav__menu form .form-control__wrapper .form-control{padding:.4375rem 3rem .4375rem 1rem}.nav--inline-search .nav__menu form button{padding:.5rem 0rem}}@media screen and (min-width: 62em){.nav--admin .nav__logo{height:3rem}.nav--admin .nav__logo .brand{font-size:3rem}}.nav--just-account .nav__menu,.nav--just-account .nav__account-btn{display:none!important}@media screen and (min-width: 62em){.nav--just-account .nav__menu,.nav--just-account .nav__account-btn{display:block!important}}.nav--just-account #showMenu:checked~.nav__menu--account{height:100vh;overflow:visible;overflow-x:auto;left:0;pointer-events:none;background:transparent}@media screen and (min-width: 36em){.nav--just-account #showMenu:checked~.nav__menu--account{width:23.4375rem;left:calc(100% - 23.4375rem)}}.nav--just-account #showMenu:checked~.nav__menu--account>.container:first-child{opacity:0}.nav--just-account #showMenu:checked~.nav__menu--account>.container:not(:first-child){pointer-events:all}.drawer__btn{position:sticky;bottom:1.5rem;left:0;width:100%;z-index:var(--index-floating);margin-bottom:-6rem}.drawer__btn .btn{margin-bottom:0}.drawer{margin-top:1rem;padding-top:2rem;position:relative;z-index:var(--index-menu);background:rgb(255,255,255);background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgb(255,255,255) 1.5rem,rgb(255,255,255) 100%)}.drawer>.container:first-child{display:none;margin-bottom:-2rem;position:relative;z-index:var(--index-focus)}#showDrawer:checked~.drawer{position:sticky;bottom:0;left:0;width:100%;background:rgb(255,255,255);box-shadow:0 -1px 20px -10px #33333340}#showDrawer:checked~.drawer>.container:first-child{display:block}.modal{display:none}.modal:target{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.25);z-index:var(--index-overlay);border:none;overscroll-behavior:contain}.modal:target>a:first-child{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 512 512'%3e%3cg transform='rotate(45 256 256)'%3e%3crect id='r' x='16' y='216' width='480' height='80' rx='14'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 8 8,pointer}.modal:target>button{display:none}@media screen and (min-width: 62em){.modal:target>button{display:block;position:absolute;z-index:var(--index-focus);top:50%;transform:translateY(-50%);overflow:hidden;text-indent:300%;width:2rem;height:2rem}.modal:target>button.btn:not(:hover):not(:focus){background-color:#fff}.modal:target>button.modal__dock--left{right:calc(50% + 26.625rem)}.modal:target>button.modal__dock--left:after{transform:rotate(-180deg)}.modal:target>button.modal__dock--right{left:calc(50% + 26.625rem)}}.modal:target.modal--left button.modal__dock--left{display:none}.modal:target.modal--left button.modal__dock--right{left:42rem}.modal:target.modal--right button.modal__dock--right{display:none}.modal:target.modal--right button.modal__dock--left{right:42rem}.modal__outer{position:absolute;top:50%;left:50%;width:90%;max-width:51.25rem;height:fit-content;max-height:90%;overflow:visible;transform:translate(-50%,-50%)}.modal__outer>.btn:first-child{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem;z-index:var(--index-focus)}.modal__outer>.btn:first-child:not(:hover):not(:focus):not(:active){background:white}@media screen and (min-width: 62em){.modal--left .modal__outer{left:1rem;transform:translateY(-50%);max-width:40rem}.modal--right .modal__outer{left:auto;right:1rem;transform:translateY(-50%);max-width:40rem}}.modal__inner{background:white;overscroll-behavior:contain;height:fit-content;max-height:90vh;overflow:auto}.modal__inner>*:first-child{padding:1rem}@media screen and (min-width: 36em){.modal__inner>*:first-child{padding:2rem}}.stepper{background:#f0f0f0;display:flex;flex-wrap:wrap;margin-bottom:2rem;border:1px solid var(--body-bg);overflow:hidden}@media screen and (min-width: 62em){.stepper{flex-wrap:nowrap;overflow-x:auto}}.stepper ol{margin:0;z-index:1;background:var(--body-bg);counter-reset:section;width:100%;overflow:auto}@media screen and (min-width: 36em){.stepper ol{display:flex;flex-grow:1;padding-right:calc(2rem + 1px);margin-top:-1px;margin-bottom:-1px;margin-right:calc(-2rem - 2px);clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol{overflow:initial}}.stepper ol li{width:100%;max-width:100%;background:var(--body-bg);padding:1px}@media screen and (min-width: 36em){.stepper ol li:first-child a{padding-left:1rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%)}}@media screen and (min-width: 62em){.stepper ol li:first-child a{padding-left:2rem}}.stepper ol li a{display:block;padding:1rem;text-decoration:none;background:var(--colour-muted);line-height:1;position:relative;color:var(--colour-primary)}@media screen and (min-width: 36em){.stepper ol li a{margin-right:-2rem;padding:2rem 3rem;clip-path:polygon(0 0,calc(100% - 2rem) 0,100% 50%,calc(100% - 2rem) 100%,0 100%,2rem 50%);display:flex;height:100%;vertical-align:baseline;justify-content:center;align-items:center}}.stepper ol li a span{position:relative;display:inline;padding-left:2.25rem}.stepper ol li a span:before{counter-increment:section;content:counter(section);display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);margin-right:.5rem;font-size:.75em;border-radius:50%;border:2px solid currentColor;height:1.5rem;line-height:1.3rem;width:1.5rem;font-family:var(--font-heading);text-align:center}.stepper ol li a.bg-warning span:before,.stepper ol li a.bg-danger span:before{content:"!"}.stepper ol li a.bg-success span:before{content:"\2713";text-indent:-.1em}.stepper ol li a.current{background:var(--colour-primary);color:#fff;pointer-events:none}.stepper ol li a:not([href]){pointer-events:none}.stepper ol li a[href]:hover{opacity:.6}.stepper ol li a[href]:active{opacity:.8}.stepper>span{width:100%;display:flex;padding:1rem;flex-shrink:0;margin:0;position:relative;z-index:0;align-items:center}.stepper>span.stepper__end{display:none}@media screen and (min-width: 62em){.stepper>span{width:max-content;padding:2rem}.stepper>span.stepper__end{padding-left:3.5rem;display:flex}}.tabs__container{position:relative}.tabs__container .tab__input{position:absolute;top:0;left:0;opacity:0}.tabs__container>.tabs__links{margin-bottom:1.5rem;overflow:hidden}.tabs__container>.tabs__links .link:not(.text-decoration-none):not(.btn){--is-current: 0;font-weight:700;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:0 0 .5rem;float:left;clear:both}@media screen and (min-width: 36em){.tabs__container>.tabs__links .link:not(.text-decoration-none):not(.btn){clear:none;margin-bottom:0;margin-right:2rem}}.tabs__container>.tabs__links .link:not(.text-decoration-none):not(.btn):before{width:0;width:calc(var(--is-current) * 100%)}.tabs__container>.tabs__links .link:not(.text-decoration-none):not(.btn):hover:before,.tabs__container>.tabs__links .link:not(.text-decoration-none):not(.btn):focus:before{width:100%}.tabs__container .tab{display:none}.tabs__container input:focus-visible~.tabs__links{outline:blue outset 1px}.tabs__container input:checked:nth-child(1)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(1){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(1)~.tabs>.tab:nth-child(1){display:block;display:contents}.tabs__container input:checked:nth-child(2)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(2){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(2)~.tabs>.tab:nth-child(2){display:block;display:contents}.tabs__container input:checked:nth-child(3)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(3){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(3)~.tabs>.tab:nth-child(3){display:block;display:contents}.tabs__container input:checked:nth-child(4)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(4){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(4)~.tabs>.tab:nth-child(4){display:block;display:contents}.tabs__container input:checked:nth-child(5)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(5){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(5)~.tabs>.tab:nth-child(5){display:block;display:contents}.tabs__container input:checked:nth-child(6)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(6){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(6)~.tabs>.tab:nth-child(6){display:block;display:contents}.tabs__container input:checked:nth-child(7)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(7){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(7)~.tabs>.tab:nth-child(7){display:block;display:contents}.tabs__container input:checked:nth-child(8)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(8){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(8)~.tabs>.tab:nth-child(8){display:block;display:contents}.tabs__container input:checked:nth-child(9)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(9){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(9)~.tabs>.tab:nth-child(9){display:block;display:contents}.tabs__container input:checked:nth-child(10)~.tabs__links .link:not(.text-decoration-none):not(.btn):nth-child(10){--is-current: 1;--panel-tab-colour: white;--panel-tab-border: var(--colour-secondary) }.tabs__container input:checked:nth-child(10)~.tabs>.tab:nth-child(10){display:block;display:contents}.admin-panel>.tabs__container:first-child{display:contents}.admin-panel>.tabs__container:first-child>.tabs{display:contents}.admin-panel>.tabs__container:first-child>.tabs__links{padding-bottom:0}.admin-panel>.tabs__container:first-child>.tabs__links .link:not(.text-decoration-none):not(.btn){margin-bottom:0}.alert__inner{position:relative;padding:1.5rem;margin-bottom:2rem;border-radius:.375rem}.alert__inner:not(.bg-primary):not(.bg-dark):not(.bg-danger){--colour-body: black;color:#000}.alert__inner>*:last-child{margin-bottom:0}.alert__inner>*{max-width:100%}.alert--fixed{position:fixed;padding-top:2rem;z-index:var(--index-floating);left:50%;transform:translate(-50%);bottom:0}.alert--dismissible .alert__inner{padding-right:4rem;overflow:hidden}.alert--dismissible .alert__inner .btn-close{position:absolute;top:1.5rem;right:1.5rem;height:1rem;width:1rem;padding:0;border:none;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%}.alert__holder{position:fixed;z-index:var(--index-floating);bottom:0;left:0;width:100%;max-height:100vh;overflow:auto;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.alert__holder>*:first-child{margin-top:2rem}.alert__holder .alert--fixed{position:static;transform:none;padding-top:0}[data-timeout] .alert__inner:after{content:"";position:absolute;bottom:0;left:0;width:0%;height:.25rem;background:black;animation:progress var(--animation-length) linear}@keyframes progress{0%{width:0%}to{width:100%}}

package/package.json

@@ -1,108 +1,108 @@
 {
   "name": "@iamproperty/components",
-  "version": "2.9.0",
-  "private": false,
   "description": "Component library for iamproperty",
   "author": {
     "name": "iamproperty"
   },
+  "private": false,
+  "version": "3.1.0",
   "scripts": {
-    "serve": "vue-cli-service serve docs/main.js",
-    "build": "vue-cli-service build --target lib src/index.js",
-    "lint": "vue-cli-service lint",
-    "audit": "node local_modules/audit.js",
-    "build:docs": "npm run copy:svg && vue-cli-service build docs/main.js",
-    "compile:js": "rollup --environment BUNDLE:true --config rollup.config.js --sourcemap && terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=assets/js/scripts.bundle.js.map,includeSources,url=scripts.bundle.min.js.map\" --output assets/js/scripts.bundle.min.js assets/js/scripts.bundle.js",
-    "compile:modules": "node node_modules/typescript/bin/tsc",
-    "compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
-    "compile:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.js",
-    "compile:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.js",
-    "dev": "npm run copy:svg && npm run serve",
+    "dev": "npm run copy && vite --host",
+    "build": "npm run compile && vue-tsc --noEmit && vite build --mode lib",
     "prepack": "npm run build",
-    "pull-request": "npm run test:unit && npm run test:scss && npm run test:approve && npm run compile:sass && npm run compile:modules && npm run compile:js && npm run audit",
-    "test": "npm run test:unit && npm run test:scss && npm run test:visual",
-    "test:scss": "mocha tests/_sass.mjs",
-    "test:unit": "vue-cli-service test:unit",
-    "test:approve": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles --updateSnapshot",
-    "test:visual": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles",
-    "copy:svg": "copyfiles -u 2 assets/svg/* public/svg && copyfiles -u 2 assets/svg/**/* public/svg"
+    "build:docs": "npm run copy && vue-tsc --noEmit && vite build",
+    "preview": "vite preview --host",
+    "compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
+    "compile:ts": "node node_modules/typescript/bin/tsc --project tscompileconfig.json",
+    "compile:js": "rollup --environment BUNDLE:true --config rollup.config.js --sourcemap && terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=assets/js/scripts.bundle.js.map,includeSources,url=scripts.bundle.min.js.map\" --output assets/js/scripts.bundle.min.js assets/js/scripts.bundle.js",
+    "compile": "npm run compile:sass && npm run compile:ts && npm run compile:js",
+    "copy:svg": "copyfiles -u 2 assets/svg/**/* public/svg && copyfiles -u 2 assets/svg/icons.svg public/svg && copyfiles -u 2 assets/svg/logo.svg public/svg",
+    "copy:img": "copyfiles -u 2 assets/img/**/* public/img",
+    "copy:fonts": "copyfiles -u 2 assets/fonts/**/* public/fonts",
+    "copy:icons": "copyfiles -u 2 assets/favicons/**/* public/",
+    "copy": "npm run copy:svg && npm run copy:img && npm run copy:fonts && npm run copy:icons",
+    "audit": "node local_modules/audit.js",
+    "gen:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.js",
+    "gen:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.js",
+    "test:unit": "jest src",
+    "test:scss": "jest assets/sass/_tests",
+    "visual:components": "viteshot",
+    "visual:docs": "jest tests",
+    "visual:approve": "jest tests --updateSnapshot",
+    "pull-request": "npm run test:unit && npm run test:scss && npm run visual:approve && npm run compile && npm run audit",
+    "deploy:fonts": "copyfiles -u 2 assets/fonts/**/* dist/assets/fonts",
+    "deploy:svg": "copyfiles -u 2 assets/svg/icons.svg dist/svg && copyfiles -u 2 assets/svg/logo.svg dist/svg",
+    "deploy:404": "node local_modules/create404.js"
   },
-  "main": "dist/components.umd.js",
-  "files": [
-    "assets/*",
-    "dist/*",
-    "src/*"
-  ],
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.16.7",
-    "@vue/eslint-config-standard": "^6.1.0",
-    "@vue/vue2-jest": "^27.0.0",
-    "bootstrap": "^5.2.0",
-    "cache-loader": "^4.1.0",
-    "glob": "^7.2.0",
-    "mocha": "^9.2.0",
-    "sass": "^1.45.1",
-    "sass-loader": "^10.2.0",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
-    "vue": "^2.6.14",
-    "vue-loader": "^15.9.8",
-    "vue-markdown-loader": "^2.5.0",
-    "vue-router": "^3.5.3"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.5",
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-typescript": "^7.18.6",
     "@fullhuman/postcss-purgecss": "^4.1.3",
-    "@popperjs/core": "^2.11.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.1.1",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@rollup/plugin-typescript": "^8.3.4",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-router": "^5.0.4",
-    "@vue/cli-plugin-unit-jest": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
-    "@vue/test-utils": "^1.3.0",
-    "babel-core": "^7.0.0-bridge.0",
+    "bootstrap": "^5.2.0",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.2.0",
-    "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-vue": "^7.20.0",
-    "file-loader": "^6.2.0",
-    "html-loader": "^2.1.2",
-    "jest-environment-puppeteer": "^6.0.3",
-    "jest-image-snapshot": "^4.5.1",
-    "jest-puppeteer": "^6.1.0",
-    "jest-puppeteer-preset": "^6.1.0",
-    "markdown-loader": "^8.0.0",
-    "postcss": "^8.4.7",
+    "expect-puppeteer": "^6.1.1",
+    "jest-environment-jsdom": "^28.1.3",
+    "jest-image-snapshot": "^5.1.0",
+    "jest-puppeteer": "^6.1.1",
+    "jest-serializer-vue": "^2.0.2",
+    "path": "^0.12.7",
+    "playwright": "^1.25.0",
+    "postcss": "^8.4.16",
     "postcss-css-variables": "^0.18.0",
-    "puppeteer": "^13.7.0",
-    "rollup": "^2.62.0",
-    "rollup-plugin-istanbul": "^3.0.0",
-    "sass-true": "^6.0.1",
-    "serve": "^13.0.2",
-    "terser": "5.1.0",
-    "ts-node": "^10.9.1",
-    "vue-jest": "^3.0.7",
-    "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.72.0"
+    "puppeteer": "^10.4.0",
+    "sass-true": "^6.1.0",
+    "tslib": "^2.4.0",
+    "url": "^0.11.0",
+    "viteshot": "^0.3.1",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.10",
+    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-typescript": "^8.3.4",
+    "@types/jest": "^28.1.7",
+    "@vitejs/plugin-vue": "^3.0.0",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/vue3-jest": "^28.1.0",
+    "babel-jest": "^28.1.3",
+    "jest": "^28.1.3",
+    "sass": "^1.54.3",
+    "terser": "^5.14.2",
+    "ts-jest": "^28.0.8",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.0",
+    "vite-plugin-md": "^0.20.2",
+    "vite-plugin-svg": "^0.7.0",
+    "vue-jest": "^5.0.0-alpha.10",
+    "vue-tsc": "^0.38.4"
+  },
+  "main": "./dist/components.umd.js",
+  "module": "./dist/components.es.js",
+  "files": [
+    "dist/components.umd.js",
+    "dist/components.es.js",
+    "dist/style.css",
+    "assets/*",
+    "src/*"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/components.js",
+      "require": "./dist/components.umd.cjs"
+    }
   },
   "license": "UNLICENSED",
-  "localURL": "http://localhost:8080",
   "registry-url": "https://registry.npmjs.com",
   "repository": {
     "type": "git",
     "url": "git://github.com/iamproperty/iamproperty-vue-component-library.git"
-  }
+  },
+  "localURL": "http://192.168.0.62:5173"
 }

package/src/components/Accordion/Accordion.screenshot.vue

@@ -0,0 +1,57 @@
+<template>
+
+  <Accordion class="visualtest">
+
+    <AccordionItem title="How long does the auction last?">
+      <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+    </AccordionItem>
+
+    <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
+      <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+    </AccordionItem>
+
+    <button class="btn btn-secondary mx-auto">View all FAQs</button>
+
+  </Accordion>
+
+  <div class="darkmode">
+    <Accordion class="visualtest">
+
+      <AccordionItem title="How long does the auction last?">
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>
+
+      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>
+
+      <button class="btn btn-secondary mx-auto">View all FAQs</button>
+
+    </Accordion>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Accordion from './Accordion.vue'
+import AccordionItem from "./AccordionItem.vue";
+
+import "../../../assets/sass/main.scss"
+
+export default defineComponent({
+  name: "AccordionDarkScreenshot",
+  components: {
+    Accordion,
+    AccordionItem
+  }
+});
+</script>
+
+<style lang="scss">
+@use "../../../assets/sass/func" as *;
+
+.darkmode {
+  @include invert-colours();
+  background: var(--colour-primary);
+}
+</style>

package/src/components/Accordion/Accordion.spec.js

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils'
+import Accordion from './Accordion.vue'
+import AccordionItem from './AccordionItem.vue'
+
+describe('Accordion component', () => {
+  it('renders two details', () => {
+
+    const test = mount(Accordion, {
+      propsData: {
+      },
+      global: {
+        stubs: {
+          'AccordionItem': AccordionItem
+        }
+      },
+      slots: {
+        default: `<AccordionItem title="How long does the auction last?" open>
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>
+      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>`
+      }
+    })
+
+    expect(test.findAll('details').length).toBe(2)
+  })
+
+
+  it('closes the other items when one opens', async () => {
+    const test = mount(Accordion, {
+      propsData: {
+
+      },
+      global: {
+        stubs: {
+          'AccordionItem': AccordionItem
+        }
+      },
+      slots: {
+        default: `<AccordionItem title="How long does the auction last?" open>
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>
+      <AccordionItem title="Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat?">
+        <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p><p>Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p><p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus.</p>
+      </AccordionItem>`
+      }
+    })
+
+    const details = test.findAll('details')
+
+    const firstDetail = details.at(0)
+    const secondDetail = details.at(1)
+    const detailButton = secondDetail?.find('summary');
+
+    expect(firstDetail.attributes('open')).toBe('')
+
+    await detailButton.trigger('click')
+
+    expect(firstDetail.attributes('open')).toBe(undefined)
+  })
+
+})

package/src/components/Accordion/Accordion.vue

@@ -9,7 +9,7 @@
 </style>
 
 <script>
-import accordion from '../../../assets/ts/modules/accordion.ts'
+import accordion from '../../../assets/js/modules/accordion.js'
 
 export default {
   name: 'Accordion',

package/src/components/Accordion/AccordionItem.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { safeID } from '../../helpers/strings'
+import { safeID } from '../../helpers/strings.js'
 
 export default {
   name: 'AccordionItem',

package/src/components/Alert/Alert.spec.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils'
+import Alert from './Alert.vue'
+
+describe('Alert component', () => {
+  it('renders correctly', () => {
+
+    const test = mount(Alert, {
+      propsData: {
+      },
+      slots: {
+        default: `<p>Content</p>`
+      }
+    })
+
+    expect(test.html()).toContain('bg-primary')
+    expect(test.html()).toContain('<p>Content</p>')
+  })
+
+  it('renders correct background', () => {
+
+    const test = mount(Alert, {
+      propsData: {
+        colour: 'info'
+      },
+      slots: {
+        default: `<p>Content</p>`
+      }
+    })
+
+    expect(test.html()).toContain('bg-info')
+    expect(test.html()).toContain('<p>Content</p>')
+  })
+
+  it('renders a close button', () => {
+
+    const test = mount(Alert, {
+      propsData: {
+        dismissible: 'true'
+      },
+      slots: {
+        default: `<p>Content</p>`
+      }
+    })
+
+    expect(test.html()).toContain('<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>')
+  })
+
+
+})

package/src/components/Alert/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`container alert pb-0 ${dismissible?'alert--dismissible fade show':''}`" ref="wrapper" :data-timeout="timeout" :style="timeout?`--animation-length: ${timeout}ms`:''">
+  <div :class="`container alert pb-0 ${dismissible?'alert--dismissible fade show':''}`" ref="wrapper" :data-timeout="timeout" :style="(timeout?`--animation-length: ${timeout}ms`:'')">
     <div :class="`alert__inner bg-${colour}`" role="alert">
       <button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
       <slot></slot>
@@ -18,7 +18,7 @@ export default {
   name: 'Alert',
   props: {
     dismissible: {
-      type: String|Boolean,
+      type: [String,Boolean],
       required: false,
       default: false
     },
@@ -28,7 +28,7 @@ export default {
       default: 'primary'
     },
     timeout: {
-      type: String|Number,
+      type: [String,Number],
       required: false
     }
   },

package/src/components/Banner/Banner.spec.js

@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils'
+import Header from './Banner.vue'
+
+describe('Banner component', () => {
+
+  const test = shallowMount(Header, {
+    propsData: {
+      title: 'Banner title',
+      image: '/img/src/img.png'
+    },
+    slots: {
+      default: '<p>Hello</p>'
+    }
+  })
+
+  it('renders the banner title', () => {
+    expect(test.html()).toContain('<h2>Banner title</h2>')
+  })
+
+  it('renders the banner content', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+
+  it('renders the image', () => {
+    expect(test.html()).toContain('<img src="/img/src/img.png" alt="" class="h-100 w-100 object-cover">')
+  })
+})