@iamproperty/components 7.7.1--beta16 → 7.7.1--beta18

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta16
+  * iamKey v7.7.1--beta18
   * 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::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]{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[open]{--dialog-padding: 2rem;min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){dialog[open]{min-width:28.375rem;width:fit-content;max-width:46rem}}dialog[open]::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[open]::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[open] .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[open] .scroll .fa-circle{display:none}dialog[open]>button:first-child{position:absolute;top:.5rem;right:.5rem;z-index:var(--index-floating);margin:0}dialog[open]>button:first-child:not(:hover,:focus,:active){background-color:var(--colour-canvas)}@container (min-width: 36em){dialog[open]>button:first-child{top:calc(var(--dialog-padding) - .75rem);right:calc(var(--dialog-padding) - .75rem)}}dialog[open]:has(.youtube-embed){padding:0 !important}dialog[open].dialog--fullwidth{max-width:69.5rem}dialog[open] .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)}}@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::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]{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[open]{--dialog-padding: 2rem;min-width:20.9375rem;width:fit-content;max-width:42.875rem}}@media screen and (min-width: 62em){dialog[open]{min-width:28.375rem;width:fit-content;max-width:46rem}}dialog[open]::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[open]::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[open] .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[open] .scroll .fa-circle{display:none}dialog[open]>button:first-child{position:absolute;top:.5rem;right:.5rem;z-index:var(--index-floating);margin:0}dialog[open]>button:first-child:not(:hover,:focus,:active){background-color:var(--colour-canvas)}@container (min-width: 36em){dialog[open]>button:first-child{top:calc(var(--dialog-padding) - .75rem);right:calc(var(--dialog-padding) - .75rem)}}dialog[open]:has(.youtube-embed){padding:0 !important}dialog[open].dialog--fullwidth{max-width:69.5rem}dialog[open] .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--beta16
+  * iamKey v7.7.1--beta18
   * 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

