@iamproperty/components 7.7.1--beta23 → 7.8.0

package/assets/js/components/video-modal/video-modal.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta23
+  * iamKey v7.8.0
   * Copyright 2022-2026 iamproperty
   */const b=r=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:r})};var s=function(r,t,o,e){function i(a){return a instanceof o?a:new o(function(c){c(a)})}return new(o||(o=Promise))(function(a,c){function m(n){try{l(e.next(n))}catch(d){c(d)}}function p(n){try{l(e.throw(n))}catch(d){c(d)}}function l(n){n.done?a(n.value):i(n.value).then(m,p)}l((e=e.apply(r,t||[])).next())})};const g=`<div class="video-wrapper">
   <slot name="video"></slot>
@@ -11,7 +11,7 @@
     <style>
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     
-    @layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog,[popover]{--dialog-padding: 0.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary);font-size:1rem;background:var(--dropdown-bg);margin-block:var(--dropdown-margin-block);padding:var(--dialog-padding);border-radius:var(--dropdown-border-radius);box-shadow:var(--dropdown-box-shadow)}dialog>*:last-child,[popover]>*:last-child{margin-bottom:0}dialog>:is(p):last-child,[popover]>:is(p):last-child{padding-bottom:0}dialog[open]:has(iam-modal){--modal-inner-dialog-display: contents;place-self:center}@media(prefers-color-scheme: light){dialog[open]:has(iam-modal){color-scheme:light;--colour-body: #595959;--colour-heading: var(--colour-primary-theme)}}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open],[popover]:popover-open{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{overflow-y:auto;width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:28.375rem;width:fit-content;max-width:46rem}}details.bg-light{margin-inline:calc(var(--dialog-padding)*-1);padding-inline:var(--dialog-padding)}}@layer elements{button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button:focus:not(:focus-visible){outline:0}:is(button,[type=button],[type=reset],[type=submit],[role=button]){-webkit-appearance:button;&:not(:disabled){cursor:pointer}}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap;&:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}&:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}&:not(:last-child){margin-right:var(--btn-margin)}}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.btn-complete{--colour: var(--colour-success);--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn-complete,.btn.btn-complete:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem;&:before{content:"\uF00C";font-family:var(--fa-family-classic);margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn{&[class*=fa-]:before{content:var(--fa);font-family:var(--fa-family-classic)}&[class*=fa-after]{padding-right:4rem}&[class*=fa-after]:before{margin-right:0;margin-right:.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}&:not(.btn-compact):before{margin-right:1rem}i[class*=fa-]{--fa-width: 1em;font-family:var(--fa-family-classic);margin-right:1rem;line-height:1em;font-style:inherit;&:not(:first-child){margin-left:1rem;margin-right:0}}}.btn.btn--prompt{&:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active){&:after{margin-left:1.5rem;margin-right:-0.5rem}}.btn-filter{&:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:var(--fa-family-classic)}}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary);&:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:transparent;border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative;&:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}&.text-decoration-none:after{width:0%}&[class*=fa-]{margin-left:0;margin-right:.5rem}&[class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}&:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active){&:after{width:60% !important}}&:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}}@layer elements{.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.3125rem /* 5px */;--btn-padding-inline: 0.3125rem /* 5px */;--btn-margin: 0.5rem;border-radius:.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;&:not(.btn-primary){color:var(--colour-heading)}&:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}&.btn[class*=fa-]:before{content:var(--fa);margin-right:.375rem}&.icon-only{position:relative;text-indent:-300vw;overflow:hidden;min-width:1.75rem;&:before{position:absolute;left:0;top:0;min-width:1.75rem;text-align:center;text-indent:0;padding-inline:.25rem;line-height:1.85rem}}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) &,&:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem;&:not(:last-child){margin-right:.5rem}&:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}[class*=fa-]:before{line-height:calc(var(--compact-size) - .25rem);@container style(--theme: dark){color:white}}&.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}&.btn-action{--compact-size: 2rem;font-size:1rem;&:before{font-size:1em;font-weight:400}}&.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:transparent;&:not([class*=colour-]){--colour: var(--colour-light)}}&.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour);&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}}&[data-number]{position:relative}&[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:white;letter-spacing:-0.1em;font-family:arial,sans-serif}}.btn-compact{&:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit,.fa-envelope,.fa-calendar){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial;&:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}&:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important;&:not(.btn-action){border-radius:50% !important}&:before{font-family:"Font Awesome 7 Pro" !important;content:var(--fa) !important;display:block}}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2;&>.fa-chevron-down{display:none}&:not(:has(i)):not(.no-icon):after{content:"";display:inline-block;margin-right:.25em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}&[aria-pressed]:after{transform:rotate(270deg)}}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content;select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}&:after{position:absolute;top:.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em;select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}&:after{top:.2rem;right:.5rem}}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn-compact{max-width:fit-content;margin-inline:auto}}:where(.btn__group,iam-modal){reading-flow:source-order;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0;&:not(:last-child){margin-right:0}}.btn-tertiary{max-width:fit-content;margin-block:0 !important;margin-inline:auto !important;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1;margin:0;&:not(:last-child){margin:0}}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn-tertiary{max-width:fit-content;margin-inline:0 !important;margin-block:auto;order:1}.btn-secondary{order:2}.btn-primary{order:3}.btn-compact{margin-inline:0;margin-block:auto}}:where(iam-modal,.btn__group){.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}}.btn__group{.btn-tertiary{reading-order:1}.btn-secondary{reading-order:2}.btn-primary{reading-order:3}}iam-modal{.btn-tertiary{reading-order:3;order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:1}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}:host{overscroll-behavior:contain;display:block;container-type:inline-size}::slotted(dialog){display:contents !important}::slotted(button){margin:0 !important}@layer components{dialog{display:var(--modal-inner-dialog-display, block);width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain;overflow-y:hidden;place-self:center}@media screen and (min-width: 36em){dialog{--dialog-padding: 2rem;min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){dialog{min-width:28.375rem;width:fit-content;max-width:46rem}}dialog::before{content:"";top:.75rem;bottom:auto;left:0;right:.5rem;height:calc(var(--dialog-padding) - .75rem);position:absolute;display:block;background:linear-gradient(0deg, transparent 0%, var(--colour-canvas-2) 100%);z-index:2}dialog::after{content:"";top:auto;bottom:.75rem;left:0;right:6px;height:calc(var(--dialog-padding) - .75rem);position:absolute;display:block;background:linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);z-index:2}dialog .scroll{margin-inline:calc(var(--dialog-padding)*-1);margin-block:calc((var(--dialog-padding) - .75rem)*-1);padding-inline:var(--dialog-padding);padding-block:calc(var(--dialog-padding) - .75rem);height:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;position:relative;z-index:1}dialog .scroll .fa-circle{display:none}dialog>button:first-child{position:absolute;top:.5rem;right:.5rem;z-index:var(--index-floating);margin:0}dialog>button:first-child:not(:hover,:focus,:active){background-color:var(--colour-canvas)}@container (min-width: 36em){dialog>button:first-child{top:calc(var(--dialog-padding) - .75rem);right:calc(var(--dialog-padding) - .75rem)}}dialog:has(.youtube-embed){padding:0 !important}dialog.dialog--fullwidth{max-width:69.5rem}dialog .btn__group{display:none}@media screen and (min-width: 36em){:host(.modal--sm) dialog[open]{min-width:20.9375rem;width:20.9375rem;max-width:20.9375rem}}@media screen and (min-width: 62em){:host(.modal--sm) dialog[open]{min-width:28.375rem;width:28.375rem;max-width:28.375rem}}@media screen and (min-width: 36em){:host(.modal--lg) dialog[open]{min-width:42.875rem;width:42.875rem;max-width:42.875rem}}@media screen and (min-width: 62em){:host(.modal--lg) dialog[open]{min-width:46rem;width:46rem;max-width:46rem}}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-top:4px solid rgba(0,0,0,0)}::-webkit-scrollbar-thumb{background-color:#c1c1c1;width:6px;border-radius:3px}::slotted(p:last-child){padding-bottom:0 !important}::slotted(p:last-child){padding-bottom:0 !important}::slotted(:last-child){margin-bottom:0 !important}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open]{text-align:center}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle{display:var(--fa-display, block);line-height:1;font-size:3rem;height:3rem;width:3rem;margin-top:0;margin-bottom:0;line-height:1;color:var(--colour-heading);margin-inline:auto}@media screen and (min-width: 62em){:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle{font-size:4rem;height:4rem;width:4rem}}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle:has(>i){position:relative}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle>i:before{position:absolute;top:0;left:50%;transform:scale(0.5) translate(-100%, 0)}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open]>button:first-child{display:none}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .btn__group{display:flex;justify-content:center;padding-top:2rem;margin-bottom:0}:host([data-type=acknowledgement]) dialog[open] .btn__group [data-cancel]{display:none}}@keyframes spin{to{rotate:1turn}}@layer utilities{.text-heading{color:var(--colour-heading) !important}.text-primary{color:var(--colour-primary) !important}.bg-primary{--bg-colour: var(--colour-primary) !important;background-color:var(--colour-primary) !important}.hover-primary:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-primary) !important;background-color:var(--colour-primary) !important}.colour-primary{--colour: var(--colour-primary) !important}.text-secondary{color:var(--colour-secondary) !important}.bg-secondary{--bg-colour: var(--colour-secondary) !important;background-color:var(--colour-secondary) !important}.hover-secondary:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-secondary) !important;background-color:var(--colour-secondary) !important}.colour-secondary{--colour: var(--colour-secondary) !important}.text-info{color:var(--colour-info) !important}.bg-info{--bg-colour: var(--colour-info) !important;background-color:var(--colour-info) !important}.hover-info:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-info) !important;background-color:var(--colour-info) !important}.colour-info{--colour: var(--colour-info) !important}.text-warning{color:var(--colour-warning) !important}.bg-warning{--bg-colour: var(--colour-warning) !important;background-color:var(--colour-warning) !important}.hover-warning:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-warning) !important;background-color:var(--colour-warning) !important}.colour-warning{--colour: var(--colour-warning) !important}.text-success{color:var(--colour-success) !important}.bg-success{--bg-colour: var(--colour-success) !important;background-color:var(--colour-success) !important}.hover-success:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-success) !important;background-color:var(--colour-success) !important}.colour-success{--colour: var(--colour-success) !important}.text-complete{color:var(--colour-complete) !important}.bg-complete{--bg-colour: var(--colour-complete) !important;background-color:var(--colour-complete) !important}.hover-complete:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-complete) !important;background-color:var(--colour-complete) !important}.colour-complete{--colour: var(--colour-complete) !important}.text-danger{color:var(--colour-danger) !important}.bg-danger{--bg-colour: var(--colour-danger) !important;background-color:var(--colour-danger) !important}.hover-danger:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-danger) !important;background-color:var(--colour-danger) !important}.colour-danger{--colour: var(--colour-danger) !important}.text-dark{color:var(--colour-dark) !important}.bg-dark{--bg-colour: var(--colour-dark) !important;background-color:var(--colour-dark) !important}.hover-dark:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-dark) !important;background-color:var(--colour-dark) !important}.colour-dark{--colour: var(--colour-dark) !important}.text-light{color:var(--colour-light) !important}.bg-light{--bg-colour: var(--colour-light) !important;background-color:var(--colour-light) !important}.hover-light:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-light) !important;background-color:var(--colour-light) !important}.colour-light{--colour: var(--colour-light) !important}.text-canvas{color:var(--colour-canvas) !important}.bg-canvas{--bg-colour: var(--colour-canvas) !important;background-color:var(--colour-canvas) !important}.hover-canvas:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-canvas) !important;background-color:var(--colour-canvas) !important}.colour-canvas{--colour: var(--colour-canvas) !important}.text-white{color:var(--colour-white) !important}.bg-white{--bg-colour: var(--colour-white) !important;background-color:var(--colour-white) !important}.hover-white:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-white) !important;background-color:var(--colour-white) !important}.colour-white{--colour: var(--colour-white) !important}.text-body{color:var(--colour-body) !important}.text-muted{color:var(--colour-muted) !important}}@layer components{.video-wrapper{display:block;position:relative;width:100%;height:auto;aspect-ratio:16/9;background-color:var(--colour-light);margin-bottom:2rem;cursor:pointer}.video-wrapper:before{font-family:var(--fa-family-classic);content:"\uF3F4";position:absolute;font-weight:900;color:var(--colour-heading);animation:spin 1.5s infinite steps(10);font-size:1.5em;top:50%;left:50%;translate:-50% -50%;z-index:1}.video-wrapper img{position:absolute;inset:0;z-index:3;width:calc(100% + 2px);height:100%;object-fit:cover;margin-inline:-1px}.video-wrapper button{pointer-events:none;position:absolute;top:50%;left:50%;z-index:4;transform:translate(-50%, -50%)}.video-wrapper:is(:hover,:focus):not(:active) button{--colour-btn-bg: var(--colour-white)!important;--colour-btn-border: var(--colour-white)!important}.video-wrapper:is(:active) button{filter:brightness(85%)}dialog .video-wrapper{margin-bottom:0}}::slotted(.embed){position:absolute;inset:0;z-index:4;aspect-ratio:16/9;width:calc(100% + 2px);height:100%;margin-inline:-1px;margin-block:0}@layer components{dialog{width:calc(100% - 6rem) !important;max-width:50rem !important;padding:0;aspect-ratio:16/9;overflow:hidden}dialog[open]::before{display:none}dialog[open]::after{display:none}dialog .video-wrapper button{display:none}}/*# sourceMappingURL=assets/css/components/video-modal.component.css.map */
+    @layer elements{body:not(.js-enabled) dialog:not([open]):target{display:block}dialog,[popover]{--dialog-padding: 0.5rem;--mh-padding-inline: var(--dialog-padding);color:inherit;width:fit-content;height:fit-content;border:none;overscroll-behavior:contain;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary);font-size:1rem;background:var(--dropdown-bg);margin-block:var(--dropdown-margin-block);padding:var(--dialog-padding);border-radius:var(--dropdown-border-radius);box-shadow:var(--dropdown-box-shadow)}dialog>*:last-child,[popover]>*:last-child{margin-bottom:0}dialog>:is(p):last-child,[popover]>:is(p):last-child{padding-bottom:0}dialog[open]:has(iam-modal){--modal-inner-dialog-display: contents;place-self:center}@media(prefers-color-scheme: light){dialog[open]:has(iam-modal){color-scheme:light;--colour-body: #595959;--colour-heading: var(--colour-primary-theme)}}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}dialog[open],[popover]:popover-open{display:flex;flex-direction:column}*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{overflow-y:auto;width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain}@media screen and (min-width: 36em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){*:not(.dialog__wrapper)>dialog[open],*:not(.dialog__wrapper)>[popover]:popover-open{min-width:28.375rem;width:fit-content;max-width:46rem}}details.bg-light{margin-inline:calc(var(--dialog-padding)*-1);padding-inline:var(--dialog-padding)}}@layer elements{button{border-radius:0;text-transform:none;margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button:focus:not(:focus-visible){outline:0}:is(button,[type=button],[type=reset],[type=submit],[role=button]){-webkit-appearance:button;&:not(:disabled){cursor:pointer}}.btn{--btn-margin: 1rem;--btn-padding-block: 0.75rem;--btn-padding-inline: 2.5rem;--btn-border-width: 2px;--btn-font-size: 1.125rem;--btn-line-height: 1.25rem;display:inline-block;font-weight:bold;text-align:left;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;color:var(--colour-btn);font-size:var(--btn-font-size);line-height:var(--btn-line-height);padding:var(--btn-padding-block) var(--btn-padding-inline);border-radius:1.5rem;margin-bottom:var(--btn-margin);background:none;transition:border .5s,background .5s,color .5s;height:auto;max-width:fit-content;appearance:none;white-space:nowrap;&:not(.btn-secondary)[class*=colour-]{--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour)}&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){--colour-btn: #fcfcfc}&:not(.border-0){background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border)}&:not(:last-child){margin-right:var(--btn-margin)}}@media screen and (min-width: 36em){.btn{--btn-margin: 1.5rem}}a:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) .btn,.btn:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){outline:0;text-decoration:none;background:var(--colour-btn-bg-hover);color:var(--colour-btn-hover);border-radius:1.5rem}a:is(:active,.active):not([disabled]) .btn,.btn:is(:active,.active):not([disabled]){filter:brightness(85%);transition:background .1s,color .1s;color:var(--colour-btn);border-radius:1.5rem}a:disabled .btn,.btn:disabled,[disabled] .btn,.btn[disabled]{opacity:.4;cursor:not-allowed}.btn.btn-complete{--colour: var(--colour-success);--colour-btn-bg-hover: var(--colour);--colour-btn-border-hover: var(--colour);--colour-btn-hover: var(--colour-primary-theme);--colour-btn-bg: var(--colour);--colour-btn-border: var(--colour);position:relative;padding-left:3.5rem;padding-right:3.5rem}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn-complete,.btn.btn-complete:is(:hover,:focus,.hover):not([disabled],:active,.active){padding-left:2.5rem;padding-right:2.5rem;&:before{content:"\uF00C";font-family:var(--fa-family-classic);margin-right:1rem;font-style:inherit;width:1rem;display:inline-block;height:var(--btn-line-height);vertical-align:bottom}}.btn.btn-sm{--btn-padding-block: 0.5rem;--btn-padding-inline: 2rem;--btn-margin: 0.5rem;--btn-font-size: 1rem}.btn{&[class*=fa-]:before{content:var(--fa);font-family:var(--fa-family-classic)}&[class*=fa-after]{padding-right:4rem}&[class*=fa-after]:before{margin-right:0;margin-right:.375rem;position:absolute;right:1.5rem;top:50%;transform:translate(0, -50%)}&:not(.btn-compact):before{margin-right:1rem}i[class*=fa-]{--fa-width: 1em;font-family:var(--fa-family-classic);margin-right:1rem;line-height:1em;font-style:inherit;&:not(:first-child){margin-left:1rem;margin-right:0}}}.btn.btn--prompt{&:after{content:"";height:var(--btn-line-height);width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem}}a:is(:hover,:focus,.hover):not([disabled],:active,.active) .btn.btn--prompt,.btn.btn--prompt:is(:hover,:focus,.hover):not([disabled],:active,.active){&:after{margin-left:1.5rem;margin-right:-0.5rem}}.btn-filter{&:after{content:"\uF1DE";display:inline-block;margin-left:1em;margin-bottom:-0.15em;height:1em;width:1em;z-index:var(--index-focus);color:currentColor;font-weight:300;font-family:var(--fa-family-classic)}}}@layer elements{.btn-secondary{color:var(--colour-btn-secondary);&:not(.border-0){background:var(--colour-btn-secondary-bg);border:2px solid var(--colour-btn-secondary-border)}}a:is(:hover,:focus,.hover,:active,.active):not([disabled]) .btn-secondary,.btn-secondary:is(:hover,:focus,.hover,:focus-within,:active,.active):not([disabled]){background:var(--colour-btn-secondary-bg-hover);color:var(--colour-btn-secondary-hover)}}@layer elements{.btn.btn-tertiary{background-color:transparent;border:none;color:var(--colour-link);margin:0 var(--btn-margin) var(--btn-margin) 0;padding:0;font-size:1.125rem;font-weight:normal;line-height:1.5rem;min-height:1.5rem;position:relative;&:after{position:absolute;content:"";top:100%;left:50%;height:2px;width:100%;transform:translate(-50%, 0);background:var(--colour-underline);transition:width .5s}&.text-decoration-none:after{width:0%}&[class*=fa-]{margin-left:0;margin-right:.5rem}&[class*=fa-]:not(:first-child){margin-left:.5rem;margin-right:0}&:is(:hover,:focus,.hover,:focus-within):not([disabled],:disabled,:active,.active){&:after{width:60% !important}}&:is(:active,.active):not([disabled],:disabled){color:var(--colour-active)}}}@layer elements{.btn-action{--btn-border-width: 1px;--btn-padding-block: 0.3125rem /* 5px */;--btn-padding-inline: 0.3125rem /* 5px */;--btn-margin: 0.5rem;border-radius:.25rem !important;font-weight:400 !important;font-size:1rem;line-height:1.25rem;&:not(.btn-primary){color:var(--colour-heading)}&:not(.btn-primary):not(.border-0){background-color:var(--colour-canvas-2);border:var(--btn-border-width) solid var(--colour-muted)}&.btn[class*=fa-]:before{content:var(--fa);margin-right:.375rem}&.icon-only{position:relative;text-indent:-300vw;overflow:hidden;min-width:1.75rem;&:before{position:absolute;left:0;top:0;min-width:1.75rem;text-align:center;text-indent:0;padding-inline:.25rem;line-height:1.85rem}}a:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&:not(.btn-primary):is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){background:var(--colour-btn-action-hover-bg)}.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active) &,&.btn-primary:is(:hover,:focus,.hover,:focus-within):not([disabled],:active,.active){filter:brightness(90%);background:var(--colour-btn-bg);border:var(--btn-border-width) solid var(--colour-btn-border);color:var(--colour-btn)}a:is(:active,.active):not([disabled]):not(.btn-primary) &,&:is(:active,.active):not([disabled]):not(.btn-primary){filter:brightness(85%);transition:all .1s;color:var(--colour-heading)}}.btn-action:not(.btn-compact).fa-compact-only:before{display:none !important}}@layer elements{.btn-compact{--compact-size: 3rem;padding:0 !important;margin-bottom:.5rem;text-align:center;width:var(--compact-size);min-width:var(--compact-size);max-width:var(--compact-size);height:var(--compact-size) !important;min-height:var(--compact-size) !important;max-height:var(--compact-size) !important;align-content:center;line-height:1 !important;text-indent:-500px;overflow:hidden;position:relative;font-size:1rem;&:not(:last-child){margin-right:.5rem}&:before{content:var(--fa);position:absolute;display:block;top:0;left:0;width:100%;height:100%;text-indent:0;line-height:calc(var(--compact-size) - .25rem);font-weight:900}[class*=fa-]:before{line-height:calc(var(--compact-size) - .25rem);@container style(--theme: dark){color:white}}&.btn-sm{--compact-size: 2.5rem;font-size:1rem;padding:0 !important}&.btn-action{--compact-size: 2rem;font-size:1rem;&:before{font-size:1em;font-weight:400}}&.btn-secondary{--colour-btn-bg: transparent;--colour-btn-border: transparent;border-color:transparent;&:not([class*=colour-]){--colour: var(--colour-light)}}&.btn-secondary:is(:hover,:focus,.hover,:active,.active,[aria-expanded],:focus-within):not([disabled]):not(.btn-collapse){background-color:var(--colour);color:var(--colour-primary-theme);border-color:var(--colour);&:is(.colour-primary,.colour-dark,.colour-danger,.colour-black){color:var(--colour-inverted)}}&[data-number]{position:relative}&[data-number]:after{content:attr(data-number);position:absolute;top:.5em;z-index:99;background:var(--colour-danger);height:1.5em;width:1.5em;border-radius:50%;text-indent:0;left:50%;font-size:.5em;line-height:1.5em;text-align:center;color:white;letter-spacing:-0.1em;font-family:arial,sans-serif}}.btn-compact{&:is(.fa-left,.fa-chevron-left,.fa-right,.fa-chevron-right,.fa-up,.fa-chevron-up,.fa-down,.fa-chevron-down,.fa-plus,.fa-bars,.fa-edit,.fa-envelope,.fa-calendar){--iso-display: block;--iso-font-size: 1.5rem;--iso-border-radius: 50%;--iso-text-indent: -500px}}@container style(--font-body){.btn-compact{font-size:var(--iso-font-size, 0.6rem) !important;text-indent:var(--iso-text-indent, 0px);white-space:initial;&:not(.btn-action){border-radius:var(--iso-border-radius, 0.25rem) !important}&:before{display:var(--iso-display, none);font-family:monospace !important;content:var(--iso) !important}}}@container style(--fa-font-regular){.btn-compact{text-indent:-500px;font-size:1rem !important;&:not(.btn-action){border-radius:50% !important}&:before{font-family:"Font Awesome 7 Pro" !important;content:var(--fa) !important;display:block}}}}@layer elements{.btn[popovertarget]{position:relative;anchor-name:--button2;&>.fa-chevron-down{display:none}&:not(:has(i)):not(.no-icon):after{content:"";display:inline-block;margin-right:.25em;margin-left:1em;height:.8em;width:.8em;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;transform:rotate(90deg)}&[aria-pressed]:after{transform:rotate(270deg)}}.btn:has(select){position:relative;padding:0;max-width:fit-content;min-width:fit-content;width:fit-content;select{all:unset !important;padding:var(--btn-padding-block) var(--btn-padding-inline) !important;padding-right:calc(var(--btn-padding-inline) + 2rem) !important;border-radius:1.5rem !important;appearance:none !important;background:none !important;border:none !important;color:currentColor !important;display:block;outline:none;font-weight:inherit !important;font-size:var(--btn-font-size) !important;line-height:var(--btn-line-height) !important;field-sizing:content !important;appearance:base-select !important}&:after{position:absolute;top:.625rem;right:1.5rem;content:"";height:1.5rem;width:1rem;display:inline-block;background:currentColor;mask-image:var(--icon-arrow);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;vertical-align:bottom;margin-left:1rem;transform:rotate(90deg);pointer-events:none}}.btn-action:has(select){padding-block:0;padding-right:2rem;font-size:1em;select{margin:0rem 0rem !important;padding-right:2rem !important;margin-right:-2rem !important;font-size:1rem !important}&:after{top:.2rem;right:.5rem}}}@layer elements{.btn__group{display:flex;flex-direction:column;row-gap:var(--gap);reading-flow:source-order;margin-bottom:1.5rem;.btn-compact{max-width:fit-content;margin-inline:auto}}:where(.btn__group,iam-modal){reading-flow:source-order;.btn{margin-inline-end:0;width:100%;max-width:100%;text-align:center;white-space:normal;margin:0;&:not(:last-child){margin-right:0}}.btn-tertiary{max-width:fit-content;margin-block:0 !important;margin-inline:auto !important;order:3;reading-order:3}.btn-secondary{order:2;reading-order:2}.btn-primary{order:1;reading-order:1;margin:0;&:not(:last-child){margin:0}}}:is(iam-form,form) .btn__group{padding-top:1rem}@container (min-width: 36em){.btn__group{flex-direction:row;row-gap:0;gap:var(--gap);flex-wrap:wrap;.btn-tertiary{max-width:fit-content;margin-inline:0 !important;margin-block:auto;order:1}.btn-secondary{order:2}.btn-primary{order:3}.btn-compact{margin-inline:0;margin-block:auto}}:where(iam-modal,.btn__group){.btn{max-width:fit-content;white-space:nowrap;margin-block:auto}}.btn__group{.btn-tertiary{reading-order:1}.btn-secondary{reading-order:2}.btn-primary{reading-order:3}}iam-modal{.btn-tertiary{reading-order:3;order:1}.btn-secondary{order:2;reading-order:2}.btn-primary{order:3;reading-order:1}}.btn__group.text-end{justify-content:flex-end}:is(iam-form,form) .btn__group{justify-content:flex-end;padding-top:3rem}iam-modal .btn__group:last-child .btn,dialog .btn__group:last-child .btn{margin-bottom:0}}}:host{overscroll-behavior:contain;display:block;container-type:inline-size}::slotted(dialog){display:contents !important}::slotted(button){margin:0 !important}@layer components{dialog[open]{display:var(--modal-inner-dialog-display, block)}dialog{width:90vw;max-width:20.25rem;max-height:min(90vh,47rem);overscroll-behavior:contain;overflow-y:hidden;place-self:center}@media screen and (min-width: 36em){dialog{--dialog-padding: 2rem;min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){dialog{min-width:28.375rem;width:fit-content;max-width:46rem}}dialog::before{content:"";top:.75rem;bottom:auto;left:0;right:.5rem;height:calc(var(--dialog-padding) - .75rem);position:absolute;display:block;background:linear-gradient(0deg, transparent 0%, var(--colour-canvas-2) 100%);z-index:2}dialog::after{content:"";top:auto;bottom:.75rem;left:0;right:6px;height:calc(var(--dialog-padding) - .75rem);position:absolute;display:block;background:linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);z-index:2}dialog .scroll{margin-inline:calc(var(--dialog-padding)*-1);margin-block:calc((var(--dialog-padding) - .75rem)*-1);padding-inline:var(--dialog-padding);padding-block:calc(var(--dialog-padding) - .75rem);height:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;position:relative;z-index:1}dialog .scroll .fa-circle{display:none}dialog>button:first-child{position:absolute;top:.5rem;right:.5rem;z-index:var(--index-floating);margin:0}dialog>button:first-child:not(:hover,:focus,:active){background-color:var(--colour-canvas)}@container (min-width: 36em){dialog>button:first-child{top:calc(var(--dialog-padding) - .75rem);right:calc(var(--dialog-padding) - .75rem)}}dialog:has(.youtube-embed){padding:0 !important}dialog.dialog--fullwidth{max-width:69.5rem}dialog .btn__group{display:none}@media screen and (min-width: 36em){:host(.modal--sm) dialog[open]{min-width:20.9375rem;width:20.9375rem;max-width:20.9375rem}}@media screen and (min-width: 62em){:host(.modal--sm) dialog[open]{min-width:28.375rem;width:28.375rem;max-width:28.375rem}}@media screen and (min-width: 36em){:host(.modal--lg) dialog[open]{min-width:42.875rem;width:42.875rem;max-width:42.875rem}}@media screen and (min-width: 62em){:host(.modal--lg) dialog[open]{min-width:46rem;width:46rem;max-width:46rem}}dialog::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px);overscroll-behavior:contain}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);border-top:4px solid rgba(0,0,0,0)}::-webkit-scrollbar-thumb{background-color:#c1c1c1;width:6px;border-radius:3px}::slotted(p:last-child){padding-bottom:0 !important}::slotted(p:last-child){padding-bottom:0 !important}::slotted(:last-child){margin-bottom:0 !important}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open]{text-align:center}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle{display:var(--fa-display, block);line-height:1;font-size:3rem;height:3rem;width:3rem;margin-top:0;margin-bottom:0;line-height:1;color:var(--colour-heading);margin-inline:auto}@media screen and (min-width: 62em){:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle{font-size:4rem;height:4rem;width:4rem}}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle:has(>i){position:relative}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .scroll>.fa-circle>i:before{position:absolute;top:0;left:50%;transform:scale(0.5) translate(-100%, 0)}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open]>button:first-child{display:none}:host(:is([data-type=transactional],[data-type=acknowledgement])) dialog[open] .btn__group{display:flex;justify-content:center;padding-top:2rem;margin-bottom:0}:host([data-type=acknowledgement]) dialog[open] .btn__group [data-cancel]{display:none}}@keyframes spin{to{rotate:1turn}}@layer utilities{.text-heading{color:var(--colour-heading) !important}.text-primary{color:var(--colour-primary) !important}.bg-primary{--bg-colour: var(--colour-primary) !important;background-color:var(--colour-primary) !important}.hover-primary:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-primary) !important;background-color:var(--colour-primary) !important}.colour-primary{--colour: var(--colour-primary) !important}.text-secondary{color:var(--colour-secondary) !important}.bg-secondary{--bg-colour: var(--colour-secondary) !important;background-color:var(--colour-secondary) !important}.hover-secondary:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-secondary) !important;background-color:var(--colour-secondary) !important}.colour-secondary{--colour: var(--colour-secondary) !important}.text-info{color:var(--colour-info) !important}.bg-info{--bg-colour: var(--colour-info) !important;background-color:var(--colour-info) !important}.hover-info:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-info) !important;background-color:var(--colour-info) !important}.colour-info{--colour: var(--colour-info) !important}.text-warning{color:var(--colour-warning) !important}.bg-warning{--bg-colour: var(--colour-warning) !important;background-color:var(--colour-warning) !important}.hover-warning:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-warning) !important;background-color:var(--colour-warning) !important}.colour-warning{--colour: var(--colour-warning) !important}.text-success{color:var(--colour-success) !important}.bg-success{--bg-colour: var(--colour-success) !important;background-color:var(--colour-success) !important}.hover-success:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-success) !important;background-color:var(--colour-success) !important}.colour-success{--colour: var(--colour-success) !important}.text-complete{color:var(--colour-complete) !important}.bg-complete{--bg-colour: var(--colour-complete) !important;background-color:var(--colour-complete) !important}.hover-complete:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-complete) !important;background-color:var(--colour-complete) !important}.colour-complete{--colour: var(--colour-complete) !important}.text-danger{color:var(--colour-danger) !important}.bg-danger{--bg-colour: var(--colour-danger) !important;background-color:var(--colour-danger) !important}.hover-danger:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-danger) !important;background-color:var(--colour-danger) !important}.colour-danger{--colour: var(--colour-danger) !important}.text-dark{color:var(--colour-dark) !important}.bg-dark{--bg-colour: var(--colour-dark) !important;background-color:var(--colour-dark) !important}.hover-dark:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-dark) !important;background-color:var(--colour-dark) !important}.colour-dark{--colour: var(--colour-dark) !important}.text-light{color:var(--colour-light) !important}.bg-light{--bg-colour: var(--colour-light) !important;background-color:var(--colour-light) !important}.hover-light:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-light) !important;background-color:var(--colour-light) !important}.colour-light{--colour: var(--colour-light) !important}.text-canvas{color:var(--colour-canvas) !important}.bg-canvas{--bg-colour: var(--colour-canvas) !important;background-color:var(--colour-canvas) !important}.hover-canvas:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-canvas) !important;background-color:var(--colour-canvas) !important}.colour-canvas{--colour: var(--colour-canvas) !important}.text-white{color:var(--colour-white) !important}.bg-white{--bg-colour: var(--colour-white) !important;background-color:var(--colour-white) !important}.hover-white:is(:hover,:focus,:focus-within){--bg-colour: var(--colour-white) !important;background-color:var(--colour-white) !important}.colour-white{--colour: var(--colour-white) !important}.text-body{color:var(--colour-body) !important}.text-muted{color:var(--colour-muted) !important}}@layer components{.video-wrapper{display:block;position:relative;width:100%;height:auto;aspect-ratio:16/9;background-color:var(--colour-light);margin-bottom:2rem;cursor:pointer}.video-wrapper:before{font-family:var(--fa-family-classic);content:"\uF3F4";position:absolute;font-weight:900;color:var(--colour-heading);animation:spin 1.5s infinite steps(10);font-size:1.5em;top:50%;left:50%;translate:-50% -50%;z-index:1}.video-wrapper img{position:absolute;inset:0;z-index:3;width:calc(100% + 2px);height:100%;object-fit:cover;margin-inline:-1px}.video-wrapper button{pointer-events:none;position:absolute;top:50%;left:50%;z-index:4;transform:translate(-50%, -50%)}.video-wrapper:is(:hover,:focus):not(:active) button{--colour-btn-bg: var(--colour-white)!important;--colour-btn-border: var(--colour-white)!important}.video-wrapper:is(:active) button{filter:brightness(85%)}dialog .video-wrapper{margin-bottom:0}}::slotted(.embed){position:absolute;inset:0;z-index:4;aspect-ratio:16/9;width:calc(100% + 2px);height:100%;margin-inline:-1px;margin-block:0}@layer components{dialog{width:calc(100% - 6rem) !important;max-width:50rem !important;padding:0;aspect-ratio:16/9;overflow:hidden}dialog[open]::before{display:none}dialog[open]::after{display:none}dialog .video-wrapper button{display:none}}/*# sourceMappingURL=assets/css/components/video-modal.component.css.map */
 
     </style>
 

package/assets/js/components/word-count/word-count.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta23
+  * iamKey v7.8.0
   * Copyright 2022-2026 iamproperty
   */const o=i=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:i})};o("iam-word-count");class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
     <style>

package/assets/js/modules/nav.js

@@ -119,7 +119,6 @@ export const loadUserData = (Cookies) => __awaiter(void 0, void 0, void 0, funct
     }
 });
 export const setEnabledLinks = (component, data) => {
-    console.log(data);
     component.querySelectorAll(`[data-product][data-feature]`).forEach((element) => {
         const isEnabled = data.attributes.products[element.getAttribute('data-product')].features[element.getAttribute('data-feature')];
         element.setAttribute('data-is-enabled', isEnabled);

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta23
+  * iamKey v7.8.0
   * Copyright 2022-2026 iamproperty
   */(function(w){typeof define=="function"&&define.amd?define(w):w()})((function(){"use strict";var w=a=>{a.classList.add("js-enabled"),(navigator.userAgent.indexOf("MSIE")!==-1||navigator.appVersion.indexOf("Trident/")>0)&&a.classList.add("ie")},H=a=>{var e=function(n){var r=document.querySelector('label[for="'.concat(n.replace("#",""),'"]')),s=document.querySelector(n+" summary"),u=document.querySelector("dialog".concat(n)),i=document.querySelector("detail".concat(n));r instanceof HTMLElement?r.click():s instanceof HTMLElement?s.click():u instanceof HTMLElement?u.showModal():i instanceof HTMLElement&&i.addAttribute("open")};location.hash&&e(location.hash),window.addEventListener("hashchange",function(){e(location.hash)},!1),addEventListener("popstate",o=>{if(o&&o.state&&o.state.type&&o.state.type=="pagination"){var n=document.querySelector("#".concat(o.state.form)),r=document.querySelector("#".concat(o.state.form," [data-pagination]"));r?r.value=o.state.page:n.innerHTML+='<input name="page" type="hidden" data-pagination="true" value="'.concat(o.state.page,'" />'),n.dispatchEvent(new Event("submit"))}}),Array.from(document.querySelectorAll("form")).forEach(o=>{o?.closest("iam-form")||o.addEventListener("submit",n=>{var r;o.querySelector(":invalid")&&(o.classList.add("was-validated"),(r=o?.querySelector("input:invalid"))===null||r===void 0||r.scrollIntoView(),n.preventDefault())})}),document.addEventListener("click",o=>{var n;if(o&&o.target instanceof HTMLElement&&o.target.matches("form button:not([type=button])")){var r=o.target.closest("form");r?.closest("iam-form")||(Array.from(r.querySelectorAll("[data-password-type]")).forEach(s=>{s.setAttribute("type","password")}),(r.querySelector(":invalid")||r.querySelector('.pwd-checker[data-strength="1"]')||r.querySelector('.pwd-checker[data-strength="2"]'))&&(r.classList.add("was-validated"),(n=r?.querySelector("input:invalid"))===null||n===void 0||n.scrollIntoView(),o.preventDefault()),r.querySelector("iam-multiselect[data-is-required][data-error]")&&(r.classList.add("was-validated"),o.preventDefault()))}}),document.addEventListener("keydown",o=>{o.key==="Escape"&&document.querySelector(".dialog--transactional[open], .dialog--acknowledgement[open]")&&(o.preventDefault(),o.stopPropagation())}),Array.from(document.querySelectorAll("label progress")).forEach(o=>{var n=o.closest("label");n.setAttribute("data-percent",o.getAttribute("value"))})};function N(){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Pageview",pageTitle:document.title}),document.addEventListener("click",a=>{var e=a.target.closest("[open] summary");if(e)window.dataLayer.push({event:"closeDetails",detailsTitle:e.textContent||""});else{var o=a.target.closest("summary"),n=a.target.closest("a"),r=a.target.closest("button");o&&window.dataLayer.push({event:"openDetails",detailsTitle:o.textContent||""}),n&&window.dataLayer.push({event:"linkClicked",linkText:n.hasAttribute("title")?n.getAttribute("title")||"":n.textContent||"",class:n.hasAttribute("class")&&n.getAttribute("class")||"",href:n.getAttribute("href")||""}),r&&window.dataLayer.push({event:"buttonClicked",buttonText:r.textContent||"",class:r.hasAttribute("class")&&r.getAttribute("class")||""})}})}window.triggerDynamicEvent=function(a){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"change";console.log("event"),a.hasAttribute("data-change-events")&&e=="change"&&v(a,a.getAttribute("data-change-events")),a.hasAttribute("data-click-events")&&e=="click"&&v(a,a.getAttribute("data-click-events"))};var M=()=>{document.addEventListener("change",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-change-events]")&&v(a.target,a.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("keyup",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-change-events]")&&v(a.target,a.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("click",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-click-events]")&&v(a.target,a.target.closest("[data-click-events]").getAttribute("data-click-events"))})},v=(a,e)=>{if(e||(e=a.parentNode.getAttribute("data-change-events")),!e)return!1;Array.from(JSON.parse(e)).forEach(o=>{C(a,o)})},C=(a,e)=>{if("matches"in e)return e.matches=="any"||a.value==e.matches?f(a,e,"if"):f(a,e,"else"),!1;if("in-list"in e){var o=document.querySelector("".concat(e["in-list"],' option[value="').concat(a.value,'"]'));return document.querySelector("".concat(e["in-list"],' option[value="').concat(a.value,'"]'))?f(o,e,"if"):f(o,e,"else"),!1}else"event"in e&&f(a,e,"event")},f=(a,e,o)=>{if(!(o in e))return!1;switch(e[o]){case"hide":if(document.querySelector(e.target)){var n=document.querySelector(e.target);n.classList.add("js-hide"),Array.from(n.querySelectorAll("[data-required]")).forEach(i=>{i.removeAttribute("required")})}break;case"show":if(document.querySelector(e.target)){var r=document.querySelector(e.target);r.classList.remove("js-hide"),Array.from(r.querySelectorAll("[data-required]")).forEach(i=>{i.closest(".js-hide")||i.setAttribute("required","true")})}break;case"populate-form":D(a,e);break;case"dispatchEvent":var s=new Event(e.value);document.querySelector("".concat(e.target)).dispatchEvent(s);break;case"setAttribute":Array.from(document.querySelectorAll("".concat(e.target))).forEach(function(i){i.setAttribute(e.attribute,e.value)});break;case"focus":document.querySelector("".concat(e.target)).focus();break;case"removeAttribute":Array.from(document.querySelectorAll("".concat(e.target))).forEach(function(i){i.removeAttribute(e.attribute)});break;case"updateValue":document.querySelector("".concat(e.target)).value=e.value?e.value:"";var u=new Event("change");document.querySelector("".concat(e.target)).dispatchEvent(u);break;case"submitForm":document.querySelector("".concat(e.target)).submit();break;case"openLink":document.querySelector("".concat(e.target)).value&&(window.location.href=document.querySelector("".concat(e.target)).value);break}},D=function(e,o){var n=JSON.parse(e.getAttribute("data-values")),r=document.querySelector(o.target);if(!n)return!1;Object.keys(n).forEach(s=>{document.getElementById(s)&&document.getElementById(s).tagName=="SPAN"&&(document.getElementById(s).innerHTML=n[s]),r.querySelector('select[name="'.concat(s,'"] [value="').concat(n[s],'"]'))?(r.querySelector('select[name="'.concat(s,'"]')).value=n[s],e.hasAttribute("data-lock-fields")&&(r.querySelector('select[name="'.concat(s,'"]')).disabled=!0)):r.querySelector('input[name="'.concat(s,'"][type="radio"][value="').concat(n[s],'"]'))?(Array.from(r.querySelectorAll('input[name="'.concat(s,'"][type="radio"]'))).forEach(function(u){u.disabled=!0}),r.querySelector('input[name="'.concat(s,'"][type="radio"][value="').concat(n[s],'"]')).checked=!0,r.querySelector('input[name="'.concat(s,'"][type="radio"][value="').concat(n[s],'"]')).disabled=!1):r.querySelector('input[name="'.concat(s,'"]'))&&(r.querySelector('input[name="'.concat(s,'"]')).value=n[s],e.hasAttribute("data-lock-fields")&&r.querySelector('input[name="'.concat(s,'"]')).setAttribute("readonly","true"))})},F=()=>{var a=[],e={},o="These tests run against mark-up and content meant to test how a component or element has been integrated. Making sure that guidance setout in the design system is being followed.";window.integrationTestsIntro=o,console.log("%cVirgin Money Framework Tests","color: #E10A0A; font-size: 24px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;"),console.log("%c"+o,"font-size: 14px; margin-bottom: 20px;"),console.log("%cKey","font-size: 16px;font-weight:bold;"),console.log("%c   %cSuccessfully implemented","background-color: green; margin-right: 10px","background-color: transparent"),console.log("%c   %cNOT implemented correctly","background-color: red; margin-right: 10px","background-color: transparent"),console.log("%c   %cN/A","background-color: grey; margin-right: 10px","background-color: transparent"),console.log("%c   %cWarning - No action needed","background-color: orange; margin-right: 10px","background-color: transparent"),console.log("%c ? %cWarning - Action needed","background-color: orange; margin-right: 10px","background-color: transparent"),e={Test:"Each card with in a card deck has a footer with some CTA text via a button link",Total:0,Passes:0,Fails:0},Array.from(document.querySelectorAll(".card-deck .card")).forEach((t,c)=>{if(t.closest(".navbar")==null){var l=t.querySelector(".btn-link");l!=null&&l.textContent.length?e.Passes++:e.Fails++}}),e.Total=e.Passes+e.Fails,a.push(e),e={Test:"Article Decks need to have a background colour applied",Total:0,Passes:0,Fails:0},Array.from(document.querySelectorAll(".article-deck")).forEach((t,c)=>{var l=t.closest(".container");l!=null&&l.matches('[class*="bg-"]')?e.Passes++:e.Fails++}),e.Total=e.Passes+e.Fails,a.push(e),e={Test:"Tabs Carousel has a h2 title with a display-4 class. It should always have a strapline next to it also.",Total:0,Passes:0,Fails:0,Notes:"The site nav contains cards without a footer by design."},Array.from(document.querySelectorAll(".tabs__container--carousel")).forEach((t,c)=>{var l=t.querySelector("h2.display-4:first-child"),d=t.querySelector("h2.display-4:first-child + .strapline");l!=null&&d!=null?e.Passes++:e.Fails++}),e.Total=e.Passes+e.Fails,a.push(e),e={Test:"Split Containers can only have multiple of two columns. So either 2, 4, 6 and so on.",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll(".container.container--split")).forEach((t,c)=>{t.querySelectorAll(':scope > .row > [class*="col"]').length%2===0?e.Passes++:e.Fails++}),e.Total=e.Passes+e.Fails,a.push(e),e={Test:"Statement Containers with only one paragraph or text element should have the class of .h6",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll(".container.container--statement")).forEach((t,c)=>{t.querySelectorAll(":scope > *").length==1&&t.querySelectorAll(":scope > .h6:first-child").length==1?e.Passes++:t.querySelectorAll(":scope > *").length==1&&e.Fails++}),e.Total=e.Passes+e.Fails,a.push(e),e={Test:"CTA Containers title should always have the class of .h1",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll(".container.container--cta")).forEach((t,c)=>{t.querySelectorAll("h2.h1:first-child").length==1?e.Passes++:e.Fails++}),e.Total=e.Passes+e.Fails,a.push(e),console.log("%cImplementation Tests","font-size: 16px;font-weight:bold; margin-top: 20px;"),a.forEach(function(t){var c="green";t.Total===0?c="grey":t.Fails!=0&&(c="red"),t.Type=="warning"&&(c="orange"),console.groupCollapsed("%c   %c"+t.Test,"background-color: "+c+"; margin-right: 10px","background-color: transparent"),console.table({Passed:{value:t.Passes},Failed:{value:t.Fails},Total:{value:t.Total}}),t.Notes!=""&&console.log(t.Notes),console.groupEnd()}),window.integrationTests=a;var n=[];e={Test:"There are XX padding classes being used on this page",Type:"warning",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll('[class*="p-"],[class*="pt-"],[class*="pb-"],[class*="pl-"],[class*="pr-"],[class*="px-"],[class*="py-"]')).forEach((t,c)=>{e.Total++}),e.Test=e.Test.replace("XX",e.Total),n.push(e),e={Test:"There are XX margin classes being used on this page",Type:"warning",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll('[class*="m-"],[class*="mt-"],[class*="mb-"],[class*="ml-"],[class*="mr-"],[class*="mx-"],[class*="my-"]')).forEach((t,c)=>{e.Total++}),e.Test=e.Test.replace("XX",e.Total),n.push(e),e={Test:"There are XX text modifier classes being used on this page",Type:"warning",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll('[class*="text-"]')).forEach((t,c)=>{e.Total++}),e.Test=e.Test.replace("XX",e.Total),n.push(e),console.log("%cUtility classes","font-size: 16px;font-weight:bold;"),console.log("The use of certain utility classes is necessary at times but the over use of these classes will lead to design/layout inconsistencies."),n.forEach(function(t){var c="green";t.Total===0?c="grey":t.Fails!=0&&(c="red"),t.Type=="warning"&&(c="orange"),console.groupCollapsed("%c   %c"+t.Test,"background-color: "+c+"; margin-right: 10px","background-color: transparent"),console.table({Total:{value:t.Total}}),t.Notes!=""&&console.log(t.Notes),console.groupEnd()}),console.log("%cAccessibility and Best practice Tests","font-size: 16px;font-weight:bold;");var r="green",s=1,u={};Array.from(document.querySelectorAll("h1,h2,h3,h4,h5,h6")).forEach((t,c)=>{var l=1,d=t.textContent;t.matches("h2")?l=2:t.matches("h3")?l=3:t.matches("h4")?l=4:t.matches("h5")?l=5:t.matches("h6")&&(l=6);var h=l-s<=1;c==0&&l!=1&&(h=!1);var p={"Heading Level":l,"In order":h};h?s=l:r="red",u[d]=p}),console.groupCollapsed("%c   %cHeadings are in the correct order","background-color: "+r+"; margin-right: 10px","background-color: transparent"),console.table(u),console.groupEnd(),console.groupCollapsed("%c ? %cDo all of the headings make sense out of context and do they introduce the content that follows?","background-color: orange; margin-right: 10px","background-color: transparent"),console.log("You should be able to read the below table and get an understanding of what the page content consists of. The titles should make sense when read in order and child titles should be relevant to the parent title."),console.table(u),console.groupEnd();var i={};Array.from(document.querySelectorAll("a")).forEach((t,c)=>{var l=t.getAttribute("href"),d=t.textContent,h=t.getAttribute("title"),p={Text:d,Title:h};i[l]=p}),console.groupCollapsed("%c ? %cDo all of the links make sense out of context and do they describe the page/section that it links to?","background-color: orange; margin-right: 10px","background-color: transparent"),console.table(i),console.groupEnd();var A={},m={};Array.from(document.querySelectorAll("img[alt]")).forEach((t,c)=>{var l=t.getAttribute("src"),d=t.getAttribute("alt");if(d!=""){var h={Alt:d};A[l]=h}else{var l=t.getAttribute("src"),p={};m[l]=p}}),console.groupCollapsed("%c ? %cDo all of the images with an alt tag make sense out of context and describes the image appropriately?","background-color: orange; margin-right: 10px","background-color: transparent"),console.table(A),console.log("%cImages with an empty alt tag:","font-weight: bold;"),console.table(m),console.groupEnd(),console.groupCollapsed("%c ? %cCan you navigation the page links by tabbing through the page?","background-color: orange; margin-right: 10px","background-color: transparent"),console.log("Are all of the links, input fields and buttons accessible through using the keyboard only?"),console.groupEnd(),console.log("%cLighthouse","font-size: 16px;font-weight:bold;"),console.groupCollapsed("%c ? %cHave you ran a lighthouse report on this page","background-color: orange; margin-right: 10px","background-color: transparent"),console.log("If you are in a modern version of chrome you can a lighthouse report by opening the lighthouse window within the devtools. This should appear as a tab link above."),console.log("This report will give you more detail about the above the tests aswell as extra tests. "),console.groupEnd(),console.log("%cImage sizes","font-size: 16px;font-weight:bold;"),console.log("The below tests work from the current screen size, so if you have your screen at a mobile viewport the scaling and sizes of images will reflect that. It is worth running the image tests in both mobile and desktop views. Simply change the screen size and refresh the page."),Array.from(document.querySelectorAll("img")).forEach((t,c)=>{if(!t.matches("[src*='http']")&&!t.matches("[src$='.svg']")){var l=t.getAttribute("src"),d=new XMLHttpRequest;d.open("HEAD",l,!0),d.onreadystatechange=function(){if(d.readyState==4)if(d.status==200){var h=d.getResponseHeader("Content-Length");if(h>1024){var p=t.naturalWidth,P=t.naturalHeight,S=t.clientWidth,O=t.clientHeight,k=(S/p).toFixed(2)=="0.00"?"Hidden":(S/p).toFixed(2),B=Math.floor(h/1024),E=(h/(p*P)).toFixed(2),b="green",L="green",q="green",x="",T="";E>.5?(b="red",L="red",x="The image has a VERY large 'Bytes per pixel' score, trying optimising the image using https://tinypng.com/."):E>.2&&(b="orange",L="orange",x="The image has a large 'Bytes per pixel' score, trying optimising the image using https://tinypng.com/."),k>1.2?(b="red",q="red",T="The image size is smaller than the size shown on screen this may cause the image to appear blurry and low quality."):k<.5?(b="red",q="red",T="The image size is VERY large compared to the size shown on screen, this means unnecessary kb's are being downloaded. Try resizing the image in photoshop or other image editing software."):k<.8&&(b="orange",q="orange",T="The image size is large compared to the size shown on screen, this means unnecessary kb's are being downloaded. Try resizing the image in photoshop or other image editing software."),console.log("%c     %c "+t.src,"background: url("+t.src+"); border: 3px solid "+b+"; line-height: 30px; width: 30px; background-size: cover;","background-color: transparent"),x!=""&&console.log("%c   %c"+x,"background-color: "+L+"; margin-right: 10px","background-color: transparent"),T!=""&&console.log("%c   %c"+T,"background-color: "+q+"; margin-right: 10px","background-color: transparent"),console.table({Image:{Dimensions:p+"x"+P,"Scaled to":S+"x"+O,Scale:k,Filesize:B+"Kb","Bytes per pixel":E}}),console.groupEnd()}}else console.log("%c   %c"+t.src+" not loaded","background-color: red; margin-right: 10px","background-color: transparent")},d.send(null)}});var g=[];if(typeof window.integrationTests<"u"&&window.integrationTests.forEach(function(t){t.Total!=0&&t.Type!="warning"&&g.push(t.Test)}),g.length!=0){var y=document.querySelector("#vmtests-display");if(y!=null){y.innerHTML=`<div class="container">
       <h2>Integration notes</h2>

