@ulu/frontend 0.0.19 → 0.0.22

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 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
+
+- Core/button Remove 'background-clip: padding-box' on buttons, affects buttons with borders (rendering between bg and border)
+
 ## Version 0.0.18
 
 - Fix docs issue with JS broken from Markdown Attrs

package/README.dev.md

@@ -0,0 +1,22 @@
+# Development
+
+## Dist
+
+- Dist can be used standalone (browser, etc) (stylesheet with everything currently)
+- Used for examples in docs
+- Rebuild by running `npm run build`
+
+## Docs
+
+## Updatiing SCSS
+
+- Udpate sassdocs markdown by `npm run docs:update:scss`
+
+## Updating JS Docs
+
+- Run `npm run docs:build:js` to update jsdoc markdown
+- Run `npm run types` to update Typescript declarations (extracted from JS docs)
+
+## Building/Deploying
+
+- Use `npm run docs:build`

package/README.md

@@ -1,11 +1,10 @@
 # Frontend Library
 
-Front end development library (SCSS, JS, Vue)
+Front end development library (SCSS, JS)
 
-[Documentation](https://jscherbe.github.io/frontend/)
+- [Documentation](https://jscherbe.github.io/frontend/)
+- [Change Log](CHANGELOG.md)
+- [Development Notes](README.dev.md)
 
-[Change Log](CHANGELOG.md)
 
-## SCSS Library
 
-This is the sass library. Set up for packaged use (under on namespace) and individual module use (importing modules directly

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;background-clip:padding-box;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}.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.19",
+  "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

@@ -0,0 +1,22 @@
+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
+    * Only what we would want to support in the core library!
+      * More specific modules should probably be handled like the vue components 
+      * Any module added should likely stay in the library indefinetly, so modules that are more opionated or used as infrequently should probably be made into their own package. Or if they don't seem like they have a future omitted
+    ☐ badge
+    ☐ tag
+    ☐ card
+    ☐ card grid
+    ☐ spinner
+Ideas:
+  ☐ Add scaffolding @idea

package/scss/_button.scss

@@ -163,7 +163,9 @@ $styles: (
     @include typography.size($font-size, null, true);
   }
   border-radius: get("border-radius");
-  background-clip: padding-box;
+  // Removed not sure why it was needed, effects buttons with 
+  // borders (rendering between bg and border)
+  // background-clip: padding-box; 
   padding: get("padding");
   line-height: get("line-height");
   letter-spacing: get("letter-spacing");

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/_badge.scss

@@ -0,0 +1,127 @@
+////
+/// @group badge
+////
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.font-size Font size (basic ie. 1.3rem) for badge
+/// @prop {Number} $config.border-radius Border radius of badge
+/// @prop {Number} $config.width Width of badge (default size)
+/// @prop {Number} $config.font-weight Font weight
+/// @prop {Number} $config.background-color Background color (if no image)
+/// @prop {Number} $config.color Type color
+/// @prop {List} $config.sizes List of other sizes (large by defualt), each size is a map of (width, font-size) 
+
+$config: (
+  "font-size":           1.3rem,
+  "border-radius":       50%,
+  "width":               10rem,
+  "font-weight":         bold,
+  "background-color":    gray,
+  "color":               black,
+  "sizes" : (
+    "large" : (
+      "font-size" : 2.75rem,
+      "width" :  6rem
+    )
+  )
+) !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;
+}
+
+/// 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, "badge [config]");
+}
+
+/// Prints badge component styles
+/// @example scss
+///  @include ulu.component-badge-styles();
+/// @example html {preview}
+///  <div class="badge">
+///    <div class="badge__inner">
+///      <img src="..." alt="...">
+///    </div>
+///  </div>
+/// 
+///  <div class="badge">
+///    <div class="badge__inner">
+///      <span>JS</span>
+///    </div>
+///  </div>
+
+@mixin styles {
+  $prefix: selector.class("badge");
+  // Badge content can be text, image, icon, or background-image
+  #{ $prefix } {
+    display: block;
+    width: get("width");
+    max-width: 100%;
+    flex: 0 0 get("width");
+    font-size: get("font-size");
+    font-weight: get("font-weight");
+  }
+  #{ $prefix }__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: get("border-radius");
+    transition: transform 100ms ease-in-out;
+    // Incase this is used as a link or router-link
+    &,
+    &:hover,
+    &:focus,
+    &:visited {
+      background-color: get("background-color");
+      color: get("color");
+    }
+  }
+  #{ $prefix }--clickable {
+    &:hover,
+    &:focus {
+      #{ $prefix }__inner {
+        transform: scale(1.2);
+      }
+    }
+  }
+  #{ $prefix }__inner > * {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  #{ $prefix }__inner > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @each $name, $props in get("sizes") {
+    #{ $prefix }--#{ $name } {
+      width: map.get($props, "width");
+      font-size: map.get($props, "font-size");
+      flex-basis: map.get($props, "width");
+    }
+  }
+}
+

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

@@ -4,30 +4,36 @@
 
 @forward "links" as links-*;
 @forward "button" as button-*;
+@forward "badge" as badge-*;
 @forward "rule" as rule-*;
 @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";
 
 @use "../utils";
 @use "links";
 @use "button";
+@use "badge";
 @use "rule";
 @use "list-lines";
 @use "list-unordered";
 @use "list-ordered";
+@use "fill-context";
 
 // Used to check against user's includes
 
 $-all-includes: (
   "links" : true,
   "button" : true,
+  "badge" : true,
   "rule" : true,
   "list-lines" : true,
   "list-unordered" : true,
-  "list-ordered" : true
+  "list-ordered" : true,
+  "fill-context" : true,
 );
 
 /// Prints all Components styles
@@ -48,6 +54,9 @@ $-all-includes: (
   @if (map.get($-all-includes, "button")) {
     @include button.styles;
   }
+  @if (map.get($-all-includes, "badge")) {
+    @include badge.styles;
+  }
   @if (map.get($-all-includes, "rule")) {
     @include rule.styles;
   }
@@ -60,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;
   }