@ulu/frontend 0.0.21 → 0.0.22

package/CHANGELOG.md

@@ -1,11 +1,13 @@
 # Change Log
 
-## Version 0.1.0 | @in-progress
+## Version 0.0.22
 
 - Add in other common component modules
   - Users using these modules locally will need to remove and update configuration to pull modules from library instead. Or alternatively they will need to not output/use these new component modules
   - List of component modules added:
     - badge
+    - fill-context
+- Add .crop-margins to helpers/utilities
 
 ## Version 0.0.21
 

package/dist/ulu-frontend.min.css

@@ -1 +1 @@
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}table{text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;line-height:inherit;font-size:inherit;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{text-transform:none;text-align:inherit;background-color:transparent;border:transparent;border-radius:0;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;cursor:pointer}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-text-size-adjust:100%}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}body{color:#000;background-color:#fff;font-family:ui-sans-serif,Open Sans,Helvetica,Arial,sans-serif;margin:0;font-size:1rem;font-size:calc(1rem + .05vw);line-height:1.5}body:before{display:none;content:"none"}@media screen and (min-width: 43.5em){body:before{content:"small"}}@media screen and (min-width: 76em){body:before{content:"medium"}}@media screen and (min-width: 94.75em){body:before{content:"large"}}h1,h2,h3,h4,h5,h6,ul,ol,li,pre,code,p{margin:0;padding:0;font-size:inherit;font-family:inherit;border-width:0;border-style:solid;font-weight:inherit}p{margin-top:0;margin-bottom:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}small{font-size:.8705505633rem;font-size:calc(.8705505633rem + .05vw);line-height:1.3}sub{bottom:-.25em}sup{top:-.5em}b,strong{font-weight:700}form{width:100%}code,kbd,samp,pre{font-family:Menlo,Consolas,Monaco,monospace}hr{height:0;border:0;-webkit-box-sizing:content-box;box-sizing:content-box;overflow:visible;margin:1em 0;border-bottom:1px solid gray}iframe{border:0;outline:0}figure{margin:0}img{display:block;width:auto;height:auto;max-width:100%;border-style:none}ul,ol{list-style:none}a{color:#00f;text-decoration:none}a:hover{color:#00008b}[role=tab]{cursor:pointer}dt{font-weight:700}[hidden],template{display:none}blockquote{margin:0}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes FadeDownIn{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes FadeDownIn{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translatex(-10px);transform:translate(-10px)}to{opacity:1;-webkit-transform:translatex(0);transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translatex(-10px);transform:translate(-10px)}to{opacity:1;-webkit-transform:translatex(0);transform:translate(0)}}@-webkit-keyframes fadeInZoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}50%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes fadeInZoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}50%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.h1{font-size:2.29739671rem;font-size:calc(2.29739671rem + .05vw);font-weight:700;line-height:1.4461633138}.h2{font-size:2rem;font-size:calc(2rem + .05vw);font-weight:700;line-height:1.455}.h3{font-size:1.7411011266rem;font-size:calc(1.7411011266rem + .05vw);font-weight:700;line-height:1.4638906822}.h4{font-size:1.5157165665rem;font-size:calc(1.5157165665rem + .05vw);font-weight:700;line-height:1.4728356903}.h5{font-size:1.3195079108rem;font-size:calc(1.3195079108rem + .05vw);font-weight:700;line-height:1.4818353563}.h6{font-size:1.148698355rem;font-size:calc(1.148698355rem + .05vw);font-weight:700;line-height:1.4908900142}.color-context-dark{background-color:#000;color:#fff}.color-context-light{background-color:#fff;color:#000}.container{display:block;margin-left:auto;margin-right:auto;width:100%;max-width:90rem;padding:2rem}.layout-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.layout-flex-justified{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.layout-flex-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.layout-flex-center-all{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.layout-flex-justify-end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.layout-flex-baseline{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.layout-flex-end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.layout-flex-column{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.layout-flex-column-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.links:not(.links--no-visited) a,.link:not(.link--no-visited){color:#00f;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:initial;text-decoration-thickness:.1em;text-underline-offset:auto}.links:not(.links--no-visited) a:hover,.link:not(.link--no-visited):hover{color:#00008b;text-decoration-style:solid;text-decoration-color:false}.links:not(.links--no-visited) a:visited,.link:not(.link--no-visited):visited{color:purple}.links:not(.links--no-visited) a:active,.link:not(.link--no-visited):active{color:#00008b}.links--no-visited a,.link--no-visited{color:#00f;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:initial;text-decoration-thickness:.1em;text-underline-offset:auto}.links--no-visited a:hover,.link--no-visited:hover{color:#00008b;text-decoration-style:solid;text-decoration-color:false}.links.links--no-underline a,.link.link--no-underline{text-decoration:none}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;text-transform:none;text-align:center;text-shadow:none;vertical-align:middle;font-family:inherit;font-weight:700;font-size:1rem;font-size:calc(1rem + .05vw);border-radius:2rem;padding:.75em 1.5em;line-height:1.1;letter-spacing:.02em;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.349);box-shadow:0 1px 5px #00000059;margin:.45em .5em .45em 0;min-width:9rem;white-space:nowrap;max-width:100%;-ms-flex-negative:0;flex-shrink:0}.button,.button:visited{color:#fff;border:0 solid transparent;background-color:#4d4d4d;text-decoration:none}.button:last-child{margin-right:0}.button:hover,.button:focus{color:#fff;background-color:#000;border-color:transparent;text-decoration:none}.button__icon:first-child{margin-right:1em}.button__icon:last-child{margin-left:1em}.button--small{padding:.35em 1.5em;min-width:0}.button--large{padding:1em 2em;min-width:11rem}.button--transparent,.button--transparent:visited{background-color:transparent;color:#000;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button--transparent:hover,.button--transparent:focus{background-color:#fff;color:inherit;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button--outline,.button--outline:visited{background-color:transparent;color:#000;border-color:gray;-webkit-box-shadow:none;box-shadow:none}.button--outline:hover,.button--outline:focus{background-color:#fff;color:#000;border-color:gray;-webkit-box-shadow:none;box-shadow:none}.button--icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:0;max-width:none;border-radius:50%;font-size:1.38rem;width:2.5rem;height:2.5rem;padding:0!important}.button--small.button--icon{width:2rem;height:2rem;font-size:1rem}.button--large.button--icon{width:3.5rem;height:3.5rem}.badge{display:block;width:10rem;max-width:100%;-webkit-box-flex:0;-ms-flex:0 0 10rem;flex:0 0 10rem;font-size:1.3rem;font-weight:700}.badge__inner{display:block;padding-bottom:100%;width:100%;position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center center;text-align:center;border-radius:50%;-webkit-transition:-webkit-transform .1s ease-in-out;transition:-webkit-transform .1s ease-in-out;transition:transform .1s ease-in-out;transition:transform .1s ease-in-out,-webkit-transform .1s ease-in-out}.badge__inner,.badge__inner:hover,.badge__inner:focus,.badge__inner:visited{background-color:gray;color:#000}.badge--clickable:hover .badge__inner,.badge--clickable:focus .badge__inner{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.badge__inner>*{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.badge__inner>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.badge--large{width:6rem;font-size:2.75rem;-ms-flex-preferred-size:6rem;flex-basis:6rem}.rule{border-bottom:1px solid gray;margin-top:1em;margin-bottom:1em}.rule--content-on-top{position:relative}.rule--content-on-top>*{background-color:#fff;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:100%;padding:.5em;margin:0}.rule--default{border-bottom:1px solid gray}.rule--light{border-bottom:1px solid lightgray}.rule--margin-smallest{margin-top:.5rem;margin-bottom:.5rem}.rule--margin-small{margin-top:1rem;margin-bottom:1rem}.rule--margin-medium{margin-top:2rem;margin-bottom:2rem}.rule--margin-large{margin-top:3rem;margin-bottom:3rem}.rule--short{width:2.75rem;max-width:100%;border-bottom-width:4px}.list-lines{list-style:none;margin:0 0 1em;padding:0;border-top:1px solid lightgray}.list-lines>li{border-bottom:1px solid lightgray;padding:1em 0}.list-lines>li>*:last-child{margin-bottom:0}.list-lines--dense>li{padding:.5em 0;line-height:1.3}.list-unordered{list-style:disc outside}.list-unordered li{margin-left:1.5em;margin-bottom:.65em}.list-unordered ul{list-style-type:circle}.list-unordered ul ul{list-style-type:square}.list-unordered ul,.list-unordered ol{margin-top:.65em;margin-bottom:.65em}.list-unordered li::marker{color:inherit}.list-ordered{margin-bottom:1em;list-style:decimal outside}.list-ordered li{margin-bottom:.65em;margin-left:1.5em}.list-ordered>li::marker{color:inherit}.list-ordered ol{list-style-type:lower-alpha}.list-ordered ol ol{list-style-type:lower-roman}.list-ordered ul,.list-ordered ol{margin-top:.65em;margin-bottom:.65em}.type-small-x{font-size:.7578582833rem;font-size:calc(.7578582833rem + .05vw);line-height:1.5}.type-small{font-size:.8705505633rem;font-size:calc(.8705505633rem + .05vw);line-height:1.5}.type-base{font-size:1rem;font-size:calc(1rem + .05vw);line-height:1.5}.type-large{font-size:1.148698355rem;font-size:calc(1.148698355rem + .05vw);line-height:1.4908900142}.type-large-x{font-size:1.3195079108rem;font-size:calc(1.3195079108rem + .05vw);line-height:1.4818353563}.type-large-xx{font-size:1.5157165665rem;font-size:calc(1.5157165665rem + .05vw);line-height:1.4728356903}.type-large-xxx{font-size:1.7411011266rem;font-size:calc(1.7411011266rem + .05vw);line-height:1.4638906822}.type-inherit{font-size:inherit;line-height:inherit}.type-light{font-weight:300}.type-normal{font-weight:400}.type-semibold{font-weight:600}.type-bold{font-weight:700}.type-truncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.type-italic{font-style:italic}.type-center{text-align:center}.type-left{text-align:left}.type-right{text-align:right}.type-upper{text-transform:uppercase;letter-spacing:.04em}.type-lower{text-transform:lowercase}.type-title{text-transform:capitalize}.type-family,.type-family-sans{font-family:ui-sans-serif,Open Sans,Helvetica,Arial,sans-serif}.type-family-serif{font-family:Cambria,Georgia,serif}.type-family-mono{font-family:Menlo,Consolas,Monaco,monospace}.type-word-break{word-break:normal;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.type-word-break-all{word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.type-max-width{max-width:60rem}.type-max-width-small{max-width:50rem}.line-height-dense{line-height:1.3}.line-height-spaced{line-height:1.75}.margin{margin:1rem}.margin-small-x{margin:.5rem}.margin-small{margin:.75rem}.margin-default{margin:1rem}.margin-large{margin:2rem}.margin-large-x{margin:3rem}.margin-large-xx{margin:4rem}.margin-top{margin-top:1rem}.margin-top-small-x{margin-top:.5rem}.margin-top-small{margin-top:.75rem}.margin-top-default{margin-top:1rem}.margin-top-large{margin-top:2rem}.margin-top-large-x{margin-top:3rem}.margin-top-large-xx{margin-top:4rem}.margin-bottom{margin-bottom:1rem}.margin-bottom-small-x{margin-bottom:.5rem}.margin-bottom-small{margin-bottom:.75rem}.margin-bottom-default{margin-bottom:1rem}.margin-bottom-large{margin-bottom:2rem}.margin-bottom-large-x{margin-bottom:3rem}.margin-bottom-large-xx{margin-bottom:4rem}.margin-left{margin-left:1rem}.margin-left-small-x{margin-left:.5rem}.margin-left-small{margin-left:.75rem}.margin-left-default{margin-left:1rem}.margin-left-large{margin-left:2rem}.margin-left-large-x{margin-left:3rem}.margin-left-large-xx{margin-left:4rem}.margin-right{margin-right:1rem}.margin-right-small-x{margin-right:.5rem}.margin-right-small{margin-right:.75rem}.margin-right-default{margin-right:1rem}.margin-right-large{margin-right:2rem}.margin-right-large-x{margin-right:3rem}.margin-right-large-xx{margin-right:4rem}.padding{padding:1rem}.padding-small-x{padding:.5rem}.padding-small{padding:.75rem}.padding-default{padding:1rem}.padding-large{padding:2rem}.padding-large-x{padding:3rem}.padding-large-xx{padding:4rem}.padding-top{padding-top:1rem}.padding-top-small-x{padding-top:.5rem}.padding-top-small{padding-top:.75rem}.padding-top-default{padding-top:1rem}.padding-top-large{padding-top:2rem}.padding-top-large-x{padding-top:3rem}.padding-top-large-xx{padding-top:4rem}.padding-bottom{padding-bottom:1rem}.padding-bottom-small-x{padding-bottom:.5rem}.padding-bottom-small{padding-bottom:.75rem}.padding-bottom-default{padding-bottom:1rem}.padding-bottom-large{padding-bottom:2rem}.padding-bottom-large-x{padding-bottom:3rem}.padding-bottom-large-xx{padding-bottom:4rem}.padding-left{padding-left:1rem}.padding-left-small-x{padding-left:.5rem}.padding-left-small{padding-left:.75rem}.padding-left-default{padding-left:1rem}.padding-left-large{padding-left:2rem}.padding-left-large-x{padding-left:3rem}.padding-left-large-xx{padding-left:4rem}.padding-right{padding-right:1rem}.padding-right-small-x{padding-right:.5rem}.padding-right-small{padding-right:.75rem}.padding-right-default{padding-right:1rem}.padding-right-large{padding-right:2rem}.padding-right-large-x{padding-right:3rem}.padding-right-large-xx{padding-right:4rem}.hidden-visually{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.hidden-visually-focusable:not(:active):not(:focus){clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.clearfix:before,.clearfix:after,.cf:before,.cf:after{content:"";display:table;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clearfix:after,.cf:after{clear:both}.display-block{display:block}.display-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.display-inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.display-inline,.display-inline-all *{display:inline}.display-inline-block{display:inline-block}.hidden,.display-none{display:none!important}@media screen and (min-width: 43.5em){.hidden-min-small{display:none!important}}@media screen and (max-width: 43.49em){.hidden-max-small{display:none!important}}@media screen and (min-width: 76em){.hidden-min-medium{display:none!important}}@media screen and (max-width: 75.99em){.hidden-max-medium{display:none!important}}@media screen and (min-width: 94.75em){.hidden-min-large{display:none!important}}@media screen and (max-width: 94.74em){.hidden-max-large{display:none!important}}.no-scroll-y{overflow-y:hidden}.no-scroll-x{overflow-x:hidden}.full-height{height:100%}.full-width{width:100%}.flex-basis-full{-ms-flex-preferred-size:100%;flex-basis:100%}.full-min-height{min-height:100%}.image-fill{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.image-full-width img,.image-full-width{width:100%;height:auto}.margin-auto,.center{margin-left:auto;margin-right:auto}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.no-margin{margin:0}.no-margin-top{margin-top:0}.no-margin-bottom{margin-bottom:0}.no-margin-left{margin-left:0}.no-margin-right{margin-right:0}.no-padding{padding:0}.no-padding-top{padding-top:0}.no-padding-bottom{padding-bottom:0}.no-padding-left{padding-left:0}.no-padding-right{padding-right:0}.align-self-start{-ms-flex-item-align:start;align-self:start}.align-self-center{-ms-flex-item-align:center;align-self:center}.align-self-end{-ms-flex-item-align:end;align-self:end}.align-self-baseline{-ms-flex-item-align:baseline;align-self:baseline}@media (print){.no-print{display:none}*{background:transparent!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important;-webkit-filter:none!important;filter:none!important}a,a:visited{text-decoration:underline}pre,blockquote{border:1px solid #999;page-break-inside:avoid}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.color-black{color:#000}.color-white{color:#fff}.color-type{color:#000}
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}table{text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;line-height:inherit;font-size:inherit;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{text-transform:none;text-align:inherit;background-color:transparent;border:transparent;border-radius:0;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;cursor:pointer}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-text-size-adjust:100%}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}body{color:#000;background-color:#fff;font-family:ui-sans-serif,Open Sans,Helvetica,Arial,sans-serif;margin:0;font-size:1rem;font-size:calc(1rem + .05vw);line-height:1.5}body:before{display:none;content:"none"}@media screen and (min-width: 43.5em){body:before{content:"small"}}@media screen and (min-width: 76em){body:before{content:"medium"}}@media screen and (min-width: 94.75em){body:before{content:"large"}}h1,h2,h3,h4,h5,h6,ul,ol,li,pre,code,p{margin:0;padding:0;font-size:inherit;font-family:inherit;border-width:0;border-style:solid;font-weight:inherit}p{margin-top:0;margin-bottom:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}small{font-size:.8705505633rem;font-size:calc(.8705505633rem + .05vw);line-height:1.3}sub{bottom:-.25em}sup{top:-.5em}b,strong{font-weight:700}form{width:100%}code,kbd,samp,pre{font-family:Menlo,Consolas,Monaco,monospace}hr{height:0;border:0;-webkit-box-sizing:content-box;box-sizing:content-box;overflow:visible;margin:1em 0;border-bottom:1px solid gray}iframe{border:0;outline:0}figure{margin:0}img{display:block;width:auto;height:auto;max-width:100%;border-style:none}ul,ol{list-style:none}a{color:#00f;text-decoration:none}a:hover{color:#00008b}[role=tab]{cursor:pointer}dt{font-weight:700}[hidden],template{display:none}blockquote{margin:0}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes FadeDownIn{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes FadeDownIn{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translatex(-10px);transform:translate(-10px)}to{opacity:1;-webkit-transform:translatex(0);transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translatex(-10px);transform:translate(-10px)}to{opacity:1;-webkit-transform:translatex(0);transform:translate(0)}}@-webkit-keyframes fadeInZoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}50%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes fadeInZoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}50%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.h1{font-size:2.29739671rem;font-size:calc(2.29739671rem + .05vw);font-weight:700;line-height:1.4461633138}.h2{font-size:2rem;font-size:calc(2rem + .05vw);font-weight:700;line-height:1.455}.h3{font-size:1.7411011266rem;font-size:calc(1.7411011266rem + .05vw);font-weight:700;line-height:1.4638906822}.h4{font-size:1.5157165665rem;font-size:calc(1.5157165665rem + .05vw);font-weight:700;line-height:1.4728356903}.h5{font-size:1.3195079108rem;font-size:calc(1.3195079108rem + .05vw);font-weight:700;line-height:1.4818353563}.h6{font-size:1.148698355rem;font-size:calc(1.148698355rem + .05vw);font-weight:700;line-height:1.4908900142}.color-context-dark{background-color:#000;color:#fff}.color-context-light{background-color:#fff;color:#000}.container{display:block;margin-left:auto;margin-right:auto;width:100%;max-width:get("max-width");padding-left:get("margin");padding-right:get("margin");padding-top:get("margin");padding-bottom:get("margin")}.layout-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.layout-flex-justified{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.layout-flex-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.layout-flex-center-all{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.layout-flex-justify-end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.layout-flex-baseline{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.layout-flex-end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.layout-flex-column{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.layout-flex-column-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.links:not(.links--no-visited) a,.link:not(.link--no-visited){color:#00f;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:initial;text-decoration-thickness:.1em;text-underline-offset:auto}.links:not(.links--no-visited) a:hover,.link:not(.link--no-visited):hover{color:#00008b;text-decoration-style:solid;text-decoration-color:false}.links:not(.links--no-visited) a:visited,.link:not(.link--no-visited):visited{color:purple}.links:not(.links--no-visited) a:active,.link:not(.link--no-visited):active{color:#00008b}.links--no-visited a,.link--no-visited{color:#00f;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:initial;text-decoration-thickness:.1em;text-underline-offset:auto}.links--no-visited a:hover,.link--no-visited:hover{color:#00008b;text-decoration-style:solid;text-decoration-color:false}.links.links--no-underline a,.link.link--no-underline{text-decoration:none}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;text-transform:none;text-align:center;text-shadow:none;vertical-align:middle;font-family:inherit;font-weight:700;font-size:1rem;font-size:calc(1rem + .05vw);border-radius:2rem;padding:.75em 1.5em;line-height:1.1;letter-spacing:.02em;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.349);box-shadow:0 1px 5px #00000059;margin:.45em .5em .45em 0;min-width:9rem;white-space:nowrap;max-width:100%;-ms-flex-negative:0;flex-shrink:0}.button,.button:visited{color:#fff;border:0 solid transparent;background-color:#4d4d4d;text-decoration:none}.button:last-child{margin-right:0}.button:hover,.button:focus{color:#fff;background-color:#000;border-color:transparent;text-decoration:none}.button__icon:first-child{margin-right:1em}.button__icon:last-child{margin-left:1em}.button--small{padding:.35em 1.5em;min-width:0}.button--large{padding:1em 2em;min-width:11rem}.button--transparent,.button--transparent:visited{background-color:transparent;color:#000;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button--transparent:hover,.button--transparent:focus{background-color:#fff;color:inherit;border-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button--outline,.button--outline:visited{background-color:transparent;color:#000;border-color:gray;-webkit-box-shadow:none;box-shadow:none}.button--outline:hover,.button--outline:focus{background-color:#fff;color:#000;border-color:gray;-webkit-box-shadow:none;box-shadow:none}.button--icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:0;max-width:none;border-radius:50%;font-size:1.38rem;width:2.5rem;height:2.5rem;padding:0!important}.button--small.button--icon{width:2rem;height:2rem;font-size:1rem}.button--large.button--icon{width:3.5rem;height:3.5rem}.badge{display:block;width:10rem;max-width:100%;-webkit-box-flex:0;-ms-flex:0 0 10rem;flex:0 0 10rem;font-size:1.3rem;font-weight:700}.badge__inner{display:block;padding-bottom:100%;width:100%;position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center center;text-align:center;border-radius:50%;-webkit-transition:-webkit-transform .1s ease-in-out;transition:-webkit-transform .1s ease-in-out;transition:transform .1s ease-in-out;transition:transform .1s ease-in-out,-webkit-transform .1s ease-in-out}.badge__inner,.badge__inner:hover,.badge__inner:focus,.badge__inner:visited{background-color:gray;color:#000}.badge--clickable:hover .badge__inner,.badge--clickable:focus .badge__inner{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.badge__inner>*{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.badge__inner>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.badge--large{width:6rem;font-size:2.75rem;-ms-flex-preferred-size:6rem;flex-basis:6rem}.rule{border-bottom:1px solid gray;margin-top:1em;margin-bottom:1em}.rule--content-on-top{position:relative}.rule--content-on-top>*{background-color:#fff;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:100%;padding:.5em;margin:0}.rule--default{border-bottom:1px solid gray}.rule--light{border-bottom:1px solid lightgray}.rule--margin-smallest{margin-top:.5rem;margin-bottom:.5rem}.rule--margin-small{margin-top:1rem;margin-bottom:1rem}.rule--margin-medium{margin-top:2rem;margin-bottom:2rem}.rule--margin-large{margin-top:3rem;margin-bottom:3rem}.rule--short{width:2.75rem;max-width:100%;border-bottom-width:4px}.list-lines{list-style:none;margin:0 0 1em;padding:0;border-top:1px solid lightgray}.list-lines>li{border-bottom:1px solid lightgray;padding:1em 0}.list-lines>li>*:last-child{margin-bottom:0}.list-lines--dense>li{padding:.5em 0;line-height:1.3}.list-unordered{list-style:disc outside}.list-unordered li{margin-left:1.5em;margin-bottom:.65em}.list-unordered ul{list-style-type:circle}.list-unordered ul ul{list-style-type:square}.list-unordered ul,.list-unordered ol{margin-top:.65em;margin-bottom:.65em}.list-unordered li::marker{color:inherit}.list-ordered{margin-bottom:1em;list-style:decimal outside}.list-ordered li{margin-bottom:.65em;margin-left:1.5em}.list-ordered>li::marker{color:inherit}.list-ordered ol{list-style-type:lower-alpha}.list-ordered ol ol{list-style-type:lower-roman}.list-ordered ul,.list-ordered ol{margin-top:.65em;margin-bottom:.65em}.fill-context{position:relative}.fill-context__object,.fill-context--auto img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.fill-context--contain.fill-context--auto img,.fill-context--contain .fill-context__object{-o-object-fit:contain;object-fit:contain}@media screen and (max-width: 43.49em){.fill-context--in-grid .fill-context__object,.fill-context--in-grid.fill-context--auto img{position:static;height:auto;-o-object-fit:fill;object-fit:fill}}.type-small-x{font-size:.7578582833rem;font-size:calc(.7578582833rem + .05vw);line-height:1.5}.type-small{font-size:.8705505633rem;font-size:calc(.8705505633rem + .05vw);line-height:1.5}.type-base{font-size:1rem;font-size:calc(1rem + .05vw);line-height:1.5}.type-large{font-size:1.148698355rem;font-size:calc(1.148698355rem + .05vw);line-height:1.4908900142}.type-large-x{font-size:1.3195079108rem;font-size:calc(1.3195079108rem + .05vw);line-height:1.4818353563}.type-large-xx{font-size:1.5157165665rem;font-size:calc(1.5157165665rem + .05vw);line-height:1.4728356903}.type-large-xxx{font-size:1.7411011266rem;font-size:calc(1.7411011266rem + .05vw);line-height:1.4638906822}.type-inherit{font-size:inherit;line-height:inherit}.type-light{font-weight:300}.type-normal{font-weight:400}.type-semibold{font-weight:600}.type-bold{font-weight:700}.type-truncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.type-italic{font-style:italic}.type-center{text-align:center}.type-left{text-align:left}.type-right{text-align:right}.type-upper{text-transform:uppercase;letter-spacing:.04em}.type-lower{text-transform:lowercase}.type-title{text-transform:capitalize}.type-family,.type-family-sans{font-family:ui-sans-serif,Open Sans,Helvetica,Arial,sans-serif}.type-family-serif{font-family:Cambria,Georgia,serif}.type-family-mono{font-family:Menlo,Consolas,Monaco,monospace}.type-word-break{word-break:normal;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.type-word-break-all{word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.type-max-width{max-width:60rem}.type-max-width-small{max-width:50rem}.line-height-dense{line-height:1.3}.line-height-spaced{line-height:1.75}.margin{margin:1rem}.margin-small-x{margin:.5rem}.margin-small{margin:.75rem}.margin-default{margin:1rem}.margin-large{margin:2rem}.margin-large-x{margin:3rem}.margin-large-xx{margin:4rem}.margin-top{margin-top:1rem}.margin-top-small-x{margin-top:.5rem}.margin-top-small{margin-top:.75rem}.margin-top-default{margin-top:1rem}.margin-top-large{margin-top:2rem}.margin-top-large-x{margin-top:3rem}.margin-top-large-xx{margin-top:4rem}.margin-bottom{margin-bottom:1rem}.margin-bottom-small-x{margin-bottom:.5rem}.margin-bottom-small{margin-bottom:.75rem}.margin-bottom-default{margin-bottom:1rem}.margin-bottom-large{margin-bottom:2rem}.margin-bottom-large-x{margin-bottom:3rem}.margin-bottom-large-xx{margin-bottom:4rem}.margin-left{margin-left:1rem}.margin-left-small-x{margin-left:.5rem}.margin-left-small{margin-left:.75rem}.margin-left-default{margin-left:1rem}.margin-left-large{margin-left:2rem}.margin-left-large-x{margin-left:3rem}.margin-left-large-xx{margin-left:4rem}.margin-right{margin-right:1rem}.margin-right-small-x{margin-right:.5rem}.margin-right-small{margin-right:.75rem}.margin-right-default{margin-right:1rem}.margin-right-large{margin-right:2rem}.margin-right-large-x{margin-right:3rem}.margin-right-large-xx{margin-right:4rem}.padding{padding:1rem}.padding-small-x{padding:.5rem}.padding-small{padding:.75rem}.padding-default{padding:1rem}.padding-large{padding:2rem}.padding-large-x{padding:3rem}.padding-large-xx{padding:4rem}.padding-top{padding-top:1rem}.padding-top-small-x{padding-top:.5rem}.padding-top-small{padding-top:.75rem}.padding-top-default{padding-top:1rem}.padding-top-large{padding-top:2rem}.padding-top-large-x{padding-top:3rem}.padding-top-large-xx{padding-top:4rem}.padding-bottom{padding-bottom:1rem}.padding-bottom-small-x{padding-bottom:.5rem}.padding-bottom-small{padding-bottom:.75rem}.padding-bottom-default{padding-bottom:1rem}.padding-bottom-large{padding-bottom:2rem}.padding-bottom-large-x{padding-bottom:3rem}.padding-bottom-large-xx{padding-bottom:4rem}.padding-left{padding-left:1rem}.padding-left-small-x{padding-left:.5rem}.padding-left-small{padding-left:.75rem}.padding-left-default{padding-left:1rem}.padding-left-large{padding-left:2rem}.padding-left-large-x{padding-left:3rem}.padding-left-large-xx{padding-left:4rem}.padding-right{padding-right:1rem}.padding-right-small-x{padding-right:.5rem}.padding-right-small{padding-right:.75rem}.padding-right-default{padding-right:1rem}.padding-right-large{padding-right:2rem}.padding-right-large-x{padding-right:3rem}.padding-right-large-xx{padding-right:4rem}.hidden-visually{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.hidden-visually-focusable:not(:active):not(:focus){clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.clearfix:before,.clearfix:after,.cf:before,.cf:after{content:"";display:table;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clearfix:after,.cf:after{clear:both}.display-block{display:block}.display-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.display-inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.display-inline,.display-inline-all *{display:inline}.display-inline-block{display:inline-block}.hidden,.display-none{display:none!important}@media screen and (min-width: 43.5em){.hidden-min-small{display:none!important}}@media screen and (max-width: 43.49em){.hidden-max-small{display:none!important}}@media screen and (min-width: 76em){.hidden-min-medium{display:none!important}}@media screen and (max-width: 75.99em){.hidden-max-medium{display:none!important}}@media screen and (min-width: 94.75em){.hidden-min-large{display:none!important}}@media screen and (max-width: 94.74em){.hidden-max-large{display:none!important}}.no-scroll-y{overflow-y:hidden}.no-scroll-x{overflow-x:hidden}.full-height{height:100%}.full-width{width:100%}.flex-basis-full{-ms-flex-preferred-size:100%;flex-basis:100%}.full-min-height{min-height:100%}.image-fill{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.image-full-width img,.image-full-width{width:100%;height:auto}.margin-auto,.center{margin-left:auto;margin-right:auto}.margin-left-auto{margin-left:auto}.margin-right-auto{margin-right:auto}.no-margin{margin:0}.no-margin-top{margin-top:0}.no-margin-bottom{margin-bottom:0}.no-margin-left{margin-left:0}.no-margin-right{margin-right:0}.crop-margins:not(.crop-margins--last)>:first-child{margin-top:0}.crop-margins:not(.crop-margins--first)>:last-child{margin-bottom:0}.no-padding{padding:0}.no-padding-top{padding-top:0}.no-padding-bottom{padding-bottom:0}.no-padding-left{padding-left:0}.no-padding-right{padding-right:0}.align-self-start{-ms-flex-item-align:start;align-self:start}.align-self-center{-ms-flex-item-align:center;align-self:center}.align-self-end{-ms-flex-item-align:end;align-self:end}.align-self-baseline{-ms-flex-item-align:baseline;align-self:baseline}@media (print){.no-print{display:none}*{background:transparent!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important;-webkit-filter:none!important;filter:none!important}a,a:visited{text-decoration:underline}pre,blockquote{border:1px solid #999;page-break-inside:avoid}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}.color-black{color:#000}.color-white{color:#fff}.color-type{color:#000}

package/dist/ulu-frontend.min.js

@@ -1 +1 @@
-var w=Object.defineProperty;var E=(i,e,t)=>e in i?w(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var f=(i,e,t)=>(E(i,typeof e!="symbol"?e+"":e,t),t);function m(i,e){var t=i.indexOf(e);t>-1&&i.splice(t,1)}function x(i,e,t,o){var s;return function(){var h=o||this,a=arguments,d=function(){s=null,t||i.apply(h,a)},l=t&&!s;clearTimeout(s),s=setTimeout(d,e),l&&i.apply(h,a)}}const b={pageModified(i){i.dispatchEvent(new Event(g("pageModified"),{bubbles:!0}))},pageResized(i){i.dispatchEvent(new Event(g("pageResized"),{bubbles:!0}))}};window.addEventListener("resize",x(()=>C("pageResized",document),250));function C(i,e){b[i]?b[i](e):console.warn(`Unable to dispatch site event: ${i} in context:`,e)}function g(i){return"ulu:"+i}const I={debug:!1,warningsAlways:!0,errorsAlways:!0,outputContext:!1},_="console"in window;function D(i){return _&&I.debug&&((i==null?void 0:i.debug)||i==null)}function B(i){var e;return typeof i=="object"&&((e=i==null?void 0:i.constructor)==null?void 0:e.name)}function y(i,e,t){const o=B(e)||"Logger";console[i](o,...t)}function c(i,...e){D(i)&&y("log",i,e)}function k(i,...e){y("error",i,e)}window.addEventListener(g("pageResized"),()=>{v.instances.forEach(i=>i.update())});const r=class r{constructor(e){Object.assign(this,r.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 P(t,this)),c(this,this),this.update(),r.instances.push(this)}onChange(e){this.onChangeCallbacks.push(e)}removeOnChange(e){m(this.onChangeCallbacks,e)}getBreakpointInPsuedo(){return window.getComputedStyle(this.element,this.psuedoSelector).content.replace(/^"|"$/g,"")}getBreakpointInProperty(){return getComputedStyle(this.element).getPropertyValue(this.customProperty)}getBreakpoint(){return this.valueFromPsuedo?this.getBreakpointInPsuedo():this.getBreakpointInProperty()}update(){const e=this.getBreakpoint();if(!e){k(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 o=this.at(this.active),s=n=>this.at(n),u=this.order.slice(t).map(s),h=this.order.slice(0,t).map(s),a=this.order.slice(0,t+1).map(s),d=this.order.slice(t+1).map(s),l=this.order.slice().map(s);l.splice(t,1),c(this,"max:",u.map(n=>n.name).join()),c(this,"min:",a.map(n=>n.name).join()),u.forEach(n=>n._setDirection("max",!0)),a.forEach(n=>n._setDirection("min",!0)),o._setDirection("only",!0),h.forEach(n=>n._setDirection("max",!1)),d.forEach(n=>n._setDirection("min",!1)),l.forEach(n=>n._setDirection("only",!1)),this.previousIndex!==null&&(this.resizeDirection=this.previousIndex<t?"up":"down"),this.onChangeCallbacks.forEach(n=>n(this))}at(e){const t=this.breakpoints[e];return e||k(this,"Unable to find breakpoint for:",t),t}};f(r,"instances",[]),f(r,"defaults",{element:document.documentElement,valueFromPsuedo:!1,customProperty:"--breakpoint",psuedoSelector:":before",order:["none","small","medium","large"],debug:!1});let v=r;class p{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(o=>o()),c(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(),c(this.breakpoint._manager,`Handler called immediately: ${this.direction}`,t.on))}remove(e){const t=this.getHandlers(e);t.on&&m(this.on,t.on),t.off&&m(this.off,t.off)}}class P{constructor(e,t){this.directions={max:new p("max",this),min:new p("min",this),only:new p("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(s=>s.remove(e))}log(...e){e.unshift(`Breakpoint (${this.name}):`),this._manager.log.apply(this._manager,e)}}
+var U=Object.defineProperty;var J=(a,i,n)=>i in a?U(a,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):a[i]=n;var C=(a,i,n)=>(J(a,typeof i!="symbol"?i+"":i,n),n);function A(a,i){var n=a.indexOf(i);n>-1&&a.splice(n,1)}function V(a,i,n,p){var l;return function(){var h=p||this,u=arguments,y=function(){l=null,n||a.apply(h,u)},v=n&&!l;clearTimeout(l),l=setTimeout(y,i),v&&a.apply(h,u)}}const L={pageModified(a){a.dispatchEvent(new Event(_("pageModified"),{bubbles:!0}))},pageResized(a){a.dispatchEvent(new Event(_("pageResized"),{bubbles:!0}))}};window.addEventListener("resize",V(()=>G("pageResized",document),250));function G(a,i){L[a]?L[a](i):console.warn(`Unable to dispatch site event: ${a} in context:`,i)}function _(a){return"ulu:"+a}const Q={debug:!1,warningsAlways:!0,errorsAlways:!0,outputContext:!1},X="console"in window;function Y(a){return X&&Q.debug&&((a==null?void 0:a.debug)||a==null)}function Z(a){var i;return typeof a=="object"&&((i=a==null?void 0:a.constructor)==null?void 0:i.name)}function B(a,i,n){const p=Z(i)||"Logger";console[a](p,...n)}function x(a,...i){Y(a)&&B("log",a,i)}function j(a,...i){B("error",a,i)}window.addEventListener(_("pageResized"),()=>{I.instances.forEach(a=>a.update())});const E=class E{constructor(i){Object.assign(this,E.defaults,i),this.active=null,this.previous=null,this.activeIndex=null,this.resizeDirection=null,this.previousIndex=null,this.breakpoints={},this.onChangeCallbacks=[],this.order.forEach(n=>this.breakpoints[n]=new tt(n,this)),x(this,this),this.update(),E.instances.push(this)}onChange(i){this.onChangeCallbacks.push(i)}removeOnChange(i){A(this.onChangeCallbacks,i)}getBreakpointInPsuedo(){return window.getComputedStyle(this.element,this.psuedoSelector).content.replace(/^"|"$/g,"")}getBreakpointInProperty(){return getComputedStyle(this.element).getPropertyValue(this.customProperty)}getBreakpoint(){return this.valueFromPsuedo?this.getBreakpointInPsuedo():this.getBreakpointInProperty()}update(){const i=this.getBreakpoint();if(!i){j(this,"Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!");return}if(i===this.active)return;this.previous=this.active,this.previousIndex=this.activeIndex;const n=this.order.indexOf(i);this.active=i,this.activeIndex=n;const p=this.at(this.active),l=b=>this.at(b),c=this.order.slice(n).map(l),h=this.order.slice(0,n).map(l),u=this.order.slice(0,n+1).map(l),y=this.order.slice(n+1).map(l),v=this.order.slice().map(l);v.splice(n,1),x(this,"max:",c.map(b=>b.name).join()),x(this,"min:",u.map(b=>b.name).join()),c.forEach(b=>b._setDirection("max",!0)),u.forEach(b=>b._setDirection("min",!0)),p._setDirection("only",!0),h.forEach(b=>b._setDirection("max",!1)),y.forEach(b=>b._setDirection("min",!1)),v.forEach(b=>b._setDirection("only",!1)),this.previousIndex!==null&&(this.resizeDirection=this.previousIndex<n?"up":"down"),this.onChangeCallbacks.forEach(b=>b(this))}at(i){const n=this.breakpoints[i];return i||j(this,"Unable to find breakpoint for:",n),n}};C(E,"instances",[]),C(E,"defaults",{element:document.documentElement,valueFromPsuedo:!1,customProperty:"--breakpoint",psuedoSelector:":before",order:["none","small","medium","large"],debug:!1});let I=E;class O{constructor(i,n){this.direction=i,this.active=!1,this.on=[],this.off=[],this.breakpoint=n}change(i){this.active!==i&&(i?this._call(!0):this.active&&this._call(!1),this.active=i)}_call(i){(i?this.on:this.off).forEach(p=>p()),x(this.breakpoint._manager,`Handlers called (${i?"on":"off"}): ${this.direction}`)}getHandlers(i){return typeof i!="object"?{on:i}:i}add(i){const n=this.getHandlers(i);n.on&&this.on.push(n.on),n.off&&this.off.push(n.off),this.active&&n.on&&(n.on(),x(this.breakpoint._manager,`Handler called immediately: ${this.direction}`,n.on))}remove(i){const n=this.getHandlers(i);n.on&&A(this.on,n.on),n.off&&A(this.off,n.off)}}class tt{constructor(i,n){this.directions={max:new O("max",this),min:new O("min",this),only:new O("only",this)},this._manager=n,this.name=i}_setDirection(i,n){this.directions[i].change(n)}max(i){this.directions.max.add(i)}min(i){this.directions.min.add(i)}only(i){this.directions.only.add(i)}remove(i,n){(n?[n]:["max","min","only"]).forEach(l=>l.remove(i))}log(...i){i.unshift(`Breakpoint (${this.name}):`),this._manager.log.apply(this._manager,i)}}function et(a){return a&&a.__esModule&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a}var F={exports:{}};(function(a,i){(function(n,p){a.exports=p()})(window,function(){return function(n){var p={};function l(c){if(p[c])return p[c].exports;var h=p[c]={i:c,l:!1,exports:{}};return n[c].call(h.exports,h,h.exports,l),h.l=!0,h.exports}return l.m=n,l.c=p,l.d=function(c,h,u){l.o(c,h)||Object.defineProperty(c,h,{enumerable:!0,get:u})},l.r=function(c){typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(c,"__esModule",{value:!0})},l.t=function(c,h){if(1&h&&(c=l(c)),8&h||4&h&&typeof c=="object"&&c&&c.__esModule)return c;var u=Object.create(null);if(l.r(u),Object.defineProperty(u,"default",{enumerable:!0,value:c}),2&h&&typeof c!="string")for(var y in c)l.d(u,y,(function(v){return c[v]}).bind(null,y));return u},l.n=function(c){var h=c&&c.__esModule?function(){return c.default}:function(){return c};return l.d(h,"a",h),h},l.o=function(c,h){return Object.prototype.hasOwnProperty.call(c,h)},l.p="",l(l.s=0)}([function(n,p,l){l.r(p),l.d(p,"AriaTablist",function(){return D});var c=35,h=36,u=37,y=38,v=39,b=40,$=46,S=13,M=32,q={37:-1,38:-1,39:1,40:1},z=function(){function s(t){this.tabs=t.tabs,this.panels=t.panels,this.options=t.options,this.open=this.open.bind(t),this.close=this.close.bind(t),this.delete=this.delete.bind(t),this.destroy=this.destroy.bind(t),t.tablist.ariaTablist=this}return s.prototype.open=function(t,e){this.checkMultiple(),this.activateTabWithTimer.apply(this,[t,e,!0])},s.prototype.close=function(t,e){this.checkMultiple(),this.deactivateTab.apply(this,[t,e,!0]),this.makeFocusable()},s.prototype.delete=function(t){this.determineDeletable.call(this,t)},s.prototype.destroy=function(){this.destroy.call(this)},s}(),N=function(s){for(var t in s===void 0&&(s={}),this.delay=0,this.deletable=!1,this.focusableTabs=!1,this.focusablePanels=!0,this.arrowActivation=!1,this.allArrows=!1,this.tabSelector='[role="tab"]',this.tabindex=0,s)s.hasOwnProperty(t)&&s[t]!==void 0&&(this[t]=s[t])};function k(s){s&&typeof s.preventDefault=="function"&&s.preventDefault()}function m(s,t){return s.getAttribute&&s.getAttribute(t)||""}function f(s,t,e){s&&m(s,t)!==e&&s.setAttribute&&s.setAttribute(t,e)}function T(s,t){s&&t&&s.removeAttribute&&t.split(" ").forEach(function(e){return e&&s.removeAttribute(e)})}var P=0,W=function(){function s(t,e){if(this.tabs=[],this.panels=[],t&&t.nodeType===1){var o=t.ariaTablist;o&&typeof o.destroy=="function"&&o.destroy(),P+=1,this.tablist=t,this.options=new N(e),this.api=new z(this),this.init()}}return s.prototype.checkMultiple=function(){this.multiple=m(this.tablist,"aria-multiselectable")==="true"},s.prototype.triggerOptionCallback=function(t,e){if(e===void 0&&(e=[]),this.options&&typeof this.options[t]=="function")return this.options[t].apply(this.api,e)},s.prototype.makeFocusable=function(){for(var t=""+(this.options.tabindex||0),e=0,o=this.tabs.length;e<o;e+=1)if(m(this.tabs[e],"tabindex")===t)return;f(this.tabs[0],"tabindex",t)},s.prototype.setCoreAttributes=function(t,e,o){var r=this.options.tabindex||"0";this.options.focusableTabs&&f(t,"tabindex",r),this.options.focusablePanels&&f(e,"tabindex",r),t.id||f(t,"id","aria-tablist-"+P+"-tab-"+o),e.id||f(e,"id","aria-tablist-"+P+"-panel-"+o),f(t,"role","tab"),f(e,"role","tabpanel"),f(t,"aria-controls",e.id),f(e,"aria-labelledby",t.id)},s.prototype.getTabPanel=function(t){var e=typeof t=="number"?this.tabs[t]:t;if(!e||e.nodeType!==1)return null;var o=typeof t=="number"?this.panels[t]:null;if(o)return o;var r=m(e,"aria-controls");return r||(r=m(e,"data-controls")),r&&(o=document.getElementById(r)),o||(r&&T(e,"aria-controls"),e.id&&(o=document.querySelector('[aria-labelledby="'+e.id+'"]')),o||(o=document.querySelector('[data-labelledby="'+e.id+'"]'))),o},s.prototype.generateArrays=function(t){this.tabs.splice(0),this.panels.splice(0);var e=this.tablist.querySelectorAll(this.options.tabSelector);t&&!e.length&&(e=this.tablist.childNodes);for(var o=0,r=e.length;o<r;o+=1){var d=e[o];if(d&&d.nodeType===1&&!(this.panels.indexOf(d)>-1)){var g=this.getTabPanel(d);g?(this.tabs.push(d),this.panels.push(g),this.setCoreAttributes(d,g,o),d._ariaTablistTabIndex=this.tabs.length-1):m(d,"role")==="tab"&&T(d,"role")}}},s.prototype.elementIsTab=function(t){return!!(t&&this.tabs.indexOf(t)>-1)},s.prototype.addListenersToTab=function(t){var e=this.tabs[t];e.addEventListener("keydown",this.tabKeydownEvent),e.addEventListener("keyup",this.tabKeyupEvent),e.addEventListener("click",this.tabClickEvent)},s.prototype.tabClickEvent=function(t){var e=t.target;do{if(this.elementIsTab(e))return this.checkMultiple(),k(t),this.activateTabWithTimer(e,!1);e=e.parentElement||e.parentNode}while(e!==null&&e.nodeType===1)},s.prototype.tabKeydownEvent=function(t){if(this.elementIsTab(t.target))switch(t.keyCode){case c:k(t),this.focusLastTab();break;case h:k(t),this.focusFirstTab();break;case y:case b:case u:case v:this.processArrowPress(t);break;case M:case S:k(t)}},s.prototype.tabKeyupEvent=function(t){var e=t.target;if(this.elementIsTab(e))switch(t.keyCode){case $:this.determineDeletable(e);break;case S:case M:this.checkMultiple(),k(t),this.activateTabWithTimer(e)}},s.prototype.processArrowPress=function(t){var e=t.keyCode;(this.options.allArrows||(m(this.tablist,"aria-orientation")==="vertical"?e===y||e===b:e===u||e===v))&&this.switchTabOnArrowPress(t)},s.prototype.switchTabOnArrowPress=function(t){var e=t.keyCode,o=q[e],r=t.target._ariaTablistTabIndex;if(o&&typeof r=="number"){k(t);var d=(e===u||e===v)&&(document.dir==="rtl"||this.tablist.dir==="rtl");d&&this.tablist.dir!=="ltr"&&(o*=-1);var g=r+o;this.tabs[g]?this.focusTab(g):e===u||e===y?d?this.focusFirstTab():this.focusLastTab():e!==v&&e!=b||(d?this.focusLastTab():this.focusFirstTab())}},s.prototype.getTab=function(t){return typeof t=="number"&&this.elementIsTab(this.tabs[t])?this.tabs[t]:this.elementIsTab(t)?t:null},s.prototype.activateTabWithTimer=function(t,e,o){var r=this;this.tabTimer&&clearTimeout(this.tabTimer);var d=typeof this.options.delay=="number"?this.options.delay:0;this.tabTimer=setTimeout(function(){r.activateTab(t,e,o)},d)},s.prototype.activateTab=function(t,e,o){e===void 0&&(e=!0),o===void 0&&(o=!1);var r=this.getTab(t);if(r&&e&&r.focus(),r&&(o||m(r,"aria-disabled")!=="true")){var d=m(r,"aria-selected")==="true";if(this.multiple&&d&&!o)return this.deactivateTab(r),void this.makeFocusable();this.multiple||this.deactivateTabs([r]);var g=this.options.tabindex||"0";f(r,"tabindex",g),f(r,"aria-selected","true");var w=this.getTabPanel(t);if(w){var R=m(w,"hidden")==="hidden";T(w,"hidden aria-hidden"),this.multiple&&(f(w,"aria-expanded","true"),f(r,"aria-expanded","true")),this.options.focusablePanels&&f(w,"tabindex",g),R&&this.triggerOptionCallback("onOpen",[w,r])}}},s.prototype.deactivateTab=function(t,e,o){e===void 0&&(e=!1),o===void 0&&(o=!1);var r=this.getTab(t);if(r&&(e&&r.focus(),f(r,"tabindex",this.options.focusableTabs?this.options.tabindex||"0":"-1"),o||m(r,"aria-disabled")!=="true")){f(r,"aria-selected","false");var d=this.getTabPanel(t);if(d){var g=m(d,"hidden")==="hidden";T(d,"tabindex"),f(d,"hidden","hidden"),f(d,"aria-hidden","true"),this.multiple?(f(r,"aria-expanded","false"),f(d,"aria-expanded","false")):(T(d,"aria-expanded"),T(r,"aria-expanded")),g||this.triggerOptionCallback("onClose",[d,r])}}},s.prototype.deactivateTabs=function(t){var e=this;t===void 0&&(t=[]);var o=Array.isArray(t);this.tabs.forEach(function(r){o&&t.indexOf(r)!==-1||e.deactivateTab(r,!1,!0)})},s.prototype.focusTab=function(t){var e=this.getTab(t),o=this.options.arrowActivation;if(e){if(o&&m(e,"aria-selected")!=="true")return void this.activateTabWithTimer(e);e.focus()}},s.prototype.focusFirstTab=function(){this.focusTab(0)},s.prototype.focusLastTab=function(){this.focusTab(this.tabs.length-1)},s.prototype.determineDeletable=function(t){if(this.options.deletable){var e=this.getTab(t);if(e&&m(e,"data-deletable")!=="false"){this.checkMultiple(),this.deleteTab(e),this.generateArrays();var o=e._ariaTablistTabIndex,r=o-1>-1?o-1:0;this.multiple||m(e,"aria-selected")!=="true"?this.tabs[r]&&this.tabs[r].focus():this.activateTab(r),this.makeFocusable(),this.triggerOptionCallback("onDelete",[e])}}},s.prototype.deleteTab=function(t){var e=this.getTabPanel(t);t.parentElement.removeChild(t),e&&e.parentElement.removeChild(e)},s.prototype.destroy=function(){var t=this,e="aria-expanded aria-hidden hidden role tabindex";this.tabs.forEach(function(o,r){o.removeEventListener("keydown",t.tabKeydownEvent),o.removeEventListener("keyup",t.tabKeyupEvent),o.removeEventListener("click",t.tabClickEvent),T(t.panels[r],e),T(o,e),delete o._ariaTablistTabIndex}),this.tablist&&(delete this.tablist.ariaTablist,T(this.tablist,"role")),this.panels.splice(0),this.tabs.splice(0),this.tablist=null},s.prototype.init=function(){var t=this;this.checkMultiple(),this.generateArrays(!0),this.tabKeydownEvent=this.tabKeydownEvent.bind(this),this.tabClickEvent=this.tabClickEvent.bind(this),this.tabKeyupEvent=this.tabKeyupEvent.bind(this);var e=[];this.tabs.forEach(function(o,r){t.addListenersToTab(r),!(m(o,"aria-selected")==="true"||m(o,"data-selected")==="true")||!t.multiple&&e.length||e.push(o)}),f(this.tablist,"role","tablist"),this.tabs.length&&(this.multiple||e.length||e.push(this.tabs[0]),this.deactivateTabs(e),e.forEach(function(o){return t.activateTab(o,!1,!0)}),this.makeFocusable()),this.triggerOptionCallback("onReady",[this.tablist])},s}();function D(s,t){return new W(s,t).api}p.default=D}])})})(F);var it=F.exports;const at=et(it),nt="Site Tablist [data-site-tablist] error:",H=[];window.addEventListener("load",()=>{K(document),H.forEach(st)});document.addEventListener("pageModified",a=>K(a.target));function K(a){if(!a)return;a.querySelectorAll("[data-site-tablist]").forEach(ot)}function st({options:a,ariaTablist:i}){if(a.openByUrlHash){const{hash:n}=window.location;if(n&&n.length>1){const p=n.substring(1);i.tabs.forEach(l=>{p===l.id&&i.open(l)})}}}function ot(a){let i={};const n={};if(a.dataset.siteTablist)try{i=JSON.parse(a.dataset.siteTablist)}catch{console.error(nt,"(JSON Parse for options)",a)}i.vertical&&(n.allArrows=!0),p(),i.equalHeights&&lt(a);function p(){const l={element:a,options:i};l.ariaTablist=at(a,{onOpen(...c){c.unshift(l),rt.apply(null,c)},...n}),H.push(l)}}function rt({options:a},i,n){a.openByUrlHash&&window.history&&window.history.replaceState(null,"",`#${n.id}`)}function lt(a){const n=[...a.children].map(u=>document.querySelector(`[aria-labelledby="${u.id}"]`)),c=[...n[0].parentElement.querySelectorAll("img")].map(u=>h(u));function h(u){return new Promise((y,v)=>{u.onload=()=>y(u),u.onerror=v})}Promise.all(c).then(()=>{const u=n.map(v=>v.offsetHeight),y=Math.max(...u);n.forEach(v=>v.style.minHeight=`${y}px`)})}

package/js/index.js

@@ -10,4 +10,5 @@
 
 export { CssBreakpoints } from "./helpers/css-breakpoint.js";
 export * as events from "./events/index.js";
-export * as grid from "./ui/grid.js";
+export * as grid from "./ui/grid.js";
+export * as tabs from "./ui/tabs.js";

package/js/ui/tabs.js

@@ -1,23 +1,24 @@
 /**
  * @module ui/tabs
  */
-// =============================================================================
-// Tabs
-// =============================================================================
-// 
-// Version:         1.0.1
-// 
-// Selected by: [data-site-tablist]
-// 
-// Possible options (passed in attribute JSON)
-// - openByUrlHash | Optionally add "openByUrlHash" to   
-//   have the scriptopen a tab and focus it on page load 
-//   (and set it in history as they navigate)
 
-import AriaTablist from 'aria-tablist';
+// * - Attribute to enable behavior 'data-site-tablist'
+// * - Options can be passed via JSON in data attribute
+// *   - openByUrlHash | Optionally add "openByUrlHash" to have the 
+// *     script open a tab and focus it on page load (and set it in history 
+// *     as they navigate)
+
+
+import AriaTablist from "aria-tablist";
 
 const errorHeader = "Site Tablist [data-site-tablist] error:";
+
+/**
+ * Array of current tab instances (exported if you need to interact with them)
+ * @type {Array} 
+ */
 const instances = [];
+
 // Init all instances currently in page
 window.addEventListener("load", () => {
   initWithin(document);
@@ -26,11 +27,11 @@ window.addEventListener("load", () => {
 });
 
 // Initialize when page updates/changes
-document.addEventListener('pageModified', e => initWithin(e.target));
+document.addEventListener("pageModified", e => initWithin(e.target));
 
 function initWithin(context) {
   if (!context) return;
-  const tablists = context.querySelectorAll('[data-site-tablist]');
+  const tablists = context.querySelectorAll("[data-site-tablist]");
   tablists.forEach(init);
 }
 function openByCurrentHash({ options, ariaTablist }) {
@@ -42,7 +43,7 @@ function openByCurrentHash({ options, ariaTablist }) {
         if (possibleId === tab.id) {
           ariaTablist.open(tab);
         }
-      })
+      });
     }
   }
 }
@@ -90,7 +91,7 @@ function setHeights(element) {
   const tabs = [ ...element.children];
   const panels = tabs.map(n => document.querySelector(`[aria-labelledby="${ n.id }"]`)); 
   const parent = panels[0].parentElement;
-  const images = [ ...parent.querySelectorAll('img') ];
+  const images = [ ...parent.querySelectorAll("img") ];
   const imagePromises = images.map(image => imagePromise(image));
   function imagePromise(image) {
     return new Promise((resolve, reject) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -21,13 +21,13 @@
   },
   "type": "module",
   "scripts": {
-    "build" : "vite build",
+    "build": "vite build",
     "docs:dev": "vitepress dev docs-src",
     "docs:build": "vitepress build docs-src",
     "docs:preview": "vitepress preview docs-src",
     "docs:update:scss": "node ./docs-src/.vitepress/sassdoc.js",
     "docs:update:scss:debug": "node --inspect-brk ./docs-src/.vitepress/sassdoc.js",
-    "docs:build:js": "node ./docs-src/.vitepress/jsdoc.js",
+    "docs:update:js": "node ./docs-src/.vitepress/jsdoc.js",
     "types": "npx tsc"
   },
   "repository": {
@@ -55,8 +55,7 @@
   "homepage": "https://github.com/Jscherbe/frontend#readme",
   "devDependencies": {
     "@ulu/vitepress-auto-menus": "^0.0.3",
-    "@ulu/vitepress-sassdoc": "^0.0.8",
-    "clean-jsdoc-theme": "^4.2.17",
+    "@ulu/vitepress-sassdoc": "^0.0.9",
     "fs-extra": "^11.2.0",
     "jsdoc": "^4.0.2",
     "jsdoc-to-markdown": "^8.0.0",
@@ -66,6 +65,7 @@
   },
   "dependencies": {
     "@ulu/utils": "^0.0.6",
+    "aria-tablist": "^1.2.2",
     "autoprefixer": "^10.4.16",
     "vite": "^5.0.10"
   }

package/project.todo

@@ -2,6 +2,11 @@ Bring in Vue components as a separate package:
   ☐ Decided that vue stuff should stay seperate as we wouldn't want to udpate this library to make changes to vue components (as vue changes over time)
     ☐ This other module may use peer deps or something to limit which version of ulu it works with
 Todos:
+  ☐ Do we need some way to go back to older docs?
+    - Think this is overkill until there is a major revision
+  ☐ SCSS
+    ☐ Add line-height-densest typography utility class
+    ☐ Remove clearfix, or at least in any outputted styles
   ☐ Need to add guide about how you can use the modules (ie by chaining or individually)
   ☐ Need to add guide about configuration
   ☐ Bring in common components

package/scss/_layout.scss

@@ -25,9 +25,24 @@ $config: (
   "z-index-fixed":     1000
 ) !default;
 
+/// Containers Lookup (use set-containers)
+/// @type Map
+
+$containers: (
+  "container" : (
+    "width" : 100%,
+    "max-width" : get("max-width"),
+    "padding" : (get("margin") get("margin")),
+    "breakpoints" : null,
+    "responsive" : false,
+    "responsive-amount" : 3vw
+  )
+) !default;
+
 /// Change modules $config
 /// @param {Map} $changes Map of changes
 ///   @include module-name.set(( "property" : value ));
+
 @mixin set($changes) {
   $config: map.merge($config, $changes) !global;
 }
@@ -35,26 +50,23 @@ $config: (
 /// Get a config option
 /// @param {Map} $name Name of property
 ///   @include module-name.get("property");
-
 @function get($name) {
   @return utils.require-map-get($config, $name, "layout [config]");
 }
 
-$containers: (
-  "container" : (
-    "width" : 100%,
-    "max-width" : get("max-width"),
-    "padding" : (get("margin") get("margin")),
-    "breakpoints" : null,
-    "responsive" : false,
-    "responsive-amount" : 3vw
-  )
-) !default;
+/// Set layout containers
+/// - See the $containers variable for example of container properties
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 
 @mixin set-containers($changes, $merge-mode: null) {
   $containers: utils.map-merge($containers, $changes, $merge-mode) !global;
 }
 
+/// Get a container map
+/// @param {Map} $name Container name
+/// @param {String} $breakpoint Return only the properties for a specific breakpoint for the container
+
 @function get-container($name, $breakpoint: false) {
   $container: utils.require-map-get($containers, $name, "Layout [get-container]");
   $breakpoints: map.get($container, "breakpoints");
@@ -64,8 +76,13 @@ $containers: (
     @return $container;
   }
 }
+
 /// Returns padding to another property including breakpoints
 /// ie. { top: $containers-padding; }
+/// @param {String} $property Property name to apply the padding value to
+/// @param {String} $name The container name
+/// @param {Boolean} $sides [true] Match the container padding for the sides (left/right), false will match the containers end padding (top/bottom) 
+
 @mixin match-container-padding($property, $name: "container", $sides: true) {
   $container: get-container($name);
   $breakpoints: map.get($container, "breakpoints");
@@ -85,6 +102,10 @@ $containers: (
 /// The margin is created via empty space when the container hits the max-width
 /// If passing inlude padding it would be the containers
 /// side (x) + the padding. This accounts for the containers max-width to give an absoute value
+/// @param {String} $property Property name to apply the margin value to
+/// @param {String} $name The container name
+/// @param {Boolean} $include-padding [true] Include the containers padding in the margin calculation
+
 @mixin match-container-margin($property, $name: "container", $include-padding: true) {
   $container: get-container($name);
   $breakpoints: map.get($container, "breakpoints");
@@ -102,6 +123,11 @@ $containers: (
   }
 }
 
+/// Get a containers padding value
+/// @param {String} $name Container name
+/// @param {Boolean} $sides [true] Get the left/right value, false return top/bottom
+/// @param {String} $specific-breakpoint [false] Get the value for a specific breakpoint
+
 @function get-container-padding($name, $sides: true, $specific-breakpoint: false) {
   $container: get-container($name, $specific-breakpoint);
   $padding: map.get($container, "padding");
@@ -113,6 +139,11 @@ $containers: (
   }
 }
 
+/// Print the containers padding properties
+/// @param {String} $name The container name
+/// @param {Boolean} $sides [true] Sides by default, false is ends
+/// @param {Boolean} $specific-breakpoint [false] Only for a specific breakpoint
+
 @mixin container-padding($name, $sides: true, $ends: true, $specific-breakpoint: false) {
   $container: get-container($name, $specific-breakpoint);
   $responsive: map.get($container, "responsive");
@@ -140,12 +171,27 @@ $containers: (
     }
   }
 }
+
+/// Get containers padding X value (side)
+/// @param {String} $name Container name
+/// @param {Boolean} $specific-breakpoint For a specific breakpoint
+
 @function get-container-padding-x($name, $specific-breakpoint: false) {
   @return get-container-padding($name, true, $specific-breakpoint);
 }
+
+/// Get containers padding Y value (ends)
+/// @param {String} $name Container name
+/// @param {Boolean} $specific-breakpoint For a specific breakpoint
+
 @function get-container-padding-y($name, $specific-breakpoint: false) {
   @return get-container-padding($name, false, $specific-breakpoint);
 }
+
+/// Print all container styles for a given container
+/// @param {String} $name Container name
+/// @param {Boolean} $specific-breakpoint Only for a specific breakpoint (else includes both the base styles and breakpoint styles)
+
 @mixin container-styles($name: "container", $specific-breakpoint: false) {
   $container: get-container($name,  $specific-breakpoint);
   $breakpoints: map.get($container, "breakpoints");

package/scss/components/_fill-context.scss

@@ -0,0 +1,64 @@
+////
+/// @group fill-context
+////
+/// Setup images or videos to behave like background images (object-fit).
+
+
+@use "../grid";
+@use "../breakpoint";
+
+
+/// Use the parent selector '.fill-context' on the element that should be the 
+/// frame for the child object (img,video).  Can be used within the grid with 
+/// modifier (see in example below).
+/// @example html {preview}
+///   <div class="fill-context">
+///     <img class="fill-context__object" src="background.jpg">
+///   </div>
+///  
+///  
+///   <div class="fill-context fill-context--auto">
+///     <img src="background.jpg">
+///   </div>
+///  
+///   <div data-grid-item="width: 6" class="fill-context fill-context--in-grid fill-context--contain">
+///     <img src="background.jpg">
+///   </div>
+/// 
+
+
+/// Prints fill context styles
+/// @example scss
+///   @include ulu.component-fill-context-styles();
+
+@mixin styles {
+  .fill-context {
+    position: relative;
+  }
+  .fill-context__object,
+  .fill-context--auto img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .fill-context--contain {
+    &.fill-context--auto img,
+    .fill-context__object {
+      object-fit: contain;
+    }
+  }
+
+  .fill-context--in-grid {
+    $breakpoint: grid.get-default-breakpoint();
+    @include breakpoint.max($breakpoint) {
+      .fill-context__object,
+      &.fill-context--auto img {
+        position: static;
+        height: auto;
+        object-fit: fill;
+      }
+    }
+  }
+}

package/scss/components/_index.scss

@@ -9,6 +9,7 @@
 @forward "list-lines" as list-lines-*;
 @forward "list-unordered" as list-unordered-*;
 @forward "list-ordered" as list-ordered-*;
+@forward "fill-context" as fill-context-*;
 
 @use "sass:map";
 
@@ -20,6 +21,7 @@
 @use "list-lines";
 @use "list-unordered";
 @use "list-ordered";
+@use "fill-context";
 
 // Used to check against user's includes
 
@@ -30,7 +32,8 @@ $-all-includes: (
   "rule" : true,
   "list-lines" : true,
   "list-unordered" : true,
-  "list-ordered" : true
+  "list-ordered" : true,
+  "fill-context" : true,
 );
 
 /// Prints all Components styles
@@ -66,4 +69,7 @@ $-all-includes: (
   @if (map.get($-all-includes, "list-ordered")) {
     @include list-ordered.styles;
   }
+  @if (map.get($-all-includes, "fill-context")) {
+    @include fill-context.styles;
+  }
 }

package/scss/helpers/_utilities.scss

@@ -69,6 +69,14 @@
   .no-margin-right {
     margin-right: 0;
   }
+  .crop-margins {
+    &:not(.crop-margins--last) >:first-child {
+      margin-top: 0;
+    }
+    &:not(.crop-margins--first) >:last-child {
+      margin-bottom: 0;
+    }
+  }
   .no-padding {
     padding: 0;
   }