package/assets/js/scripts.bundle.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta23
+  * iamKey v7.8.0
   * Copyright 2022-2026 iamproperty
   */
 !function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";window.triggerDynamicEvent=function(t){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"change";console.log("event"),t.hasAttribute("data-change-events")&&"change"==a&&e(t,t.getAttribute("data-change-events")),t.hasAttribute("data-click-events")&&"click"==a&&e(t,t.getAttribute("data-click-events"))};var e=(e,a)=>{if(a||(a=e.parentNode.getAttribute("data-change-events")),!a)return!1;Array.from(JSON.parse(a)).forEach(a=>{t(e,a)})},t=(e,t)=>{if("matches"in t)return"any"==t.matches||e.value==t.matches?a(e,t,"if"):a(e,t,"else"),!1;if("in-list"in t){var o=document.querySelector("".concat(t["in-list"],' option[value="').concat(e.value,'"]'));return document.querySelector("".concat(t["in-list"],' option[value="').concat(e.value,'"]'))?a(o,t,"if"):a(o,t,"else"),!1}"event"in t&&a(e,t,"event")},a=(e,t,a)=>{if(!(a in t))return!1;switch(t[a]){case"hide":if(document.querySelector(t.target)){var n=document.querySelector(t.target);n.classList.add("js-hide"),Array.from(n.querySelectorAll("[data-required]")).forEach(e=>{e.removeAttribute("required")})}break;case"show":if(document.querySelector(t.target)){var r=document.querySelector(t.target);r.classList.remove("js-hide"),Array.from(r.querySelectorAll("[data-required]")).forEach(e=>{e.closest(".js-hide")||e.setAttribute("required","true")})}break;case"populate-form":o(e,t);break;case"dispatchEvent":var s=new Event(t.value);document.querySelector("".concat(t.target)).dispatchEvent(s);break;case"setAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(e){e.setAttribute(t.attribute,t.value)});break;case"focus":document.querySelector("".concat(t.target)).focus();break;case"removeAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(e){e.removeAttribute(t.attribute)});break;case"updateValue":document.querySelector("".concat(t.target)).value=t.value?t.value:"";var l=new Event("change");document.querySelector("".concat(t.target)).dispatchEvent(l);break;case"submitForm":document.querySelector("".concat(t.target)).submit();break;case"openLink":document.querySelector("".concat(t.target)).value&&(window.location.href=document.querySelector("".concat(t.target)).value)}},o=function(e,t){var a=JSON.parse(e.getAttribute("data-values")),o=document.querySelector(t.target);if(!a)return!1;Object.keys(a).forEach(t=>{document.getElementById(t)&&"SPAN"==document.getElementById(t).tagName&&(document.getElementById(t).innerHTML=a[t]),o.querySelector('select[name="'.concat(t,'"] [value="').concat(a[t],'"]'))?(o.querySelector('select[name="'.concat(t,'"]')).value=a[t],e.hasAttribute("data-lock-fields")&&(o.querySelector('select[name="'.concat(t,'"]')).disabled=!0)):o.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]'))?(Array.from(o.querySelectorAll('input[name="'.concat(t,'"][type="radio"]'))).forEach(function(e){e.disabled=!0}),o.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]')).checked=!0,o.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]')).disabled=!1):o.querySelector('input[name="'.concat(t,'"]'))&&(o.querySelector('input[name="'.concat(t,'"]')).value=a[t],e.hasAttribute("data-lock-fields")&&o.querySelector('input[name="'.concat(t,'"]')).setAttribute("readonly","true"))})},n=()=>{var e=[],t={},a="These tests run against mark-up and content meant to test how a component or element has been integrated. Making sure that guidance setout in the design system is being followed.";window.integrationTestsIntro=a,console.log("%cVirgin Money Framework Tests","color: #E10A0A; font-size: 24px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;"),console.log("%c"+a,"font-size: 14px; margin-bottom: 20px;"),console.log("%cKey","font-size: 16px;font-weight:bold;"),console.log("%c   %cSuccessfully implemented","background-color: green; margin-right: 10px","background-color: transparent"),console.log("%c   %cNOT implemented correctly","background-color: red; margin-right: 10px","background-color: transparent"),console.log("%c   %cN/A","background-color: grey; margin-right: 10px","background-color: transparent"),console.log("%c   %cWarning - No action needed","background-color: orange; margin-right: 10px","background-color: transparent"),console.log("%c ? %cWarning - Action needed","background-color: orange; margin-right: 10px","background-color: transparent"),t={Test:"Each card with in a card deck has a footer with some CTA text via a button link",Total:0,Passes:0,Fails:0},Array.from(document.querySelectorAll(".card-deck .card")).forEach((e,a)=>{if(null==e.closest(".navbar")){var o=e.querySelector(".btn-link");null!=o&&o.textContent.length?t.Passes++:t.Fails++}}),t.Total=t.Passes+t.Fails,e.push(t),t={Test:"Article Decks need to have a background colour applied",Total:0,Passes:0,Fails:0},Array.from(document.querySelectorAll(".article-deck")).forEach((e,a)=>{var o=e.closest(".container");null!=o&&o.matches('[class*="bg-"]')?t.Passes++:t.Fails++}),t.Total=t.Passes+t.Fails,e.push(t),t={Test:"Tabs Carousel has a h2 title with a display-4 class. It should always have a strapline next to it also.",Total:0,Passes:0,Fails:0,Notes:"The site nav contains cards without a footer by design."},Array.from(document.querySelectorAll(".tabs__container--carousel")).forEach((e,a)=>{var o=e.querySelector("h2.display-4:first-child"),n=e.querySelector("h2.display-4:first-child + .strapline");null!=o&&null!=n?t.Passes++:t.Fails++}),t.Total=t.Passes+t.Fails,e.push(t),t={Test:"Split Containers can only have multiple of two columns. So either 2, 4, 6 and so on.",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll(".container.container--split")).forEach((e,a)=>{e.querySelectorAll(':scope > .row > [class*="col"]').length%2==0?t.Passes++:t.Fails++}),t.Total=t.Passes+t.Fails,e.push(t),t={Test:"Statement Containers with only one paragraph or text element should have the class of .h6",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll(".container.container--statement")).forEach((e,a)=>{1==e.querySelectorAll(":scope > *").length&&1==e.querySelectorAll(":scope > .h6:first-child").length?t.Passes++:1==e.querySelectorAll(":scope > *").length&&t.Fails++}),t.Total=t.Passes+t.Fails,e.push(t),t={Test:"CTA Containers title should always have the class of .h1",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll(".container.container--cta")).forEach((e,a)=>{1==e.querySelectorAll("h2.h1:first-child").length?t.Passes++:t.Fails++}),t.Total=t.Passes+t.Fails,e.push(t),console.log("%cImplementation Tests","font-size: 16px;font-weight:bold; margin-top: 20px;"),e.forEach(function(e){var t="green";0===e.Total?t="grey":0!=e.Fails&&(t="red"),"warning"==e.Type&&(t="orange"),console.groupCollapsed("%c   %c"+e.Test,"background-color: "+t+"; margin-right: 10px","background-color: transparent"),console.table({Passed:{value:e.Passes},Failed:{value:e.Fails},Total:{value:e.Total}}),""!=e.Notes&&console.log(e.Notes),console.groupEnd()}),window.integrationTests=e;var o=[];t={Test:"There are XX padding classes being used on this page",Type:"warning",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll('[class*="p-"],[class*="pt-"],[class*="pb-"],[class*="pl-"],[class*="pr-"],[class*="px-"],[class*="py-"]')).forEach((e,a)=>{t.Total++}),t.Test=t.Test.replace("XX",t.Total),o.push(t),t={Test:"There are XX margin classes being used on this page",Type:"warning",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll('[class*="m-"],[class*="mt-"],[class*="mb-"],[class*="ml-"],[class*="mr-"],[class*="mx-"],[class*="my-"]')).forEach((e,a)=>{t.Total++}),t.Test=t.Test.replace("XX",t.Total),o.push(t),t={Test:"There are XX text modifier classes being used on this page",Type:"warning",Total:0,Passes:0,Fails:0,Notes:""},Array.from(document.querySelectorAll('[class*="text-"]')).forEach((e,a)=>{t.Total++}),t.Test=t.Test.replace("XX",t.Total),o.push(t),console.log("%cUtility classes","font-size: 16px;font-weight:bold;"),console.log("The use of certain utility classes is necessary at times but the over use of these classes will lead to design/layout inconsistencies."),o.forEach(function(e){var t="green";0===e.Total?t="grey":0!=e.Fails&&(t="red"),"warning"==e.Type&&(t="orange"),console.groupCollapsed("%c   %c"+e.Test,"background-color: "+t+"; margin-right: 10px","background-color: transparent"),console.table({Total:{value:e.Total}}),""!=e.Notes&&console.log(e.Notes),console.groupEnd()}),console.log("%cAccessibility and Best practice Tests","font-size: 16px;font-weight:bold;");var n="green",r=1,s={};Array.from(document.querySelectorAll("h1,h2,h3,h4,h5,h6")).forEach((e,t)=>{var a=1,o=e.textContent;e.matches("h2")?a=2:e.matches("h3")?a=3:e.matches("h4")?a=4:e.matches("h5")?a=5:e.matches("h6")&&(a=6);var l=a-r<=1;0==t&&1!=a&&(l=!1);var c={"Heading Level":a,"In order":l};l?r=a:n="red",s[o]=c}),console.groupCollapsed("%c   %cHeadings are in the correct order","background-color: "+n+"; margin-right: 10px","background-color: transparent"),console.table(s),console.groupEnd(),console.groupCollapsed("%c ? %cDo all of the headings make sense out of context and do they introduce the content that follows?","background-color: orange; margin-right: 10px","background-color: transparent"),console.log("You should be able to read the below table and get an understanding of what the page content consists of. The titles should make sense when read in order and child titles should be relevant to the parent title."),console.table(s),console.groupEnd();var l={};Array.from(document.querySelectorAll("a")).forEach((e,t)=>{var a=e.getAttribute("href"),o={Text:e.textContent,Title:e.getAttribute("title")};l[a]=o}),console.groupCollapsed("%c ? %cDo all of the links make sense out of context and do they describe the page/section that it links to?","background-color: orange; margin-right: 10px","background-color: transparent"),console.table(l),console.groupEnd();var c={},i={};Array.from(document.querySelectorAll("img[alt]")).forEach((e,t)=>{var a=e.getAttribute("src"),o=e.getAttribute("alt");if(""!=o){var n={Alt:o};c[a]=n}else a=e.getAttribute("src"),i[a]={}}),console.groupCollapsed("%c ? %cDo all of the images with an alt tag make sense out of context and describes the image appropriately?","background-color: orange; margin-right: 10px","background-color: transparent"),console.table(c),console.log("%cImages with an empty alt tag:","font-weight: bold;"),console.table(i),console.groupEnd(),console.groupCollapsed("%c ? %cCan you navigation the page links by tabbing through the page?","background-color: orange; margin-right: 10px","background-color: transparent"),console.log("Are all of the links, input fields and buttons accessible through using the keyboard only?"),console.groupEnd(),console.log("%cLighthouse","font-size: 16px;font-weight:bold;"),console.groupCollapsed("%c ? %cHave you ran a lighthouse report on this page","background-color: orange; margin-right: 10px","background-color: transparent"),console.log("If you are in a modern version of chrome you can a lighthouse report by opening the lighthouse window within the devtools. This should appear as a tab link above."),console.log("This report will give you more detail about the above the tests aswell as extra tests. "),console.groupEnd(),console.log("%cImage sizes","font-size: 16px;font-weight:bold;"),console.log("The below tests work from the current screen size, so if you have your screen at a mobile viewport the scaling and sizes of images will reflect that. It is worth running the image tests in both mobile and desktop views. Simply change the screen size and refresh the page."),Array.from(document.querySelectorAll("img")).forEach((e,t)=>{if(!e.matches("[src*='http']")&&!e.matches("[src$='.svg']")){var a=e.getAttribute("src"),o=new XMLHttpRequest;o.open("HEAD",a,!0),o.onreadystatechange=function(){if(4==o.readyState)if(200==o.status){var t=o.getResponseHeader("Content-Length");if(t>1024){var a=e.naturalWidth,n=e.naturalHeight,r=e.clientWidth,s=e.clientHeight,l="0.00"==(r/a).toFixed(2)?"Hidden":(r/a).toFixed(2),c=Math.floor(t/1024),i=(t/(a*n)).toFixed(2),u="green",d="green",g="green",h="",p="";i>.5?(u="red",d="red",h="The image has a VERY large 'Bytes per pixel' score, trying optimising the image using https://tinypng.com/."):i>.2&&(u="orange",d="orange",h="The image has a large 'Bytes per pixel' score, trying optimising the image using https://tinypng.com/."),l>1.2?(u="red",g="red",p="The image size is smaller than the size shown on screen this may cause the image to appear blurry and low quality."):l<.5?(u="red",g="red",p="The image size is VERY large compared to the size shown on screen, this means unnecessary kb's are being downloaded. Try resizing the image in photoshop or other image editing software."):l<.8&&(u="orange",g="orange",p="The image size is large compared to the size shown on screen, this means unnecessary kb's are being downloaded. Try resizing the image in photoshop or other image editing software."),console.log("%c     %c "+e.src,"background: url("+e.src+"); border: 3px solid "+u+"; line-height: 30px; width: 30px; background-size: cover;","background-color: transparent"),""!=h&&console.log("%c   %c"+h,"background-color: "+d+"; margin-right: 10px","background-color: transparent"),""!=p&&console.log("%c   %c"+p,"background-color: "+g+"; margin-right: 10px","background-color: transparent"),console.table({Image:{Dimensions:a+"x"+n,"Scaled to":r+"x"+s,Scale:l,Filesize:c+"Kb","Bytes per pixel":i}}),console.groupEnd()}}else console.log("%c   %c"+e.src+" not loaded","background-color: red; margin-right: 10px","background-color: transparent")},o.send(null)}});var u=[];if(typeof window.integrationTests<"u"&&window.integrationTests.forEach(function(e){0!=e.Total&&"warning"!=e.Type&&u.push(e.Test)}),0!=u.length){var d=document.querySelector("#vmtests-display");if(null!=d){d.innerHTML='<div class="container">\n      <h2>Integration notes</h2>\n      <ul id="integrationTests"></ul>\n      </div>';var g=document.getElementById("integrationTests");null!=g&&u.forEach(function(e){g.innerHTML+="<li>"+e+"</li>"})}}return null},r=Object.freeze({__proto__:null,default:n});["localhost"].includes(window.location.hostname)&&Promise.resolve().then(function(){return r}).then(e=>{window.iamTest=()=>{n()}}).catch(e=>{console.log(e.message)}),document.addEventListener("DOMContentLoaded",()=>{return t=void 0,a=void 0,n=function*(){var t,a;window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Pageview",pageTitle:document.title}),document.addEventListener("click",e=>{var t=e.target.closest("[open] summary");if(t)window.dataLayer.push({event:"closeDetails",detailsTitle:t.textContent||""});else{var a=e.target.closest("summary"),o=e.target.closest("a"),n=e.target.closest("button");a&&window.dataLayer.push({event:"openDetails",detailsTitle:a.textContent||""}),o&&window.dataLayer.push({event:"linkClicked",linkText:o.hasAttribute("title")?o.getAttribute("title")||"":o.textContent||"",class:o.hasAttribute("class")&&o.getAttribute("class")||"",href:o.getAttribute("href")||""}),n&&window.dataLayer.push({event:"buttonClicked",buttonText:n.textContent||"",class:n.hasAttribute("class")&&n.getAttribute("class")||""})}}),document.addEventListener("change",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-change-events]")&&e(t.target,t.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("keyup",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-change-events]")&&e(t.target,t.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("click",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-click-events]")&&e(t.target,t.target.closest("[data-click-events]").getAttribute("data-click-events"))}),(a=document.body).classList.add("js-enabled"),(-1!==navigator.userAgent.indexOf("MSIE")||navigator.appVersion.indexOf("Trident/")>0)&&a.classList.add("ie"),t=function(e){var t=document.querySelector('label[for="'.concat(e.replace("#",""),'"]')),a=document.querySelector(e+" summary"),o=document.querySelector("dialog".concat(e)),n=document.querySelector("detail".concat(e));t instanceof HTMLElement?t.click():a instanceof HTMLElement?a.click():o instanceof HTMLElement?o.showModal():n instanceof HTMLElement&&n.addAttribute("open")},location.hash&&t(location.hash),window.addEventListener("hashchange",function(){t(location.hash)},!1),addEventListener("popstate",e=>{if(e&&e.state&&e.state.type&&"pagination"==e.state.type){var t=document.querySelector("#".concat(e.state.form)),a=document.querySelector("#".concat(e.state.form," [data-pagination]"));a?a.value=e.state.page:t.innerHTML+='<input name="page" type="hidden" data-pagination="true" value="'.concat(e.state.page,'" />'),t.dispatchEvent(new Event("submit"))}}),Array.from(document.querySelectorAll("form")).forEach(e=>{e?.closest("iam-form")||e.addEventListener("submit",t=>{var a;e.querySelector(":invalid")&&(e.classList.add("was-validated"),null===(a=e?.querySelector("input:invalid"))||void 0===a||a.scrollIntoView(),t.preventDefault())})}),document.addEventListener("click",e=>{var t;if(e&&e.target instanceof HTMLElement&&e.target.matches("form button:not([type=button])")){var a=e.target.closest("form");a?.closest("iam-form")||(Array.from(a.querySelectorAll("[data-password-type]")).forEach(e=>{e.setAttribute("type","password")}),(a.querySelector(":invalid")||a.querySelector('.pwd-checker[data-strength="1"]')||a.querySelector('.pwd-checker[data-strength="2"]'))&&(a.classList.add("was-validated"),null===(t=a?.querySelector("input:invalid"))||void 0===t||t.scrollIntoView(),e.preventDefault()),a.querySelector("iam-multiselect[data-is-required][data-error]")&&(a.classList.add("was-validated"),e.preventDefault()))}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&document.querySelector(".dialog--transactional[open], .dialog--acknowledgement[open]")&&(e.preventDefault(),e.stopPropagation())}),Array.from(document.querySelectorAll("label progress")).forEach(e=>{e.closest("label").setAttribute("data-percent",e.getAttribute("value"))})},new((o=void 0)||(o=Promise))(function(e,r){function s(e){try{c(n.next(e))}catch(e){r(e)}}function l(e){try{c(n.throw(e))}catch(e){r(e)}}function c(t){t.done?e(t.value):function(e){return e instanceof o?e:new o(function(t){t(e)})}(t.value).then(s,l)}c((n=n.apply(t,a||[])).next())});var t,a,o,n})});

