natura11y 2.2.0 → 2.2.2

package/dist/natura11y.js

@@ -1 +1 @@
-!function(){"use strict";let t,e=0,i=document.querySelector("html");const s=s=>{t=document.activeElement,e=window.scrollY,i.style.setProperty("--scroll-position",`-${e}px`),i.classList.add("has-overlay"),s&&"true"===s.getAttribute("aria-hidden")&&s.setAttribute("aria-hidden",!1),o(s)},a=s=>{i.removeAttribute("style"),i.classList.remove("has-overlay"),i.classList.length||i.removeAttribute("class"),s&&"false"===s.getAttribute("aria-hidden")&&s.setAttribute("aria-hidden",!0),window.scrollTo({top:e,behavior:"instant"}),t.focus()},n=function(){return[...(arguments.length>0&&void 0!==arguments[0]?arguments[0]:document).querySelectorAll(["a[href]","area","button","details","frame","iframe","input","object","summary","textarea","select",'[tabindex]:not([tabindex="-1"])'])].filter((t=>!t.hasAttribute("disabled")&&!t.getAttribute("aria-hidden")))},o=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,i=n(t),s=i[0],o=i[i.length-1];e.setAttribute("tabindex","-1"),e.focus(),t.addEventListener("keydown",(e=>{switch(e.code){case"Tab":document.activeElement===o&&(e.shiftKey||(e.preventDefault(),s.focus())),document.activeElement===s&&e.shiftKey&&(e.preventDefault(),o.focus());break;case"Escape":a(t)}}))};class l{#t=document.querySelectorAll(".accordion");#e(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];n(t).forEach((t=>{t.setAttribute("tabindex",e?0:-1)}))}#i=(t,e,i)=>s=>{s.preventDefault(),s.stopPropagation();for(const t of i)t.classList.remove("show"),t!==e&&(t.classList.remove("shown"),t.style.maxHeight=null,t.previousElementSibling.setAttribute("aria-expanded",!1),t.setAttribute("aria-hidden",!0),this.#e(t,!1));e.classList.toggle("shown");let a=t.getAttribute("aria-expanded");"true"===a?(t.setAttribute("aria-expanded",!1),e.setAttribute("aria-hidden",!0),this.#e(e,!1)):"false"===a&&(t.setAttribute("aria-expanded",!0),e.setAttribute("aria-hidden",!1),this.#e(e,!0)),e.style.maxHeight?e.style.maxHeight=null:(e.style.maxHeight=e.scrollHeight+"px",e.setAttribute("aria-hidden",!1));let n=new Event("accTrigger",{bubbles:!0});document.dispatchEvent(n)};#s=(t,e,i)=>t=>{const s=s=>{t.preventDefault();let a=i+s;-1===s&&a<0?e[e.length-1].focus():1===s&&a>=e.length?e[0].focus():e[a].focus()};switch(t.code){case"ArrowLeft":case"ArrowUp":s(-1);break;case"ArrowRight":case"ArrowDown":s(1)}};#a=(t,e,i)=>s=>{"Enter"===s.code&&"BUTTON"!==s.target.tagName&&this.#i(t,e,i)(s)};init(){this.#t.forEach((t=>{const e=Array.from(t.querySelectorAll(':scope > [data-accordion="button"]')),i=t.querySelectorAll(':scope > [data-accordion="panel"]');t.addEventListener("click",(t=>{const s=t.target.closest('[data-accordion="button"]');if(!s)return;if(-1===e.indexOf(s))return;const a=s.nextElementSibling;this.#i(s,a,i)(t)})),t.addEventListener("keydown",(t=>{const i=t.target.closest('[data-accordion="button"]');if(!i)return;const s=e.indexOf(i);-1!==s&&this.#s(i,e,s)(t)})),t.addEventListener("keyup",(t=>{const s=t.target.closest('[data-accordion="button"]');if(!s)return;e.indexOf(s);const a=s.nextElementSibling;this.#a(s,a,i)(t)})),e.forEach(((t,e)=>{const i=t.nextElementSibling;let s=t.getAttribute("aria-expanded");t.setAttribute("tabindex",0),"true"===s?(i.style.maxHeight=i.scrollHeight+"px",i.classList.add("show"),this.#e(i,!0)):(t.setAttribute("aria-expanded",!1),i.style.maxHeight=null,i.setAttribute("aria-hidden",!0),this.#e(i,!1))}))}))}}class r{#n=document.querySelectorAll(".alert--dismissable");#o='\n    <button class="button button--icon-only">\n        <span class="icon icon-close" aria-label="Close" aria-hidden="true">\n    </button>\n  ';#l=t=>e=>{e.preventDefault(),t.classList.add("dismissed"),document.querySelector(".dismissed").addEventListener("animationend",(()=>{t.remove()}))};init(){this.#n.forEach((t=>{t.insertAdjacentHTML("afterbegin",this.#o),t.querySelector("button").addEventListener("click",this.#l(t))}))}}class d{#r=document.querySelectorAll(".button--icon-only");#d=t=>e=>setTimeout((()=>{t.forEach((t=>{t.classList.remove("tooltip-show")})),e.target.classList.add("tooltip-show")}),300);#c=()=>(t,e)=>{clearTimeout(e),t.target.classList.remove("tooltip-show")};#h(t,e){const i=e.offsetWidth/2,s=t.offsetLeft,a=window.innerWidth-(t.offsetLeft+t.offsetWidth);i>s&&e.classList.add("left"),i>a&&e.classList.add("right")}#u=(t,e)=>{const i=`\n            <span class="button__tooltip">\n                ${e}\n            </span>\n        `;if(e){t.insertAdjacentHTML("beforeend",i);const e=t.querySelector(".button__tooltip");let s;this.#h(t,e),window.addEventListener("resize",(()=>this.#h(t,e))),t.addEventListener("mouseenter",(t=>{s=this.#d(this.#r)(t)})),t.addEventListener("focusin",(t=>{s=this.#d(this.#r)(t)})),t.addEventListener("mouseleave",(t=>{this.#c()(t,s)})),t.addEventListener("focusout",(t=>{this.#c()(t,s)}))}};init(){this.#r.forEach((t=>{const e=t.getAttribute("aria-label");this.#u(t,e)}))}}class c{#b=document.querySelectorAll("[data-target-toggle]");#g(t,e){t.setAttribute("aria-expanded",!1),e.classList.remove("shown")}#p(t,e,i){t.setAttribute("aria-expanded",!0),e.classList.add("shown"),i&&i.focus()}#s(t,e,i){return s=>{switch(s.code){case"Tab":document.activeElement===i&&s.shiftKey&&(s.preventDefault(),t.focus());break;case"Escape":this.#g(t,e)}}}#m(t,e){const i=t.target.getAttribute("data-target-toggle").replace(/#/,""),s=document.getElementById(i),a=n(s)[0],o=e.getAttribute("aria-expanded");"true"===o?this.#g(e,s):"false"===o&&this.#p(e,s,s.hasAttribute("data-focus-first")?a:null),s.addEventListener("keydown",this.#s(e,s,a))}init(){this.#b.forEach((t=>{t.setAttribute("aria-expanded",!1),t.addEventListener("click",(e=>{if(this.#m(e,t),t.hasAttribute("data-target-close")){const t=e.target.getAttribute("data-target-close").replace(/#/,""),i=document.getElementById(t),s=document.querySelector(`[data-target-toggle="#${t}"]`);this.#g(s,i)}}))}))}}class h{#f=document.querySelectorAll(".form-entry");#L=["is-invalid"];#v=!1;#y(){return""===(arguments.length>0&&void 0!==arguments[0]?arguments[0]:null)}#x(t){t.closest(".form-entry").classList.add(...this.#L)}#E(t){t.closest(".form-entry").classList.remove(...this.#L)}#A(t){return this.#y(t.value)?(this.#x(t),!0):(this.#E(t),!1)}#w(t){return e=>{e.target.closest(t).classList.add("active")}}#S(t){return e=>{e.target.closest(t).classList.remove("active")}}#C(t,e){this.#v&&e&&this.#A(t),""!==t.value?t.closest(".form-entry").classList.add("has-value"):t.closest(".form-entry").classList.remove("has-value")}#_(t){const e=t.querySelectorAll(["email","input","select","tel","textarea"]);let i=t.hasAttribute("data-required");e.forEach((t=>this.#q(t,i)))}#q(t,e){const i=t.closest(".form-entry").querySelector(".form-entry__field__input");let s=".form-entry";if("INPUT"===t.tagName){const e=t.getAttribute("type");"radio"!==e&&"checkbox"!==e||t.disabled&&t.closest("label").classList.add("disabled")}t.addEventListener("focusin",this.#w(s)),t.addEventListener("focusout",this.#S(s)),e&&(t.setAttribute("required","true"),t.setAttribute("aria-required",!0)),t.addEventListener("change",(()=>this.#C(t,e))),i&&i.addEventListener("click",this.handleClickOnInputText)}handleClickOnInputText(t){let e=t.target.tagName,i=t.target.closest(".form-entry__field__input").querySelector("input");"SPAN"===e&&i.focus()}init(){this.#f.forEach((t=>this.#_(t)))}}class u{#T=document.querySelectorAll("form[novalidate]");#L=["is-invalid"];#v=!1;#y(){return""===(arguments.length>0&&void 0!==arguments[0]?arguments[0]:null)}#x(t){t.closest(".form-entry").classList.add(...this.#L)}#E(t){t.closest(".form-entry").classList.remove(...this.#L)}#A(t){return this.#y(t.value)?(this.#x(t),!0):(this.#E(t),!1)}#k(t,e){return null===t&&(t="This field is Required"),`\n            <small class="form-entry__feedback">\n                <span class="icon icon-warn" aria-hidden="true"></span>\n                <span class="message">\n                    <strong>${t}</strong> ${void 0!==e?e:""}\n                </span>\n            </small>\n        `}#H(t,e){t.forEach((t=>{let i=t.closest(".form-entry"),s=i.querySelector(".form-entry__field__label");i.classList.add("is-invalid");const a=i.querySelector(".form-entry__feedback"),n=i.querySelector(".form-entry__help");let o;n&&(o=n.innerHTML.toString());let l=i.getAttribute("data-error-message"),r=[l,o];e.push(r),null===a&&s.insertAdjacentHTML("afterend",this.#k(l,o))}))}#I(t){let e=t.querySelector('[class*="alert"], [class*="invalid"]');if(e){e.hasAttribute("data-alert")&&(e.style.display="block");let t=e.offsetTop-16;window.scrollTo({top:t,behavior:"smooth"})}}#M(t){t.addEventListener("submit",(e=>{e.preventDefault(),this.#v=!0;let i=[],s=t.querySelectorAll("input, select, textarea");s.forEach((t=>{t.addEventListener("input",(()=>this.#A(t)))})),s.forEach((t=>{this.#A(t)}));let a=t.querySelectorAll(":invalid");this.#H(a,i),i.length>0&&e.preventDefault(),this.#I(t)}))}init(){this.#T.forEach((t=>this.#M(t)))}}class b{#D=document.querySelectorAll(".file-upload");#F(t){return function(e){const[i]=e.target.files,{name:s,size:a}=i,n=`\n                <span class="file-upload__data">\n                    <span class="file-name">${s}</span>\n                    <span class="file-size">${(a/1e3).toFixed(2)} kb</span>\n                </span>\n            `,o=t.querySelector(".file-upload__data");o&&o.remove(),t.insertAdjacentHTML("beforeend",n)}}dragOver(t){t.target.closest(".form-entry").classList.add("active")}dragOff(t){t.target.closest(".form-entry").classList.remove("active")}dropped(t){t.target.closest(".form-entry").classList.remove("active")}#O(t){t.querySelector('input[type="file"]').addEventListener("change",this.#F(t)),t.addEventListener("dragenter",this.dragOver.bind(this)),t.addEventListener("dragleave",this.dragOff.bind(this)),t.addEventListener("dragend",this.dragOff.bind(this)),t.addEventListener("drop",this.dropped.bind(this))}init(){this.#D.forEach((t=>this.#O(t)))}}class g{#B=document.querySelectorAll("[data-lightbox]");#U='\n\t\t<div class="lightbox__buttons button-group">\n\t\t<button class="button button--icon-only" data-lightbox-previous>\n\t\t\t<span class="icon icon-arrow-left" aria-label="Previous" aria-hidden="true"></span>\n\t\t</button>\n\t\t<button class="button button--icon-only" data-lightbox-next>\n\t\t\t<span class="icon icon-arrow-right" aria-label="Next" aria-hidden="true"></span>\n\t\t</button>\n\t\t<button class="button button--icon-only" data-lightbox-close>\n\t\t\t<span class="icon icon-close" aria-label="Close" aria-hidden="true"></span>\n\t\t</button>\n\t\t</div>\n\t\t<figure class="lightbox__container" aria-live="polite" aria-atomic="true">\n\t\t<div class="lightbox__media"></div>           \n\t\t<figcaption class="lightbox__caption"></figcaption>\n\t\t</figure>\n  \t';#N='\n\t\t<video controls>\n\t\t<source type="video/mp4">\n\t\t</video>\n\t';#P='\n\t\t<iframe\n\t\t\tframeborder="0"\n\t\t\tallow="autoplay; fullscreen;"\n\t\t\tallowfullscreen\n\t\t></iframe>\n\t';#$='\n\t\t<div class="lightbox__media__loader">\n\t\t\t<span class="icon icon-loading icon--rotate" aria-hidden="true"></span>\n\t\t</div>\n\t\t<div class="lightbox__media__error" style="display: none;">\n\t\t\t<span class="icon icon-warn" aria-hidden="true"></span>\n\t\t\t<p>Failed to load content. Please try again later.</p>\n\t\t</div>\n\t';#K='<img src="https://source.unsplash.com/1600x900" />';#V=[];#R=t=>e=>{document.querySelector(".lightbox")||(e.preventDefault(),this.lightbox=this.#W(),this.currentLB=t,s(this.lightbox),this.#z(t))};#j=t=>{t.stopPropagation(),t.target!==t.currentTarget&&"click"===t.type||(a(this.lightbox),this.lightbox.parentElement.removeChild(this.lightbox),window.removeEventListener("keyup",this.#Y))};#G=(()=>{var t=this;return function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];t.lightbox.querySelector(".lightbox__caption").style.display=e?"block":"none"}})();#J=t=>{if(t.preventDefault(),t.target.hasAttribute("data-lightbox-previous"))this.#Q(-1);else{if(!t.target.hasAttribute("data-lightbox-next"))return;this.#Q(1)}};#Y=t=>{if(t.preventDefault(),!(this.#V.length<=1)||"ArrowLeft"!==t.code&&"ArrowRight"!==t.code)switch(t.code){case"ArrowLeft":this.#Q(-1),this.lightbox.querySelector("[data-lightbox-previous]").focus();break;case"ArrowRight":this.#Q(1),this.lightbox.querySelector("[data-lightbox-next]").focus();break;case"Escape":this.#j(t);break;default:return}};#Q(t){this.currentLB+=t,this.currentLB<0?this.currentLB=this.#V.length-1:this.currentLB>=this.#V.length&&(this.currentLB=0),this.#z(this.currentLB)}#z(t){const e=this.lightbox.querySelector(".lightbox__media"),i=this.lightbox.querySelector(".lightbox__caption");let s;e.innerHTML="";const{lbType:a,lbSrc:n,lbAlt:o,lbCaption:l}=this.#V[t],r=null!==l;switch(this.#G(r),a){case"image":s=this.#X(e,n,o);break;case"video":s=this.#Z(e,n)}r&&(i.innerHTML=l)}#X(t,e,i){t.hasAttribute("style")&&t.removeAttribute("style"),t.innerHTML=this.#K;const s=this.#tt();t.appendChild(s);const a=t.querySelector("img");return a.alt=i,a.src=e,this.#et(a,s),a}#Z(t,e){const i=/youtube/i.test(e),s=/vimeo/i.test(e);let a;if(i||s)t.innerHTML=this.#P,a=t.querySelector("iframe"),a.src=e;else{t.innerHTML=this.#N;const i=this.#tt();t.appendChild(i),a=t.querySelector("source");const s=t.querySelector("video");s.addEventListener("loadedmetadata",(()=>{let e=s.videoWidth,i=s.videoHeight;t.style.maxWidth=`${e}px`,t.style.aspectRatio=`${e} / ${i}`})),this.#et(a,i),a.src=e}return a}#W(){const t=document.createElement("div");t.classList.add("lightbox"),t.setAttribute("aria-hidden",!0),t.innerHTML=this.#U,document.body.appendChild(t);const e=t.querySelector("[data-lightbox-previous]"),i=t.querySelector("[data-lightbox-next]"),s=t.querySelector("[data-lightbox-close]");return this.#V.length<=1&&(e.setAttribute("disabled",!0),i.setAttribute("disabled",!0),e.style.display="none",i.style.display="none"),t.addEventListener("click",this.#j),s.addEventListener("click",this.#j),e.addEventListener("click",this.#J),i.addEventListener("click",this.#J),window.addEventListener("keyup",this.#Y),t}#it(t){let e=null,i="";return null!==t.querySelector("img")&&(e=t.querySelector("img").src||null,i=t.querySelector("img").alt||""),{lbType:t.getAttribute("data-lightbox")||"image",lbSrc:t.getAttribute("data-lightbox-src")||e,lbCaption:t.getAttribute("data-lightbox-caption")||null,lbAlt:t.getAttribute("data-lightbox-alt")||i}}#st(){this.#B.forEach((t=>{this.#V.push(this.#it(t))}))}#tt=()=>{const t=document.createElement("div");return t.className="lightbox__media__loader",t.innerHTML=this.#$,t};#et=(t,e)=>{const i="SOURCE"===t.nodeName?"loadeddata":"load";t.closest("SOURCE"===t.nodeName?"video":"img").addEventListener(i,(()=>{e&&e.parentNode&&e.parentNode.removeChild(e),null!==this.#V[this.currentLB].lbCaption&&this.#G(!0)})),t.onerror=()=>{const i=e.querySelector(".lightbox__media__loader"),s=e.querySelector(".lightbox__media__error");t.style.display="none",this.#G(!1),i.style.display="none",s.style.display="block"}};#at(){const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{if(t.isIntersecting){const i=t.target,s=i.dataset.lightboxSrc||i.src;if(!s)return;e.unobserve(i);const a=new Image;a.onload=()=>{document.body.appendChild(a)},a.onerror=()=>{console.error(`Failed to load image: ${s}`)},a.src=s,a.style.display="none",this.#V[Number(i.dataset.index)].hiddenImage=a}}))}),{root:null,rootMargin:"0px",threshold:.1});Array.from(this.#B).filter((t=>"image"===t.getAttribute("data-lightbox"))).forEach(((e,i)=>{const s=e.querySelector("img");s&&(s.dataset.index=i,t.observe(s))}))}#nt(){this.#B.forEach(((t,e)=>{t.addEventListener("click",this.#R(e))}))}init(){this.#st(),this.#nt(),this.#at()}}class p{#ot=document.querySelectorAll(".modal");#lt=document.querySelectorAll("[data-modal-open]");#rt=new Map;#dt(t,e){window.addEventListener("click",e),this.#rt.set(t,e)}#ct(t){const e=this.#rt.get(t);e&&(window.removeEventListener("click",e),this.#rt.delete(t))}openModal(t){if(!t)return void console.warn("Modal target not found.");s(t);const e=t.querySelector(".modal__content");if(!e)return void console.warn("Modal content not found.");t.classList.contains("modal--scroll-all")&&(t.scrollTop=0);t.querySelectorAll("[data-modal-close]").forEach((e=>{e.addEventListener("click",(()=>{a(t),this.#ct(t)})),e.setAttribute("aria-label","Close Modal Window")})),"true"===t.dataset.modalCloseOutside&&this.#dt(t,(i=>{e.contains(i.target)||(a(t),this.#ct(t))}))}init(){this.#ot.forEach((t=>{const e=t.querySelector(".modal__content");e.setAttribute("role","dialog"),e.setAttribute("aria-modal",!0),t.setAttribute("aria-hidden",!0)})),this.#lt.forEach((t=>{t.addEventListener("click",(t=>{const e=t.target.getAttribute("data-modal-open").replace(/#/,""),i=document.getElementById(e);this.openModal(i),t.stopPropagation()}))}))}}class m{#ht=document.querySelectorAll('[data-toggle="dropdown"]');#ut(t,e){e.classList.toggle("shown"),t.setAttribute("aria-expanded","true"===t.getAttribute("aria-expanded")?"false":"true")}#bt(t,e){e.classList.remove("shown"),t.setAttribute("aria-expanded","false")}init(){window.addEventListener("click",(t=>{this.#ht.forEach((e=>{let i=e.closest("li"),s=e.nextElementSibling;i.contains(t.target)||this.#bt(e,s)}))})),this.#ht.forEach((t=>{let e=t.nextElementSibling;e?(t.setAttribute("aria-expanded","false"),t.setAttribute("aria-haspopup","true"),t.addEventListener("click",(i=>{i.preventDefault(),this.#ut(t,e)}))):console.warn(`No dropdown menu found for dropdown button ${t}`)}))}}class f{#gt=document.querySelectorAll('[class*="table--stack"]');#pt=document.querySelectorAll(".table-scroll");#mt(t){const e=t.querySelectorAll("thead th"),i=t.querySelectorAll("tbody tr");let s=[];e.forEach((t=>{if(""!==t.textContent){const e=t.textContent.trim();s.push(e)}})),i.forEach((t=>{t.querySelectorAll("td").forEach(((t,e)=>{t.innerHTML=this.#ft(t.innerHTML),t.setAttribute("data-header",s[e])}))}))}#ft(t){return`\n\t\t\t<div class="td-content">\n\t\t\t\t${t}\n\t\t\t</div>\n\t\t`}#Lt(){this.#pt.forEach((t=>{let e=t.querySelector(".table-scroll__container"),i=t.offsetWidth;e.scrollWidth>i?t.setAttribute("data-scroll",!0):t.setAttribute("data-scroll",!1),e.addEventListener("scroll",(()=>{e.scrollLeft>1?e.setAttribute("data-scrolling",!0):e.setAttribute("data-scrolling",!1)}),{passive:!0})}))}init(){this.#gt.forEach((t=>{this.#mt(t)})),this.#Lt(),window.addEventListener("resize",this.#Lt.bind(this))}}class L{#vt=document.querySelectorAll(".tabs");#yt(t,e,i,s){t.preventDefault();let a=e+s;-1===s&&a<0?i[i.length-1].focus():1===s&&a>=i.length?i[0].focus():i[a].focus()}#xt(t,e){t.forEach((t=>{t.setAttribute("aria-selected","false")})),e.forEach((t=>{t.classList.remove("shown"),t.setAttribute("hidden","")}))}activateTab(t,e,i){this.#xt(e,i),t.setAttribute("aria-selected","true");let s=t.getAttribute("aria-controls"),a=document.getElementById(s);a.classList.add("shown"),a.removeAttribute("hidden")}init(){this.#vt.forEach((t=>{const e=t.querySelectorAll('[role="tab"]'),i=t.querySelectorAll('[role="tabpanel"]');e.forEach(((t,s)=>{t.addEventListener("click",(t=>{let s=t.target;this.activateTab(s,e,i)})),t.addEventListener("keydown",(t=>{switch(t.code){case"Home":t.preventDefault(),e[0].focus();break;case"End":t.preventDefault(),e[e.length-1].focus();break;case"ArrowLeft":this.#yt(t,s,e,-1);break;case"ArrowRight":this.#yt(t,s,e,1)}}))}))}))}}document.addEventListener("DOMContentLoaded",(()=>{(new l).init(),(new r).init(),(new d).init(),(new c).init(),(new h).init(),(new u).init(),(new b).init(),(new g).init(),(new p).init(),(new m).init(),(new f).init(),(new L).init()}))}();
+!function(){"use strict";let t,e=0,i=document.querySelector("html");const s=s=>{t=document.activeElement,e=window.scrollY,i.style.setProperty("--scroll-position",`-${e}px`),i.classList.add("has-overlay"),s&&"true"===s.getAttribute("aria-hidden")&&s.setAttribute("aria-hidden",!1),n(s)},a=s=>{i.removeAttribute("style"),i.classList.remove("has-overlay"),i.classList.length||i.removeAttribute("class"),s&&"false"===s.getAttribute("aria-hidden")&&s.setAttribute("aria-hidden",!0),window.scrollTo({top:e,behavior:"instant"}),t&&t.focus()},o=function(){return[...(arguments.length>0&&void 0!==arguments[0]?arguments[0]:document).querySelectorAll(["a[href]","area","button","details","frame","iframe","input","object","summary","textarea","select",'[tabindex]:not([tabindex="-1"])',"video","audio"])].filter((t=>!t.hasAttribute("disabled")))},n=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,i=o(t),s=i[0],n=i[i.length-1];e.setAttribute("tabindex","-1"),e.focus(),t.addEventListener("keydown",(e=>{switch(e.code){case"Tab":document.activeElement===n&&(e.shiftKey||(e.preventDefault(),s.focus())),document.activeElement===s&&e.shiftKey&&(e.preventDefault(),n.focus());break;case"Escape":a(t)}}))};class l{#t=document.querySelectorAll(".accordion");#e(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];o(t).forEach((t=>{t.setAttribute("tabindex",e?0:-1)}))}#i=(t,e,i)=>s=>{s.preventDefault(),s.stopPropagation();for(const t of i)t.classList.remove("show"),t!==e&&(t.classList.remove("shown"),t.style.maxHeight=null,t.previousElementSibling.setAttribute("aria-expanded",!1),t.setAttribute("aria-hidden",!0),this.#e(t,!1));e.classList.toggle("shown");let a=t.getAttribute("aria-expanded");"true"===a?(t.setAttribute("aria-expanded",!1),e.setAttribute("aria-hidden",!0),this.#e(e,!1)):"false"===a&&(t.setAttribute("aria-expanded",!0),e.setAttribute("aria-hidden",!1),this.#e(e,!0)),e.style.maxHeight?e.style.maxHeight=null:(e.style.maxHeight=e.scrollHeight+"px",e.setAttribute("aria-hidden",!1));let o=new Event("accTrigger",{bubbles:!0});document.dispatchEvent(o)};#s=(t,e,i)=>t=>{const s=s=>{t.preventDefault();let a=i+s;-1===s&&a<0?e[e.length-1].focus():1===s&&a>=e.length?e[0].focus():e[a].focus()};switch(t.code){case"ArrowLeft":case"ArrowUp":s(-1);break;case"ArrowRight":case"ArrowDown":s(1)}};#a=(t,e,i)=>s=>{"Enter"===s.code&&"BUTTON"!==s.target.tagName&&this.#i(t,e,i)(s)};init(){this.#t.forEach((t=>{const e=Array.from(t.querySelectorAll(':scope > [data-accordion="button"]')),i=t.querySelectorAll(':scope > [data-accordion="panel"]');t.addEventListener("click",(t=>{const s=t.target.closest('[data-accordion="button"]');if(!s)return;if(-1===e.indexOf(s))return;const a=s.nextElementSibling;this.#i(s,a,i)(t)})),t.addEventListener("keydown",(t=>{const i=t.target.closest('[data-accordion="button"]');if(!i)return;const s=e.indexOf(i);-1!==s&&this.#s(i,e,s)(t)})),t.addEventListener("keyup",(t=>{const s=t.target.closest('[data-accordion="button"]');if(!s)return;e.indexOf(s);const a=s.nextElementSibling;this.#a(s,a,i)(t)})),e.forEach(((t,e)=>{const i=t.nextElementSibling;let s=t.getAttribute("aria-expanded");t.setAttribute("tabindex",0),"true"===s?(i.style.maxHeight=i.scrollHeight+"px",i.classList.add("show"),this.#e(i,!0)):(t.setAttribute("aria-expanded",!1),i.style.maxHeight=null,i.setAttribute("aria-hidden",!0),this.#e(i,!1))}))}))}}class r{#o=document.querySelectorAll(".alert--dismissable");#n='\n    <button class="button button--icon-only">\n        <span class="icon icon-close" aria-label="Close" aria-hidden="true">\n    </button>\n  ';#l=t=>e=>{e.preventDefault(),t.classList.add("dismissed"),document.querySelector(".dismissed").addEventListener("animationend",(()=>{t.remove()}))};init(){this.#o.forEach((t=>{t.insertAdjacentHTML("afterbegin",this.#n),t.querySelector("button").addEventListener("click",this.#l(t))}))}}class d{#r=document.querySelectorAll(".button--icon-only");#d=t=>e=>setTimeout((()=>{t.forEach((t=>{t.classList.remove("tooltip-show")})),e.target.classList.add("tooltip-show")}),300);#c=()=>(t,e)=>{clearTimeout(e),t.target.classList.remove("tooltip-show")};#h(t,e){const i=e.offsetWidth/2,s=t.offsetLeft,a=window.innerWidth-(t.offsetLeft+t.offsetWidth);i>s&&e.classList.add("left"),i>a&&e.classList.add("right")}#u=(t,e)=>{const i=`\n            <span class="button__tooltip">\n                ${e}\n            </span>\n        `;if(e){t.insertAdjacentHTML("beforeend",i);const e=t.querySelector(".button__tooltip");let s;this.#h(t,e),window.addEventListener("resize",(()=>this.#h(t,e))),t.addEventListener("mouseenter",(t=>{s=this.#d(this.#r)(t)})),t.addEventListener("focusin",(t=>{s=this.#d(this.#r)(t)})),t.addEventListener("mouseleave",(t=>{this.#c()(t,s)})),t.addEventListener("focusout",(t=>{this.#c()(t,s)}))}};init(){this.#r.forEach((t=>{const e=t.getAttribute("aria-label");this.#u(t,e)}))}}class c{#b=document.querySelectorAll("[data-target-toggle]");#g(t,e){t.setAttribute("aria-expanded",!1),e.classList.remove("shown")}#p(t,e,i){t.setAttribute("aria-expanded",!0),e.classList.add("shown"),i&&i.focus()}#s(t,e,i){return s=>{switch(s.code){case"Tab":document.activeElement===i&&s.shiftKey&&(s.preventDefault(),t.focus());break;case"Escape":this.#g(t,e)}}}#m(t,e){const i=t.target.getAttribute("data-target-toggle").replace(/#/,""),s=document.getElementById(i),a=o(s)[0],n=e.getAttribute("aria-expanded");"true"===n?this.#g(e,s):"false"===n&&this.#p(e,s,s.hasAttribute("data-focus-first")?a:null),s.addEventListener("keydown",this.#s(e,s,a))}init(){this.#b.forEach((t=>{t.setAttribute("aria-expanded",!1),t.addEventListener("click",(e=>{if(this.#m(e,t),t.hasAttribute("data-target-close")){const t=e.target.getAttribute("data-target-close").replace(/#/,""),i=document.getElementById(t),s=document.querySelector(`[data-target-toggle="#${t}"]`);this.#g(s,i)}}))}))}}class h{#f=document.querySelectorAll(".form-entry");#L=["is-invalid"];#v=!1;#y(){return""===(arguments.length>0&&void 0!==arguments[0]?arguments[0]:null)}#x(t){t.closest(".form-entry").classList.add(...this.#L)}#E(t){t.closest(".form-entry").classList.remove(...this.#L)}#A(t){return this.#y(t.value)?(this.#x(t),!0):(this.#E(t),!1)}#w(t){return e=>{e.target.closest(t).classList.add("active")}}#S(t){return e=>{e.target.closest(t).classList.remove("active")}}#C(t,e){this.#v&&e&&this.#A(t),""!==t.value?t.closest(".form-entry").classList.add("has-value"):t.closest(".form-entry").classList.remove("has-value")}#_(t){const e=t.querySelectorAll(["email","input","select","tel","textarea"]);let i=t.hasAttribute("data-required");e.forEach((t=>this.#q(t,i)))}#q(t,e){const i=t.closest(".form-entry").querySelector(".form-entry__field__input");let s=".form-entry";if("INPUT"===t.tagName){const e=t.getAttribute("type");"radio"!==e&&"checkbox"!==e||t.disabled&&t.closest("label").classList.add("disabled")}t.addEventListener("focusin",this.#w(s)),t.addEventListener("focusout",this.#S(s)),e&&(t.setAttribute("required","true"),t.setAttribute("aria-required",!0)),t.addEventListener("change",(()=>this.#C(t,e))),i&&i.addEventListener("click",this.handleClickOnInputText)}handleClickOnInputText(t){let e=t.target.tagName,i=t.target.closest(".form-entry__field__input").querySelector("input");"SPAN"===e&&i.focus()}init(){this.#f.forEach((t=>this.#_(t)))}}class u{#T=document.querySelectorAll("form[novalidate]");#L=["is-invalid"];#v=!1;#y(){return""===(arguments.length>0&&void 0!==arguments[0]?arguments[0]:null)}#x(t){t.closest(".form-entry").classList.add(...this.#L)}#E(t){t.closest(".form-entry").classList.remove(...this.#L)}#A(t){return this.#y(t.value)?(this.#x(t),!0):(this.#E(t),!1)}#k(t,e){return null===t&&(t="This field is Required"),`\n            <small class="form-entry__feedback">\n                <span class="icon icon-warn" aria-hidden="true"></span>\n                <span class="message">\n                    <strong>${t}</strong> ${void 0!==e?e:""}\n                </span>\n            </small>\n        `}#H(t,e){t.forEach((t=>{let i=t.closest(".form-entry"),s=i.querySelector(".form-entry__field__label");i.classList.add("is-invalid");const a=i.querySelector(".form-entry__feedback"),o=i.querySelector(".form-entry__help");let n;o&&(n=o.innerHTML.toString());let l=i.getAttribute("data-error-message"),r=[l,n];e.push(r),null===a&&s.insertAdjacentHTML("afterend",this.#k(l,n))}))}#D(t){let e=t.querySelector('[class*="alert"], [class*="invalid"]');if(e){e.hasAttribute("data-alert")&&(e.style.display="block");let t=e.offsetTop-16;window.scrollTo({top:t,behavior:"smooth"})}}#I(t){t.addEventListener("submit",(e=>{e.preventDefault(),this.#v=!0;let i=[],s=t.querySelectorAll("input, select, textarea");s.forEach((t=>{t.addEventListener("input",(()=>this.#A(t)))})),s.forEach((t=>{this.#A(t)}));let a=t.querySelectorAll(":invalid");this.#H(a,i),i.length>0&&e.preventDefault(),this.#D(t)}))}init(){this.#T.forEach((t=>this.#I(t)))}}class b{#M=document.querySelectorAll(".file-upload");#F(t){return function(e){const[i]=e.target.files,{name:s,size:a}=i,o=`\n                <span class="file-upload__data">\n                    <span class="file-name">${s}</span>\n                    <span class="file-size">${(a/1e3).toFixed(2)} kb</span>\n                </span>\n            `,n=t.querySelector(".file-upload__data");n&&n.remove(),t.insertAdjacentHTML("beforeend",o)}}dragOver(t){t.target.closest(".form-entry").classList.add("active")}dragOff(t){t.target.closest(".form-entry").classList.remove("active")}dropped(t){t.target.closest(".form-entry").classList.remove("active")}#O(t){t.querySelector('input[type="file"]').addEventListener("change",this.#F(t)),t.addEventListener("dragenter",this.dragOver.bind(this)),t.addEventListener("dragleave",this.dragOff.bind(this)),t.addEventListener("dragend",this.dragOff.bind(this)),t.addEventListener("drop",this.dropped.bind(this))}init(){this.#M.forEach((t=>this.#O(t)))}}class g{#B=document.querySelectorAll("[data-lightbox]");#N='\n\t\t<figure class="lightbox__container" aria-live="polite" aria-atomic="true">\n\t\t\t<div class="lightbox__media"></div>           \n\t\t\t<figcaption class="lightbox__caption"></figcaption>\n\t\t</figure>\n\t\t<div class="lightbox__controls">\n\t\t\t<button class="button button--icon-only" data-lightbox-previous>\n\t\t\t\t<span class="icon icon-arrow-left" aria-label="Previous" aria-hidden="true"></span>\n\t\t\t</button>\n\t\t\t<button class="button button--icon-only" data-lightbox-next>\n\t\t\t\t<span class="icon icon-arrow-right" aria-label="Next" aria-hidden="true"></span>\n\t\t\t</button>\n\t\t\t<button class="button button--icon-only" data-lightbox-close>\n\t\t\t\t<span class="icon icon-close" aria-label="Close" aria-hidden="true"></span>\n\t\t\t</button>\n\t\t</div>\n  \t';#U='\n\t\t<video controls tabindex="0">\n\t\t\t<source type="video/mp4">\n\t\t</video>\n\t';#P='\n\t\t<iframe\n\t\t\tframeborder="0"\n\t\t\tallow="autoplay; fullscreen;"\n\t\t\tallowfullscreen\n\t\t\tcontrols\n\t\t\ttabindex="0"\n\t\t></iframe>\n\t';#$='\n\t\t<div class="lightbox__media__loader">\n\t\t\t<span class="icon icon-loading icon--rotate" aria-hidden="true"></span>\n\t\t</div>\n\t\t<div class="lightbox__media__error" style="display: none;">\n\t\t\t<span class="icon icon-warn" aria-hidden="true"></span>\n\t\t\t<p>Failed to load content. Please try again later.</p>\n\t\t</div>\n\t';#K='<img src="https://source.unsplash.com/1600x900" />';#V=[];#R=t=>e=>{document.querySelector(".lightbox")||(e.preventDefault(),this.lightbox=this.#W(),this.currentLB=t,this.#z(t),s(this.lightbox))};#j=t=>{t.stopPropagation(),t.target!==t.currentTarget&&"click"===t.type||(a(this.lightbox),this.lightbox.parentElement.removeChild(this.lightbox),window.removeEventListener("keyup",this.#Y))};#G=(()=>{var t=this;return function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];t.lightbox.querySelector(".lightbox__caption").style.display=e?"block":"none"}})();#J=t=>{if(t.preventDefault(),t.target.hasAttribute("data-lightbox-previous"))this.#Q(-1);else{if(!t.target.hasAttribute("data-lightbox-next"))return;this.#Q(1)}};#Y=t=>{if(t.preventDefault(),!(this.#V.length<=1)||"ArrowLeft"!==t.code&&"ArrowRight"!==t.code)switch(t.code){case"ArrowLeft":this.#Q(-1),this.lightbox.querySelector("[data-lightbox-previous]").focus();break;case"ArrowRight":this.#Q(1),this.lightbox.querySelector("[data-lightbox-next]").focus();break;case"Escape":this.#j(t);break;default:return}};#X=t=>{t.setAttribute("tabindex",0),t.addEventListener("focus",(e=>{e.preventDefault(),t.children[0].focus(),o(t.children[0])}))};#Q(t){this.currentLB+=t,this.currentLB<0?this.currentLB=this.#V.length-1:this.currentLB>=this.#V.length&&(this.currentLB=0),this.#z(this.currentLB)}#z(t){const e=this.lightbox.querySelector(".lightbox__media"),i=this.lightbox.querySelector(".lightbox__caption");let s;e.innerHTML="";const{lbType:a,lbSrc:o,lbAlt:l,lbCaption:r}=this.#V[t],d=null!==r;switch(this.#G(d),a){case"image":s=this.#Z(e,o,l);break;case"video":s=this.#tt(e,o)}this.#X(e),d&&(i.innerHTML=r),n(this.lightbox)}#Z(t,e,i){t.hasAttribute("style")&&t.removeAttribute("style"),t.innerHTML=this.#K;const s=this.#et();t.appendChild(s);const a=t.querySelector("img");return a.alt=i,a.src=e,this.#it(a,s),a}#tt(t,e){const i=/youtube/i.test(e),s=/vimeo/i.test(e);let a;if(i||s)t.innerHTML=this.#P,a=t.querySelector("iframe"),a.src=e;else{t.innerHTML=this.#U;const i=this.#et();t.appendChild(i),a=t.querySelector("source");const s=t.querySelector("video");s.addEventListener("loadedmetadata",(()=>{let e=s.videoWidth,i=s.videoHeight;t.style.maxWidth=`${e}px`,t.style.aspectRatio=`${e} / ${i}`})),this.#it(a,i),a.src=e}return a}#W(){const t=document.createElement("div");t.classList.add("lightbox"),t.setAttribute("aria-hidden",!0),t.setAttribute("aria-live","polite"),t.innerHTML=this.#N,document.body.appendChild(t);const e=t.querySelector("[data-lightbox-previous]"),i=t.querySelector("[data-lightbox-next]"),s=t.querySelector("[data-lightbox-close]");return this.#V.length<=1&&(e.setAttribute("disabled",!0),i.setAttribute("disabled",!0),e.style.display="none",i.style.display="none"),t.addEventListener("click",this.#j),s.addEventListener("click",this.#j),e.addEventListener("click",this.#J),i.addEventListener("click",this.#J),window.addEventListener("keyup",this.#Y),t}#st(t){if(!t)return void console.error("No lightbox button provided");let e=null,i="";if(null!==t.querySelector("img")){const s=t.querySelector("img");e=s.src||null,i=s.alt||""}const s=t.getAttribute("data-lightbox")||"image",a=t.getAttribute("data-lightbox-src")||e,o=t.getAttribute("data-lightbox-caption")||null,n=t.getAttribute("data-lightbox-alt")||i;if(null!==a)return{lbType:s,lbSrc:a,lbCaption:o,lbAlt:n};console.error("No source provided for lightbox")}#at(){this.#B.forEach((t=>{this.#V.push(this.#st(t))}))}#et=()=>{const t=document.createElement("div");return t.className="lightbox__media__loader",t.innerHTML=this.#$,t};#it=(t,e)=>{const i="SOURCE"===t.nodeName?"loadeddata":"load";t.closest("SOURCE"===t.nodeName?"video":"img").addEventListener(i,(()=>{e&&e.parentNode&&e.parentNode.removeChild(e),null!==this.#V[this.currentLB].lbCaption&&this.#G(!0)})),t.onerror=()=>{const i=e.querySelector(".lightbox__media__loader"),s=e.querySelector(".lightbox__media__error");t.style.display="none",this.#G(!1),i.style.display="none",s.style.display="block"}};#ot(){const t=new IntersectionObserver(((t,e)=>{t.forEach((t=>{if(t.isIntersecting){const i=t.target,s=i.dataset.lightboxSrc||i.src;if(!s)return;e.unobserve(i);const a=new Image;a.onload=()=>{document.body.appendChild(a)},a.onerror=()=>{console.error(`Failed to load image: ${s}`)},a.src=s,a.style.display="none",this.#V[Number(i.dataset.index)].hiddenImage=a}}))}),{root:null,rootMargin:"0px",threshold:.1});Array.from(this.#B).filter((t=>"image"===t.getAttribute("data-lightbox"))).forEach(((e,i)=>{const s=e.querySelector("img");s&&(s.dataset.index=i,t.observe(s))}))}#nt(){this.#B.forEach(((t,e)=>{t.addEventListener("click",this.#R(e))}))}init(){this.#at(),this.#nt(),this.#ot()}}class p{#lt=document.querySelectorAll(".modal");#rt=document.querySelectorAll("[data-modal-open]");#dt=new Map;#ct(t,e){window.addEventListener("click",e),this.#dt.set(t,e)}#ht(t){const e=this.#dt.get(t);e&&(window.removeEventListener("click",e),this.#dt.delete(t))}openModal(t){if(!t)return void console.warn("Modal target not found.");s(t);const e=t.querySelector(".modal__content");if(!e)return void console.warn("Modal content not found.");t.classList.contains("modal--scroll-all")&&(t.scrollTop=0);t.querySelectorAll("[data-modal-close]").forEach((e=>{e.addEventListener("click",(()=>{a(t),this.#ht(t)})),e.setAttribute("aria-label","Close Modal Window")})),"true"===t.dataset.modalCloseOutside&&this.#ct(t,(i=>{e.contains(i.target)||(a(t),this.#ht(t))}))}init(){this.#lt.forEach((t=>{const e=t.querySelector(".modal__content");e.setAttribute("role","dialog"),e.setAttribute("aria-modal",!0),t.setAttribute("aria-hidden",!0)})),this.#rt.forEach((t=>{t.addEventListener("click",(t=>{const e=t.target.getAttribute("data-modal-open").replace(/#/,""),i=document.getElementById(e);this.openModal(i),t.stopPropagation()}))}))}}class m{#ut=document.querySelectorAll('[data-toggle="dropdown"]');#bt(t,e){e.classList.toggle("shown"),t.setAttribute("aria-expanded","true"===t.getAttribute("aria-expanded")?"false":"true")}#gt(t,e){e.classList.remove("shown"),t.setAttribute("aria-expanded","false")}init(){window.addEventListener("click",(t=>{this.#ut.forEach((e=>{let i=e.closest("li"),s=e.nextElementSibling;i.contains(t.target)||this.#gt(e,s)}))})),this.#ut.forEach((t=>{let e=t.nextElementSibling;e?(t.setAttribute("aria-expanded","false"),t.setAttribute("aria-haspopup","true"),t.addEventListener("click",(i=>{i.preventDefault(),this.#bt(t,e)}))):console.warn(`No dropdown menu found for dropdown button ${t}`)}))}}class f{#pt=document.querySelectorAll('[class*="table--stack"]');#mt=document.querySelectorAll(".table-scroll");#ft(t){const e=t.querySelectorAll("thead th"),i=t.querySelectorAll("tbody tr");let s=[];e.forEach((t=>{if(""!==t.textContent){const e=t.textContent.trim();s.push(e)}})),i.forEach((t=>{t.querySelectorAll("td").forEach(((t,e)=>{t.innerHTML=this.#Lt(t.innerHTML),t.setAttribute("data-header",s[e])}))}))}#Lt(t){return`\n\t\t\t<div class="td-content">\n\t\t\t\t${t}\n\t\t\t</div>\n\t\t`}#vt(){this.#mt.forEach((t=>{let e=t.querySelector(".table-scroll__container"),i=t.offsetWidth;e.scrollWidth>i?t.setAttribute("data-scroll",!0):t.setAttribute("data-scroll",!1),e.addEventListener("scroll",(()=>{e.scrollLeft>1?e.setAttribute("data-scrolling",!0):e.setAttribute("data-scrolling",!1)}),{passive:!0})}))}init(){this.#pt.forEach((t=>{this.#ft(t)})),this.#vt(),window.addEventListener("resize",this.#vt.bind(this))}}class L{#yt=document.querySelectorAll(".tabs");#xt(t,e,i,s){t.preventDefault();let a=e+s;-1===s&&a<0?i[i.length-1].focus():1===s&&a>=i.length?i[0].focus():i[a].focus()}#Et(t,e){t.forEach((t=>{t.setAttribute("aria-selected","false")})),e.forEach((t=>{t.classList.remove("shown"),t.setAttribute("hidden","")}))}activateTab(t,e,i){this.#Et(e,i),t.setAttribute("aria-selected","true");let s=t.getAttribute("aria-controls"),a=document.getElementById(s);a.classList.add("shown"),a.removeAttribute("hidden")}init(){this.#yt.forEach((t=>{const e=t.querySelectorAll('[role="tab"]'),i=t.querySelectorAll('[role="tabpanel"]');e.forEach(((t,s)=>{t.addEventListener("click",(t=>{let s=t.target;this.activateTab(s,e,i)})),t.addEventListener("keydown",(t=>{switch(t.code){case"Home":t.preventDefault(),e[0].focus();break;case"End":t.preventDefault(),e[e.length-1].focus();break;case"ArrowLeft":this.#xt(t,s,e,-1);break;case"ArrowRight":this.#xt(t,s,e,1)}}))}))}))}}document.addEventListener("DOMContentLoaded",(()=>{(new l).init(),(new r).init(),(new d).init(),(new c).init(),(new h).init(),(new u).init(),(new b).init(),(new g).init(),(new p).init(),(new m).init(),(new f).init(),(new L).init()}))}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "natura11y",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Natura11y is an open-source front-end ecosystem for creating modern, accessible websites.",
   "private": false,
   "scripts": {

package/src/js/lightbox.js

@@ -1,5 +1,7 @@
 import { handleOverlayOpen, handleOverlayClose } from './utilities/overlay';
 
+import { focusTrap, getFocusableElements } from './utilities/focus';
+
 export default class Lightbox {
 
 	// Private properties
@@ -7,26 +9,26 @@ export default class Lightbox {
 	#lightboxTargetList = document.querySelectorAll('[data-lightbox]');
 
 	#lightboxHTML = `
-		<div class="lightbox__buttons button-group">
-		<button class="button button--icon-only" data-lightbox-previous>
-			<span class="icon icon-arrow-left" aria-label="Previous" aria-hidden="true"></span>
-		</button>
-		<button class="button button--icon-only" data-lightbox-next>
-			<span class="icon icon-arrow-right" aria-label="Next" aria-hidden="true"></span>
-		</button>
-		<button class="button button--icon-only" data-lightbox-close>
-			<span class="icon icon-close" aria-label="Close" aria-hidden="true"></span>
-		</button>
-		</div>
 		<figure class="lightbox__container" aria-live="polite" aria-atomic="true">
-		<div class="lightbox__media"></div>           
-		<figcaption class="lightbox__caption"></figcaption>
+			<div class="lightbox__media"></div>           
+			<figcaption class="lightbox__caption"></figcaption>
 		</figure>
+		<div class="lightbox__controls">
+			<button class="button button--icon-only" data-lightbox-previous>
+				<span class="icon icon-arrow-left" aria-label="Previous" aria-hidden="true"></span>
+			</button>
+			<button class="button button--icon-only" data-lightbox-next>
+				<span class="icon icon-arrow-right" aria-label="Next" aria-hidden="true"></span>
+			</button>
+			<button class="button button--icon-only" data-lightbox-close>
+				<span class="icon icon-close" aria-label="Close" aria-hidden="true"></span>
+			</button>
+		</div>
   	`;
 
 	#lightboxVideoHTML = `
-		<video controls>
-		<source type="video/mp4">
+		<video controls tabindex="0">
+			<source type="video/mp4">
 		</video>
 	`;
 
@@ -35,6 +37,8 @@ export default class Lightbox {
 			frameborder="0"
 			allow="autoplay; fullscreen;"
 			allowfullscreen
+			controls
+			tabindex="0"
 		></iframe>
 	`;
 
@@ -65,9 +69,8 @@ export default class Lightbox {
 
 		this.currentLB = index;
 
-		handleOverlayOpen(this.lightbox);
-
 		this.#updateLightbox(index);
+		handleOverlayOpen(this.lightbox);
 	};
 
 	#handleLightboxClose = (e) => {
@@ -126,6 +129,18 @@ export default class Lightbox {
 		}
 	};
 
+	// Add this private method in your class
+    #handleVideoFocus = (lightboxElement) => {
+        const handleFocusEvent = (event) => {
+            event.preventDefault();
+            lightboxElement.children[0].focus();
+            getFocusableElements(lightboxElement.children[0]);
+        }
+
+        lightboxElement.setAttribute('tabindex', 0);
+        lightboxElement.addEventListener('focus', handleFocusEvent);
+    };
+
 	#updateDirection(dir) {
 		this.currentLB += dir;
 
@@ -144,6 +159,7 @@ export default class Lightbox {
 
 		// Clear the previous lightbox content before inserting a new one
 		lightboxElement.innerHTML = '';
+		
 
 		let lightboxElementTarget;
 
@@ -170,15 +186,21 @@ export default class Lightbox {
 					lightboxElement,
 					lbSrc
 				);
+
 				break;
 
 			default:
 				break;
 		}
 
+		// Handle video focus
+		this.#handleVideoFocus(lightboxElement);
+
 		if (shouldDisplayCaption) {
 			lightboxCaption.innerHTML = lbCaption;
 		}
+
+		focusTrap(this.lightbox);
 	}
 
 	#updateLightboxImage(lightboxElement, lbSrc, lbAlt) {
@@ -202,56 +224,57 @@ export default class Lightbox {
 	}
 
 	#updateLightboxVideo(lightboxElement, lbSrc) {
-    // Check if the string contains 'youtube' (case-insensitive)
-    const hasYouTube = /youtube/i.test(lbSrc);
+		// Check if the string contains 'youtube' (case-insensitive)
+		const hasYouTube = /youtube/i.test(lbSrc);
 
-    // Check if the string contains 'vimeo' (case-insensitive)
-    const hasVimeo = /vimeo/i.test(lbSrc);
+		// Check if the string contains 'vimeo' (case-insensitive)
+		const hasVimeo = /vimeo/i.test(lbSrc);
 
-    let lightboxElementTarget;
+		let lightboxElementTarget;
 
-    if (hasYouTube || hasVimeo) {
+		if (hasYouTube || hasVimeo) {
 
-      // If the video is from YouTube or Vimeo, use an iframe
-      lightboxElement.innerHTML = this.#lightboxVideoIframeHTML;
-      lightboxElementTarget = lightboxElement.querySelector('iframe');
-      lightboxElementTarget.src = lbSrc;
-    
-    } else {
+			// If the video is from YouTube or Vimeo, use an iframe
+			lightboxElement.innerHTML = this.#lightboxVideoIframeHTML;
+			lightboxElementTarget = lightboxElement.querySelector('iframe');
+			lightboxElementTarget.src = lbSrc;
+		
+		} else {
 
-      // If the video is not from YouTube or Vimeo, use a video element
-      lightboxElement.innerHTML = this.#lightboxVideoHTML;
+			// If the video is not from YouTube or Vimeo, use a video element
+			lightboxElement.innerHTML = this.#lightboxVideoHTML;
 
-      const loader = this.#createLoader();
-      lightboxElement.appendChild(loader);
-      
-      lightboxElementTarget = lightboxElement.querySelector('source');
-      
-      const video = lightboxElement.querySelector('video');
+			const loader = this.#createLoader();
+			lightboxElement.appendChild(loader);
+			
+			lightboxElementTarget = lightboxElement.querySelector('source');
+			
+			const video = lightboxElement.querySelector('video');
 
-      video.addEventListener('loadedmetadata', () => {
-        // The intrinsic width and height of the video
-        let intrinsicWidth = video.videoWidth;
-        let intrinsicHeight = video.videoHeight;
+			video.addEventListener('loadedmetadata', () => {
+				// The intrinsic width and height of the video
+				let intrinsicWidth = video.videoWidth;
+				let intrinsicHeight = video.videoHeight;
 
-        // The aspect ratio of the video
-        lightboxElement.style.maxWidth = `${intrinsicWidth}px`;
-        lightboxElement.style.aspectRatio = `${intrinsicWidth} / ${intrinsicHeight}`;
-      });
+				// The aspect ratio of the video
+				lightboxElement.style.maxWidth = `${intrinsicWidth}px`;
+				lightboxElement.style.aspectRatio = `${intrinsicWidth} / ${intrinsicHeight}`;
+			});
 
-      this.#handleMediaLoading(lightboxElementTarget, loader);
+			this.#handleMediaLoading(lightboxElementTarget, loader);
 
-      lightboxElementTarget.src = lbSrc;
-    }
+			lightboxElementTarget.src = lbSrc;
+		}
 
-    return lightboxElementTarget;
-  }
+		return lightboxElementTarget;
+	}
 
 	#createLightbox() {
 		const lightbox = document.createElement('div');
 
 		lightbox.classList.add('lightbox');
 		lightbox.setAttribute('aria-hidden', true);
