@ulu/frontend 0.1.0-beta.73 → 0.1.0-beta.75

package/dist/ulu-frontend.min.js

@@ -1,11 +1,16 @@
 var ls=Object.defineProperty;var us=(n,e,t)=>e in n?ls(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var G=(n,e,t)=>us(n,typeof e!="symbol"?e+"":e,t);const Mi={iconClassClose:"css-icon css-icon--close",iconClassDragX:"css-icon css-icon--drag-x",iconClassPrevious:"css-icon  css-icon--angle-left",iconClassNext:"css-icon  css-icon--angle-right",cssvarPrefix:""};let it={...Mi};function cs(){return{...Mi}}function Pi(n){Object.assign(it,n)}function fs(){return{...it}}function Ii(n){if(!it.hasOwnProperty(n)){console.warn(`Attempted to access non-existent setting: ${n}`);return}return it[n]}function ds(n,e){it[n]=e}function Se(n,e){return{toString(){const t=Ii(n);return e?e(t):t}}}const ps=Object.freeze(Object.defineProperty({__proto__:null,getDefaultSettings:cs,getSetting:Ii,getSettings:fs,updateSetting:ds,updateSettings:Pi,wrapSettingString:Se},Symbol.toStringTag,{value:"Module"}));function Li(n,e,t,r){var o;return function(){var s=this,a=arguments,l=function(){o=null,n.apply(s,a)};clearTimeout(o),o=setTimeout(l,e)}}function vs(){return typeof window<"u"&&typeof window.document<"u"}function Di(n){return new DOMParser().parseFromString(n,"text/html").body.firstElementChild}vs()&&(hs(),ms());const gi={pageModified(n){n.dispatchEvent(new CustomEvent(Q("pageModified"),{bubbles:!0}))},pageResized(n){n.dispatchEvent(new CustomEvent(Q("pageResized"),{bubbles:!0}))},beforePrint(n){n.dispatchEvent(new CustomEvent(Q("beforePrint"),{bubbles:!0}))},afterPrint(n){n.dispatchEvent(new CustomEvent(Q("afterPrint"),{bubbles:!0}))}};function bt(n,e){gi[n]?gi[n](e):console.warn(`Unable to dispatch site event: ${n} in context:`,e)}function Q(n){return"ulu:"+n}function hs(){window.addEventListener("resize",Li(()=>bt("pageResized",document),250))}function ms(){window.addEventListener("beforeprint",()=>{bt("beforePrint",document)}),window.addEventListener("afterprint",()=>{bt("afterPrint",document)})}const bs=Object.freeze(Object.defineProperty({__proto__:null,dispatch:bt,getName:Q},Symbol.toStringTag,{value:"Module"})),ki=/^[{\[][\s\S]*[}\]]$/;function Ri(n){return n.replace(/^data-/,"").replace(/-([a-z])/g,(e,t)=>t.toUpperCase())}function Fi(n,e){const t=n.dataset[e];try{return JSON.parse(t)}catch(r){return console.error(`Error getting JSON from dataset (${e}) -- "${t}"
 `,n,r),{}}}function $i(n,e){const t=n.dataset[e];return t&&ki.test(t.trim())?Fi(n,e):t}function Ni(n,e){const t=n.getBoundingClientRect();return e.clientY<t.top||e.clientY>t.top+t.height||e.clientX<t.left||e.clientX>t.left+t.width}function qi(n,e={columnFirst:"position-column-first",columnLast:"position-column-last",rowFirst:"position-row-first",rowLast:"position-row-last"}){const t=[...n.children],r=[];let o;t.forEach(i=>{const s=i.getBoundingClientRect().y;o!==s&&r.push([]),r[r.length-1].push(i),o=s,i.classList.remove(...Object.values(e))}),r.forEach((i,s)=>{s===0&&i.forEach(a=>a.classList.add(e.rowFirst)),s==r.length-1&&i.forEach(a=>a.classList.add(e.rowLast)),i.forEach((a,l)=>{l===0&&a.classList.add(e.columnFirst),l==i.length-1&&a.classList.add(e.columnLast)})})}function Xr(n,e=document){return typeof n=="string"?e.querySelector(n):n instanceof Element?n:(console.warn("getElement: Invalid target type (expected String/Node)",n),null)}function Yr(n,e=document){return typeof n=="string"?[...e.querySelectorAll(n)]:n instanceof Element?[n]:Array.isArray(n)||n instanceof NodeList?[...n]:(console.warn("getElement: Invalid target type (expected String/Node/Array/Node List)",n),null)}function gt(n){return typeof n=="string"?n.split(" ").filter(e=>e!==""):Array.isArray(n)?n:n?(console.warn("resolveClassArray: Invalid class input type.",n),[]):[]}function Hi(n){const t={...{scrollableChild:document.body,container:window,propertyElement:document.documentElement,propName:"--ulu-scrollbar-width"},...n},{scrollableChild:r,container:o,propertyElement:i,propName:s}=t,a=Jr(r,o);i.style.setProperty(s,`${a}px`)}function Jr(n=document.body,e=window){return e.innerWidth-n.clientWidth}const gs=Object.freeze(Object.defineProperty({__proto__:null,addScrollbarProperty:Hi,dataAttributeToDatasetKey:Ri,getDatasetJson:Fi,getDatasetOptionalJson:$i,getElement:Xr,getElements:Yr,getScrollbarWidth:Jr,regexJsonString:ki,resolveClasses:gt,setPositionClasses:qi,wasClickOutside:Ni},Symbol.toStringTag,{value:"Module"}));function xs(){Hi()}const ys=Object.freeze(Object.defineProperty({__proto__:null,init:xs},Symbol.toStringTag,{value:"Module"}));function Qt(n,e){var t=n.indexOf(e);t>-1&&n.splice(t,1)}function _s(n,e){return`--${n}-${e}`}const at={debug:!1,warningsAlways:!0,errorsAlways:!0,outputContext:!1},Es="console"in window;function Qr(n){return Es&&at.debug&&((n==null?void 0:n.debug)||n==null)}function ws(n){var e;return typeof n=="object"&&((e=n==null?void 0:n.constructor)==null?void 0:e.name)}function ei(n,e,t){const r=ws(e)||"Logger";console[n](r,...t),at.outputContext&&console.log(`Context:
 `,e)}function Ss(n){Object.assign(at,n)}function me(n,...e){Qr(n)&&ei("log",n,e)}function en(n,...e){(at.warningsAlways||Qr(n))&&ei("warn",n,e)}function re(n,...e){(at.errorsAlways||Qr(n))&&ei("error",n,e)}const Os=Object.freeze(Object.defineProperty({__proto__:null,log:me,logError:re,logWarning:en,set:Ss},Symbol.toStringTag,{value:"Module"})),Cs=n=>_s(n,"breakpoint");window.addEventListener(Q("pageResized"),()=>{xt.instances.forEach(n=>n.update())});const We=class We{constructor(e){Object.assign(this,We.defaults,e),this.active=null,this.previous=null,this.activeIndex=null,this.resizeDirection=null,this.previousIndex=null,this.breakpoints={},this.onChangeCallbacks=[],this.order.forEach(t=>this.breakpoints[t]=new Ts(t,this)),me(this,this),this.update(),We.instances.push(this)}onChange(e){this.onChangeCallbacks.push(e)}removeOnChange(e){Qt(this.onChangeCallbacks,e)}getBreakpointInPseudo(){return window.getComputedStyle(this.element,this.pseudoSelector).content.replace(/^"|"$/g,"")}getBreakpointInProperty(){return getComputedStyle(this.element).getPropertyValue(this.customProperty).trim()}getBreakpoint(){return this.valueFromPseudo?this.getBreakpointInPseudo():this.getBreakpointInProperty()}update(){const e=this.getBreakpoint();if(!e){re(this,"Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!");return}if(e===this.active)return;this.previous=this.active,this.previousIndex=this.activeIndex;const t=this.order.indexOf(e);this.active=e,this.activeIndex=t;const r=this.at(this.active),o=m=>this.at(m),i=this.order.slice(t).map(o),s=this.order.slice(0,t).map(o),a=this.order.slice(0,t+1).map(o),l=this.order.slice(t+1).map(o),u=this.order.slice().map(o);u.splice(t,1),me(this,"max:",i.map(m=>m.name).join()),me(this,"min:",a.map(m=>m.name).join()),i.forEach(m=>m._setDirection("max",!0)),a.forEach(m=>m._setDirection("min",!0)),r._setDirection("only",!0),s.forEach(m=>m._setDirection("max",!1)),l.forEach(m=>m._setDirection("min",!1)),u.forEach(m=>m._setDirection("only",!1)),this.previousIndex!==null&&(this.resizeDirection=this.previousIndex<t?"up":"down"),this.onChangeCallbacks.forEach(m=>m(this))}at(e){const t=this.breakpoints[e];return e||re(this,"Unable to find breakpoint for:",t),t}};G(We,"instances",[]),G(We,"defaults",{element:document==null?void 0:document.documentElement,valueFromPseudo:!1,customProperty:"--breakpoint",customProperty:Se("cssvarPrefix",Cs),pseudoSelector:":before",order:["none","small","medium","large"],debug:!1});let xt=We;class Zt{constructor(e,t){this.direction=e,this.active=!1,this.on=[],this.off=[],this.breakpoint=t}change(e){this.active!==e&&(e?this._call(!0):this.active&&this._call(!1),this.active=e)}_call(e){(e?this.on:this.off).forEach(r=>r()),me(this.breakpoint._manager,`Handlers called (${e?"on":"off"}): ${this.direction}`)}getHandlers(e){return typeof e!="object"?{on:e}:e}add(e){const t=this.getHandlers(e);t.on&&this.on.push(t.on),t.off&&this.off.push(t.off),this.active&&t.on&&(t.on(),me(this.breakpoint._manager,`Handler called immediately: ${this.direction}`,t.on))}remove(e){const t=this.getHandlers(e);t.on&&Qt(this.on,t.on),t.off&&Qt(this.off,t.off)}}class Ts{constructor(e,t){this.directions={max:new Zt("max",this),min:new Zt("min",this),only:new Zt("only",this)},this._manager=t,this.name=e}_setDirection(e,t){this.directions[e].change(t)}max(e){this.directions.max.add(e)}min(e){this.directions.min.add(e)}only(e){this.directions.only.add(e)}remove(e,t){(t?[t]:["max","min","only"]).forEach(o=>o.remove(e))}log(...e){e.unshift(`Breakpoint (${this.name}):`),this._manager.log.apply(this._manager,e)}}const As=Object.freeze(Object.defineProperty({__proto__:null,BreakpointManager:xt},Symbol.toStringTag,{value:"Module"}));let Ms=0;function ti(){return`ulu-uid-${++Ms}`}function yt(n){n.id||(n.id=ti())}const Ps=Object.freeze(Object.defineProperty({__proto__:null,ensureId:yt,newId:ti},Symbol.toStringTag,{value:"Module"})),Dt=class Dt{constructor(e,t){const{trigger:r,content:o}=e;if(!r||!o){re(this,"missing required elements (trigger or content)");return}const i=Object.assign({},Dt.defaults,t);this.elements=e,this.options=i,this.isOpen=!1,this.handlers={},yt(r),yt(o),this.debugLog(this,this),i.selfManaged||this.attachHandlers(),this.setup()}attachHandlers(){const{trigger:e,content:t}=this.elements,{focusoutCloses:r}=this.options;this.clickHandler=o=>{this.onClick(o)},this.focusoutHandler=o=>{r&&document.addEventListener("focusin",()=>{t.contains(document.activeElement)||this.close(o)},{once:!0})},e.addEventListener("click",this.clickHandler),t.addEventListener("focusout",this.focusoutHandler)}removeHandlers(){const{trigger:e,content:t}=this.elements;e.removeEventListener("click",this.clickHandler),t.removeEventListener("focusout",this.focusoutHandler)}onClick(e){this.toggle(e)}destroy(){this.removeHandlers(),this.destroyTemporaryHandlers()}debugLog(...e){this.options.debug&&me(this,...e)}setup(){const{trigger:e,content:t}=this.elements,{startOpen:r}=this.options;e.setAttribute("role","button"),e.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",e.id),this.setState(r)}createEvent(e,t){return new CustomEvent(Q("collapsible:"+e),{detail:t})}setState(e,t){const r={collapsible:this,isOpen:e,event:t};this.debugLog(this,"Set state",r);const{trigger:o,content:i}=this.elements,{openClass:s}=this.options,a=l=>l.classList[e?"add":"remove"](s);o.setAttribute("aria-expanded",e?"true":"false"),a(o),a(i),this.isOpen=e,this.options.onChange(r),o.dispatchEvent(this.createEvent("change",r)),e?this.setupTemporaryHandlers():this.destroyTemporaryHandlers()}setupTemporaryHandlers(){const{content:e,trigger:t}=this.elements,{clickOutsideCloses:r,escapeCloses:o}=this.options,i=a=>{const{target:l}=a,u=t.contains(l),m=e.contains(l);r&&!u&&!m&&this.close(a)},s=a=>{o&&a.key==="Escape"&&this.close(a)};document.addEventListener("click",i),document.addEventListener("keydown",s),this.handlers.onDocumentClick=i,this.handlers.onDocumentKeydown=s}destroyTemporaryHandlers(){const{onDocumentClick:e,onDocumentKeydown:t}=this.handlers;e&&document.removeEventListener("click",e),e&&document.removeEventListener("keydown",t)}open(e){this.setState(!0,e)}close(e){this.setState(!1,e)}toggle(e){this.setState(!this.isOpen,e)}};G(Dt,"defaults",{clickOutsideCloses:!1,focusoutCloses:!1,escapeCloses:!1,selfManaged:!1,startOpen:!1,openClass:"is-active",debug:!0,onChange(e){}});let _t=Dt;const Is=Object.freeze(Object.defineProperty({__proto__:null,Collapsible:_t},Symbol.toStringTag,{value:"Module"}));function $t(n){return e=>n.every(t=>Object.prototype.hasOwnProperty.call(e,t))}const he=class he{constructor(e){if(!he.hasRequiredOptions(e))throw new Error(`Missing a required options: ${he.requiredOptions.join(", ")}`);this.options=Object.assign({},he.defaults,e),this.logTitle=`ULU: ${this.options.type}:
-`}init(e){var t;this.setupElements(e),(t=e.events)!=null&&t.length&&e.events.forEach(r=>{document.addEventListener(Q(r),()=>this.setupElements(e))})}setupElements(e){const{setup:t,key:r,withData:o,context:i}=e;this.queryAllInitial(r,o,i).forEach(a=>t(a,this))}getAttribute(e){const{baseAttribute:t}=this.options;return e?`${t}-${e}`:`${t}`}attributeSelector(e){return`[${this.getAttribute(e)}]`}attributeSelectorInitial(e){return`${this.attributeSelector(e)}:not([${this.getAttribute("init")}])`}queryAllInitial(e,t,r=document){return[...r.querySelectorAll(this.attributeSelectorInitial(e))].map(i=>({element:i,data:t?this.getData(i,e):null,initialize:()=>this.initializeElement(i)}))}initializeElement(e){e.setAttribute(this.getAttribute("init"),"")}getData(e,t){const r=Ri(this.getAttribute(t));return $i(e,r)}log(...e){console.log(this.logTitle,...e)}warn(...e){console.warn(this.logTitle,...e)}logError(...e){console.error(this.logTitle,...e)}};G(he,"defaults",{type:null,baseAttribute:null}),G(he,"requiredOptions",["type","baseAttribute"]),G(he,"hasRequiredOptions",$t(he.requiredOptions));let Y=he;const kt=class kt{constructor(e,t,r){(!t||!e)&&re(this,"Missing required elements 'control' or 'container'"),this.options=Object.assign({},kt.defaults,r),this.container=e,this.control=t,this.handlerMousedown=this.onMousedown.bind(this),this.control.addEventListener("mousedown",this.handlerMousedown)}destroy(){this.control.removeEventListener("mousedown",this.handlerMousedown)}onMousedown(e){const{overrideMaxWidth:t,fromLeft:r}=this.options,o=document.documentElement,i=document.defaultView,s=e.clientX,a=parseInt(i.getComputedStyle(this.container).width,10);t&&(this.container.style.maxWidth="none");const l=m=>{const f=r?-1:1;this.container.style.width=`${a+(m.clientX-s)*f}px`},u=()=>{o.removeEventListener("mousemove",l,!1)};o.addEventListener("mousemove",l,!1),o.addEventListener("mouseup",u,{capture:!0,once:!0})}};G(kt,"defaults",{debug:!1,overrideMaxWidth:!1,fromLeft:!1});let Et=kt;const Ls=Object.freeze(Object.defineProperty({__proto__:null,Resizer:Et},Symbol.toStringTag,{value:"Module"})),Ds=[".youtube-embedded-video",'iframe[title*="YouTube video player"]','iframe[src*="youtube.com/embed"]'];function Bi(n=document){ji(n).forEach(t=>{try{t.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}',"*")}catch(r){console.error(r)}})}function Wi(n=document){ji(n).forEach(t=>{const{src:r}=t;r&&(t.src=r.split("?")[0]+"?rel=0&enablejsapi=1")})}function ji(n){return n.querySelectorAll(Ds.join(", "))}const ks=Object.freeze(Object.defineProperty({__proto__:null,pauseVideos:Bi,prepVideos:Wi},Symbol.toStringTag,{value:"Module"})),ni="data-ulu-dialog",Ge=new Y({type:"dialog",baseAttribute:ni}),Vi=Ge.getAttribute("close"),ri={nonModal:!1,documentEnd:!1,clickOutsideCloses:!0,pauseVideos:!0,preventScroll:!0,preventScrollShift:!0};let wt={...ri};function Rs(n){wt=Object.assign({},wt,n)}function Fs(){Ge.init({events:["pageModified"],withData:!0,setup({element:n,initialize:e,data:t}){Ki(n,t),e()}}),Ge.init({key:"trigger",events:["pageModified"],withData:!0,setup({element:n,initialize:e,data:t}){zi(n,t),e()}})}function zi(n,e){n.addEventListener("click",t);function t(r){var a;r.target.closest("a")&&r.preventDefault();const i=document.getElementById(e);if(!i){console.error("Could not locate dialog (id)",e);return}if(((a=i==null?void 0:i.tagName)==null?void 0:a.toLowerCase())!=="dialog"){console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");return}const s=Gi(i);i[s.nonModal?"show":"showModal"]()}}function Ki(n,e){const t=Object.assign({},wt,e),r=document.body;if(n.addEventListener("click",o),t.documentEnd&&r.appendChild(n),t.pauseVideos&&$s(n),!t.nonModal&&t.preventScroll){let i=r.style.overflow,s=r.style.paddingRight;n.addEventListener("toggle",a=>{const l=a.newState==="open";l&&(i=r.style.overflow,s=r.style.paddingRight),t.preventScrollShift&&(r.style.paddingRight=l?`${Jr()}px`:s),r.style.overflow=l?"hidden":i})}function o(i){const{target:s}=i,a=s.closest(Ge.attributeSelector("close"));(t.clickOutsideCloses&&s===n&&Ni(n,i)||a)&&(t.pauseVideos&&Ns(n),n.close())}}function Gi(n){return Object.assign({},wt,Ge.getData(n))}function $s(n){Wi(n)}function Ns(n){Bi(n),n.querySelectorAll("video").forEach(t=>t.pause())}const qs=Object.freeze(Object.defineProperty({__proto__:null,baseAttribute:ni,closeAttribute:Vi,defaults:ri,getDialogOptions:Gi,init:Fs,initializer:Ge,setDefaults:Rs,setupDialog:Ki,setupTrigger:zi},Symbol.toStringTag,{value:"Module"})),Le=new Y({type:"modal-builder",baseAttribute:"data-ulu-modal-builder"}),Ui={title:null,titleIcon:null,titleClass:"",nonModal:!1,documentEnd:!0,allowResize:!1,position:"center",bodyFills:!1,noBackdrop:!1,size:"default",print:!1,noMinHeight:!1,class:"",baseClass:"modal",classCloseIcon:Se("iconClassClose"),classResizerIcon:Se("iconClassDragX"),debug:!1,templateCloseIcon(n){const{baseClass:e,classCloseIcon:t}=n;return`<span class="${e}__close-icon ${t}" aria-hidden="true"></span>`},templateResizerIcon(n){const{baseClass:e,classResizerIcon:t}=n;return`<span class="${e}__resizer-icon ${t}" aria-hidden="true"></span>`},template(n,e){const{baseClass:t}=e,r=[t,`${t}--${e.position}`,`${t}--${e.size}`,`${t}--${e.allowResize?"resize":"no-resize"}`,...e.title?[]:[`${t}--no-header`],...e.bodyFills?[`${t}--body-fills`]:[],...e.noBackdrop?[`${t}--no-backdrop`]:[],...e.noMinHeight?[`${t}--no-min-height`]:[],...e.class?[e.class]:[]];return`
-      <dialog id="${n}" class="${r.join(" ")}">
+`}init(e){var t;this.setupElements(e),(t=e.events)!=null&&t.length&&e.events.forEach(r=>{document.addEventListener(Q(r),()=>this.setupElements(e))})}setupElements(e){const{setup:t,key:r,withData:o,context:i}=e;this.queryAllInitial(r,o,i).forEach(a=>t(a,this))}getAttribute(e){const{baseAttribute:t}=this.options;return e?`${t}-${e}`:`${t}`}attributeSelector(e){return`[${this.getAttribute(e)}]`}attributeSelectorInitial(e){return`${this.attributeSelector(e)}:not([${this.getAttribute("init")}])`}queryAllInitial(e,t,r=document){return[...r.querySelectorAll(this.attributeSelectorInitial(e))].map(i=>({element:i,data:t?this.getData(i,e):null,initialize:()=>this.initializeElement(i)}))}initializeElement(e){e.setAttribute(this.getAttribute("init"),"")}getData(e,t){const r=Ri(this.getAttribute(t));return $i(e,r)}log(...e){console.log(this.logTitle,...e)}warn(...e){console.warn(this.logTitle,...e)}logError(...e){console.error(this.logTitle,...e)}};G(he,"defaults",{type:null,baseAttribute:null}),G(he,"requiredOptions",["type","baseAttribute"]),G(he,"hasRequiredOptions",$t(he.requiredOptions));let Y=he;const kt=class kt{constructor(e,t,r){(!t||!e)&&re(this,"Missing required elements 'control' or 'container'"),this.options=Object.assign({},kt.defaults,r),this.container=e,this.control=t,this.handlerMousedown=this.onMousedown.bind(this),this.control.addEventListener("mousedown",this.handlerMousedown)}destroy(){this.control.removeEventListener("mousedown",this.handlerMousedown)}onMousedown(e){const{overrideMaxWidth:t,fromLeft:r}=this.options,o=document.documentElement,i=document.defaultView,s=e.clientX,a=parseInt(i.getComputedStyle(this.container).width,10);t&&(this.container.style.maxWidth="none");const l=m=>{const f=r?-1:1;this.container.style.width=`${a+(m.clientX-s)*f}px`},u=()=>{o.removeEventListener("mousemove",l,!1)};o.addEventListener("mousemove",l,!1),o.addEventListener("mouseup",u,{capture:!0,once:!0})}};G(kt,"defaults",{debug:!1,overrideMaxWidth:!1,fromLeft:!1});let Et=kt;const Ls=Object.freeze(Object.defineProperty({__proto__:null,Resizer:Et},Symbol.toStringTag,{value:"Module"})),Ds=[".youtube-embedded-video",'iframe[title*="YouTube video player"]','iframe[src*="youtube.com/embed"]'];function Bi(n=document){ji(n).forEach(t=>{try{t.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}',"*")}catch(r){console.error(r)}})}function Wi(n=document){ji(n).forEach(t=>{const{src:r}=t;r&&(t.src=r.split("?")[0]+"?rel=0&enablejsapi=1")})}function ji(n){return n.querySelectorAll(Ds.join(", "))}const ks=Object.freeze(Object.defineProperty({__proto__:null,pauseVideos:Bi,prepVideos:Wi},Symbol.toStringTag,{value:"Module"})),ni="data-ulu-dialog",Ge=new Y({type:"dialog",baseAttribute:ni}),Vi=Ge.getAttribute("close"),ri={nonModal:!1,documentEnd:!1,clickOutsideCloses:!0,pauseVideos:!0,preventScroll:!0,preventScrollShift:!0};let wt={...ri};function Rs(n){wt=Object.assign({},wt,n)}function Fs(){Ge.init({events:["pageModified"],withData:!0,setup({element:n,initialize:e,data:t}){Ki(n,t),e()}}),Ge.init({key:"trigger",events:["pageModified"],withData:!0,setup({element:n,initialize:e,data:t}){zi(n,t),e()}})}function zi(n,e){n.addEventListener("click",t);function t(r){var a;r.target.closest("a")&&r.preventDefault();const i=document.getElementById(e);if(!i){console.error("Could not locate dialog (id)",e);return}if(((a=i==null?void 0:i.tagName)==null?void 0:a.toLowerCase())!=="dialog"){console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");return}const s=Gi(i);i[s.nonModal?"show":"showModal"]()}}function Ki(n,e){const t=Object.assign({},wt,e),r=document.body;if(n.addEventListener("click",o),t.documentEnd&&r.appendChild(n),t.pauseVideos&&$s(n),!t.nonModal&&t.preventScroll){let i=r.style.overflow,s=r.style.paddingRight;n.addEventListener("toggle",a=>{const l=a.newState==="open";l&&(i=r.style.overflow,s=r.style.paddingRight),t.preventScrollShift&&(r.style.paddingRight=l?`${Jr()}px`:s),r.style.overflow=l?"hidden":i})}function o(i){const{target:s}=i,a=s.closest(Ge.attributeSelector("close"));(t.clickOutsideCloses&&s===n&&Ni(n,i)||a)&&(t.pauseVideos&&Ns(n),n.close())}}function Gi(n){return Object.assign({},wt,Ge.getData(n))}function $s(n){Wi(n)}function Ns(n){Bi(n),n.querySelectorAll("video").forEach(t=>t.pause())}const qs=Object.freeze(Object.defineProperty({__proto__:null,baseAttribute:ni,closeAttribute:Vi,defaults:ri,getDialogOptions:Gi,init:Fs,initializer:Ge,setDefaults:Rs,setupDialog:Ki,setupTrigger:zi},Symbol.toStringTag,{value:"Module"})),Le=new Y({type:"modal-builder",baseAttribute:"data-ulu-modal-builder"}),Ui={title:null,titleIcon:null,titleClass:"",labelledby:null,describedby:null,nonModal:!1,documentEnd:!0,allowResize:!1,position:"center",bodyFills:!1,noBackdrop:!1,size:"default",print:!1,noMinHeight:!1,class:"",baseClass:"modal",classCloseIcon:Se("iconClassClose"),classResizerIcon:Se("iconClassDragX"),debug:!1,templateCloseIcon(n){const{baseClass:e,classCloseIcon:t}=n;return`<span class="${e}__close-icon ${t}" aria-hidden="true"></span>`},templateResizerIcon(n){const{baseClass:e,classResizerIcon:t}=n;return`<span class="${e}__resizer-icon ${t}" aria-hidden="true"></span>`},template(n,e){const{baseClass:t,describedby:r}=e,o=[t,`${t}--${e.position}`,`${t}--${e.size}`,`${t}--${e.allowResize?"resize":"no-resize"}`,...e.title?[]:[`${t}--no-header`],...e.bodyFills?[`${t}--body-fills`]:[],...e.noBackdrop?[`${t}--no-backdrop`]:[],...e.noMinHeight?[`${t}--no-min-height`]:[],...e.class?[e.class]:[]],i=e.title?`${n}--title`:e.labelledby;return`
+      <dialog 
+        id="${n}" 
+        class="${o.join(" ")}" 
+        ${i?`aria-labelledby="${i}"`:""}
+        ${r?`aria-describedby="${r}"`:""}
+      >
         ${e.title?`
           <header class="${t}__header">
-            <h2 class="${t}__title ${e.titleClass}">
+            <h2 id="${i}" class="${t}__title ${e.titleClass}">
               ${e.titleIcon?`<span class="${t}__title-icon ${e.titleIcon}" aria-hidden="true"></span>`:""}
               <span class="${t}__title-text">${e.title}</span>
             </h2>

package/docs-dev/changelog/index.html

@@ -5196,6 +5196,15 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.75">0.1.0-beta.75</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.74">0.1.0-beta.74</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.73">0.1.0-beta.73</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.72">0.1.0-beta.72</a>
             		</li>
 
@@ -5460,14 +5469,31 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
-<h2 id="0.1.0-beta.72" tabindex="-1">0.1.0-beta.72</h2>
+<h2 id="0.1.0-beta.75" tabindex="-1">0.1.0-beta.75</h2>
 <ul>
-<li><strong>scss/element</strong>
+<li><strong>scss/components/modal.scss</strong> | Remove unused selector <code>.modal__content</code></li>
+</ul>
+<h2 id="0.1.0-beta.74" tabindex="-1">0.1.0-beta.74</h2>
 <ul>
-<li>Change new mixin name &quot;focus-ring-required-only&quot;</li>
+<li><strong>js/ui/modal-builder.js</strong>
+<ul>
+<li>Add options for <code>labelledby</code>, <code>describedby</code> (pass id's)
+<ul>
+<li><code>labelledby</code> will be filled in automatically if using title option</li>
+<li><code>describedby</code> is to mark optional description element</li>
 </ul>
 </li>
 </ul>
+</li>
+</ul>
+<h2 id="0.1.0-beta.73" tabindex="-1">0.1.0-beta.73</h2>
+<ul>
+<li><strong>js/ui/modal-builder.js</strong> | Fix missing end tag in options.template</li>
+</ul>
+<h2 id="0.1.0-beta.72" tabindex="-1">0.1.0-beta.72</h2>
+<ul>
+<li><strong>scss/element</strong> | Change new mixin name &quot;focus-ring-required-only&quot;</li>
+</ul>
 <h2 id="0.1.0-beta.71" tabindex="-1">0.1.0-beta.71</h2>
 <ul>
 <li><strong>scss/element</strong>

package/docs-dev/demos/card/index.html

@@ -5214,60 +5214,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-17" name="title" checked="">
-<label for="live-demo-id-17">
+  <input type="checkbox" id="live-demo-id-25" name="title" checked="">
+<label for="live-demo-id-25">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-18" name="body" checked="">
-<label for="live-demo-id-18">
+  <input type="checkbox" id="live-demo-id-26" name="body" checked="">
+<label for="live-demo-id-26">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-19" name="content" checked="">
-<label for="live-demo-id-19">
+  <input type="checkbox" id="live-demo-id-27" name="content" checked="">
+<label for="live-demo-id-27">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-20" name="aside" checked="">
-<label for="live-demo-id-20">
+  <input type="checkbox" id="live-demo-id-28" name="aside" checked="">
+<label for="live-demo-id-28">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-21" name="footer" checked="">
-<label for="live-demo-id-21">
+  <input type="checkbox" id="live-demo-id-29" name="footer" checked="">
+<label for="live-demo-id-29">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-22">
+<label for="live-demo-id-30">
   Action
   <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
 </label>  
-  <select id="live-demo-id-22" name="action">
+  <select id="live-demo-id-30" name="action">
     <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-23">
+<label for="live-demo-id-31">
   Media
 </label>  
-  <select id="live-demo-id-23" name="media">
+  <select id="live-demo-id-31" name="media">
     <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-24">
+<label for="live-demo-id-32">
   Layout
   <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
 </label>  
-  <select id="live-demo-id-24" name="layout">
+  <select id="live-demo-id-32" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
   </select>
 </div>

package/docs-dev/demos/data-table/index.html

@@ -5252,178 +5252,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-9">
+<table class="data-table data-table--striped" id="dt-13">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-9-type" rowspan="2">Type</th>
-      <th id="dt-9-group" colspan="2">Group</th>
-      <th id="dt-9-details" colspan="2">Details</th>
-      <th id="dt-9-id" rowspan="2">Id</th>
+      <th id="dt-13-type" rowspan="2">Type</th>
+      <th id="dt-13-group" colspan="2">Group</th>
+      <th id="dt-13-details" colspan="2">Details</th>
+      <th id="dt-13-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-9-group" id="dt-9-primary">Primary</th>
-      <th headers="dt-9-group" id="dt-9-secondary">Secondary</th>
-      <th headers="dt-9-details" id="dt-9-before">Before Task</th>
-      <th headers="dt-9-details" id="dt-9-after">After Task</th>
+      <th headers="dt-13-group" id="dt-13-primary">Primary</th>
+      <th headers="dt-13-group" id="dt-13-secondary">Secondary</th>
+      <th headers="dt-13-details" id="dt-13-before">Before Task</th>
+      <th headers="dt-13-details" id="dt-13-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-9-type dt-9-r1" id="dt-9-r1">Default</th>
-      <td headers="dt-9-group dt-9-primary dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-group dt-9-secondary dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-details dt-9-before dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-details dt-9-after dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-13-type dt-13-r1" id="dt-13-r1">Default</th>
+      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-9-group dt-9-primary dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-group dt-9-secondary dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-details dt-9-before dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-details dt-9-after dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-id">OL-53-GHSLE</td>
+      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-9-group dt-9-primary dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-group dt-9-secondary dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-details dt-9-before dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-details dt-9-after dt-9-r1">Lorem Ipsum</td>
-      <td headers="dt-9-id">OL-53-GHSLE</td>
+      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
+      <td headers="dt-13-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-10">
+<table class="data-table data-table--large-first" id="dt-14">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-10-type" rowspan="2">Type</th>
-      <th id="dt-10-group" colspan="2">Group</th>
-      <th id="dt-10-details" colspan="2">Details</th>
-      <th id="dt-10-id" rowspan="2">Id</th>
+      <th id="dt-14-type" rowspan="2">Type</th>
+      <th id="dt-14-group" colspan="2">Group</th>
+      <th id="dt-14-details" colspan="2">Details</th>
+      <th id="dt-14-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-10-group" id="dt-10-primary">Primary</th>
-      <th headers="dt-10-group" id="dt-10-secondary">Secondary</th>
-      <th headers="dt-10-details" id="dt-10-before">Before Task</th>
-      <th headers="dt-10-details" id="dt-10-after">After Task</th>
+      <th headers="dt-14-group" id="dt-14-primary">Primary</th>
+      <th headers="dt-14-group" id="dt-14-secondary">Secondary</th>
+      <th headers="dt-14-details" id="dt-14-before">Before Task</th>
+      <th headers="dt-14-details" id="dt-14-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-10-type dt-10-r1" id="dt-10-r1">Default</th>
-      <td headers="dt-10-group dt-10-primary dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-group dt-10-secondary dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-details dt-10-before dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-details dt-10-after dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-14-type dt-14-r1" id="dt-14-r1">Default</th>
+      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-10-group dt-10-primary dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-group dt-10-secondary dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-details dt-10-before dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-details dt-10-after dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-id">OL-53-GHSLE</td>
+      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-10-group dt-10-primary dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-group dt-10-secondary dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-details dt-10-before dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-details dt-10-after dt-10-r1">Lorem Ipsum</td>
-      <td headers="dt-10-id">OL-53-GHSLE</td>
+      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
+      <td headers="dt-14-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-11">
+<table class="data-table data-table--large-header" id="dt-15">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-11-type" rowspan="2">Type</th>
-      <th id="dt-11-group" colspan="2">Group</th>
-      <th id="dt-11-details" colspan="2">Details</th>
-      <th id="dt-11-id" rowspan="2">Id</th>
+      <th id="dt-15-type" rowspan="2">Type</th>
+      <th id="dt-15-group" colspan="2">Group</th>
+      <th id="dt-15-details" colspan="2">Details</th>
+      <th id="dt-15-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-11-group" id="dt-11-primary">Primary</th>
-      <th headers="dt-11-group" id="dt-11-secondary">Secondary</th>
-      <th headers="dt-11-details" id="dt-11-before">Before Task</th>
-      <th headers="dt-11-details" id="dt-11-after">After Task</th>
+      <th headers="dt-15-group" id="dt-15-primary">Primary</th>
+      <th headers="dt-15-group" id="dt-15-secondary">Secondary</th>
+      <th headers="dt-15-details" id="dt-15-before">Before Task</th>
+      <th headers="dt-15-details" id="dt-15-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-11-type dt-11-r1" id="dt-11-r1">Default</th>
-      <td headers="dt-11-group dt-11-primary dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-group dt-11-secondary dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-details dt-11-before dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-details dt-11-after dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-15-type dt-15-r1" id="dt-15-r1">Default</th>
+      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-11-group dt-11-primary dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-group dt-11-secondary dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-details dt-11-before dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-details dt-11-after dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-id">OL-53-GHSLE</td>
+      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-11-group dt-11-primary dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-group dt-11-secondary dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-details dt-11-before dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-details dt-11-after dt-11-r1">Lorem Ipsum</td>
-      <td headers="dt-11-id">OL-53-GHSLE</td>
+      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
+      <td headers="dt-15-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-12">
+<table class="data-table data-table--no-border" id="dt-16">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-12-type" rowspan="2">Type</th>
-      <th id="dt-12-group" colspan="2">Group</th>
-      <th id="dt-12-details" colspan="2">Details</th>
-      <th id="dt-12-id" rowspan="2">Id</th>
+      <th id="dt-16-type" rowspan="2">Type</th>
+      <th id="dt-16-group" colspan="2">Group</th>
+      <th id="dt-16-details" colspan="2">Details</th>
+      <th id="dt-16-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-12-group" id="dt-12-primary">Primary</th>
-      <th headers="dt-12-group" id="dt-12-secondary">Secondary</th>
-      <th headers="dt-12-details" id="dt-12-before">Before Task</th>
-      <th headers="dt-12-details" id="dt-12-after">After Task</th>
+      <th headers="dt-16-group" id="dt-16-primary">Primary</th>
+      <th headers="dt-16-group" id="dt-16-secondary">Secondary</th>
+      <th headers="dt-16-details" id="dt-16-before">Before Task</th>
+      <th headers="dt-16-details" id="dt-16-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-12-type dt-12-r1" id="dt-12-r1">Default</th>
-      <td headers="dt-12-group dt-12-primary dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-group dt-12-secondary dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-details dt-12-before dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-details dt-12-after dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-16-type dt-16-r1" id="dt-16-r1">Default</th>
+      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-12-group dt-12-primary dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-group dt-12-secondary dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-details dt-12-before dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-details dt-12-after dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-id">OL-53-GHSLE</td>
+      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-12-group dt-12-primary dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-group dt-12-secondary dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-details dt-12-before dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-details dt-12-after dt-12-r1">Lorem Ipsum</td>
-      <td headers="dt-12-id">OL-53-GHSLE</td>
+      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
+      <td headers="dt-16-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/modals/index.html

@@ -5192,7 +5192,14 @@
 </header>
 		
 			<div class="page__toc page-toc">
-				
+				<h2>Jump To:</h2>
+<div class="toc">
+                <ol>
+                    
+                    <li><a href="#my-custom-title">This is a custom title</a>
+            		</li>
+                </ol>
+            </div>
 			</div>
 		
 		<main id="main" class="page__body">
@@ -5385,6 +5392,19 @@
     "title" : "Triggered by a link"
   }' hidden="">
   Test
+</div>
+<h2 class="h2">Test Setting Specific labelledby/describedby</h2>
+<p>You can set these properties for custom title implementations and to add optional description information for screen readers, etc.</p>
+<p><button class="button" data-ulu-dialog-trigger="modal-id-aria-attrs">View Modal</button></p>
+<div id="modal-id-aria-attrs" class="crop-margins" data-ulu-modal-builder='{ 
+    "labelledby": "my-custom-title",
+    "describedby": "my-custom-description"
+  }' hidden="">
+  <h2 class="h5" id="my-custom-title">This is a custom title</h2>
+  <p id="my-custom-description">
+    This modal test whether passing labelledby/describedby works
+  </p>
+  <button class="button" data-ulu-dialog-close="">Close</button>
 </div>
   </div>
 

package/docs-dev/javascript/ui-modal-builder/index.html

@@ -5378,6 +5378,11 @@ in twig for example)</li>
 <td>Extra class/classes to add to title</td>
 </tr>
 <tr>
+<td>titleId</td>
+<td><code>string</code></td>
+<td>Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)</td>
+</tr>
+<tr>
 <td>nonModal</td>
 <td><code>boolean</code></td>
 <td>If <code>true</code>, the modal will not prevent interaction with elements behind it. Defaults to <code>false</code>.</td>

package/docs-dev/sass/components/modal/index.html

@@ -5576,7 +5576,7 @@
 <li><strong>Group:</strong> modal</li>
 <li><strong>Type:</strong> mixin</li>
 <li><strong>Lines (comments):</strong> 130-132</li>
-<li><strong>Lines (code):</strong> 134-491</li>
+<li><strong>Lines (code):</strong> 134-485</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>

package/js/ui/modal-builder.js

@@ -10,6 +10,7 @@ import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { Resizer } from "./resizer.js";
 import { baseAttribute, closeAttribute, defaults as dialogDefaults } from "./dialog.js";
 
+
 /**
  * Modal Builder Component Initializer
  */
@@ -27,6 +28,7 @@ export const initializer = new ComponentInitializer({
  * @property {string|null} title - The title of the modal. Defaults to `null`.
  * @property {string|null} titleIcon - The class name for an icon to display in the title. Defaults to `null`.
  * @property {string} titleClass - Extra class/classes to add to title
+ * @property {string} titleId - Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)
  * @property {boolean} nonModal - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
  * @property {boolean} documentEnd - If `true`, the modal will be appended to the end of the `document.body`. Defaults to `true`.
  * @property {boolean} allowResize - If `true`, the modal will be resizable. Defaults to `false`.
@@ -56,6 +58,8 @@ export const defaults = {
   title: null,
   titleIcon: null,
   titleClass: "",
+  labelledby: null,
+  describedby: null,
   nonModal: false,
   documentEnd: true,
   allowResize: false,
@@ -85,7 +89,7 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
-    const { baseClass } = config;
+    const { baseClass, describedby } = config;
     const classes = [
       baseClass,
       `${ baseClass }--${ config.position }`,
@@ -97,11 +101,17 @@ export const defaults = {
       ...(config.noMinHeight ? [`${ baseClass }--no-min-height`] : [] ),
       ...(config.class ? [config.class] : []), 
     ];
+    const labelledby = config.title ? `${ id }--title` : config.labelledby;
     return `
-      <dialog id="${ id }" class="${ classes.join(" ") }">
+      <dialog 
+        id="${ id }" 
+        class="${ classes.join(" ") }" 
+        ${ labelledby ? `aria-labelledby="${ labelledby }"` : "" }
+        ${ describedby ? `aria-describedby="${ describedby }"` : "" }
+      >
         ${ config.title ? `
           <header class="${ baseClass }__header">
-            <h2 class="${ baseClass }__title ${ config.titleClass }">
+            <h2 id="${ labelledby }" class="${ baseClass }__title ${ config.titleClass }">
               ${ config.titleIcon ? 
                 `<span class="${ baseClass }__title-icon ${ config.titleIcon }" aria-hidden="true"></span>` : "" 
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.73",
+  "version": "0.1.0-beta.75",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",