package/assets/sass/_elements.scss

@@ -29,3 +29,5 @@
 @use 'elements/highlight';
 @use 'elements/dropdown';
 @use 'elements/spinner';
+
+@use 'elements/illustration';

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

@@ -198,6 +198,10 @@ slot[name='secondary'] {
 
   --card-footer-bottom-padding: 0.5rem;
 
+  --card-badges-top-padding:0.5rem;
+  --card-badges-bottom-padding: 0;
+  --card-right-padding: 0.5rem;
+  --card-left-padding: 0.5rem;
 }
 
 ::slotted(span:is(.duration):not([class*=pt-])) {

package/assets/sass/components/card.module.scss

@@ -158,13 +158,13 @@
 .card__head:has(img) ~ .card__badges {
   position: absolute;
   top: 0;
-  text-align: left;
+  text-align: right;
   left: 0;
   z-index: 9;
 }
 
 .card__badges:not(.empty) {
-  padding: var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);
+  padding: var(--card-badges-top-padding, 1rem) var(--card-right-padding) var(--card-badges-bottom-padding, 0) var(--card-left-padding);
   margin-bottom: -1.5rem;
 }
 .card__head:not(:has(img)) ~ .card__badges {

package/assets/sass/components/carousel.config.scss

@@ -40,7 +40,7 @@
     margin-inline: -0.5rem;
     padding-bottom: calc(1rem + var(--button-height) + var(--marker-height) + var(--marker-mb));
 
-    margin-bottom: var(--carousel-mb, 1.5rem);
+    margin-bottom: var(--carousel-mb, 2rem);
     scroll-padding: 0.5rem;
     display: grid;
     grid-auto-flow: column;
@@ -731,6 +731,12 @@
 
     
     --card-footer-bottom-padding: 0.5rem;
+
+    
+    --card-badges-top-padding:0.5rem;
+    --card-badges-bottom-padding: 0;
+    --card-right-padding: 0.5rem;
+    --card-left-padding: 0.5rem;
   }
   /* #endregon */
 }

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