+		lightbox.setAttribute('aria-live', 'polite');
 		lightbox.innerHTML = this.#lightboxHTML;
 
 		document.body.appendChild(lightbox);
@@ -279,23 +302,32 @@ export default class Lightbox {
 	}
 
 	#setLightboxProperties(lightboxButton) {
+
+		if (!lightboxButton) {
+			console.error("No lightbox button provided");
+			return;
+		}
+
 		let defaultSrc = null;
 		let defaultAlt = '';
 
 		const hasImage = lightboxButton.querySelector('img') !== null;
 
 		if (hasImage) {
-			defaultSrc = lightboxButton.querySelector('img').src || null;
-			defaultAlt = lightboxButton.querySelector('img').alt || '';
+			const img = lightboxButton.querySelector('img');
+			defaultSrc = img.src || null;
+			defaultAlt = img.alt || '';
 		}
 
 		const lbType = lightboxButton.getAttribute('data-lightbox') || 'image';
-		const lbSrc =
-			lightboxButton.getAttribute('data-lightbox-src') || defaultSrc;
-		const lbCaption =
-			lightboxButton.getAttribute('data-lightbox-caption') || null;
-		const lbAlt =
-			lightboxButton.getAttribute('data-lightbox-alt') || defaultAlt;
+		const lbSrc = lightboxButton.getAttribute('data-lightbox-src') || defaultSrc;
+		const lbCaption = lightboxButton.getAttribute('data-lightbox-caption') || null;
+		const lbAlt = lightboxButton.getAttribute('data-lightbox-alt') || defaultAlt;
+
+		if (lbSrc === null) {
+			console.error("No source provided for lightbox");
+			return;
+		}
 
 		return {
 			lbType: lbType,
@@ -380,8 +412,7 @@ export default class Lightbox {
 					hiddenLargeImage.src = src;
 					hiddenLargeImage.style.display = 'none';
 
-					this.#lightboxes[Number(lazyImage.dataset.index)].hiddenImage =
-						hiddenLargeImage;
+					this.#lightboxes[Number(lazyImage.dataset.index)].hiddenImage = hiddenLargeImage;
 				}
 			});
 		}, options);