@@ -28,7 +28,7 @@ const navbar = (element) => {
 export const populateNav = (data) => {
     let html = ``;
     data.forEach((feature) => {
-        if (feature.attributes.sections)
+        if (feature.attributes.sections.length)
             html += `<details name="megamenu"><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${populateSections(feature.attributes.sections)}</div></details>`;
         else if (feature.attributes.links)
             html += `<details name="megamenu"><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${populateLinks(feature.attributes.links)}</div></details>`;
@@ -40,8 +40,9 @@ export const populateNav = (data) => {
 export const populateSections = (data) => {
     let html = ``;
     data.forEach((section) => {
-        html += `<span class="section ${section.class}">
-      <span class="lead text-heading d-block">${section.enabled == "false" && section.marketing ? section.marketing : section.title}</span>
+        html += `<span class="section section--${section.layout}">
+      ${section.title ? `<span class="lead text-heading section-title" data-product="${section.id}" data-title>${section.title}</span>` : ''}
+      ${section.description ? `<span class="lead section-desc" data-product="${section.id}">! ${section.description}</span>` : ''}
       ${populateLinks(section.links)}
     </span>`;
     });
@@ -50,12 +51,12 @@ export const populateSections = (data) => {
 export const populateLinks = (data) => {
     let html = ``;
     data.forEach((link) => {
-        html += `
-    <a href="${link.url}">${link.title}</a>`;
+        html += `<a href="${link.destinations.unlinked}" target="_blank" data-product="${link.productKey}" data-feature="${link.featureKey}" data-enabled="${link.destinations.linkedEnabled}" data-disabled="${link.destinations.linkedDisabled}">${link.title}</a>`;
     });
     return html;
 };
 export const loadNavData = (Cookies) => __awaiter(void 0, void 0, void 0, function* () {
+    //const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
     const ajaxURL = '/nav.json';
     // Setup controller vars if not already set
     if (!window.controller)
@@ -67,24 +68,16 @@ export const loadNavData = (Cookies) => __awaiter(void 0, void 0, void 0, functi
     window.controller[ajaxURL] = new AbortController();
     const { signal } = window.controller[ajaxURL];
     try {
-        return yield fetch(ajaxURL, {
-            signal: signal,
-            method: 'get',
-            credentials: 'same-origin',
-            headers: new Headers({
-                'Content-Type': 'application/json',
+        const response = yield fetch(ajaxURL, {
+            signal,
+            method: 'GET',
+            headers: {
                 Accept: 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
-            }),
-        })
-            .then((response) => response.json())
-            .then((response) => {
-            // populate datalist
-            let listString = '';
-            const data = response['data'] ? response['data'] : response;
-            return data;
+            },
         });
+        const json = yield response.json();
+        const data = json.data ? json.data : json;
+        return data;
     }
     catch (error) {
         if ((error === null || error === void 0 ? void 0 : error.name) === 'AbortError') {
@@ -94,4 +87,46 @@ export const loadNavData = (Cookies) => __awaiter(void 0, void 0, void 0, functi
         return 'There has been a problem. Please try again in a few moments.';
     }
 });
+export const loadUserData = (Cookies) => __awaiter(void 0, void 0, void 0, function* () {
+    const ajaxURL = '/user.json';
+    // Setup controller vars if not already set
+    if (!window.controller)
+        window.controller = [];
+    // Abort if controller already present for this url
+    if (window.controller[ajaxURL])
+        window.controller[ajaxURL].abort();
+    // Create a new controller so it can be aborted if new fetch made
+    window.controller[ajaxURL] = new AbortController();
+    const { signal } = window.controller[ajaxURL];
+    try {
+        const response = yield fetch(ajaxURL, {
+            signal,
+            method: 'GET',
+            headers: {
+                Accept: 'application/json',
+            },
+        });
+        const json = yield response.json();
+        const data = json.data ? json.data : json;
+        return data;
+    }
+    catch (error) {
+        if ((error === null || error === void 0 ? void 0 : error.name) === 'AbortError') {
+            return true;
+        }
+        console.log(error);
+        return 'There has been a problem. Please try again in a few moments.';
+    }
+});
+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);
+        if (isEnabled && element.getAttribute('data-enabled')) {
+            element.setAttribute('href', element.getAttribute('data-enabled'));
+            element.removeAttribute('target');
+        }
+    });
+};
 export default navbar;

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta16
+  * iamKey v7.7.1--beta18
   * 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--beta16
+  * iamKey v7.7.1--beta18
   * 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/components/card.component.scss

@@ -8,6 +8,7 @@
   --card-right-padding: 1rem;
   /* --card-head-height: 10rem; */
   --card-icon-right: 1rem;
+  position: relative;
 }
 
 :host(:is(:hover, :focus, .hover):not(.prevent-hover)) {
@@ -185,3 +186,29 @@ slot[name='secondary'] {
   border-radius: var(--card-border-radius) !important;
 }
 /* #endregion */
+
+/* #region link */
+slot[name="link"] {
+
+  position: absolute;
+  display: block;
+  inset: 0;
+  z-index: 1;
+}
+
+::slotted([slot="link"]) {
+
+  position: absolute!important;
+  display: block!important;
+  inset: 0!important;
+  z-index: 1!important;
+  margin: 0!important;
+  text-indent: -300%!important;
+  overflow: hidden!important;
+}
+::slotted([slot="link"]):after {
+
+  display: none!important;
+}
+
+/* #endregion */

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

@@ -9,6 +9,7 @@
 
   border-radius: var(--card-border-radius);
   margin-bottom: 2rem;
+  display: block;
 }
 
 .wrapper {
@@ -89,7 +90,7 @@
 ::slotted(.badge) {
   margin-bottom: 0.375rem !important;
 }
-::slotted(span:not(.badge)) {
+::slotted(span:not(.badge,.title)) {
   display: block !important;
   font-weight: normal !important;
   font-size: 1rem !important;
@@ -101,7 +102,7 @@
   padding-bottom: 0 !important;
   color: var(--colour-body);
 }
-::slotted(span:not(.badge):not([class*='pt-'])) {
+::slotted(span:not(.badge,.title):not([class*='pt-'])) {
   padding-top: 1.5rem !important;
 }
 

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

@@ -10,6 +10,9 @@
 
 @layer components {
 
+  :host {
+    width: 100%;
+  }
   .carousel-wrapper {
 
     padding-inline: 1.5rem;
@@ -135,6 +138,17 @@
   }
   /* #endregion */
 
+  @container style(--hide-carousel-btns) {
+    .carousel {
+    
+      --button-height: 0rem;
+    }
+    .carousel::scroll-button(*) {
+    
+      display: none!important;
+    }
+  }
+
   /* #region markers */
   .carousel {
     &::scroll-marker-group {

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

@@ -27,7 +27,7 @@
 
   /* #region Carousel inside of a admin panel */
   .admin-panel:has(iam-carousel) {
-    container-type: inline-size;
+    --hide-carousel-btns: 1;
   }
 
   .admin-panel:has(iam-carousel:last-child) {

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

@@ -140,6 +140,11 @@ slot[name="badge"] {
   max-width: 4.75rem!important; /* TODO: magic number 1 column */
 }
 
+::slotted(img.panel-img--lg[slot="panel"]) {
+  
+  max-width: 14.25rem!important; /* TODO: magic number 2 column */
+}
+
 :host(.has-panel) slot[name="panel"]{
   container-type: inline-size;
     anchor-name: --anchor;

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

@@ -32,6 +32,7 @@
   flex-direction: row !important;
   flex-wrap: wrap !important;
   align-items: center !important;
+  color: var(--colour-heading);
 }
 
 
@@ -108,7 +109,7 @@
   }
 
   @media screen and (min-width: 36em) {
-    margin: 0 0 0 3rem;
+    margin: 0 0 0 2rem;
     width: auto;
     padding-right: 1.875rem; /* 24 + 6 */
     text-indent: 0;
@@ -121,7 +122,7 @@
   @media screen and (min-width: 62em) {
     width: fit-content;
     height: auto;
-    margin: 0 0 0 3rem;
+    margin: 0 0 0 2rem;
     padding: 0 !important;
     text-indent: 0;
     padding-right: 0 !important;
@@ -412,8 +413,7 @@
     left: 50%;
     width: 100svw;
     translate: -50svw 0;
-
-    
+ 
     .container {
       margin-left: auto;
       margin-right: auto;
@@ -549,6 +549,7 @@
 
     z-index: 1;
     top: 0;
+    height: 100vh;
   }
 
   :host(.open-secondary) .has-secondary .menu__secondary {
@@ -556,7 +557,7 @@
     z-index: 2;
   }
 }
-/* #endregion */
+/* #endregion */ 
 
 /* #region Menus */
 ::slotted(.nav--menu) {
@@ -617,7 +618,7 @@
 
   @media screen and (min-width: 62em) {
     height: calc(100vh - var(--nav-height));
-    top: calc(var(--nav-height) + 4px);
+    top: var(--nav-height);
   }
 }