@@ -2,8 +2,8 @@
 @use 'charts.module' as *;
 @use '../elements/buttons' as *;
 
-.d-block {
-  display: block;
+*, *:before, *:after {
+    box-sizing: border-box;
 }
 
 @for $i from 1 through 10 {

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

@@ -14,7 +14,7 @@
 
 :host {
   padding-top: 0 !important;
-  display: block !important;
+  display: block;
 
   .container {
     padding-bottom: var(--padding-bottom)!important;

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

@@ -20,10 +20,12 @@
 }
 
 @layer components {
+
+  dialog[open] {
+    display: var(--modal-inner-dialog-display,block);
+  }
   dialog {
     
-    display: var(--modal-inner-dialog-display,block);
-
     width: 90vw;
     max-width: 20.25rem; /* col-width*4 324px */
 

package/assets/sass/components/tabs.config.scss

@@ -5,7 +5,7 @@
 
 
 *:not(main):has(> iam-tabs) {
-  container-type: inline-size;
+  //container-type: inline-size;
 }
 
 iam-tabs {

package/assets/sass/elements/container.scss

@@ -5,8 +5,6 @@
     display: block;
     margin-left: auto;
     margin-right: auto;
-
-    container-type: inline-size;
     width: 100%;
 
     &:not([class*='col-']){
@@ -32,22 +30,6 @@
       column-gap: 1rem;
     }
 
-    [class*='col-span-']:not([class*='-col-span-']):not(:first-child) {
-      --col-start: auto;
-    }
-
-    @media screen and (min-width: 36em) {
-      [class*='sm-col-span-']:not(:first-child) {
-        --col-start: auto;
-      }
-    }
-
-    @media screen and (min-width: 62em) {
-      [class*='md-col-span-']:not(:first-child) {
-        --col-start: auto;
-      }
-    }
-
     &:not(.container-fluid) {
       max-width: var(--container-max-width);
     }
@@ -93,6 +75,9 @@
     }
   }
 
+  .container--inline-size {
+    container-type: inline-size;
+  }
   :host .container {
     display: block;
     margin-left: auto;
@@ -116,3 +101,26 @@
   }
   /* #endregion */
 }
+
+
+
+@layer utilities {
+  .container {
+
+    [class*='col-span-']:not([class*='-col-span-']):not(:first-child) {
+      --col-start: auto;
+    }
+
+    @media screen and (min-width: 36em) {
+      [class*='sm-col-span-']:not(:first-child) {
+        --col-start: auto!important;
+      }
+    }
+
+    @media screen and (min-width: 62em) {
+      [class*='md-col-span-']:not(:first-child) {
+        --col-start: auto!important;
+      }
+    }
+  }
+}

package/assets/sass/elements/details.css

@@ -221,4 +221,18 @@
       padding-inline: var(--dialog-padding);
     }
   }
+
+  /* #region grid fix */
+
+  iam-tabs:has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-]):not([class*=row-cols-])) {
+    display: block!important;
+  }
+
+  details[open]:has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-]):not([class*=row-cols-]))::details-content {
+    display: grid !important;
+    grid-template-rows: auto !important;
+    grid-template-columns: [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end] !important;
+    column-gap: var(--gap) !important;
+  }
+  /* #endregion */
 }