package/src/js/utilities/focus.js

@@ -28,11 +28,12 @@ export const getFocusableElements = (element = document) => {
         'textarea',
         'select',
         '[tabindex]:not([tabindex="-1"])',
+        'video',
+        'audio'
     ];
 
     return [...element.querySelectorAll(els)].filter((el) => {
-        return !el.hasAttribute('disabled') && 
-        !el.getAttribute('aria-hidden');
+        return !el.hasAttribute('disabled');
     });
 }
 
@@ -42,6 +43,7 @@ export const getFocusableElements = (element = document) => {
 
 export const focusTrap = (element, firstFocusTarget = element) => {
     let focusableElements = getFocusableElements(element);
+    
     let firstFocusableElement = focusableElements[0];
     let lastFocusableElement = focusableElements[focusableElements.length - 1];
 

package/src/js/utilities/overlay.js

@@ -49,5 +49,7 @@ export const handleOverlayClose = (element) => {
 
     window.scrollTo({ top: scrollPosition, behavior: 'instant' });
     
-    lastFocusedElement.focus();
+    if(lastFocusedElement) {
+        lastFocusedElement.focus();
+    }
 }

package/src/scss/_accordion.scss

@@ -20,9 +20,11 @@ In this file:
 
 :root {
     --accordion-button-padding-x: var(--spacer-3);
+
     --accordion-button-padding-y: var(--button-padding-y);
 
     --accordion-panel-padding-x: var(--spacer-3);
+    
     --accordion-panel-padding-y: var(--spacer-3);
     
     --accordion-active-color: currentColor;

package/src/scss/_alert.scss

@@ -20,6 +20,7 @@ In this file:
 
 :root {
     --alert-padding-x: var(--spacer-2);
+    
     --alert-padding-y: var(--spacer-2);
 }
 

package/src/scss/_button.scss

@@ -20,6 +20,7 @@ In this file:
 
 :root {
     --button-padding-x: 1em;
+
     --button-padding-y: 0.75em;
 
     --button-font-weight: var(--body-font-weight-bold);
@@ -34,9 +35,12 @@ In this file:
 
     --button-icon-only-size: 2.5em;
 
-    --button-icon-over-text-width: 5rem; 
-    --button-icon-over-text-border-radius: var(--button-border-radius); 
-
+    --button-icon-over-text-width: 4em; 
+    
+    --button-icon-over-text-border-radius: var(--button-border-radius);
+    
+    --button-icon-over-text-font-size: 0.675em;
+    
     --button-group-gap: 0.5em;
 }
 
@@ -70,8 +74,7 @@ In this file:
 @layer component {
 
     .button {
-        --button-opacity-hover: 0.75;
-        
+        --button-opacity-hover: 0.75;   
         --subtle-fill-opacity: 0.05;
 
         position: relative;
@@ -245,10 +248,10 @@ In this file:
 
         display: flex;
         flex-direction: column;
-
+        
         text-align: center;
         
-        gap: 0.25em;
+        gap: 0.375em;
 
         width: var(--button-icon-over-text-width);
 
@@ -272,13 +275,12 @@ In this file:
         [class*="__text"] {
             min-width: 100%;
 
-            font-size: var(--font-size-sm);
+            font-size: var(--button-icon-over-text-font-size);
 
             font-weight: var(--body-font-weight-bold);
         }
 
         &:focus-visible {
-
             outline: unset;
 
             > [class*="icon"] {
@@ -286,7 +288,6 @@ In this file:
                 outline-offset: var(--focus-outline-offset);
             }
         }
-
     }
 
     // Button Group
@@ -303,9 +304,8 @@ In this file:
         > [class*="button"]:not(.button--icon-only) {
             --button-padding-y: 0;
 
-            align-self: stretch;
-
             display: flex;
+            align-self: stretch;
             align-items: center;
             flex-shrink: 0;
             

package/src/scss/_card.scss

@@ -13,6 +13,7 @@ In this file:
 
 :root {
     --card-padding-x: var(--spacer-3);
+    
     --card-padding-y: var(--spacer-3);
 }
 

package/src/scss/_container.scss

@@ -22,6 +22,7 @@ In this file:
 
 :root {
     --container-padding-x-sm: var(--spacer-2);
+    
     --container-padding-x-lg: var(--spacer-3);
 
     --narrow-width: 40rem; // Approximately 55 characters wide for readability

package/src/scss/_form.scss

@@ -24,18 +24,25 @@ In this file:
 
 :root {
     --form-field-padding-x: var(--spacer-3);
+
     --form-field-padding-y: var(--button-padding-y);
 
     --form-field-border-radius: 0.25em;
+    
     --form-field-border-color: currentColor;
 
     // Icons
 
     --icon-required: "\f14a";
+    
     --icon-checkbox-unchecked: "\f10d";
+    
     --icon-checkbox-checked: "\f10c";
+    
     --icon-radio-unchecked: "\f138";
+    
     --icon-radio-checked: "\f137";
+    
     --icon-disabled: "\f115";
 }
 

package/src/scss/_grid.scss

@@ -31,6 +31,7 @@ $rows: math.div($columns, 2);
     --grid-divider-border-width: var(--border-width);
 
     --grid-divider-border-x-color: var(--canvas-border);
+    
     --grid-divider-border-y-color: var(--canvas-border);
 
     --grid-sidebar-width: var(--article-sidebar-width);

package/src/scss/_icon.scss

@@ -14,6 +14,7 @@ In this file:
 
 :root {
   --icon-size: 1.25em;
+  
   --icon-font-family: 'natura11y-icons';
 }