package/assets/sass/elements/icons.css

@@ -46,7 +46,18 @@
     display: inline-block;
   }
 
-  [class*='fa-'][class*='colour-'] {
+  .icon[class*='fa-'][class*='colour-'] {
     color: var(--colour,inherit);
   }
+
+
+  /* #endregion fixes */
+
+  .icon.fa-star:before {
+    font-size: 0.9em;
+    margin-left: -0.05em;
+  }
+
+
+  /* #endregion icons */
 }

package/assets/sass/elements/illustration.css

@@ -0,0 +1,13 @@
+
+
+@layer elements {
+  
+  .illustration--sm {
+    width: 100%;
+    max-width: 6.25rem;
+  }
+  .illustration--md {
+    width: 100%;
+    max-width: 12.5rem;
+  }
+}

package/assets/ts/modules/nav.ts

@@ -145,11 +145,6 @@ export const loadUserData = async(Cookies): any => {
 
 export const setEnabledLinks = (component,data):void => {
 
-  console.log(data);
-
-
-
-  
   component.querySelectorAll(`[data-product][data-feature]`).forEach((element) => {
     const isEnabled = data.attributes.products[element.getAttribute('data-product')].features[element.getAttribute('data-feature')];
     element.setAttribute('data-is-enabled',isEnabled);